Merge pull request #435 from communitybridge/fix/text-change

Added title and color change
communitybridge · Dec 12, 2024 · 5b4ac69 · 5b4ac69
2 parents 24a3d92 + 51dba95
commit 5b4ac69
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 3 deletions.
diff --git a/src/app/app.component.html b/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>

diff --git a/src/app/app.component.scss b/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;

diff --git a/src/app/shared/components/checkbox/checkbox.component.html b/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>
diff --git a/src/app/shared/components/checkbox/checkbox.component.ts b/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() {}