Move inline css style to scss

Signed-off-by: FangyuanCheng <fangyuanc@vmware.com>

src/portal/lib/src/config/registry-config.component.scss

@@ -4,4 +4,18 @@
 
 .info-tips-icon:hover {
     color: #007CBB;
+}
+
+.replication-config {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.replication-text {
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.replication-tooltip {
+    top: -8px;
 }
\ No newline at end of file

src/portal/lib/src/config/replication/replication-config.component.html

 <form #replicationConfigFrom="ngForm" class="compact">
-<section class="form-block" style="margin-top:0px;margin-bottom:0px;">
-<label style="font-size:14px;font-weight:600;" *ngIf="showSubTitle">{{'CONFIG.REPLICATION' | translate}}</label>
+<section class="form-block replication-config">
+<label class="replication-text" *ngIf="showSubTitle">{{'CONFIG.REPLICATION' | translate}}</label>
 <div class="form-group">
   <label for="verifyRemoteCert">{{'CONFIG.VERIFY_REMOTE_CERT' | translate }}</label>
     <clr-checkbox name="verifyRemoteCert" id="verifyRemoteCert" [(ngModel)]="replicationConfig.verify_remote_cert.value" [disabled]="!editable">
-      <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-top-right" style="top:-8px;">
+      <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-top-right replication-tooltip">
         <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
         <span class="tooltip-content">{{'CONFIG.TOOLTIP.VERIFY_REMOTE_CERT' | translate }}</span>
       </a>

src/portal/lib/src/config/system/system-settings.component.html

 <form #systemConfigFrom="ngForm" class="compact">
-    <section class="form-block" style="margin-top:0px;margin-bottom:0px;">
-        <label style="font-size:14px;font-weight:600;" *ngIf="showSubTitle">{{'CONFIG.SYSTEM' | translate}}</label>
+    <section class="form-block">
+        <label class="subtitle" *ngIf="showSubTitle">{{'CONFIG.SYSTEM' | translate}}</label>
         <div class="form-group">
             <label for="proCreation">{{'CONFIG.PRO_CREATION_RESTRICTION' | translate}}</label>
             <div class="select">
@@ -9,7 +9,7 @@
                     <option value="adminonly">{{'CONFIG.PRO_CREATION_ADMIN' | translate }}</option>
                 </select>
             </div>
-            <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-top-right" style="top: -1px;">
+            <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-top-right create-tooltip">
                 <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
                 <span class="tooltip-content">{{'CONFIG.TOOLTIP.PRO_CREATION_RESTRICTION' | translate}}</span>
             </a>
@@ -40,7 +40,7 @@
         <div *ngIf="!withAdmiral" class="form-group">
             <label for="repoReadOnly">{{'CONFIG.REPO_READ_ONLY' | translate}}</label>
             <clr-checkbox name="repoReadOnly" id="repoReadOnly" [clrChecked]="systemSettings.read_only.value" (clrCheckedChange)="setRepoReadOnlyValue($event)">
-                <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right" style="top:-7px;">
+                <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right read-tooltip">
                     <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
                     <span class="tooltip-content">{{'CONFIG.TOOLTIP.REPO_TOOLTIP' | translate}}</span>
                 </a>

src/portal/lib/src/config/system/system-settings.component.scss

+.subtitle {
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.create-tooltip {
+    top: -1;
+}
+
+.read-tooltip {
+    top: -7px;
+}
\ No newline at end of file

src/portal/lib/src/config/vulnerability/vulnerability-config.component.html

 <form #systemConfigFrom="ngForm" class="compact">
-    <section class="form-block" style="margin-top:0px;margin-bottom:0px;">
+    <section class="form-block">
         <label class="section-title" *ngIf="showSubTitle">{{ 'CONFIG.SCANNING.TITLE' | translate }}</label>
         <div class="form-group">
             <label>{{ 'CONFIG.SCANNING.DB_REFRESH_TIME' | translate }}</label>
@@ -9,12 +9,12 @@
                 <span>{{'CONFIG.SCANNING.DB_NOT_READY' | translate }}</span>
               </clr-tooltip-content>
             </clr-tooltip>
-            <clr-dropdown *ngIf="isClairDBFullyReady && showScanningNamespaces" style="margin-top:-8px;" class="clr-dropdown-override">
+            <clr-dropdown *ngIf="isClairDBFullyReady && showScanningNamespaces" class="clr-dropdown-override">
                 <button class="btn btn-link btn-font" clrDropdownToggle>
                   {{ updatedTimestamp | date:'MM/dd/y HH:mm:ss' }} AM
                   <clr-icon shape="caret down"></clr-icon>
                 </button>
-                <clr-dropdown-menu [clrPosition]="'bottom-right'" style="min-width:300px;">
+                <clr-dropdown-menu [clrPosition]="'bottom-right'" class="dropdown-namespace">
                     <div *ngFor="let nt of namespaceTimestamps" class="namespace">
                       <span class="label label-info">{{nt.namespace}}</span>
                       <span>{{ convertToLocalTime(nt.last_update) | date:'MM/dd/y HH:mm:ss'}} AM</span>

src/portal/lib/src/config/vulnerability/vulnerability-config.component.scss

@@ -22,12 +22,14 @@
     font-size: 12px !important;
 }
 
-.namespace {
-    margin-left: 24px;
-}
-
 .clr-dropdown-override {
     margin-top: -8px;
+    .dropdown-namespace {
+        min-width: 300px;
+            .namespace {
+                margin-left: 24px;
+            }
+    }
 }
 
 .btn-scan-right button{

src/portal/lib/src/confirmation-dialog/confirmation-dialog.component.html

 <clr-modal [(clrModalOpen)]="opened" [clrModalClosable]="false" [clrModalStaticBackdrop]="true">
-    <h3 class="modal-title" class="confirmation-title" style="margin-top: 0px;">{{dialogTitle}}</h3>
+    <h3 class="modal-title" class="confirmation-title">{{dialogTitle}}</h3>
     <div class="modal-body">
         <div class="confirmation-icon-inline">
             <clr-icon shape="warning" class="is-warning" size="64"></clr-icon>

src/portal/lib/src/confirmation-dialog/confirmation-dialog.component.scss

@@ -6,6 +6,7 @@
     line-height: 24px;
     color: #000000;
     font-size: 22px;
+    margin-top: 0;
 }
 
 .confirmation-content {

src/portal/lib/src/create-edit-endpoint/create-edit-endpoint.component.html

@@ -48,7 +48,7 @@
             </clr-tooltip-content>
           </clr-tooltip>
         </div>
-        <div class="form-group" style="height:30px;">
+        <div class="form-group" class="form-height">
           <label for="spin" class="col-md-4"></label>
           <span class="col-md-8 spinner spinner-inline" [hidden]="!inProgress"></span>
         </div>

src/portal/lib/src/create-edit-endpoint/create-edit-endpoint.component.scss

@@ -6,4 +6,8 @@
   clr-tooltip {
     top: 3px;
     position: relative;
+  }
+
+  .form-height {
+    height: 30px;
   }
\ No newline at end of file

src/portal/lib/src/create-edit-rule/create-edit-rule.component.html

 <clr-modal [(clrModalOpen)]="createEditRuleOpened" [clrModalStaticBackdrop]="true" [clrModalClosable]="false">
   <h3 class="modal-title">{{headerTitle | translate}}</h3>
   <hbr-inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></hbr-inline-alert>
-  <div class="modal-body" style="max-height: 85vh;">
+  <div class="modal-body modal-body-height">
     <clr-alert [hidden]='!deletedLabelCount' [clrAlertType]="'alert-warning'" [clrAlertSizeSmall]="true" [clrAlertClosable]="false"
       [(clrAlertClosed)]="alertClosed">
       <div class="alert-item">
@@ -65,7 +65,7 @@
                 <div class="arrowSet" [hidden]="!(filterListData[i]?.name=='label')" (click)="openLabelList(selectedValue.value, i, $event)">
                   <clr-icon shape="angle"></clr-icon>
                 </div>
-                <clr-icon shape="warning-standard" class="is-solid is-warning" size="14" style="margin-left: -15px;" [hidden]="!deletedLabelCount || !(filterListData[i]?.name=='label')"></clr-icon>
+                <clr-icon shape="warning-standard" class="is-solid is-warning warning-icon" size="14" [hidden]="!deletedLabelCount || !(filterListData[i]?.name=='label')"></clr-icon>
                 <clr-icon shape="times-circle" class="is-solid" (click)="deleteFilter(i)"></clr-icon>
                 <div *ngIf="!withAdmiral">
                   <hbr-filter-label [projectId]="projectId" [selectedLabelInfo]="filterLabelInfo"
@@ -75,7 +75,7 @@
             </div>
 
           </div>
-          <clr-icon shape="plus-circle" class="is-solid" [hidden]="isFilterHide" (click)="addNewFilter()" style="margin-top: 11px;"></clr-icon>
+          <clr-icon shape="plus-circle" class="is-solid plus-position" [hidden]="isFilterHide" (click)="addNewFilter()"></clr-icon>
 
         </div>
         <!--Targets-->
@@ -114,7 +114,7 @@
               </div>
               <!--weekly-->
               <span [hidden]="!weeklySchedule || !isScheduleOpt">on &nbsp;</span>
-              <div [hidden]="!weeklySchedule || !isScheduleOpt" class="select floatSet" style="width:104px">
+              <div [hidden]="!weeklySchedule || !isScheduleOpt" class="select floatSet weekday-width">
                 <select name="scheduleDay" formControlName="weekday">
                   <option value="1">{{'WEEKLY.MONDAY' | translate}}</option>
                   <option value="2">{{'WEEKLY.TUESDAY' | translate}}</option>
@@ -130,18 +130,18 @@
               <input [hidden]="!isScheduleOpt" type="time" formControlName="offtime" required value="08:00" />
             </div>
           </div>
-          <div style="width: 100%;" [hidden]="!isImmediate">
+          <div class="rule-width" [hidden]="!isImmediate">
             <clr-checkbox [clrChecked]="false" id="ruleDeletion" formControlName="replicate_deletion">
               {{'REPLICATION.DELETE_REMOTE_IMAGES' | translate}}
             </clr-checkbox>
           </div>
-          <div style="width: 100%;">
+          <div class="rule-width">
             <clr-checkbox [clrChecked]="true" id="ruleExit" formControlName="replicate_existing_image_now">
               {{'REPLICATION.REPLICATE_IMMEDIATE' | translate}}
             </clr-checkbox>
           </div>
         </div>
-        <div style="display:block;text-align:center">
+        <div class="loading-center">
           <span class="spinner spinner-inline" [hidden]="inProgress === false"></span>
         </div>
       </section>

src/portal/lib/src/create-edit-rule/create-edit-rule.component.scss

@@ -191,3 +191,27 @@ clr-modal {
     color: blue;
 }
 
+.modal-body-height {
+    max-height: 85vh;
+}
+
+.filterSelect .warning-icon {
+    margin-left: -15px;
+}
+
+.plus-position {
+    margin-top: 11px;
+}
+
+.weekday-width {
+    width: 104px;
+}
+
+.rule-width {
+    width: 100%;
+}
+
+.loading-center {
+    display: block;
+    text-align: center;
+}
\ No newline at end of file

src/portal/lib/src/create-edit-rule/filter-label.component.html

@@ -2,9 +2,9 @@
     <a class="filterClose" (click)="closeFilter()">&times;</a>
     <label class="filterLabelHeader">{{'REPOSITORY.FILTER_BY_LABEL' | translate}}</label>
     <div><input class="filterInput" type="text" placeholder="Filter labels" [(ngModel)]= "filterLabelName" (keyup)="handleInputFilter()"></div>
-    <div [hidden]='labelLists.length' style="padding-left:10px;">{{'LABEL.NO_LABELS' | translate }}</div>
+    <div [hidden]='labelLists.length' class="no-labels">{{'LABEL.NO_LABELS' | translate }}</div>
 
-    <div [hidden]='!labelLists.length' style='max-height:300px;overflow-y: auto;'>
+    <div [hidden]='!labelLists.length' class="label-list">
         <button type="button" class="labelBtn" *ngFor='let label of labelLists' [hidden]='!label.show' (click)="selectLabel(label)">
             <clr-icon shape="check" class='pull-left' [hidden]='!label.iconsShow'></clr-icon>
             <div class='labelDiv'><hbr-label-piece [label]="label.label"  [labelWidth]="118"></hbr-label-piece></div>

src/portal/lib/src/create-edit-rule/filter-label.component.scss

@@ -12,34 +12,39 @@
     max-width: 15rem;
     border-radius: .125rem;
     z-index: 100;
+    .filterClose {
+        position: absolute;
+        right: 8px;
+        top: 5px;
+        cursor: pointer;
+        font-size: 20px;
+    }
+    .filterLabelHeader {
+        font-size: .5rem;
+        font-weight: 600;
+        letter-spacing: normal;
+        padding: 0 .5rem;
+        line-height: .75rem;
+        margin: 0;
+        color: #313131;
+    }
+    .no-labels {
+        padding-left: 10px;
+    }
+    .label-list {
+        max-height: 300px;
+        overflow-y: auto;
+    }
 }
 
 .filterLabelPanel .filterInput{margin-left: .5rem; margin-right: .5rem;}
 
-.filterLabelHeader {
-    font-size: .5rem;
-    font-weight: 600;
-    letter-spacing: normal;
-    padding: 0 .5rem;
-    line-height: .75rem;
-    margin: 0;
-    color: #313131;
-}
-
 .filterLabelPanel .form-group input {
     position: relative;
     margin-left: .5rem;
     margin-right: .5rem;
 }
 
-.filterClose {
-    position: absolute;
-    right: 8px;
-    top: 5px;
-    cursor: pointer;
-    font-size: 20px;
-}
-
 .pull-left {
     display: inline-block;
     float: left;

src/portal/lib/src/endpoint/endpoint.component.html

 <div>
-    <div class="row"  style="position:relative;">
+    <div class="row"  class="endpoint-view">
         <div>
             <div class="row flex-items-xs-between rightPos">
                 <div class="flex-items-xs-middle option-right">

src/portal/lib/src/endpoint/endpoint.component.scss

@@ -21,4 +21,8 @@
   right: 35px;
   margin-top: 4px;
   height: 24px;
+}
+
+.endpoint-view {
+  position: relative;
 }
\ No newline at end of file

src/portal/lib/src/filter/filter.component.html

 <span>
     <clr-icon shape="search" size="20" class="search-btn" [class.filter-icon]="isShowSearchBox" (click)="onClick()"></clr-icon>
-    <input [hidden]="!isShowSearchBox" type="text" style="padding-left: 15px;" (keyup)="valueChange()" (focus)="inputFocus()"
+    <input [hidden]="!isShowSearchBox" type="text" class="filter-input" (keyup)="valueChange()" (focus)="inputFocus()"
         placeholder="{{placeHolder}}" [(ngModel)]="currentValue" />
     <span class="filter-divider" *ngIf="withDivider"></span>
 </span>
\ No newline at end of file

src/portal/lib/src/filter/filter.component.scss

@@ -22,4 +22,8 @@
 
 .search-btn:hover {
     color: #007CBB;
+}
+
+.filter-input {
+    padding-left: 15px;
 }
\ No newline at end of file

src/portal/lib/src/label/label.component.html

 <div>
-    <div class="row"  style="position:relative;">
+    <div class="row"  class="label-config">
         <div>
             <div class="row flex-items-xs-between rightPos">
                 <div class="flex-items-xs-middle option-right">

src/portal/lib/src/label/label.component.scss

-.option-left {
-  padding-left: 16px;
-  margin-top: -6px;
+.label-config {
+  position: relative;
+    div.content-mt {
+      margin-top: -12px;
+    }
+    .rightPos {
+      position: absolute;
+      z-index: 100;
+      right: 35px;
+      margin-top: 4px;
+      height: 24px;
+      .option-right {
+        padding-right: 16px;
+          .refresh-btn {
+            cursor: pointer;
+              :hover {
+              color: #007CBB;
+            }
+          }
+      }    
+  }
 }
 
-.option-right {
-  padding-right: 16px;
-}
 
-.refresh-btn {
-  cursor: pointer;
-}
 
-.refresh-btn:hover {
-  color: #007CBB;
-}
-
-.rightPos {
-  position: absolute;
-  z-index: 100;
-  right: 35px;
-  margin-top: 4px;
-  height: 24px;
-}
-.content-mt {
-  margin-top: -12px;
-}
\ No newline at end of file