udpate theme to match UI kit

wri · May 18, 2020 · ae0a018 · ae0a018
1 parent afb0bca
commit ae0a018
Show file tree

Hide file tree

Showing 20 changed files with 65 additions and 68 deletions.
diff --git a/src/components/button/styles.js b/src/components/button/styles.js
@@ -84,44 +84,44 @@ export const ButtonParent = styled.button`
     light &&
     `
     background-color: ${theme.colors.white};
-    color: ${theme.colors.slateDark};
+    color: ${theme.colors.darkestGrey};
     border: solid 1px ${theme.colors.green};
 
     &:hover {
-      background-color: ${theme.colors.lightGrey};
+      background-color: #F6F6F4;
     }
 
     svg {
-      fill: ${theme.colors.slateDark};
+      fill: ${theme.colors.darkestGrey};
     }
   `}
 
   ${({ dark }) =>
     dark &&
     `
-    background-color: ${theme.colors.slate};
+    background-color: ${theme.colors.darkGrey};
 
     &:hover {
-      background-color: ${theme.colors.slateDark};
+      background-color: ${theme.colors.darkestGrey};
     }
   `}
 
   ${({ clear }) =>
     clear &&
     `
     background-color: transparent;
-    color: ${theme.colors.slate};
+    color: ${theme.colors.darkGrey};
 
     svg {
-      fill: ${theme.colors.slate};
+      fill: ${theme.colors.darkGrey};
     }
 
     &:hover {
       background-color: transparent;
-      color: ${theme.colors.slateDark};
+      color: ${theme.colors.darkestGrey};
 
       svg {
-        fill: ${theme.colors.slateDark};
+        fill: ${theme.colors.darkestGrey};
       }
     }
   `}

diff --git a/src/components/carousel/styles.js b/src/components/carousel/styles.js
@@ -179,7 +179,7 @@ export const CarouselWrapper = styled.div`
         width: 10px;
         height: 10px;
         cursor: pointer;
-        background-color: ${theme.colors.darkGrey};
+        background-color: #d6d6d9;
         border-radius: 50%;
       }
 

diff --git a/src/components/footer/styles.js b/src/components/footer/styles.js
@@ -19,11 +19,11 @@ export const FooterWrapper = styled.div`
 
         a {
           font-size: 14px;
-          color: ${theme.colors.slate};
+          color: ${theme.colors.darkGrey};
           text-transform: uppercase;
 
           &:hover {
-            color: ${darken(0.2, theme.colors.slate)};
+            color: ${darken(0.2, theme.colors.darkGrey)};
             text-decoration: underline;
           }
         }
@@ -99,7 +99,7 @@ export const FooterWrapper = styled.div`
   .footer-partners {
     p {
       font-size: 14px;
-      color: ${theme.colors.slate};
+      color: ${theme.colors.darkGrey};
     }
 
     .footer-wri {

diff --git a/src/components/forms/components/checkbox/styles.js b/src/components/forms/components/checkbox/styles.js
@@ -12,7 +12,7 @@ export const CheckboxWrapper = styled.div`
       cursor: pointer;
       padding-left: 10px;
       font-size: 14px;
-      ${theme.colors.slate};
+      ${theme.colors.darkGrey};
     }
   }
 
@@ -21,7 +21,7 @@ export const CheckboxWrapper = styled.div`
     width: 25px;
     height: 25px;
     min-width: 25px;
-    border: 1px solid ${theme.colors.border};
+    border: 1px solid ${theme.colors.lightGrey};
     appearance: none;
     color: ${theme.colors.green};
     cursor: pointer;

diff --git a/src/components/forms/components/input-tags/styles.js b/src/components/forms/components/input-tags/styles.js
@@ -5,9 +5,9 @@ export const TagsWrapper = styled.div`
   > div {
     border-radius: 4px;
     background-color: transparent;
-    border: solid 1px ${theme.colors.border};
+    border: solid 1px ${theme.colors.lightGrey};
     outline: none;
-    color: ${theme.colors.slate};
+    color: ${theme.colors.darkGrey};
     min-height: 40px;
     width: 100%;
     display: flex;

diff --git a/src/components/forms/components/input/styles.js b/src/components/forms/components/input/styles.js
@@ -6,12 +6,12 @@ const baseCss = css`
   border: none;
   background-color: transparent;
   font-size: 14px;
-  color: ${theme.colors.slate};
+  color: ${theme.colors.darkGrey};
   font-family: inherit;
   appearance: none;
   box-sizing: border-box;
   border-radius: 4px;
-  border: solid 1px ${theme.colors.border};
+  border: solid 1px ${theme.colors.lightGrey};
   height: 40px;
   padding: 0 12px;
   width: 100%;
@@ -35,4 +35,4 @@ export const TextareaEl = styled.textarea`
   padding: 12px;
   line-height: 1.5;
   resize: none;
-`;
+`;
diff --git a/src/components/forms/components/radio/styles.js b/src/components/forms/components/radio/styles.js
@@ -12,7 +12,7 @@ export const RadioWrapper = styled.div`
     cursor: pointer;
     margin-bottom: 5px;
     font-size: 14px;
-    ${theme.colors.slate};
+    ${theme.colors.darkGrey};
 
     span {
       display: flex;
@@ -21,7 +21,7 @@ export const RadioWrapper = styled.div`
       width: 16px;
       height: 16px;
       border-radius: 100%;
-      border: solid 1px ${theme.colors.slate};
+      border: solid 1px ${theme.colors.darkGrey};
       margin-right: 10px;
 
       &::after {

diff --git a/src/components/forms/components/select/styles.js b/src/components/forms/components/select/styles.js
@@ -9,9 +9,9 @@ export const SelectWrapper = styled.div`
     appearance: none;
     border-radius: 4px;
     background-color: transparent;
-    border: solid 1px ${theme.colors.border};
+    border: solid 1px ${theme.colors.lightGrey};
     outline: none;
-    color: ${theme.colors.slate};
+    color: ${theme.colors.darkGrey};
     width: 100%;
     height: 40px;
     padding: 0 32px 0 12px;

diff --git a/src/components/header/components/dropdown-menu/styles.js b/src/components/header/components/dropdown-menu/styles.js
@@ -25,7 +25,7 @@ export const DropdownWrapper = styled.div`
     left: -70%;
     background-color: ${theme.colors.white};
     width: 200px;
-    border: solid 1px ${theme.colors.border};
+    border: solid 1px ${theme.colors.lightGrey};
     z-index: 1;
 
     > li {
@@ -48,7 +48,7 @@ export const DropdownWrapper = styled.div`
         text-transform: uppercase;
         font-size: 14px;
         width: 100%;
-        color: ${theme.colors.slate};
+        color: ${theme.colors.darkGrey};
         text-align: left;
 
         > button {

diff --git a/src/components/header/components/nav-alt/styles.js b/src/components/header/components/nav-alt/styles.js
@@ -10,7 +10,7 @@ export const NavAltWrapper = styled.div`
   ${({ showMenu }) =>
     showMenu &&
     `
-    border-left: solid 1px ${theme.colors.border};
+    border-left: solid 1px ${theme.colors.lightGrey};
   `}
 
   .lang-selector {

diff --git a/src/components/header/components/submenu-panel/styles.js b/src/components/header/components/submenu-panel/styles.js
@@ -75,7 +75,7 @@ export const SubmenuWrapper = styled.div`
   .menu-section {
     padding-bottom: 30px;
     margin-bottom: 30px;
-    border-bottom: solid 1px ${theme.colors.border};
+    border-bottom: solid 1px ${theme.colors.lightGrey};
 
     .apps-slider {
       overflow-x: auto;
@@ -102,7 +102,7 @@ export const SubmenuWrapper = styled.div`
       }
 
       .all-apps {
-        border: solid 1px ${theme.colors.border};
+        border: solid 1px ${theme.colors.lightGrey};
         padding: 10px;
         display: flex;
         flex-direction: column;
@@ -112,7 +112,7 @@ export const SubmenuWrapper = styled.div`
         text-transform: uppercase;
         text-align: center;
         font-weight: 400;
-        color: ${theme.colors.slate};
+        color: ${theme.colors.darkGrey};
         width: 90px;
         height: 90px;
 
@@ -134,7 +134,7 @@ export const SubmenuWrapper = styled.div`
           display: flex;
           align-items: center;
           font-size: 12px;
-          color: ${theme.colors.slate};
+          color: ${theme.colors.darkGrey};
           text-transform: uppercase;
           padding: 0;
           cursor: pointer;
@@ -147,7 +147,7 @@ export const SubmenuWrapper = styled.div`
           }
 
           &:hover {
-            color: ${darken(0.2, theme.colors.slate)};
+            color: ${darken(0.2, theme.colors.darkGrey)};
             text-decoration: underline;
           }
         }

diff --git a/src/components/header/styles.js b/src/components/header/styles.js
@@ -14,7 +14,7 @@ export const HeaderWrapper = styled.div`
   background: ${theme.colors.white};
   position: relative;
   width: 100%;
-  border-bottom: solid 1px ${theme.colors.border};
+  border-bottom: solid 1px ${theme.colors.lightGrey};
   z-index: 1000;
 
   .logo {
@@ -83,7 +83,7 @@ export const HeaderWrapper = styled.div`
       height: 100%;
       display: flex;
       align-items: center;
-      color: ${theme.colors.slate};
+      color: ${theme.colors.darkGrey};
       font-size: 14px;
       text-transform: uppercase;
       text-decoration: none;
@@ -93,16 +93,16 @@ export const HeaderWrapper = styled.div`
       white-space: nowrap;
 
       svg {
-        fill: ${theme.colors.slate};
+        fill: ${theme.colors.darkGrey};
         margin-top: -2px;
         transition: all 150ms ease-out;
       }
 
       &:hover {
-        color: ${darken(0.2, theme.colors.slate)};
+        color: ${darken(0.2, theme.colors.darkGrey)};
 
         svg {
-          fill: ${darken(0.2, theme.colors.slate)};
+          fill: ${darken(0.2, theme.colors.darkGrey)};
         }
       }
 

diff --git a/src/components/loader/styles.js b/src/components/loader/styles.js
@@ -22,7 +22,7 @@ export const LoaderWrapper = styled.div`
     min-width: 38px;
     animation: rotate 1s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
     border: 5px solid transparent;
-    border-top-color: ${rgba(theme.colors.slate, 0.7)};
+    border-top-color: ${rgba(theme.colors.darkGrey, 0.7)};
     border-radius: 50%;
   }
 
@@ -36,7 +36,7 @@ export const LoaderWrapper = styled.div`
   ${({ light }) =>
     light &&
     `
-    background-color:  ${rgba(theme.colors.slateDark, 0.5)};
+    background-color:  ${rgba(theme.colors.darkestGrey, 0.5)};
 
     .spinner {
       border-top-color: ${theme.colors.white};

diff --git a/src/components/modals/meta/styles.js b/src/components/modals/meta/styles.js
@@ -32,7 +32,7 @@ export const MetaModalWrapper = styled.div`
   p {
     margin-bottom: 10px;
     font-size: 14px;
-    color: ${theme.colors.slate};
+    color: ${theme.colors.darkGrey};
 
     a {
       font-size: 14px;
@@ -52,7 +52,7 @@ export const MetaModalWrapper = styled.div`
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-start;
-    border-top: solid 1px ${theme.colors.border};
+    border-top: solid 1px ${theme.colors.lightGrey};
     margin-bottom: 30px;
 
     ${theme.mediaQueries.small} {
@@ -65,15 +65,15 @@ export const MetaModalWrapper = styled.div`
     flex-direction: column;
     justify-content: space-between;
     align-items: flex-start;
-    border-bottom: solid 1px ${theme.colors.border};
+    border-bottom: solid 1px ${theme.colors.lightGrey};
     width: 100%;
 
     ${theme.mediaQueries.small} {
       flex-direction: row;
     }
 
     &.dark {
-      background-color: ${theme.colors.lightGrey};
+      background-color: #f6f6f4;
     }
 
     .title-column {
@@ -133,7 +133,7 @@ export const MetaModalWrapper = styled.div`
 
   ul,
   ol {
-    color: ${theme.colors.slate};
+    color: ${theme.colors.darkGrey};
     font-size: 14px;
   }
 
@@ -142,7 +142,7 @@ export const MetaModalWrapper = styled.div`
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    border-top: solid 1px ${theme.colors.border};
+    border-top: solid 1px ${theme.colors.lightGrey};
     background-color: #e5e5df;
     margin: 0 -30px -30px;
     margin-left: -25px;

diff --git a/src/components/pill/styles.js b/src/components/pill/styles.js
@@ -27,7 +27,7 @@ export const PillWrapper = styled.div`
   ${({ active }) =>
     active &&
     `
-    background-color: ${theme.colors.greyishBrown};
+    background-color: #4a4a4a;
   `}
 
   ${({ removable }) =>

diff --git a/src/components/search/styles.js b/src/components/search/styles.js
@@ -12,7 +12,7 @@ export const SearchWrapper = styled.div`
     border-radius: 100px;
     border: 0;
     padding: 0 75px 0 20px;
-    background-color: ${rgba(theme.colors.slate, 0.08)};
+    background-color: ${rgba(theme.colors.darkGrey, 0.08)};
   }
 
   .submit-btn {
@@ -23,7 +23,7 @@ export const SearchWrapper = styled.div`
     .icon-search {
       width: 20px;
       height: 20px;
-      fill: ${theme.colors.slate};
+      fill: ${theme.colors.darkGrey};
     }
   }
 

diff --git a/src/components/switch/styles.js b/src/components/switch/styles.js
@@ -158,7 +158,7 @@ export const SwitchWrapper = styled.div`
     width: 100%;
     height: 34px;
     background-color: transparent !important;
-    border: solid 1px ${theme.colors.border};
+    border: solid 1px ${theme.colors.lightGrey};
 
     > div {
       width: 50%;
@@ -167,7 +167,7 @@ export const SwitchWrapper = styled.div`
       align-items: center;
       opacity: 1;
       font-size: 13px;
-      color: ${theme.colors.slate};
+      color: ${theme.colors.darkGrey};
     }
 
     .react-toggle-track-check {