feat: dark mode (argoproj#4722) (argoproj#9703)

* feat: enable dark theme in ui Signed-off-by: saumeya <[email protected]> * add more theme styles Signed-off-by: saumeya <[email protected]> * remove package lock Signed-off-by: saumeya <[email protected]> * improvements Signed-off-by: saumeya <[email protected]> * improvements Signed-off-by: saumeya <[email protected]> * cleanup Signed-off-by: saumeya <[email protected]> * fix review comments Signed-off-by: saumeya <[email protected]> * update argo-ui sha Signed-off-by: saumeya <[email protected]> * update moment yarn.lock Signed-off-by: saumeya <[email protected]> update moment yarn.lock Signed-off-by: saumeya <[email protected]> update moment yarn.lock Signed-off-by: saumeya <[email protected]> * fix review comments Signed-off-by: saumeya <[email protected]> Signed-off-by: saumeya <[email protected]>
tkasuz · Sep 17, 2022 · da9063b · da9063b
1 parent 158e92c
commit da9063b
Show file tree

Hide file tree

Showing 23 changed files with 457 additions and 293 deletions.
diff --git a/ui/src/app/app.tsx b/ui/src/app/app.tsx
@@ -184,28 +184,33 @@ export class App extends React.Component<{}, {popupProps: PopupProps; showVersio
                                                         <route.component {...routeProps} />
                                                     </div>
                                                 ) : (
-                                                    <Layout
-                                                        navItems={navItems}
-                                                        version={() => (
-                                                            <DataLoader load={() => versionLoader}>
-                                                                {version => {
-                                                                    const versionString = version ? version.Version : 'Unknown';
-                                                                    return (
-                                                                        <React.Fragment>
-                                                                            <Tooltip content={versionString}>
-                                                                                <a style={{color: 'white'}} onClick={() => this.setState({showVersionPanel: true})}>
-                                                                                    {versionString}
-                                                                                </a>
-                                                                            </Tooltip>
-                                                                        </React.Fragment>
-                                                                    );
-                                                                }}
-                                                            </DataLoader>
-                                                        )}>
-                                                        <Banner>
-                                                            <route.component {...routeProps} />
-                                                        </Banner>
-                                                    </Layout>
+                                                    <DataLoader load={() => services.viewPreferences.getPreferences()}>
+                                                        {pref => (
+                                                            <Layout
+                                                                navItems={navItems}
+                                                                theme={pref.theme}
+                                                                version={() => (
+                                                                    <DataLoader load={() => versionLoader}>
+                                                                        {version => {
+                                                                            const versionString = version ? version.Version : 'Unknown';
+                                                                            return (
+                                                                                <React.Fragment>
+                                                                                    <Tooltip content={versionString}>
+                                                                                        <a style={{color: 'white'}} onClick={() => this.setState({showVersionPanel: true})}>
+                                                                                            {versionString}
+                                                                                        </a>
+                                                                                    </Tooltip>
+                                                                                </React.Fragment>
+                                                                            );
+                                                                        }}
+                                                                    </DataLoader>
+                                                                )}>
+                                                                <Banner>
+                                                                    <route.component {...routeProps} />
+                                                                </Banner>
+                                                            </Layout>
+                                                        )}
+                                                    </DataLoader>
                                                 )
                                             }
                                         />

diff --git a/...pplications/components/application-deployment-history/application-deployment-history.scss b/...pplications/components/application-deployment-history/application-deployment-history.scss
@@ -1,14 +1,17 @@
 @import 'node_modules/argo-ui/src/styles/config';
+@import 'node_modules/argo-ui/src/styles/theme';
 
 .application-deployment-history {
     &__item {
         cursor: pointer;
         position: relative;
-        color: $argo-color-gray-7;
+        @include themify($themes) {
+            background: themed('background-2');
+            color: themed('text-1');
+        }
         border-radius: $border-radius;
         box-shadow: 1px 1px 3px $argo-color-gray-5;
         margin-top: 1em;
-        background: white;
         overflow: hidden;
 
         & > .columns {
@@ -17,8 +20,11 @@
 
         & > .columns:first-child {
             border-top-left-radius: $border-radius;
-            border-bottom-left-radius: $border-radius;
-            background-color: $argo-color-teal-1;
+            border-bottom-left-radius: $border-radius;            
+            @include themify($themes) {
+                background: themed('light-argo-teal-1');
+                color: themed('text-2');
+            }
         }
     }
 

diff --git a/ui/src/app/applications/components/application-details/application-details.scss b/ui/src/app/applications/components/application-details/application-details.scss
@@ -273,6 +273,7 @@ $header: 120px;
             border: 1px $argo-color-gray-5 solid;
             background-color: $argo-color-gray-3;
             padding: 2px;
+            color: $argo-color-gray-7;
         }
      }  
 }
diff --git a/ui/src/app/applications/components/application-node-info/application-node-info.scss b/ui/src/app/applications/components/application-node-info/application-node-info.scss
@@ -36,6 +36,7 @@
         text-align: right;
         label {
             padding-right: 2em;
+            color: $argo-color-gray-8;
         }
     }
 }
diff --git a/ui/src/app/applications/components/application-pod-view/pod-view.scss b/ui/src/app/applications/components/application-pod-view/pod-view.scss
@@ -58,6 +58,7 @@ $num-stats: 2;
             div {
                 border-radius: 3px;
                 background-color: $argo-color-gray-3;
+                color: $argo-color-gray-7;
                 margin-right: 5px;
                 padding: 3px 5px;
             }
@@ -66,7 +67,8 @@ $num-stats: 2;
             margin: 1em 0;
             padding: 10px;
             border-radius: 3px;
-            background-color: $argo-color-gray-3;
+            background-color: $argo-color-gray-3;                            
+            color: $argo-color-gray-6;
             div {
                 display: flex;
                 & div:last-child {

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
@@ -1,4 +1,5 @@
 @import 'node_modules/argo-ui/src/styles/config';
+@import 'node_modules/argo-ui/src/styles/theme';
 
 .application-resource-tree {
     position: relative;
@@ -70,7 +71,10 @@
         padding-right: 1em;
         margin: 10px;
         box-shadow: 1px 1px 1px $argo-color-gray-4;
-        background-color: white;
+        @include themify($themes) {                  
+            background-color: themed('background-2');
+            color: themed('text-2');
+        }
         border-radius: 4px;
         border: 1px solid transparent;
         cursor: pointer;
@@ -104,7 +108,9 @@
             font-size: 0.5em;
             padding: 2px;
             box-shadow: 1px 1px 1px $argo-color-gray-4;
-            background-color: white;
+            @include themify($themes) {                  
+                background-color: themed('background-2');
+            }
             margin-top: 9px;
             margin-left: 215px;
         }
@@ -121,7 +127,9 @@
         }
 
         &--pod {
-            background-color: lightcyan;
+            @include themify($themes) {                  
+                background-color: themed('pod-cyan') !important;
+            }
         }
 
         &--lower-section {
@@ -346,6 +354,7 @@
 
     &__node-label {
         background-color: $argo-color-gray-4;
+        color: $argo-color-gray-7;
         border: 1px solid $argo-color-gray-5;
         border-radius: 5px;
         padding: 0 5px;
@@ -356,6 +365,7 @@
 
     &__node-kind {
         font-size: 0.7em;
+        color: $argo-color-gray-6;
     }
 
     &__node-content {

diff --git a/...rc/app/applications/components/application-resources-diff/application-resources-diff.scss b/...rc/app/applications/components/application-resources-diff/application-resources-diff.scss
@@ -1,8 +1,14 @@
+@import 'node_modules/argo-ui/src/styles/config';
+@import 'node_modules/argo-ui/src/styles/theme';
+
 .application-resources-diff {
     &__checkboxes {
         text-align: right;
         label {
             padding-right: 2em;
+            @include themify($themes) {            
+                color: themed('text-2');
+            }
         }
     }
     &__diff {
@@ -21,3 +27,7 @@
         }
     }
 }
+
+.custom-diff-hunk {           
+    color: $argo-color-gray-6;
+}
diff --git a/ui/src/app/applications/components/application-resources-diff/individual-diff-section.tsx b/ui/src/app/applications/components/application-resources-diff/individual-diff-section.tsx
@@ -25,7 +25,7 @@ export const IndividualDiffSection = (props: IndividualDiffSectionProps) => {
             )}
             {!collapsed && (
                 <Diff viewType={viewType} diffType={file.type} hunks={file.hunks}>
-                    {(hunks: any) => hunks.map((hunk: any) => <Hunk key={hunk.content} hunk={hunk} />)}
+                    {(hunks: any) => hunks.map((hunk: any) => <Hunk className={'custom-diff-hunk'} key={hunk.content} hunk={hunk} />)}
                 </Diff>
             )}
         </div>

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
@@ -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';
 
 .help-tip {
     color: $argo-color-gray-4;
@@ -25,8 +26,10 @@
 
 .application-status-panel {
     font-size: 0.875em;
-    color: $argo-color-gray-7;
-    background-color: white;
+    @include themify($themes) {                  
+        background-color: themed('background-2');
+        color: themed('text-1');
+    }
     box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
     flex-wrap: nowrap;
     flex-shrink: 1;
@@ -60,7 +63,9 @@
         padding: 5px 20px;
         font-size: 0.8em;
         line-height: 1.2;
-        color: $argo-color-gray-7;
+        @include themify($themes) {     
+           color: themed('text-1');
+        }
         display: flex;
         flex-direction: column;
         flex-shrink: 0;
@@ -110,7 +115,9 @@
 
         label {
             display: block;
-            color: $argo-color-gray-7;
+            @include themify($themes) {                
+                color: themed('text-1');
+            }
             font-size: 13px;
             margin-right: 10px;
         }
@@ -127,8 +134,9 @@
         }
 
         font-size: 2em;
-        color: $argo-color-gray-7;
-
+        @include themify($themes) {   
+            color: themed('text-1');
+        }
         &--highlight {
             color: $argo-color-teal-6;
         }
@@ -153,7 +161,9 @@
 
         &__revision {
             font-size: 14px;
-            color: $argo-color-gray-7;
+            @include themify($themes) { 
+                color: themed('text-1');
+            }
             font-weight: 500;
             margin-left: auto;
             padding-left: 5px;

diff --git a/ui/src/app/applications/components/application-summary/application-summary.scss b/ui/src/app/applications/components/application-summary/application-summary.scss
@@ -1,4 +1,5 @@
 @import 'node_modules/argo-ui/src/styles/config';
+@import 'node_modules/argo-ui/src/styles/theme';
 
 .application-summary {
     &__labels {
@@ -47,7 +48,9 @@
 
     .white-box__details p {
         font-weight: 500;
-        color: $argo-color-gray-7;
+        @include themify($themes) {            
+            color: themed('text-1');
+        }
     }
 
     .white-box__details-row .row {

diff --git a/ui/src/app/applications/components/applications-list/applications-labels.scss b/ui/src/app/applications/components/applications-list/applications-labels.scss
@@ -9,6 +9,7 @@
 .application-labels {
     .application-labels__item {
         background-color: $argo-color-gray-4;
+        color: $argo-color-gray-8;
         border-radius: 5px;
         padding: 0 2px;
         margin-right: 2px;

diff --git a/ui/src/app/applications/components/applications-list/applications-list.scss b/ui/src/app/applications/components/applications-list/applications-list.scss
@@ -1,12 +1,16 @@
 @import 'node_modules/argo-ui/src/styles/config';
 @import 'node_modules/foundation-sites/scss/util/util';
+@import 'node_modules/argo-ui/src/styles/theme';
 
 .applications-list {
     padding: 1em;
+    min-height: 88vh;
     &__title {
         font-weight: bolder;
         font-size: 15px;
-        color: $argo-color-gray-7;
+        @include themify($themes) {           
+            color: themed('text-1');
+        }
         padding-top: 0.25em;
         padding-bottom: 0.5em;
         margin-left: 1em;
@@ -112,7 +116,9 @@
 
     &__search {
         border: 1px solid $argo-color-gray-4;
-        background-color: $argo-color-gray-2;
+        @include themify($themes){
+            background-color: themed('light-argo-gray-2');
+        }
         border-radius: 7px;
         position: relative;
         padding: 0 10px;

diff --git a/ui/src/app/applications/components/filter/filter.scss b/ui/src/app/applications/components/filter/filter.scss
@@ -1,8 +1,12 @@
 @import 'node_modules/argo-ui/src/styles/config';
 @import 'node_modules/foundation-sites/scss/util/util';
+@import 'node_modules/argo-ui/src/styles/theme';
 
 .filter {
-    background-color: white;
+    @include themify($themes) {
+        background: themed('background-2');
+        color: themed('text-2');
+    }
     padding: 10px;
     box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.1);
     border-radius: 5px;
@@ -50,7 +54,10 @@
         border-radius: 5px;
         display: flex;
         align-items: center;
-        background-color: white;
+        @include themify($themes) {
+            background: themed('background-2');
+            color: themed('text-2');
+        }
         transition: background-color 200ms ease;
         margin: 0.25em 0;
         cursor: pointer;
@@ -87,7 +94,10 @@
 
     &__panel {
         transition: width 0.2s ease-in-out;
-        background-color: $argo-color-gray-3;
+        @include themify($themes) {
+            background: themed('background-1');
+            color: themed('text-1');
+        }
         box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.1);
         padding: 10px;
         overflow-y: hidden;

diff --git a/ui/src/app/applications/components/resource-details/resource-details.scss b/ui/src/app/applications/components/resource-details/resource-details.scss
@@ -1,4 +1,5 @@
 @import 'node_modules/argo-ui/src/styles/config';
+@import 'node_modules/argo-ui/src/styles/theme';
 
 .resource-details {
     &__header {
@@ -7,7 +8,9 @@
         align-items: center;
         padding-right: 48px;
         h1 {
-            color: $argo-color-gray-8;
+            @include themify($themes){
+                color: themed('text-2');
+            }
             font-size: 23px;
             font-weight: 500;
             margin-right: 5px;