diff --git a/src/app/register-business/register-business.component.html b/src/app/register-business/register-business.component.html index 9ec0d40..c9bd2c2 100644 --- a/src/app/register-business/register-business.component.html +++ b/src/app/register-business/register-business.component.html @@ -40,8 +40,6 @@
- - calendar icon @@ -58,6 +56,8 @@ + +
@@ -93,12 +93,12 @@ -
No. of years
-
+
+ calendar icon +
S$ {{ (noOfYears * perYearPrice).toFixed(2) }} diff --git a/src/app/register-business/register-business.component.scss b/src/app/register-business/register-business.component.scss index a2a3595..2d32174 100644 --- a/src/app/register-business/register-business.component.scss +++ b/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 { diff --git a/src/app/register-business/register-business.component.ts b/src/app/register-business/register-business.component.ts index 42f98f6..0dc8b7a 100644 --- a/src/app/register-business/register-business.component.ts +++ b/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; diff --git a/src/styles.scss b/src/styles.scss index 1ff8564..535948a 100644 --- a/src/styles.scss +++ b/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; + } } \ No newline at end of file