fix(ui): Dark theme improvements (argoproj#15891)

Signed-off-by: Rafal Pelczar <rafal@akuity.io> Signed-off-by: jmilic1 <70441727+jmilic1@users.noreply.github.com>
jmilic1 · Nov 13, 2023 · 5dc66d4 · 5dc66d4
1 parent 2ba05e4
commit 5dc66d4
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 7 deletions.
diff --git a/ui/src/app/app.tsx b/ui/src/app/app.tsx
@@ -217,7 +217,9 @@ export class App extends React.Component<
                 </Helmet>
                 <PageContext.Provider value={{title: 'Argo CD'}}>
                     <Provider value={{history, popup: this.popupManager, notifications: this.notificationsManager, navigation: this.navigationManager, baseHref: base}}>
-                        {this.state.popupProps && <Popup {...this.state.popupProps} />}
+                        <DataLoader load={() => services.viewPreferences.getPreferences()}>
+                            {pref => <div className={pref.theme ? 'theme-' + pref.theme : 'theme-light'}>{this.state.popupProps && <Popup {...this.state.popupProps} />}</div>}
+                        </DataLoader>
                         <AuthSettingsCtx.Provider value={this.state.authSettings}>
                             <Router history={history}>
                                 <Switch>

diff --git a/ui/src/app/applications/components/application-details/application-details.scss b/ui/src/app/applications/components/application-details/application-details.scss
@@ -1,5 +1,6 @@
 @import 'node_modules/argo-ui/src/styles/config';
 @import 'node_modules/foundation-sites/scss/util/util';
+@import 'node_modules/argo-ui/src/styles/theme';
 @import '../../../shared/config.scss';
 
 $header: 120px;
@@ -211,9 +212,14 @@ $header: 120px;
         z-index: 1;
         padding: 5px;
         display: inline-block;
-        background-color: $argo-color-gray-1;
         box-shadow: 1px 1px 3px $argo-color-gray-5;
         position: absolute;
+
+        @include themify($themes) {
+            background: themed('background-2');
+        }
+
+
         a {
             padding: 5px;
             margin: 2px;
@@ -255,7 +261,9 @@ $header: 120px;
         }
 
         .separator {
-            border-right: 1px solid $argo-color-gray-4;
+            @include themify($themes) {
+                border-right: 1px solid themed('border');
+            }
             padding-top: 6px;
             padding-bottom: 6px;
         }

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
@@ -79,6 +79,10 @@
         border: 1px solid transparent;
         cursor: pointer;
 
+        .theme-dark & {
+            box-shadow: 1px 1px 1px $argo-color-gray-7;
+        }
+
         .icon {
             font-size: 2em;
         }
@@ -120,6 +124,10 @@
             }
             margin-top: 9px;
             margin-left: 215px;
+
+            .theme-dark & {
+                box-shadow: 1px 1px 1px $argo-color-gray-7;
+            }
         }
 
         &--podgroup--expansion {
@@ -131,6 +139,10 @@
             box-shadow: 1px 1px 1px $argo-color-gray-4;
             background-color: white;
             margin-left: 215px;
+
+            .theme-dark & {
+                box-shadow: 1px 1px 1px $argo-color-gray-7;
+            }
         }
 
         &--pod {
@@ -348,8 +360,12 @@
             border-radius: 33px;
             left: -20px;
             top: -8px;
-            border: 4px solid white;
             text-align: center;
+
+            @include themify($themes) {
+                border: 4px solid themed('background-2');
+            }
+
             i {
                 color: $white-color;
                 line-height: 56px;

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
@@ -101,7 +101,9 @@
         }
 
         &:not(:first-child) {
-            border-left: 1px solid $argo-color-gray-3;
+            @include themify($themes) {
+                border-left: 1px solid themed('border');
+            }
         }
 
         & {

diff --git a/ui/src/app/applications/components/applications-list/applications-list.scss b/ui/src/app/applications/components/applications-list/applications-list.scss
@@ -118,9 +118,9 @@
     }
 
     &__search {
-        border: 1px solid $argo-color-gray-4;
         @include themify($themes) {
             background-color: themed('light-argo-gray-2');
+            border: 1px solid themed('border');
         }
         border-radius: 7px;
         position: relative;

diff --git a/ui/src/app/applications/components/utils.scss b/ui/src/app/applications/components/utils.scss
@@ -1,3 +1,5 @@
+@import 'node_modules/argo-ui/src/styles/theme';
+
 .propagation-policy-list {
     display: flex;
     justify-content: left;
@@ -9,9 +11,12 @@
     padding-right: 2em;
 
     label {
-        color: #6D7F8B;
         font-size: 15px;
         cursor: pointer;
+
+        @include themify($themes) {
+            color: themed('light-argo-gray-6');        
+        }
     }
 
     input {