Issue5408- Increase text contrast for improved web accessibility (arg…

…oproj#5700) * fix: increase contrast for text color Signed-off-by: Regina Scott <[email protected]> * aligned spacing in application status panel Signed-off-by: Regina Scott <[email protected]> * boldened and darkened headers Signed-off-by: Regina Scott <[email protected]>
tkasuz · Mar 11, 2021 · 73af758 · 73af758
1 parent 1b7441d
commit 73af758
Show file tree

Hide file tree

Showing 9 changed files with 22 additions and 17 deletions.
diff --git a/...pplications/components/application-deployment-history/application-deployment-history.scss b/...pplications/components/application-deployment-history/application-deployment-history.scss
@@ -4,7 +4,7 @@
     &__item {
         cursor: pointer;
         position: relative;
-        color: $argo-color-gray-6;
+        color: $argo-color-gray-7;
         border-radius: $border-radius;
         box-shadow: 1px 1px 3px $argo-color-gray-5;
         margin-top: 1em;

diff --git a/ui/src/app/applications/components/application-details/application-details.scss b/ui/src/app/applications/components/application-details/application-details.scss
@@ -87,7 +87,7 @@ $header: 120px;
         top: 10px;
         width: 60px;
         line-height: 1;
-        color: $argo-color-gray-5;
+        color: $argo-color-gray-7;
         font-size: 0.8em;
     }
 
@@ -102,15 +102,15 @@ $header: 120px;
         white-space: nowrap;
         i {
             cursor: pointer;
-            color: $argo-color-gray-4;
+            color: $argo-color-gray-5;
             margin: 0 0.5em;
             &::before {
                 font-size: 1.5em;
             }
         }
         i.selected {
             cursor: default;
-            color: $argo-color-gray-5;
+            color: $argo-color-gray-7;
         }
     }
 

diff --git a/ui/src/app/applications/components/application-resource-tree/application-resource-tree.scss b/ui/src/app/applications/components/application-resource-tree/application-resource-tree.scss
@@ -127,7 +127,7 @@
         top: 8px;
         width: 60px;
         line-height: 1;
-        color: $argo-color-gray-5;
+        color: $argo-color-gray-7;
 
         &--big {
             background: $argo-color-gray-5;

diff --git a/ui/src/app/applications/components/application-status-panel/application-status-panel.scss b/ui/src/app/applications/components/application-status-panel/application-status-panel.scss
@@ -60,7 +60,7 @@
         padding: 5px 20px;
         font-size: 0.8em;
         line-height: 1.2;
-        color: $argo-color-gray-6;
+        color: $argo-color-gray-7;
         display: flex;
         flex-direction: column;
         flex-shrink: 0;
@@ -106,7 +106,7 @@
 
         label {
             display: block;
-            color: $argo-color-gray-6;
+            color: $argo-color-gray-7;
             font-size: 13px;
             margin-right: 10px;
         }
@@ -173,7 +173,6 @@
     }
     &__item-name,
     &__item-value {
-        margin-top: auto;
         overflow: hidden;
         text-overflow: ellipsis;
     }

diff --git a/ui/src/app/applications/components/application-summary/application-summary.scss b/ui/src/app/applications/components/application-summary/application-summary.scss
@@ -45,6 +45,11 @@
         line-height: 1.15;
     }
 
+    .white-box__details p {
+        font-weight: 500;
+        color: $argo-color-gray-7;
+    }
+
     .white-box__details-row .row {
         padding-left: 1em;
         padding-right: 1em;

diff --git a/ui/src/app/applications/components/applications-list/applications-list.scss b/ui/src/app/applications/components/applications-list/applications-list.scss
@@ -29,6 +29,7 @@
         padding-left: 1em;
         border-left: 5px solid $argo-color-gray-4;
         padding-right: 1em;
+        color: $argo-color-gray-7;
 
         // healthy statuses
 
@@ -157,7 +158,7 @@
 
     &__filter-title {
         margin: 0.5em 0 0 0;
-        color: $argo-color-gray-6;
+        color: $argo-color-gray-7;
         text-transform: uppercase;
     }
 
@@ -192,13 +193,13 @@
             left: -1.5em;
             cursor: pointer;
             &:hover {
-                color: $argo-color-gray-6;
+                color: $argo-color-gray-7;
             }
         }
         i.fa-times {
             cursor: pointer;
             position: absolute;
-            color: $argo-color-gray-5;
+            color: $argo-color-gray-7;
             bottom: 0.6em;
             right: 0;
             z-index: 1;

diff --git a/ui/src/app/login/components/login.scss b/ui/src/app/login/components/login.scss
@@ -109,7 +109,7 @@ $logoNegativePath: 'assets/images/argo.png';
         a {
             font-size: 13px;
             text-transform: uppercase;
-            color: $argo-color-gray-6;
+            color: $argo-color-gray-7;
             font-weight: 300;
         }
 
@@ -120,7 +120,7 @@ $logoNegativePath: 'assets/images/argo.png';
 
     &__saml-separator {
         margin-top: 15px;
-        color: $argo-color-gray-6;
+        color: $argo-color-gray-7;
         border-bottom: 1px solid $argo-color-gray-4;
         text-align: center;
         & > span {
@@ -182,7 +182,7 @@ $logoNegativePath: 'assets/images/argo.png';
 
         .ver {
             font-size:12px;
-            color: $argo-color-gray-5;
+            color: $argo-color-gray-7;
         }
 
         &__link {

diff --git a/ui/src/app/settings/components/settings-overview/settings-overview.scss b/ui/src/app/settings/components/settings-overview/settings-overview.scss
@@ -41,7 +41,7 @@
 
         &__description {
             font-size: .8125em;
-            color: $argo-color-gray-6;
+            color: $argo-color-gray-7;
         }
 
         &__arrow {
@@ -50,7 +50,7 @@
             right: 30px;
             transform: translateY(-50%);
             font-size: 1.4em;
-            color: $argo-color-gray-6;
+            color: $argo-color-gray-7;
         }
     }
 }
diff --git a/ui/src/app/shared/components/paginate/paginate.scss b/ui/src/app/shared/components/paginate/paginate.scss
@@ -20,7 +20,7 @@
     li.disabled {
         a {
             cursor: default;
-            color: $argo-color-gray-4;
+            color: $argo-color-gray-5;
         }
     }