theme bugs fixed

react-boilerplate · Apr 16, 2020 · e9a55c1 · e9a55c1
1 parent 5b0ca4b
commit e9a55c1
Show file tree

Hide file tree

Showing 8 changed files with 9 additions and 5 deletions.
diff --git a/src/app/components/NavBar/assets/github-icon.svg b/src/app/components/NavBar/assets/github-icon.svg
diff --git a/src/app/components/NavBar/index.tsx b/src/app/components/NavBar/index.tsx
@@ -30,7 +30,7 @@ const Wrapper = styled.header`
     background-color: ${p =>
       p.theme.background.replace(
         /rgba?(\(\s*\d+\s*,\s*\d+\s*,\s*\d+)(?:\s*,.+?)?\)/,
-        'rgba$1,0.8)',
+        'rgba$1,0.75)',
       )};
   }
 

diff --git a/src/app/containers/GithubRepoForm/RepoItem.tsx b/src/app/containers/GithubRepoForm/RepoItem.tsx
@@ -33,6 +33,7 @@ const Wrapper = styled.div`
   padding: 0 1rem;
   min-height: 2.75rem;
   font-weight: 500;
+  color: ${p => p.theme.text};
 
   &:nth-child(odd) {
     background-color: ${p => p.theme.backgroundVariant};

diff --git a/src/app/containers/HomePage/components/SubTitle.ts b/src/app/containers/HomePage/components/SubTitle.ts
@@ -3,4 +3,5 @@ import styled from 'styled-components/macro';
 export const SubTitle = styled.h3`
   font-size: 1.25rem;
   margin: 0;
+  color: ${p => p.theme.text};
 `;
diff --git a/src/app/containers/ThemeSwitch/components/Radio.tsx b/src/app/containers/ThemeSwitch/components/Radio.tsx
@@ -37,6 +37,7 @@ const Wrapper = styled.div`
       position: relative;
       cursor: pointer;
       font-size: 0.875rem;
+      color: ${p => p.theme.text};
 
       a {
         color: ${p => p.theme.text};

diff --git a/src/app/containers/ThemeSwitch/index.tsx b/src/app/containers/ThemeSwitch/index.tsx
@@ -35,7 +35,7 @@ export function ThemeSwitch() {
       <Themes>
         <Radio
           id="default"
-          label="Default"
+          label="System theme"
           className="radio"
           name="theme"
           onChange={handleThemeChange('default')}

diff --git a/src/styles/global-styles.ts b/src/styles/global-styles.ts
@@ -12,6 +12,7 @@ export const GlobalStyle = createGlobalStyle`
   body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
     padding-top: ${StyleConstants.NAV_BAR_HEIGHT};
+    background-color: ${p => p.theme.background};
   }
 
   body.fontLoaded {

diff --git a/src/styles/theme/themes.ts b/src/styles/theme/themes.ts
@@ -14,8 +14,8 @@ const darkTheme: Theme = {
   textSecondary: 'rgba(241, 233, 231, 0.6)',
   background: 'rgba(0, 0, 0, 1)',
   backgroundVariant: 'rgba(28, 26, 26, 1)',
-  border: 'rgba(241, 233, 231, 0.12)',
-  borderLight: 'rgba(241, 233, 231, 0.5)',
+  border: 'rgba(241, 233, 231, 0.15)',
+  borderLight: 'rgba(241, 233, 231, 0.05)',
 };
 
 export type Theme = typeof lightTheme;