fix(signup): switch primary button text color between light and dark …

…mode make the button label legible against the background
masakudamatsu · Jun 4, 2023 · ffe8f5c · ffe8f5c
1 parent 7688e19
commit ffe8f5c
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 2 deletions.
diff --git a/src/elements/ComposeLoginPage.js b/src/elements/ComposeLoginPage.js
@@ -65,7 +65,7 @@ const styleButton = `
   & a[data-button-purpose="signup"],
   & button[data-button-purpose="signup"] {
     background-color: var(--dialog-button-color);
-    color: white; /* TODO #344: Make button label text see-through the background */
+    color: var(--primary-button-text-color); /* TODO #344: Make button label text see-through the background */
     width: 100%;
   }
 `;

diff --git a/src/elements/ComposeLoginPage.test.js b/src/elements/ComposeLoginPage.test.js
@@ -75,7 +75,7 @@ describe('ComposeLoginPage component', () => {
 .c0 a[data-button-purpose="signup"],
 .c0 button[data-button-purpose="signup"] {
   background-color: var(--dialog-button-color);
-  color: white;
+  color: var(--primary-button-text-color);
   width: 100%;
 }
 

diff --git a/src/elements/GlobalStyle.js b/src/elements/GlobalStyle.js
@@ -35,6 +35,7 @@ const setColorScheme = `
     --button-shadow-color: ${color['black 33']};
     --button-shadow-color-focus: ${color['focus-blue 100']};
     --dialog-button-color: ${color['google-blue 100']};
+    --primary-button-text-color: ${color['white 93']};
     --link-text-color: ${color['google-blue 100']};
     --menu-border-color: ${color['google-blue 100']};
     --menu-item-color: ${color['dark-grey 100']};
@@ -58,6 +59,7 @@ const setColorScheme = `
     --button-shadow-color: ${color['black 60']};
     --button-shadow-color-focus: ${color['white 100']};
     --dialog-button-color: ${color['moonlight 100']};
+    --primary-button-text-color: #5c5c5c;
     --link-text-color: ${color['moonlight 100']}; 
     --menu-border-color: ${color['moonlight 100']};
     --menu-item-color: ${color['off-white 100']};