From 7eb9126d7c6c5911005f59e2ee128104823923b1 Mon Sep 17 00:00:00 2001 From: Adwaith Rao Date: Sun, 7 Nov 2021 22:24:42 +0530 Subject: [PATCH] UI changes for the acknowledgement and receipt pages --- .../register-business.component.html | 47 ++++++------- .../register-business.component.scss | 66 ++++++++++++++----- .../register-business.component.ts | 10 +-- src/app/tabs/tabs.component.scss | 12 ++++ src/assets/icons/checkmark.svg | 1 + src/styles.scss | 2 + 6 files changed, 90 insertions(+), 48 deletions(-) create mode 100644 src/assets/icons/checkmark.svg diff --git a/src/app/register-business/register-business.component.html b/src/app/register-business/register-business.component.html index 02dbf1a..8fb2773 100644 --- a/src/app/register-business/register-business.component.html +++ b/src/app/register-business/register-business.component.html @@ -6,7 +6,7 @@
E-Services / - Business Names + Business Name Application
@@ -77,7 +77,7 @@
-
-
-
Successfully made payment
-

- {{ isAppealing ? - 'Please stand by while the Authority Officer contacts you with the results of your appeal' : - 'Congratulations! Your name has been submitted for reservation under "' + selectedPlan.range + ' Plan". Please proceed with further setup of your business entity' }} -

- - -
-
-

Acknowledgement

+ check icon +

Payment Successful

  • @@ -125,10 +112,19 @@
    S$ 15.00
    -
+
+ +
+ + +
- -
- - +
  • + 3. Please stand by while the Authority Officer contacts you with the results of your appeal +
    • +
    diff --git a/src/app/register-business/register-business.component.scss b/src/app/register-business/register-business.component.scss index 1e65d7e..5e69222 100644 --- a/src/app/register-business/register-business.component.scss +++ b/src/app/register-business/register-business.component.scss @@ -252,23 +252,46 @@ color: var(--dark-grey); filter: brightness(80%); font-weight: 500; - margin: 2rem; + margin: 2rem 2rem 3rem; } .container { - display: flex; - width: calc(100% - 2rem); - align-items: flex-start; + width: calc(70% - 2rem); margin: 2rem auto; + + @media print { + width: calc(100% - 2rem); + } } .bill-container { - width: 50%; - border: 2px solid var(--border-grey); - border-radius: 1rem; + width: 70%; + box-shadow: 0 0 10px var(--shadow-grey); + border-radius: 1rem; + overflow: hidden; + margin: 0 auto 5rem; + + @media print { + width: 100%; + } + } + + .check-icon { + display: block; + width: 58px; + height: auto; + margin: 3rem auto 2rem; + } + + h3 { + font-size: 3rem; + font-weight: normal; + text-align: center; + color: var(--success); } .bill-breakup { + margin-top: 3rem; display: grid; grid-template-columns: 1fr 1fr; list-style: none; @@ -281,7 +304,7 @@ label { display: block; color: var(--dark-grey); - font-size: 1.4rem; + font-size: 1.6rem; filter: brightness(80%); } @@ -302,16 +325,17 @@ } .form-action-buttons { - text-align: left; margin: 2rem 1.5rem; + + @media print { + display: none; + } } .total-amount { - text-align: right; - margin: 0 1.5rem 2rem; + text-align: center; overflow: hidden; padding: 1rem; - border-radius: 1rem; position: relative; &::before { @@ -321,7 +345,7 @@ top: 0; width: 100%; height: 100%; - background-color: var(--border-grey); + background-color: var(--footer-grey); opacity: 0.4; } @@ -342,9 +366,12 @@ } .message-board { - width: 50%; padding: 0 2rem; list-style: none; + + @media print { + display: none; + } h5 { font-size: 1.6rem; @@ -434,6 +461,10 @@ .cell { width: calc(100% / 6); + @media print { + word-break: break-all; + } + &:nth-child(1) { text-align: center; width: 10rem; @@ -492,10 +523,11 @@ color: var(--dark-grey); filter: brightness(80%); font-weight: 500; + margin-bottom: 1rem; } li { - margin: 1.5rem 0; + margin: 0.5rem 0; line-height: 1.7; letter-spacing: 0.5px; font-size: 1.4rem; @@ -511,5 +543,9 @@ .form-action-buttons { text-align: left; + + @media print { + display: none; + } } } \ No newline at end of file diff --git a/src/app/register-business/register-business.component.ts b/src/app/register-business/register-business.component.ts index 721b730..d87f743 100644 --- a/src/app/register-business/register-business.component.ts +++ b/src/app/register-business/register-business.component.ts @@ -13,8 +13,8 @@ interface Plan { }) export class RegisterBusinessComponent implements OnInit { formState: 'CHECK_NAME' | 'INIT_REGISTER' | - 'REGISTER_FORM' | 'SELECT_PLAN' | 'COMPLETE_PURCHASE' | - 'ACKNOWLEDGEMENT' | 'RECEIPT' | undefined = 'CHECK_NAME'; + 'REGISTER_FORM' | 'SELECT_PLAN' | + 'ACKNOWLEDGEMENT' | 'RECEIPT' | undefined = 'RECEIPT'; nameToCheck: string = 'JK Enterprises ACRA Ltd'; isAppealing: boolean = false; agreeToReserve: boolean = false; @@ -30,11 +30,11 @@ export class RegisterBusinessComponent implements OnInit { range: 'One Year' }, { name: 'Popular', - amount: 20, + amount: 45, range: 'Three Years' }, { name: 'Premium', - amount: 25, + amount: 75, range: 'Five Years' }]; @@ -175,7 +175,7 @@ export class RegisterBusinessComponent implements OnInit { this.childCheck = window.setInterval(() => { if (this.paymentChild && this.paymentChild.closed) { - this.formState = 'COMPLETE_PURCHASE'; + this.formState = 'ACKNOWLEDGEMENT'; window.clearInterval(this.childCheck); this.childCheck = undefined; } diff --git a/src/app/tabs/tabs.component.scss b/src/app/tabs/tabs.component.scss index 6c3136f..916fb51 100644 --- a/src/app/tabs/tabs.component.scss +++ b/src/app/tabs/tabs.component.scss @@ -23,6 +23,10 @@ $header-height: 10rem; align-items: center; justify-content: flex-start; + @media print { + display: none; + } + a { font-size: 1.6rem; letter-spacing: 0.5px; @@ -43,6 +47,10 @@ $header-height: 10rem; position: relative; margin-left: auto; + @media print { + display: none; + } + input { display: block; height: 5rem; @@ -78,6 +86,10 @@ $header-height: 10rem; position: relative; overflow: hidden; width: 20rem; + + @media print { + display: none; + } &::before { content: ''; diff --git a/src/assets/icons/checkmark.svg b/src/assets/icons/checkmark.svg new file mode 100644 index 0000000..a7da7e6 --- /dev/null +++ b/src/assets/icons/checkmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index 06fb6fb..1ff8564 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -21,6 +21,8 @@ button, a { --teal: #1e8bbc; --dark-grey: #7a7a7a; --border-grey: #e8e8e8; + --shadow-grey: hsl(0, 0%, 86%); + --footer-grey: hsl(0, 0%, 93%); --error: #d07a7a; --success: #88b749; }