Merge pull request #1300 from ONEARMY/feat/introduce-theme-provider

feat: introduce theme provider

package.json

@@ -56,7 +56,6 @@
   "resolutions": {
     "__NOTE__": "2021-05-28 storybook clash: https://github.com/storybookjs/storybook/issues/6505",
     "webpack": "4.44.2",
-    "styled-components": "^4",
     "__NOTE2__": "2021-07-06 ram issues: https://github.com/facebook/create-react-app/issues/10154",
     "react-scripts/eslint-webpack-plugin": "2.4.1",
     "__NOTE3__": "2021-10-03 terser issues: https://github.com/facebook/create-react-app/issues/6334",

src/App.tsx

@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import { observer, Provider } from 'mobx-react'
+import { ThemeProvider } from 'styled-components'
+import { GlobalStyle } from './themes/app.globalStyles'
+import { RootStore } from './stores'
+import ErrorBoundary from './common/ErrorBoundary'
+import { Routes } from './pages'
+
+const rootStore = new RootStore()
+
+/**
+ * Additional store and db exports for use in modern context consumers
+ * @example const {userStore} = useCommonStores()
+ */
+export const rootStoreContext = React.createContext<RootStore>(rootStore)
+export const useCommonStores = () =>
+  React.useContext<RootStore>(rootStoreContext)
+export const dbContext = React.createContext({ db: rootStore.dbV2 })
+export const useDB = () => React.useContext(dbContext)
+
+@observer
+export class App extends Component {
+  render() {
+    return (
+      <>
+        <Provider {...rootStore.stores}>
+          <ThemeProvider
+            theme={rootStore.stores.themeStore.currentTheme.styles}
+          >
+            <>
+              <ErrorBoundary>
+                <Routes />
+              </ErrorBoundary>
+              <GlobalStyle />
+            </>
+          </ThemeProvider>
+        </Provider>
+      </>
+    )
+  }
+}

src/components/Avatar/index.tsx

@@ -1,6 +1,6 @@
 import { Component } from 'react'
 
-import { Image, ImageProps } from 'rebass'
+import { Image, ImageProps } from 'rebass/styled-components'
 import { inject, observer } from 'mobx-react'
 import { ProfileTypeLabel } from 'src/models/user_pp.models'
 import Workspace from 'src/pages/User/workspace/Workspace'

src/components/Button/index.tsx

@@ -3,11 +3,9 @@ import { Icon, IGlyphs } from 'src/components/Icons'
 import {
   Button as RebassButton,
   ButtonProps as RebassButtonProps,
-} from 'rebass'
-import theme from 'src/themes/styled.theme'
+} from 'rebass/styled-components'
 import Text from 'src/components/Text'
 import styled from 'styled-components'
-// import { IBtnProps } from './index'
 
 // extend to allow any default button props (e.g. onClick) to also be passed
 export interface IBtnProps extends React.ButtonHTMLAttributes<HTMLElement> {
@@ -70,5 +68,4 @@ export const Button = (props: BtnProps) => (
 
 Button.defaultProps = {
   type: 'button',
-  theme,
 }

src/components/Comment/Comment.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { FaTrash, FaRegEdit } from 'react-icons/fa'
-import { Flex } from 'rebass'
+import { Flex } from 'rebass/styled-components'
 import { useCommonStores } from 'src'
 import { IComment } from 'src/models'
 import { CommentHeader } from './CommentHeader'

src/components/Comment/CommentHeader.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Text } from 'rebass'
+import { Box, Flex, Text } from 'rebass/styled-components'
 import { FlagIconHowTos } from 'src/components/Icons/FlagIcon/FlagIcon'
 import { IComment } from 'src/models'
 import { Link } from 'src/components/Links'

src/components/Comment/CommentTextArea.tsx

@@ -1,7 +1,5 @@
-import React from 'react'
 import styled from 'styled-components'
 import { Box, Text } from 'rebass/styled-components'
-import theme from 'src/themes/styled.theme'
 import { Avatar } from '../Avatar'
 import { useCommonStores } from 'src'
 import { Link } from '../Links'
@@ -19,7 +17,7 @@ const TextAreaStyled = styled.textarea`
   min-width: 100%;
   max-width: 100%;
   font-family: 'Inter', Arial, sans-serif;
-  font-size: ${theme.fontSizes[2] + 'px'};
+  font-size: ${props => props.theme.fontSizes[2] + 'px'};
   border-radius: 5px;
   resize: none;
 

src/components/DevSiteHeader/DevSiteHeader.tsx

@@ -1,61 +1,96 @@
 import { SITE, VERSION, DEV_SITE_ROLE } from 'src/config/config'
 import Text from 'src/components/Text'
-import theme from 'src/themes/styled.theme'
 import { UserRole } from 'src/models'
-import { Flex, Box } from 'rebass'
+import { Flex, Box } from 'rebass/styled-components'
 import Select from 'react-select'
+import { observer } from 'mobx-react-lite'
+import { useCommonStores } from 'src/index'
 
 /**
  * A simple header component that reminds developers that they are working on a dev
  * version of the platform, and provide the option to toggle between different dev sites
  */
-const DevSiteHeader = () => (
-  <>
-    {devSites.find(s => s.value === SITE) && (
-      <Flex
-        data-cy="devSiteHeader"
-        bg={theme.colors.red2}
-        width={1}
-        py={1}
-        px={1}
-        alignItems="center"
-        style={{ zIndex: 3001 }}
-      >
-        <Text color={'white'} medium txtcenter flex="1">
-          This is a dev version of the platform (v{VERSION})
-        </Text>
-        <Flex data-cy="devSiteRoleSelectContainer" alignItems="center" ml={2}>
-          <Text color={'white'} medium mr="1" title={SITE}>
-            View as:
+const DevSiteHeader = observer(() => {
+  const { themeStore } = useCommonStores().stores
+  const theme = themeStore.currentTheme.styles
+  return (
+    <>
+      {showDevSiteHeader() && (
+        <Flex
+          data-cy="devSiteHeader"
+          bg={theme.colors.red2}
+          width={1}
+          py={1}
+          px={1}
+          alignItems="center"
+          style={{ zIndex: 3001 }}
+        >
+          <Text color={'white'} medium txtcenter flex="1">
+            This is a dev version of the platform (v{VERSION})
           </Text>
-          <Box width="150px" mr={3}>
-            <Select
-              options={siteRoles}
-              placeholder="Role"
-              defaultValue={
-                siteRoles.find(s => s.value === DEV_SITE_ROLE) || siteRoles[0]
-              }
-              onChange={(s: any) => setSiteRole(s.value)}
-            />
-          </Box>
+          <Flex data-cy="devSiteRoleSelectContainer" alignItems="center" ml={2}>
+            <Text color={'white'} medium mr="1" title={SITE}>
+              View as:
+            </Text>
+            <Box width="150px" mr={3}>
+              <Select
+                options={siteRoles}
+                placeholder="Role"
+                defaultValue={
+                  siteRoles.find(s => s.value === DEV_SITE_ROLE) || siteRoles[0]
+                }
+                onChange={(s: any) => setSiteRole(s.value)}
+              />
+            </Box>
+          </Flex>
+          <Flex data-cy="devSiteSelectContainer" alignItems="center">
+            <Text color={'white'} medium mr="1" title={SITE}>
+              Site:
+            </Text>
+            <Box width="130px" mr={3}>
+              <Select
+                options={devSites}
+                placeholder="Site"
+                defaultValue={devSites.find(s => s.value === SITE)}
+                onChange={(s: any) => setSite(s.value)}
+              />
+            </Box>
+          </Flex>
+          <Flex data-cy="devSiteSelectContainer" alignItems="center">
+            <Text color={'white'} medium mr="1" title={SITE}>
+              Theme:
+            </Text>
+            <Box width="180px">
+              <Select
+                options={availableThemes}
+                placeholder="Pick a theme"
+                defaultValue={availableThemes.find(s => s.value === SITE)}
+                onChange={(selectedElement: any) => {
+                  const theme = selectedElement?.value || ''
+                  localStorage.setItem('platformTheme', theme)
+                  themeStore.setActiveTheme(theme)
+                }}
+              />
+            </Box>
+          </Flex>
         </Flex>
-        <Flex data-cy="devSiteSelectContainer" alignItems="center">
-          <Text color={'white'} medium mr="1" title={SITE}>
-            Site:
-          </Text>
-          <Box width="130px">
-            <Select
-              options={devSites}
-              placeholder="Site"
-              defaultValue={devSites.find(s => s.value === SITE)}
-              onChange={(s: any) => setSite(s.value)}
-            />
-          </Box>
-        </Flex>
-      </Flex>
-    )}
-  </>
-)
+      )}
+    </>
+  )
+})
+
+function showDevSiteHeader() {
+  return (
+    devSites.some(s => s.value === SITE) ||
+    window.location?.hostname === 'localhost'
+  )
+}
+
+const availableThemes = [
+  { value: 'precious-plastic', label: 'Precious Plastic' },
+  { value: 'project-kamp', label: 'Project Kamp' },
+]
+
 // we have 2 different dev sites, only show this component when on one and provide select
 const devSites = [
   { value: 'localhost', label: 'Dev' },

src/components/DropdownIndicator/index.tsx

@@ -1,5 +1,5 @@
 import { components } from 'react-select'
-import { Image } from 'rebass'
+import { Image } from 'rebass/styled-components'
 import ArrowSelectIcon from '../../assets/icons/icon-arrow-select.svg'
 
 // https://github.com/JedWatson/react-select/issues/685#issuecomment-420213835

src/components/ElWithBeforeIcon/index.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react';
-import { Box } from 'rebass'
+import { Box } from 'rebass/styled-components'
 import checkmarkIcon from 'src/assets/icons/icon-checkmark.svg'
 
 interface IProps {

src/components/FileInfo/FileDetails.tsx

@@ -1,5 +1,5 @@
 import Icon, { availableGlyphs } from '../Icons'
-import { Flex } from 'rebass'
+import { Flex } from 'rebass/styled-components'
 import Text from '../Text'
 import { IUploadedFileMeta } from 'src/stores/storage'
 import styled from 'styled-components'

src/components/FileInput/FileInput.tsx

@@ -5,7 +5,7 @@ import Uppy from '@uppy/core'
 import { DashboardModal } from '@uppy/react'
 import { Button } from '../Button'
 import { UPPY_CONFIG } from './UppyConfig'
-import { Flex } from 'rebass'
+import { Flex } from 'rebass/styled-components'
 import { FileInfo } from '../FileInfo/FileInfo'
 
 interface IUppyFiles {

src/components/FirebaseFileUploader/FirebaseFileUploader.tsx

@@ -4,7 +4,7 @@ import FileUploader from 'react-firebase-file-uploader'
 import { FullMetadata } from '@firebase/storage-types'
 import { Button } from '../Button'
 import { IGlyphs } from '../Icons'
-import { Flex } from 'rebass'
+import { Flex } from 'rebass/styled-components'
 import Loader from '../Loader'
 import { logger } from 'src/logger'
 /*

src/components/Form/FlagSelect.tsx

@@ -1,6 +1,6 @@
 import { FieldContainer, ErrorMessage } from './elements'
 import ReactFlagsSelect from 'react-flags-select'
-import { Flex } from 'rebass'
+import { Flex } from 'rebass/styled-components'
 import { IFieldProps } from './Fields'
 
 export const FlagSelectField = ({ input, meta }: IFieldProps) => (

src/components/Heading/index.tsx

@@ -1,14 +1,13 @@
 import styled from 'styled-components'
-import theme from 'src/themes/styled.theme'
 import Text, { ITextProps } from 'src/components/Text'
 import { HeadingProps as RebassHeadingProps } from 'rebass/styled-components'
 
 export const large = (props: ITextProps) =>
-  props.large ? { fontSize: theme.fontSizes[6] } : null
+  props.large ? { fontSize: props.theme.fontSizes[6] } : null
 export const medium = (props: ITextProps) =>
-  props.medium ? { fontSize: theme.fontSizes[5] } : null
+  props.medium ? { fontSize: props.theme.fontSizes[5] } : null
 export const small = (props: ITextProps) =>
-  props.small ? { fontSize: theme.fontSizes[4] } : null
+  props.small ? { fontSize: props.theme.fontSizes[4] } : null
 
 export const BaseHeading = styled(Text)`
     ${large}
@@ -21,8 +20,4 @@ const Heading = (props: IHeadingProps) => (
   <BaseHeading {...(props as any)}>{props.children}</BaseHeading>
 )
 
-Heading.defaultProps = {
-  theme,
-}
-
 export default Heading

src/components/Icons/FlagIcon/FlagIcon.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
 import FlagIconFactory from 'react-flag-icon-css'
 import styled from 'styled-components'
-import theme from 'src/themes/styled.theme'
 
 // Please only use `FlagIconFactory` one time in your application, there is no
 // need to use it multiple times (it would slow down your app). You may place the
@@ -15,7 +14,7 @@ const FlagIconEvents = styled(FlagIcon)`
   height: 23px;
   width: 35px !important;
 
-  @media only screen and (max-width: ${theme.breakpoints[1]}) {
+  @media only screen and (max-width: ${props => props.theme.breakpoints[1]}) {
     height: 15px;
     width: 25px !important;
   }

src/components/ImageInput/ImageConverter.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Flex } from 'rebass'
+import { Flex } from 'rebass/styled-components'
 import imageCompression from 'browser-image-compression'
 import { IConvertedFileMeta } from './ImageInput'
 import styled from 'styled-components'

src/components/ImageInput/ImageInput.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Box, Image } from 'rebass'
+import { Box, Image } from 'rebass/styled-components'
 import styled from 'styled-components'
 import { Button } from '../Button'
 import 'react-image-lightbox/style.css'

src/components/Links/LinkTargetBlank/LinkTargetBlank.tsx

@@ -1,6 +1,6 @@
-import { Link } from 'rebass'
+import { Link } from 'rebass/styled-components'
 import ImageTargetBlank from 'src/assets/icons/link-target-blank.svg'
-import { zIndex } from 'src/themes/styled.theme'
+import theme from 'src/themes/styled.theme'
 
 export const LinkTargetBlank = props => (
   <Link
@@ -14,7 +14,7 @@ export const LinkTargetBlank = props => (
         backgroundImage: `url("${ImageTargetBlank}")`,
         width: '20px',
         height: '20px',
-        zIndex: `${zIndex.level}`,
+        zIndex: `${theme.zIndex.level}`,
         backgroundSize: 'contain',
         backgroundRepeat: 'no-repeat',
         position: 'absolute',

src/components/Links/index.tsx

@@ -1,4 +1,4 @@
 import { Link as RouterLink } from 'react-router-dom'
-import { Link as RebassLink } from 'rebass'
+import { Link as RebassLink } from 'rebass/styled-components'
 
 export const Link = props => <RebassLink {...props} as={RouterLink} />