Refactor styles.css

1.refactor styles.css
2.modify theme mode
3.fix bug #9939
Signed-off-by: Yogi_Wang <yawang@vmware.com>

src/portal/angular.json

@@ -28,7 +28,6 @@
               "node_modules/swagger-ui/dist/swagger-ui.css",
               "node_modules/prismjs/themes/prism-solarizedlight.css",
               "src/global.scss",
-              "src/styles.css",
               {
                 "input": "src/css/dark-theme.scss",
                 "bundleName": "dark-theme",
@@ -108,8 +107,7 @@
             "styles": [
               "node_modules/@clr/icons/clr-icons.min.css",
               "node_modules/@clr/ui/clr-ui.min.css",
-              "node_modules/prismjs/themes/prism-solarizedlight.css",
+              "node_modules/prismjs/themes/prism-solarizedlight.css"
-              "src/styles.css"
             ],
             "assets": [
               "src/images",

src/portal/src/app/config/auth/config-auth.component.ts

@@ -156,6 +156,7 @@ export class ConfigurationAuthComponent implements OnChanges, OnInit {
                     settings['verify_cert'] = this.currentConfig[prop].value;
                 }
             }
+            this.testingOnGoing = true;
             this.configService.testOIDCServer(settings)
                 .subscribe(respone => {
                     this.testingOnGoing = false;

src/portal/src/app/project/scanner/scanner.component.scss

@@ -1,6 +1,5 @@
 .scanner-name {
   height: 1rem;
-  color: #000;
   display: inline-block;
   padding: 0 .25rem;
   max-height: 1rem;

src/portal/src/css/common.scss

@@ -3,9 +3,116 @@
     .tabs-overflow {
       > .nav-item {
         > button {
-          box-shadow: 0 -3px 0 $dark-active-tab-color inset;
+          box-shadow: 0 -3px 0 $mode-link-color2 inset;
           color: 0077b8;
         }
       }
     }
+}
+.label-form {
+  background-color: $label-form-color !important;
+}
+.esxc-gauge-circle-bgc-dark {
+  background-color: $mode-background-color1 ;
+}
+
+.harbor-icon {
+  filter: drop-shadow($fill-color1 58px 2px) !important;
+}
+
+.color-white-dark {
+  color: $right-status-fill-color;
+}
+
+.label-filter-panel {
+  background-color: $mode-background-color !important;
+}
+
+.filter-dark {
+  color: $mode-font-color1 !important;
+}
+.side-form {
+  background-color: $mode-background-color !important;
+}
+.toolBar {
+  background-color: $mode-background-color !important;
+}
+
+.search-overlay {
+  background-color: $mode-background-color2 !important;
+}
+
+.add-modal-dark {
+  background: $mode-background-color3 !important;
+}
+.license {
+  background-color: $mode-background-color !important;
+}
+
+.pagination-list {
+  .pagination-current {
+    color: $mode-font-color1 !important;
+  }
+}
+.no-info-div,
+.info-div {
+  background-color: $mode-background-color !important;
+}
+.bottom-line-project-config {
+  color: $mode-font-color3 !important;
+}
+.config-subtext {
+  color: $mode-font-color4 !important;
+}
+.permission-dark {
+  color: $mode-font-color3 !important;
+}
+.scanner-name {
+  color: $mode-font-color3 !important;
+}
+.summary-dark {
+  color: $mode-font-color3 !important;
+  h5 {
+    color: $mode-font-color3 !important;
+  }
+}
+.about-version {
+  color: $mode-font-color2 !important;
+}
+.update-time {
+  color: $mode-font-color3 !important;
+}
+.font-style {
+  color: $mode-font-color3 !important;
+}
+.go-link {
+  color: $mode-link-color1 !important; 
+  border-bottom: 1px solid  $mode-link-color1 !important;
+}
+.circle-block {
+  color: $mode-font-color5 !important;
+}
+.executions-detail {
+  label {
+    color: $mode-font-color3 !important;
+  }
+}
+.black-point {
+  background-color: $mode-font-color3 !important;
+}
+clr-dg-action-overflow {
+  clr-icon {
+    fill: $mode-font-color3 !important;
+  }
+}
+.oidc-tip {
+  color: $mode-font-color3 !important;
+}
+.clr-select-wrapper{
+  select {
+    option {
+      background: $select-back-color;
+      color: $select-option-color;
+    }
+  } 
 }

src/portal/src/css/dark-theme.scss

@@ -1,117 +1,22 @@
 // Variables for dark theme should be defined here.
 @import "../../node_modules/@clr/ui/clr-ui-dark.min.css";
-$dark-background-color: rgb(27, 42, 50) !important;
+$mode-background-color: rgb(27, 42, 50);
-$dark-font-color1: #acbac3 !important;
+$mode-background-color1: $mode-background-color !important;
-$dark-font-color-title1: #eaedf0 !important;
+$mode-background-color2: $mode-background-color;
-$dark-active-tab-color: #4aaed9;
+$mode-background-color3: #17242b;
 
-.label-form {
+$mode-font-color1: #acbac3;
-  background-color: #212129 !important;
+$mode-font-color3: $mode-font-color1;
-}
+$mode-font-color4: $mode-font-color1;
-.esxc-gauge-circle-bgc-dark {
+$mode-font-color5: $mode-font-color1;
-  background-color: $dark-background-color;
+$mode-font-color2: #eaedf0;
-}
+$mode-link-color1: #4aaed9;
+$mode-link-color2: $mode-link-color1;
+$select-option-color: #1b2a32;
+$select-back-color: #acbac3;
 
-.harbor-icon {
+$label-form-color: #212129;
-  filter: drop-shadow(#ccc 58px 2px) !important;
+$fill-color1: #ccc;
-}
+$right-status-fill-color: white;
-
-.color-white-dark {
-  color: white;
-}
-
-.label-filter-panel {
-  background-color: $dark-background-color;
-}
-
-.filter-dark {
-  color: $dark-font-color1;
-}
-.side-form {
-  background-color: $dark-background-color;
-}
-.toolBar {
-  background-color: $dark-background-color;
-}
-
-.search-overlay {
-  background-color: $dark-background-color;
-}
-
-.add-modal-dark {
-  background: $dark-background-color;
-}
-.license {
-  background-color: $dark-background-color;
-}
-
-.pagination-list {
-  .pagination-current {
-    color: $dark-font-color1;
-  }
-}
-.no-info-div,
-.info-div {
-  background-color: $dark-background-color;
-}
-.bottom-line-project-config {
-  color: $dark-font-color1;
-}
-.config-subtext {
-  color: $dark-font-color1;
-}
-.permission-dark {
-  color: $dark-font-color1;
-}
-.scanner-name {
-  color: $dark-font-color1;
-}
-.permission-dark {
-  color: $dark-font-color1;
-}
-.summary-dark {
-  color: $dark-font-color1;
-  h5 {
-    color: $dark-font-color1;
-  }
-}
-.about-version {
-  color: $dark-font-color-title1;
-}
-.update-time {
-  color: $dark-font-color1;
-}
-.font-style {
-  color: $dark-font-color1;
-}
-.go-link {
-  color: #4aaed9 !important; 
-  border-bottom-color: #4aaed9 !important; 
-}
-.circle-block {
-  color: $dark-font-color1;
-}
-.executions-detail {
-  color: $dark-font-color1;
-}
-.black-point {
-  background-color: $dark-font-color1;
-}
-clr-dg-action-overflow {
-  clr-icon {
-    fill: $dark-font-color1;
-  }
-}
-.oidc-tip {
-  color: $dark-font-color1;
-}
-.clr-select-wrapper{
-  select {
-    option {
-      background: $dark-font-color1;
-      color: #1b2a32;
-    }
-  } 
-}
 
 @import "./common.scss";

src/portal/src/css/light-theme.scss

@@ -1,5 +1,23 @@
-// Variables for dark theme should be defined here.
+// Variables for light theme should be defined here.
 @import "../../node_modules/@clr/ui/clr-ui.min.css";
 
-$dark-active-tab-color: #0077b8;
+  
+$mode-background-color: #fff;
+$mode-background-color1: $mode-background-color;
+$mode-background-color2: #fafafa;
+$mode-background-color3: #eee;
+$fill-color1: #000;
+
+$mode-font-color1: #313131;
+$mode-font-color3: $fill-color1;
+$mode-font-color4: unset;
+$mode-font-color5: #575757;
+$mode-font-color2: #565656;
+$mode-link-color1: blue;
+$mode-link-color2: #0077b8;
+$select-option-color: #1b2a32;
+$select-back-color: $mode-background-color;
+
+$label-form-color: $mode-background-color3;
+$right-status-fill-color: #1d5100;
 @import "./common.scss";

src/portal/src/global.scss

@@ -1,3 +1,122 @@
+body {
+  overflow-y: hidden;
+}
+
+.app-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: 108px !important;
+  height: 108px !important;
+}
+
+/*Hack Clarity alert*/
+
+.alert-global {
+  font-size: 16px;
+  font-weight: 400;
+  font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif;
+  padding: 12px !important;
+  border: none !important;
+  margin-top: 0px !important;
+  max-height: 96px;
+}
+
+.alert-global-align {
+  -webkit-box-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  align-items: center;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.tooltip-content {
+  white-space: normal;
+  word-wrap: break-word;
+}
+
+.alert.alert-warning {
+  padding: 10px 12px;
+}
+.alert-warning {
+  .alert-actions {
+    button {
+      margin: -2px 0 0px 0;
+    }
+  }
+}
+.modal-header {
+  padding: 0;
+}
+.rotate-90 {
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
+
+/* set overflow bar style */
+::-webkit-scrollbar {
+  width: 8px;
+  background: transparent;
+}
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background: #ccc;
+  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
+}
+::-webkit-scrollbar-thumb:window-inactive {
+  background: rgba(255, 0, 0, 0.4);
+}
+.custom-h2 {
+  line-height: 24px;
+}
+
+.datagrid-header {
+  z-index: 0 !important;
+}
+
+.color-green {
+  color: #1d5100;
+}
+
+.color-red {
+  color: red;
+}
+
+.datagrid-table,
+.datagrid-header {
+  position: inherit !important;
+}
+
+.required:after {
+  content: "*";
+  font-size: 0.58479532rem;
+  line-height: 0.5rem;
+  color: #c92100;
+  margin-left: 0.25rem;
+}
+
+.flex-items-xs-right {
+  justify-content: flex-end;
+}
+
+.clr-vertical-nav .nav-link {
+  border-radius: 5px;
+}
+
+button:focus {
+  outline: none;
+}
+
 .w-100 {
   width: 100% !important;
 }

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

@@ -44,7 +44,6 @@
 }
 
 .update-time {
-    color: #000;
     font-size: .541667rem;
     width: 200px;
     padding-right: 1rem;

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

@@ -154,8 +154,6 @@ h4 {
 }
 
 .go-link {
-    color: blue;
-    border-bottom: 1px solid blue;
     line-height: 1rem;
     cursor: pointer;
 }

src/portal/src/lib/components/operation/operation.component.css

@@ -5,7 +5,6 @@
     height: 100%;
     left:28px;
     padding-top: 20px;
-    background: #fff;
     border-left: 1px solid #e0e0e0;
 }
 .eventInfo {display: flex; justify-content: flex-start; align-content: flex-start;
@@ -35,7 +34,6 @@
     padding: 0 10px;
     height: 25px;
     line-height: 25px;
-    background-color: white;
     letter-spacing: 1.2px;
     font-weight: 500;
     box-shadow: -2px -1px 3px #bebbbb;

src/portal/src/lib/components/project-policy-config/project-policy-config.component.scss

@@ -51,7 +51,6 @@
 .add-modal {
   position: absolute;
   padding: 0 8px;
-  background-color: rgb(238, 238, 238);
   .flex-direction-column {
     flex-direction: column;
   }

src/portal/src/lib/components/replication/replication-tasks/replication-tasks.component.scss

@@ -73,7 +73,6 @@
                 width: 400px;
                 label {
                     display: inline-block;
-                    color: black;
                     width: 120px;
                 }
                 >div {

src/portal/src/lib/components/repository/repository.component.scss

@@ -32,7 +32,6 @@
 }
 
 .info-div {
-  background: white;
   border: 1px;
   border-style: solid;
   border-color: #CCCCCC;

src/portal/src/lib/components/tag/tag.component.scss

@@ -139,7 +139,6 @@
   position: relative;
   -ms-flex-direction: column;
   flex-direction: column;
-  background: #fff;
   padding: .5rem 0;
   border: 1px solid #ccc;
   box-shadow: 0 1px 0.125rem hsla(0, 0%, 45%, .25);

src/portal/src/lib/components/vulnerability-scanning/result-tip-histogram/result-tip-histogram.component.scss

@@ -219,9 +219,6 @@ hr {
 .width-150 {
     width: 150px;
 }
-.circle-block {
-    color: #575757;
-}
 
 .level-border>div{
     display: inline-flex;
@@ -277,7 +274,6 @@ hr {
 .black-point {
     position: absolute;
     width: 4px;
-    background-color: #000;
     height: 4px;
     border-radius: 50%;
 }

src/portal/src/styles.css

@@ -1,111 +0,0 @@
-body {
-    overflow-y: hidden;
-}
-
-.app-loading {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right:0;
-    bottom:0;
-    margin:auto;
-    width: 108px !important;
-    height: 108px !important;
-}
-
-
-/*Hack Clarity alert*/
-
-.alert-global {
-    font-size: 16px;
-    font-weight: 400;
-    font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif;
-    padding: 12px !important;
-    border: none !important;
-    margin-top: 0px !important;
-    max-height: 96px;
-}
-
-.alert-global-align {
-    -webkit-box-pack: center;
-    justify-content: center;
-    -webkit-box-align: center;
-    align-items: center;
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-.tooltip-content{white-space: normal;word-wrap: break-word;}
-
- .alert.alert-warning{
-    padding:10px 12px;
-}
- .alert-warning .alert-actions button{
-     margin: -2px 0 0px 0;
-}
- .modal-header{
-     padding: 0;
- }
-.rotate-90 {
-    -webkit-transform: rotate(-90deg);
-    -moz-transform: rotate(-90deg);
-    -ms-transform: rotate(-90deg);
-    -o-transform: rotate(-90deg);
-    transform: rotate(-90deg);
-}
-
-/* set overflow bar style */
-::-webkit-scrollbar {
-    width: 8px;
-    background:transparent;
-}
-::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
-    border-radius: 4px;
-}
-::-webkit-scrollbar-thumb {
-    border-radius: 4px;
-    background: #ccc;
-    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.5);
-}
-::-webkit-scrollbar-thumb:window-inactive {
-    background: rgba(255,0,0,0.4);
-}
-.custom-h2 {
-    line-height: 24px;
-}
-
-.datagrid-header{
-    z-index: 0 !important;
-}
-
-.color-green {
-    color: #1D5100;
-}
-
-.color-red {
-    color: red;
-}
-
-.datagrid-table,.datagrid-header{
-    position: inherit !important;
-}
-
-.required:after {
-    content: '*';
-    font-size: .58479532rem;
-    line-height: .5rem;
-    color: #c92100;
-    margin-left: .25rem;
-}
-
-.flex-items-xs-right {
-    justify-content: flex-end;
-}
-
-.clr-vertical-nav .nav-link {
-    border-radius: 5px;
-}
-
-button:focus {
-  outline: none;
-}