fix: only load colours from primary theme file

ONEARMY · Oct 8, 2021 · b0240fe · b0240fe
1 parent fb53b6f
commit b0240fe
Show file tree

Hide file tree

Showing 13 changed files with 66 additions and 47 deletions.
diff --git a/src/components/Comment/CommentHeader.tsx b/src/components/Comment/CommentHeader.tsx
@@ -2,6 +2,7 @@ import { Box, Flex, Text } from 'rebass'
 import { FlagIconHowTos } from 'src/components/Icons/FlagIcon/FlagIcon'
 import { IComment } from 'src/models'
 import { Link } from 'src/components/Links'
+import theme from 'src/themes/styled.theme'
 
 interface IProps extends Omit<IComment, 'text' | '_id' | '_creatorId'> {}
 
@@ -30,7 +31,7 @@ export const CommentHeader = ({
       <Flex alignItems="center">
         {_edited ? (
           <>
-            <Text color="#777" fontSize={0} mr={2}>
+            <Text color={theme.colors.grey} fontSize={0} mr={2}>
               (Edited)
             </Text>
             <Text fontSize={1}>

diff --git a/src/components/Form/Select.field.tsx b/src/components/Form/Select.field.tsx
@@ -29,7 +29,7 @@ export const SelectStyles: Partial<Styles> = {
   }),
   control: provided => ({
     ...provided,
-    border: '1px solid #dce4e5',
+    border: '1px solid ' + theme.colors.softblue,
     backgroundColor: theme.colors.background,
     minHeight: '40px',
     boxShadow: 'none',
@@ -46,29 +46,29 @@ export const SelectStyles: Partial<Styles> = {
     ...provided,
     backgroundColor: theme.colors.background,
     boxShadow: 'none',
-    color: 'black',
+    color: theme.colors.black,
     ':hover': {
       outline: 'none',
-      backgroundColor: 'white',
-      color: 'black',
+      backgroundColor: theme.colors.white,
+      color: theme.colors.black,
     },
   }),
 
   menu: provided => ({
     ...provided,
-    border: '1px solid #dce4e5',
+    border: '1px solid ' + theme.colors.softblue,
     boxShadow: 'none',
     backgroundColor: theme.colors.background,
     ':hover': {
-      border: '1px solid #dce4e5',
+      border: '1px solid ' + theme.colors.softblue,
     },
   }),
 
   multiValue: provided => ({
     ...provided,
     backgroundColor: theme.colors.softblue,
     padding: '2px',
-    border: '1px solid #c2d4e4',
+    border: '1px solid ' + theme.colors.softgrey,
     color: theme.colors.grey,
   }),
 
@@ -91,13 +91,13 @@ export const FilterStyles: Partial<Styles> = {
     ...provided,
     fontSize: theme.fontSizes[2] + 'px',
     fontFamily: '"Varela Round", Arial, sans-serif',
-    border: '2px solid black',
+    border: '2px solid ' + theme.colors.black,
     borderRadius: '5px',
-    color: 'black',
+    color: theme.colors.black,
   }),
   control: provided => ({
     ...provided,
-    backgroundColor: 'white',
+    backgroundColor: theme.colors.white,
     minHeight: '40px',
     boxShadow: 'none',
     ':hover': {
@@ -109,35 +109,35 @@ export const FilterStyles: Partial<Styles> = {
   }),
   placeholder: provided => ({
     ...provided,
-    color: 'black',
+    color: theme.colors.black,
   }),
   option: provided => ({
     ...provided,
-    color: 'black',
-    backgroundColor: 'white',
+    color: theme.colors.black,
+    backgroundColor: theme.colors.white,
     boxShadow: 'none',
     ':hover': {
       outline: 'none',
       backgroundColor: theme.colors.softblue,
-      color: 'black',
+      color: theme.colors.black,
     },
   }),
 
   menu: provided => ({
     ...provided,
-    border: '2px solid black',
+    border: '2px solid ' + theme.colors.black,
     boxShadow: 'none',
-    backgroundColor: 'white',
+    backgroundColor: theme.colors.white,
     ':hover': {
-      border: '2px solid black',
+      border: '2px solid ' + theme.colors.black,
     },
   }),
 
   multiValue: provided => ({
     ...provided,
     backgroundColor: theme.colors.softblue,
     padding: '2px',
-    border: '1px solid black',
+    border: '1px solid ' + theme.colors.black,
     color: theme.colors.grey,
   }),
 

diff --git a/src/components/Form/elements.ts b/src/components/Form/elements.ts
@@ -20,7 +20,7 @@ export const inputStyles = ({ invalid }: IFormElement) => css`
   }
 
   &:focus {
-    border-color: #83ceeb;
+    border-color: ${theme.colors.blue};
     outline: none;
   }
 `

diff --git a/src/components/ImageGallery/index.tsx b/src/components/ImageGallery/index.tsx
@@ -3,6 +3,7 @@ import Lightbox from 'react-image-lightbox'
 import { Card, CardProps, Flex, Image } from 'rebass/styled-components'
 import { IUploadedFileMeta } from 'src/stores/storage'
 import styled from 'styled-components'
+import theme from '../../themes/styled.theme';
 
 interface IProps {
   images: IUploadedFileMeta[]
@@ -28,7 +29,7 @@ const ThumbImage = styled(Image)`
   object-fit: cover;
   width: 100px;
   height: 67px;
-  border: 1px solid #ececec;
+  border: 1px solid ${theme.colors.offwhite};
   border-radius: 5px;
 `
 

diff --git a/src/components/ImageInput/ImageConverter.tsx b/src/components/ImageInput/ImageConverter.tsx
@@ -3,6 +3,7 @@ import { Flex } from 'rebass'
 import imageCompression from 'browser-image-compression'
 import { IConvertedFileMeta } from './ImageInput'
 import styled from 'styled-components'
+import theme from '../../themes/styled.theme'
 
 interface IProps {
   file: File
@@ -29,7 +30,7 @@ const PreviewImage = styled(Flex)`
   height: 100%;
   width: 100%;
   border-radius: 5px;
-  border: 1px solid #ececec;
+  border: 1px solid ${theme.colors.offwhite};
 `
 
 export class ImageConverter extends React.Component<IProps, IState> {

diff --git a/src/components/ProfileModal/ProfileModal.tsx b/src/components/ProfileModal/ProfileModal.tsx
@@ -41,7 +41,7 @@ const ModalLink = styled(NavLink).attrs(() => ({
   z-index: ${zIndex.modalProfile};
   display: flex;
   flex-direction: column;
-  color: #000;
+  color: ${theme.colors.black};
   padding: 10px 30px 10px 30px;
   text-align: left;
   width: 100%;
@@ -57,7 +57,7 @@ const ModalLink = styled(NavLink).attrs(() => ({
     color: ${theme.colors.blue};
   }
   &.current {
-    background-color: #fff;
+    background-color: ${theme.colors.white};
     color: ${theme.colors.blue};
   }
 `

diff --git a/src/components/Text/index.tsx b/src/components/Text/index.tsx
@@ -66,24 +66,11 @@ export const large = (props: ITextProps) =>
 export const tags = (props: ITextProps) =>
   props.tags ? { fontSize: '12px', color: theme.colors.blue } : null
 
-// TODO : change auxiliary & paragaph prop to theme variant
 export const auxiliary = (props: ITextProps) =>
-  props.auxiliary
-    ? {
-        fontFamily: '"Inter", Helvetica Neue, Arial, sans-serif;',
-        fontSize: '12px',
-        color: '#686868',
-      }
-    : null
+  props.auxiliary ? theme.typography.auxiliary : null
 
 export const paragraph = (props: ITextProps) =>
-  props.paragraph
-    ? {
-        fontFamily: '"Inter", Helvetica Neue, Arial, sans-serif;',
-        fontSize: '16px',
-        color: theme.colors.grey,
-      }
-    : null
+  props.paragraph ? theme.typography.paragraph : null
 
 export const medium = (props: ITextProps) =>
   props.medium ? { fontSize: theme.fontSizes[2] } : null

diff --git a/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx b/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx
@@ -147,7 +147,12 @@ export default class HowtoDescription extends PureComponent<IProps> {
                 | Published on {this.dateCreatedByText(howto)}
               </Text>
             </Flex>
-            <Text auxiliary sx={{ color: '#b7b5b5 !important' }} mt={1} mb={2}>
+            <Text
+              auxiliary
+              sx={{ color: `${theme.colors.lightgrey} !important` }}
+              mt={1}
+              mb={2}
+            >
               {this.dateLastEditText(howto)}
             </Text>
             <Heading medium mt={2} mb={1}>

diff --git a/src/pages/Howto/Content/Howto/HowtoDescription/HowtoUsefulStats.tsx b/src/pages/Howto/Content/Howto/HowtoDescription/HowtoUsefulStats.tsx
@@ -3,6 +3,7 @@ import { useHistory } from 'react-router'
 import Text from 'src/components/Text'
 import { Button } from 'src/components/Button'
 import Tooltip from 'src/components/Tooltip'
+import theme from 'src/themes/styled.theme'
 
 interface IProps {
   userVotedUseful: boolean
@@ -42,7 +43,7 @@ export const HowtoUsefulStats = (props: IProps) => {
           props.isLoggedIn ? handleUsefulClick : () => history.push('/sign-in')
         }
         ml="8px"
-        backgroundColor="#f5ede2"
+        backgroundColor={theme.colors.softyellow}
         icon={state.userVotedUseful ? 'star-active' : 'star'}
       >
         <Text ml={1}>Useful {state.votedUsefulCount}</Text>

diff --git a/src/pages/Research/Content/ResearchDescription.tsx b/src/pages/Research/Content/ResearchDescription.tsx
@@ -108,7 +108,12 @@ const ResearchDescription: React.FC<IProps> = ({
               | Started on {format(new Date(research._created), 'DD-MM-YYYY')}
             </Text>
           </Flex>
-          <Text auxiliary sx={{ color: '#b7b5b5 !important' }} mt={1} mb={2}>
+          <Text
+            auxiliary
+            sx={{ color: `${theme.colors.lightgrey} !important` }}
+            mt={1}
+            mb={2}
+          >
             {dateLastUpdateText(research)}
           </Text>
           <Heading medium mt={2} mb={1}>

diff --git a/src/pages/User/content/UserPage/UserPage.tsx b/src/pages/User/content/UserPage/UserPage.tsx
@@ -505,9 +505,9 @@ const sliderSettings = {
   slidesToScroll: 1,
   adaptiveHeight: false,
   nextArrow: (
-    <Icon glyph="chevron-right" color="#fff" size={60} marginRight="4px" />
+    <Icon glyph="chevron-right" color={theme.colors.white} size={60} marginRight="4px" />
   ),
   prevArrow: (
-    <Icon glyph="chevron-left" color="#fff" size={60} marginRight="4px" />
+    <Icon glyph="chevron-left" color={theme.colors.white} size={60} marginRight="4px" />
   ),
 }
diff --git a/src/pages/common/Header/Menu/MenuMobile/MenuMobilePanel.tsx b/src/pages/common/Header/Menu/MenuMobile/MenuMobilePanel.tsx
@@ -20,7 +20,7 @@ const PanelContainer = styled(Box)`
 `
 
 const PanelMenu = styled(Box)`
-  background-color: #fff;
+  background-color: ${theme.colors.white};
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -37,8 +37,8 @@ export const PanelItem = styled(Box as any)`
 `
 
 export const MenuMobileLinkContainer = styled(Box as any)`
-  border-top: 1px solid #ababac;
-  border-bottom: 1px solid #ababac;
+  border-top: 1px solid ${theme.colors.lightgrey};
+  border-bottom: 1px solid ${theme.colors.lightgrey};
   margin-top: 5px;
 `
 

diff --git a/src/themes/styled.theme.tsx b/src/themes/styled.theme.tsx
@@ -1,13 +1,17 @@
 // use enum to specify list of possible colors for typing
 export const colors = {
   white: 'white',
+  offwhite: '#ececec',
   black: '#1b1b1b',
+  softyellow: '#f5ede2',
   yellow: { base: '#fee77b', hover: '#ffde45' },
   blue: '#83ceeb',
   red: '#eb1b1f',
   red2: '#f58d8e',
   softblue: '#e2edf7',
   bluetag: '#5683b0',
+  lightgrey: '#ababac',
+  softgrey: '#c2d4e4',
   grey: '#61646b',
   green: '#00c3a9',
   error: 'red',
@@ -198,6 +202,19 @@ const buttons = {
   },
 }
 
+const typography = {
+  auxiliary: {
+    fontFamily: '"Inter", Helvetica Neue, Arial, sans-serif;',
+    fontSize: '12px',
+    color: colors.grey,
+  },
+  paragraph: {
+    fontFamily: '"Inter", Helvetica Neue, Arial, sans-serif;',
+    fontSize: '16px',
+    color: colors.grey,
+  },
+}
+
 export default {
   colors,
   buttons,
@@ -208,5 +225,6 @@ export default {
   maxContainerWidth,
   regular,
   bold,
+  typography,
   zIndex,
 }