fix: ui dark theme transition #12068

saumeya · 2023-01-21T08:28:13Z

Signed-off-by: saumeya saumeyakatyal@gmail.com

closes #11938

also fixes diff checkboxes "Compact diff" and "Inline diff" are white in white

Note on DCO:

If the DCO action in the integration test fails, one or more of your commits are not signed off. Please click on the Details link next to the DCO action for instructions on how to resolve this.

Checklist:

codecov · 2023-01-21T08:49:27Z

Codecov Report

Patch coverage has no change and project coverage change: -0.15 ⚠️

Comparison is base (67c254e) 49.17% compared to head (6ed04da) 49.03%.

❗ Current head 6ed04da differs from pull request most recent head 2466168. Consider uploading reports for the commit 2466168 to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #12068      +/-   ##
==========================================
- Coverage   49.17%   49.03%   -0.15%     
==========================================
  Files         248      246       -2     
  Lines       42872    42519     -353     
==========================================
- Hits        21084    20849     -235     
+ Misses      19687    19558     -129     
- Partials     2101     2112      +11

see 27 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

ui/src/app/shared/components/layout/layout.tsx

keithchong · 2023-02-21T17:18:06Z

ui/src/app/applications/components/application-resources-diff/application-resources-diff.scss

-            @include themify($themes) {            
-                color: themed('text-2');
-            }
+            color: $argo-color-gray-8;


Question: does this apply for light mode only? (Or, maybe this should not be part of the fix?)

Yeah, it is not related to transition, just a small fix related to compact diff menu

It does relate to dark/light mode change

Ok, the text was not showing.

ciiay

Hi @saumeya I pulled your code and tested locally. I still see the issue of #11938 from time to time when I switch from Settings page to Applications page. Could you confirm if it's fixed for you?

saumeya · 2023-03-23T07:04:34Z

Works for me

www_screencapture_com_2023-3-23_12_34.mp4

ciiay

I confirmed again and it looks fine to me. Just left a small comment.

ciiay · 2023-03-23T17:40:02Z

ui/src/app/shared/components/layout/layout.tsx

+const getBGColor = (theme: string): string => {
+    return theme === 'light' ? '#dee6eb' : '#100f0f';
+};
+


This could be simplified to one line. Also can we use existing colors for the new two colors? For example, ARGO_GRAY4_COLOR is very similar to #dee6eb. Better we don't add more colors to the existing color library.

Suggested change

const getBGColor = (theme: string): string => theme === 'light' ? '#dee6eb' : '#100f0f';

Solved, thanks Yi
I have used the color codes from the existing color library - can't use the name in .tsx file as argo-ui can't be imported.

keithchong

LGTM, excluding the things that Yi mentioned.

keithchong · 2023-04-11T12:43:20Z

/retest

Signed-off-by: saumeya <saumeyakatyal@gmail.com>

n9 · 2023-05-30T10:13:11Z

ui/src/app/shared/components/layout/layout.tsx

 export const Layout = (props: LayoutProps) => (
    <div className={props.pref.theme ? 'theme-' + props.pref.theme : 'theme-light'}>
        <div className={`cd-layout ${props.isExtension ? 'cd-layout--extension' : ''}`}>
            <Sidebar onVersionClick={props.onVersionClick} navItems={props.navItems} pref={props.pref} />
+            {props.pref.theme ? (document.body.style.background = getBGColor(props.pref.theme)) : null}


@saumeya But this will output the color to the body and break the layout.

* fix: ui dark theme transition Signed-off-by: saumeya <saumeyakatyal@gmail.com> * fix checkbox label Signed-off-by: saumeya <saumeyakatyal@gmail.com> * review comments Signed-off-by: saumeya <saumeyakatyal@gmail.com> * fix lint Signed-off-by: saumeya <saumeyakatyal@gmail.com> --------- Signed-off-by: saumeya <saumeyakatyal@gmail.com>

saumeya requested review from rbreeze, ciiay and reginapizza January 21, 2023 08:28

saumeya requested a review from crenshaw-dev January 21, 2023 10:12

saumeya mentioned this pull request Jan 22, 2023

Dark mode appearance improvements #10851

Open

6 tasks

keithchong reviewed Feb 21, 2023

View reviewed changes

ui/src/app/shared/components/layout/layout.tsx Outdated Show resolved Hide resolved

keithchong reviewed Feb 21, 2023

View reviewed changes

saumeya force-pushed the ui-transition-dark-mode branch from 4c1cb75 to dec7af5 Compare March 22, 2023 11:36

saumeya requested a review from keithchong March 22, 2023 12:04

ciiay reviewed Mar 22, 2023

View reviewed changes

ciiay suggested changes Mar 23, 2023

View reviewed changes

ciiay reviewed Mar 23, 2023

View reviewed changes

keithchong reviewed Mar 24, 2023

View reviewed changes

saumeya requested a review from ciiay March 27, 2023 07:13

rbreeze approved these changes Mar 30, 2023

View reviewed changes

rbreeze enabled auto-merge (squash) March 30, 2023 15:27

keithchong approved these changes May 23, 2023

View reviewed changes

rbreeze approved these changes May 23, 2023

View reviewed changes

saumeya added 4 commits May 24, 2023 15:24

fix: ui dark theme transition

e093193

Signed-off-by: saumeya <saumeyakatyal@gmail.com>

fix checkbox label

19699ac

Signed-off-by: saumeya <saumeyakatyal@gmail.com>

review comments

c9d3e68

Signed-off-by: saumeya <saumeyakatyal@gmail.com>

fix lint

2466168

Signed-off-by: saumeya <saumeyakatyal@gmail.com>

auto-merge was automatically disabled May 24, 2023 09:57
Head branch was pushed to by a user without write access

saumeya force-pushed the ui-transition-dark-mode branch from 6ed04da to 2466168 Compare May 24, 2023 09:57

saumeya added the cherry-pick/2.7 Candidate for cherry picking into the 2.7 release branch label May 24, 2023

keithchong merged commit 0a8a71e into argoproj:master May 24, 2023

n9 reviewed May 30, 2023

View reviewed changes

n9 added a commit to n9/argo-cd that referenced this pull request May 30, 2023

fix for argoproj#12068

fcb9e18

This was referenced May 30, 2023

Argo CD Release v2.8 #13742

Closed

Layout is more broken in 2.8 #13827

Open

n9 added a commit to n9/argo-cd that referenced this pull request Aug 17, 2023

fix for argoproj#12068

edb9943

n9 added a commit to n9/argo-cd that referenced this pull request Aug 17, 2023

fix for argoproj#12068

87f01e2

djeebus mentioned this pull request Sep 6, 2023

fix: resolve the double scroll bars in the application view. fixes #14588 #15384

Closed

13 tasks

n9 added a commit to n9/argo-cd that referenced this pull request Sep 30, 2023

fix for argoproj#12068

acabcc8

n9 added a commit to n9/argo-cd that referenced this pull request Oct 2, 2023

fix for argoproj#12068

acf029f

n9 added a commit to n9/argo-cd that referenced this pull request Oct 2, 2023

fix for argoproj#12068

8d20d1d

n9 added a commit to n9/argo-cd that referenced this pull request Oct 19, 2023

fix for argoproj#12068

865c031

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: ui dark theme transition #12068

fix: ui dark theme transition #12068

saumeya commented Jan 21, 2023 •

edited

Loading

codecov bot commented Jan 21, 2023 •

edited

Loading

keithchong Feb 21, 2023 •

edited

Loading

saumeya Mar 22, 2023

saumeya Mar 22, 2023

keithchong Mar 24, 2023

ciiay left a comment

saumeya commented Mar 23, 2023

ciiay left a comment

ciiay Mar 23, 2023

saumeya Mar 24, 2023

keithchong left a comment

keithchong commented Apr 11, 2023

n9 May 30, 2023


	const getBGColor = (theme: string): string => theme === 'light' ? '#dee6eb' : '#100f0f';

fix: ui dark theme transition #12068

fix: ui dark theme transition #12068

Conversation

saumeya commented Jan 21, 2023 • edited Loading

codecov bot commented Jan 21, 2023 • edited Loading

Codecov Report

keithchong Feb 21, 2023 • edited Loading

Choose a reason for hiding this comment

saumeya Mar 22, 2023

Choose a reason for hiding this comment

saumeya Mar 22, 2023

Choose a reason for hiding this comment

keithchong Mar 24, 2023

Choose a reason for hiding this comment

ciiay left a comment

Choose a reason for hiding this comment

saumeya commented Mar 23, 2023

ciiay left a comment

Choose a reason for hiding this comment

ciiay Mar 23, 2023

Choose a reason for hiding this comment

saumeya Mar 24, 2023

Choose a reason for hiding this comment

keithchong left a comment

Choose a reason for hiding this comment

keithchong commented Apr 11, 2023

n9 May 30, 2023

Choose a reason for hiding this comment

saumeya commented Jan 21, 2023 •

edited

Loading

codecov bot commented Jan 21, 2023 •

edited

Loading

keithchong Feb 21, 2023 •

edited

Loading