Added title and color change

Signed-off-by: Amol Sontakke <[email protected]>

Author: amolsontakke3576

src/app/app.component.html

@@ -6,15 +6,18 @@
   <app-alert></app-alert>
   <div *ngIf="!showDashboard" class="wrapper vcenter-item">
       <div class="box">
+        <div class="consent-title">Consent</div>
+
         <app-checkbox [checked]="hasTermAccepted" text="I hereby certify that I am not, and/or the organization I am representing is not"
-            (checkboxEmitter)="onClickTermAccepted($event)" fontSize="16px" topMargin="5px" bold="true">
+            (checkboxEmitter)="onClickTermAccepted($event)" fontSize="16px" topMargin="5px" bold="true" [required]="true">
         </app-checkbox>
         <ul class="mt-2" style="width: 800px;">
             <li>located in Cuba, Iran, North Korea, Syria, the Crimea Region of Ukraine, or the Russian-controlled areas of the Donetsk or Luhansk regions of Ukraine;
             </li>
             <li>owned or controlled by, acting for or on behalf of, or an individual or entity that has in the past acted for or on behalf of the Government of Cuba, 
                 Iran, North Korea, Syria, or Venezuela; or</li>
-            <li>listed as a blocked person by the U.S. Department of the Treasury’s <a href="https://ofac.treasury.gov/sanctions-programs-and-country-information" target="_blank">Office of Foreign Assets Control (OFAC)</a> 
+            <li>listed as a blocked person by the U.S. Department of the Treasury’s 
+              <a style="color: #0099cc;" href="https://ofac.treasury.gov/sanctions-programs-and-country-information" target="_blank">Office of Foreign Assets Control (OFAC)</a> 
                 or directly or indirectly owned 50 percent or more by such a listed person
             </li>
           </ul>

src/app/app.component.scss

@@ -6,6 +6,13 @@
   min-height: calc(100vh - 125px);
 }
 
+.consent-title{
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
 .vcenter-item{
   display: flex;
   align-items: center;

src/app/shared/components/checkbox/checkbox.component.html

@@ -2,7 +2,10 @@
  SPDX-License-Identifier: MIT -->
 
 <label class="container">
-    <span [ngStyle]="{'font-size': fontSize, 'font-weight': bold ? 'bold' : 'normal'}">{{text}}</span>
+    <span [ngStyle]="{'font-size': fontSize, 'font-weight': bold ? 'bold' : 'normal'}">
+        <span *ngIf="required" style="color: red;padding-right: 2px;">*</span>
+        {{text}}
+    </span>
     <input type="checkbox" [checked]="checked" (click)="onCheckboxClick()">
     <span class="checkmark" [ngStyle]="{'top': topMargin}"></span>
 </label>

src/app/shared/components/checkbox/checkbox.component.ts

@@ -14,6 +14,7 @@ export class CheckboxComponent {
   @Input() fontSize: string;
   @Input() topMargin: string;
   @Input() bold: boolean;
+  @Input() required: boolean;
   @Output() checkboxEmitter: EventEmitter<any> = new EventEmitter<any>();
 
   constructor() {}