Styling aligned with figma in FF overview page (#1677)

CarnegieLearningWeb · Jun 21, 2024 · a33c4bc · a33c4bc
1 parent 8105894
commit a33c4bc
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 27 deletions.
diff --git a/.../common-section-card-overview-details/common-section-card-overview-details.component.html b/.../common-section-card-overview-details/common-section-card-overview-details.component.html
@@ -1,14 +1,14 @@
 <div class="content-section">
   <div *ngFor="let item of data | keyvalue: noSort">
-    <div class='item-key-value'>
-      <span class="ft-16-600 item-key">{{ item.key }}:</span>
+    <div class="item-key-value">
+      <span class="ft-14-600 item-key">{{ item.key }}:</span>
       <ng-container *ngIf="item.key !== 'Tags'; else chipSection">
-        <span class="ft-16-500 item-value">{{ item.value }}</span>
+        <span class="ft-14-400 item-value">{{ item.value }}</span>
       </ng-container>
 
       <ng-template #chipSection>
         <mat-chip-list>
-          <mat-chip *ngFor="let tag of item.value" class="chip">{{ tag }}</mat-chip>
+          <mat-chip *ngFor="let tag of item.value" class="ft-12-400 chip">{{ tag }}</mat-chip>
         </mat-chip-list>
       </ng-template>
     </div>

diff --git a/.../common-section-card-overview-details/common-section-card-overview-details.component.scss b/.../common-section-card-overview-details/common-section-card-overview-details.component.scss
@@ -16,7 +16,8 @@
     color: var(--dark-grey);
   }
 
-  .chip{
+  .chip {
     margin-right: 5px;
+    height: 24px;
   }
 }
diff --git a/...mponents/common-section-card-title-header/common-section-card-title-header.component.html b/...mponents/common-section-card-title-header/common-section-card-title-header.component.html
@@ -1,28 +1,24 @@
 <div class="title-header">
-  <h1 class="title ft-26-700">
-    {{ title | translate }} &nbsp;<span *ngIf="tableRowCount > 0">
-      ({{ tableRowCount }})
-  </span>
+  <h1 class="title ft-18-700">
+    {{ title | translate }} &nbsp;<span *ngIf="tableRowCount > 0"> ({{ tableRowCount }}) </span>
     <ng-container *ngIf="chipClass">
-      <app-common-status-indicator-chip class="status-chip" [chipClass] = "chipClass" ></app-common-status-indicator-chip>
+      <app-common-status-indicator-chip class="status-chip" [chipClass]="chipClass"></app-common-status-indicator-chip>
     </ng-container>
   </h1>
-  <h3 class="subtitle ft-16-400">
+  <h3 class="subtitle ft-14-400">
     <ng-container *ngIf="subtitle">
       {{ subtitle | translate }}
     </ng-container>
     <ng-container *ngIf="createdAt && updatedAt">
-      <span class="ft-16-600 segment-create-date">
-        {{ ('home.view-experiment.created-on.text' | translate) + (createdAt | formatDate: 'medium date') + ' | '}}
+      <span class="ft-14-400 date">
+        {{ ('home.view-experiment.created-on.text' | translate) + (createdAt | formatDate: 'medium date') + ' | ' }}
       </span>
-      <span class="ft-16-600 segment-update-date">
-        {{
-          ('home.view-experiment.last-updated-on.text' | translate) + (updatedAt | formatDate: 'short date')
-        }}
+      <span class="ft-14-400 date">
+        {{ ('home.view-experiment.last-updated-on.text' | translate) + (updatedAt | formatDate: 'short date') }}
       </span>
     </ng-container>
     <ng-container *ngIf="showViewLogs">
-      <a [href]="" class="view-logs-link" (click)="viewLogsClicked()"> View logs</a>
+      <a [href]="" class="view-logs-link ft-14-400" (click)="viewLogsClicked()"> View logs</a>
     </ng-container>
   </h3>
-</div>
+</div>
diff --git a/...mponents/common-section-card-title-header/common-section-card-title-header.component.scss b/...mponents/common-section-card-title-header/common-section-card-title-header.component.scss
@@ -26,4 +26,12 @@
     text-decoration: underline;
     cursor: pointer;
   }
-}
+
+  .date {
+    color: rgba(100, 110, 123, 1);
+  }
+
+  .view-logs-link {
+    font-size: 14px;
+  }
+}
diff --git a/...t-lib/components/common-status-indicator-chip/common-status-indicator-chip.component.scss b/...t-lib/components/common-status-indicator-chip/common-status-indicator-chip.component.scss
@@ -23,13 +23,15 @@
 }
 
 ::ng-deep .status-indicator.enabled {
-  --mdc-chip-label-text-color: green;
-  border: 1px solid green;
+  // --mdc-chip-label-text-color: green;
+  --mdc-chip-label-text-color: rgba(51, 102, 255, 1);
+  border: 1px solid rgba(51, 102, 255, 1);
 }
 
 ::ng-deep .status-indicator.disabled {
-  --mdc-chip-label-text-color: red;
-  border: 1px solid red;
+  // --mdc-chip-label-text-color: red;
+  --mdc-chip-label-text-color: rgba(255, 153, 51, 1);
+  border: 1px solid rgba(255, 153, 51, 1);
 }
 
 ::ng-deep .status-indicator.draft {
@@ -65,4 +67,4 @@
 ::ng-deep .status-indicator.scheduled {
   --mdc-chip-label-text-color: blue;
   border: 1px solid blue;
-}
+}
diff --git a/...onents/common-tabbed-section-card-footer/common-tabbed-section-card-footer.component.html b/...onents/common-tabbed-section-card-footer/common-tabbed-section-card-footer.component.html
@@ -1,10 +1,16 @@
-<div class="tabbed-footer">
+<div>
   <mat-tab-group
     mat-stretch-tabs="false"
     mat-align-tabs="start"
     animationDuration="0ms"
     (selectedTabChange)="onSelectedTabChange($event)"
   >
-    <mat-tab class="footer-tab" *ngFor="let label of tabLabels" [label]="label"></mat-tab>
+    <mat-tab *ngFor="let label of tabLabels">
+      <ng-template mat-tab-label>
+        <span class="ft-18-600">
+          {{ label }}
+        </span>
+      </ng-template>
+    </mat-tab>
   </mat-tab-group>
 </div>