input holder moved styles to styles.scss as it can be a common input holder + enhancements

src/app/register-business/register-business.component.html

@@ -40,8 +40,6 @@
 <ng-container *ngIf="formState === 'REGISTER_FORM'">
     <section class="form">
         <div class="input-holder" *ngFor="let registerInput of registerForm">
-            <label> {{ registerInput.name }}: </label>
-    
             <ng-container *ngIf="registerInput.type === 'date'">
                 <input type="date">
                 <img src="assets/icons/calendar-fill.svg" alt="calendar icon">
@@ -58,6 +56,8 @@
             <ng-container *ngIf="registerInput.type === 'text' || registerInput.type === 'email' || registerInput.type === 'number'">
                 <input [type]="registerInput.type" [placeholder]="registerInput.placeholder">
             </ng-container>
+
+            <label> {{ registerInput.name }}: </label>
         </div>
     </section>
     
@@ -93,12 +93,12 @@
             </div>
         </div>
 
-        <div class="no-of-years-label">No. of years</div>
-        <div class="select-holder">
+        <div class="input-holder">            
             <select [(ngModel)]="noOfYears">
                 <option *ngFor="let year of years" [value]="year"> {{ year }} </option>
-            </select>  
+            </select>            
             <img src="assets/icons/chevron-down.svg" alt="calendar icon">
+            <label> No of years </label>
         </div>
         <section class="total-price-container">
             S$ {{ (noOfYears * perYearPrice).toFixed(2) }}

src/app/register-business/register-business.component.scss

@@ -115,50 +115,6 @@
 
     .input-holder {
         width: calc(100% - 2rem);
-        margin: 3.5rem 0;
-        position: relative;    
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;    
-
-        label {
-            font-size: 1.6rem;
-            color: var(--primary);
-            font-weight: 500;
-            position: absolute;
-            top: 0;
-            left: 0;
-            font-weight: 400;
-            letter-spacing: 0.5px;
-            transform: translate(2.5rem, -3rem);
-        }
-
-        input, select {
-            display: block;
-            width: 100%;
-            border-radius: 4rem;
-            height: 5.5rem;
-            border: 1px solid var(--border-grey);
-            padding: 0 2rem;
-            font-size: 1.5rem;
-            letter-spacing: 0.5px;
-            color: var(--dark-grey);
-            background-color: white;
-        }
-
-        select {
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            text-indent: 1px;
-            text-overflow: '';
-        }
-
-        img {
-            position: relative;
-            transform: translateX(-4rem);
-            pointer-events: none;
-            background-color: white;
-        }
     }
 }
 
@@ -208,50 +164,28 @@
 
         .tab-content {
             color: var(--dark-grey);
-            font-size: 1.2rem;
+            font-size: 1.4rem;
             line-height: 1.5;
-            padding: 0.8rem 0 0;
-            height: 7rem;
+            padding: 1rem;
+            height: auto;
             border-top: none;
-            margin-bottom: 2rem;
 
             p {
                 margin-bottom: 1.5rem;
             }
         }
 
-        .no-of-years-label {
-            font-size: 1.7rem;
-            color: var(--dark-grey);
-            filter: brightness(70%);
-            margin-bottom: 1rem;
-        }
-
-        .select-holder {
-            margin-bottom: 3rem;
-
-            select {
-                -webkit-appearance: none;
-                -moz-appearance: none;
-                text-indent: 1px;
-                text-overflow: "";
-                padding: 0.7rem 1rem;
-                width: 5rem;
-                border: 1px solid var(--border-grey);
-            }
-
-            img {
-                position: relative;
-                transform: translateX(-2rem);
-                pointer-events: none;
-            }
+        .input-holder {
+            width: 20rem;
         }
 
         .total-price-container {
+            margin-top: 2.5rem;
             padding: 0.5rem;
             font-weight: bold;
             font-size: 3.5rem;
             border-top: 1px solid var(--border-grey);
+            color: var(--dark-grey);
         }
 
         .form-action-buttons {

src/app/register-business/register-business.component.ts

@@ -14,7 +14,7 @@ interface Plan {
 export class RegisterBusinessComponent implements OnInit {
     formState: 'CHECK_NAME' | 'INIT_REGISTER' | 
     'REGISTER_FORM' | 'SELECT_PLAN' | 
-    'ACKNOWLEDGEMENT' | 'RECEIPT' | undefined = 'CHECK_NAME';
+    'ACKNOWLEDGEMENT' | 'RECEIPT' | undefined = 'SELECT_PLAN';
     nameToCheck: string = 'JK Enterprises ACRA';
     isAppealing: boolean = false;
     agreeToReserve: boolean = false;

src/styles.scss

@@ -113,4 +113,62 @@ button, a {
         cursor: not-allowed;
         opacity: 0.5;
     }
+}
+
+
+.input-holder {
+    width: 100%;
+    margin: 1.5rem 0;
+    position: relative;    
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;    
+
+    label {
+        font-size: 1.4rem;
+        background-color: white;
+        color: var(--primary);
+        position: absolute;
+        top: 2.2rem;
+        left: -0.5rem;
+        padding: 0 0.5rem;
+        font-weight: 400;
+        letter-spacing: 0.5px;
+        transform: translate(2.5rem, -3rem);
+    }
+
+    input, select {
+        display: block;
+        width: 100%;
+        border-radius: 4rem;
+        height: 5.5rem;
+        border: 1px solid var(--border-grey);
+        padding: 0 2rem;
+        font-size: 1.5rem;
+        letter-spacing: 0.5px;
+        color: var(--dark-grey);
+        background-color: white;
+
+        &:focus {
+            border-color: var(--highlight);
+
+            &~label {
+                color: var(--highlight);
+            }
+        }
+    }
+
+    select {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        text-indent: 1px;
+        text-overflow: '';
+    }
+
+    img {
+        position: relative;
+        transform: translateX(-4rem);
+        pointer-events: none;
+        background-color: white;
+    }
 }