refactor(ui): centralize all theming to the actual theme

docker-compose.yml

@@ -146,7 +146,7 @@ services:
     healthcheck:
       test: ['CMD', '/bin/sh', '/home/node/app/scripts/server_healthy.sh']
       interval: 1s
-      retries: 30
+      retries: 60
     tty: true
     init: true
 

packages/client/app/DefaultPage.jsx

@@ -1,7 +1,5 @@
 import Modal from 'react-modal'
-import { ThemeProvider } from 'styled-components'
 
-import theme from './theme'
 import GlobalStyle from './theme/elements/GlobalStyle'
 
 import AssetManager from './components/asset-manager/src/AssetManagerPage'
@@ -23,10 +21,8 @@ const DefaultPage = () => {
     <XpubProvider>
       <JournalProvider journal={JSON.parse(JSON.stringify(journal))}>
         <ModalProvider modals={modals}>
-          <ThemeProvider theme={theme}>
-            <GlobalStyle />
-            <Router />
-          </ThemeProvider>
+          <GlobalStyle />
+          <Router />
         </ModalProvider>
       </JournalProvider>
     </XpubProvider>

packages/client/app/components/NextPageButton/style.jsx

@@ -1,7 +1,6 @@
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 import { th } from '@coko/client'
-import { color } from '../../theme'
 
 export const HasNextPage = styled(Link)`
   align-items: center;
@@ -13,9 +12,9 @@ export const HasNextPage = styled(Link)`
 `
 
 export const NextPageButton = styled.span`
-  border-bottom: 1px solid ${color.brand1.tint90};
-  border-top: 1px solid ${color.brand1.tint90};
-  color: ${color.brand1.base};
+  border-bottom: 1px solid ${th('color.brand1.tint90')};
+  border-top: 1px solid ${th('color.brand1.tint90')};
+  color: ${th('color.brand1.base')};
   display: flex;
   flex: 1;
   font-size: 15px;
@@ -28,8 +27,8 @@ export const NextPageButton = styled.span`
   width: 100%;
 
   &:hover {
-    background: ${color.brand1.tint50};
-    color: ${color.brand1.base};
+    background: ${th('color.brand1.tint50')};
+    color: ${th('color.brand1.base')};
     cursor: pointer;
   }
 `

packages/client/app/components/asset-manager/src/ui/ActionButton.jsx

@@ -2,13 +2,12 @@
 
 import styled from 'styled-components'
 import { th, darken } from '@coko/client'
-import { color } from '../../../../theme'
 
 const Button = styled.button`
   align-items: center;
-  background: ${({ type }) => {
+  background: ${({ theme, type }) => {
     if (type === 'primary') {
-      return color.brand1.base
+      return theme.color.brand1.base
     }
 
     if (type === 'delete') {
@@ -35,13 +34,13 @@ const Button = styled.button`
   }
 
   &:not(:disabled):hover {
-    background: ${({ type }) => {
+    background: ${({ theme, type }) => {
       if (type === 'primary') {
-        return color.brand1.tint25
+        return theme.color.brand1.tint25
       }
 
       if (type === 'delete') {
-        return th('colorError')
+        return theme.colorError
       }
 
       return 'none'

packages/client/app/components/asset-manager/src/ui/Button.jsx

@@ -2,34 +2,33 @@
 
 import styled from 'styled-components'
 import { th } from '@coko/client'
-import { color } from '../../../../theme'
 
 const Button = styled.button`
   /* stylelint-disable declaration-no-important */
   align-items: center;
   background: none;
   border: none;
-  color: ${color.gray50};
+  color: ${th('color.gray50')};
   display: flex;
   font-family: 'Fira Sans Condensed', sans-serif !important;
   padding: 0;
   /* padding: calc(${th('gridUnit')} / 2); */
   svg {
     svg {
       path {
-        fill: ${color.gray50};
+        fill: ${th('color.gray50')};
       }
     }
     height: 28px;
     width: 28px;
   }
 
   &:disabled {
-    color: ${color.gray90};
+    color: ${th('color.gray90')};
 
     svg {
       path {
-        fill: ${color.gray90};
+        fill: ${th('color.gray90')};
       }
     }
 
@@ -45,25 +44,23 @@ const Button = styled.button`
   }
 
   &:not(:disabled):hover {
-    /* background-color: ${color.backgroundC}; */
-    color: ${color.brand1.base};
+    color: ${th('color.brand1.base')};
 
     svg {
       path {
-        fill: ${color.brand1.base};
+        fill: ${th('color.brand1.base')};
       }
     }
   }
 
   &:not(:disabled):active {
-    /* background-color: ${color.gray90}; */
     border: none;
-    color: ${color.brand1.base};
+    color: ${th('color.brand1.base')};
     outline: none;
 
     svg {
       path {
-        fill: ${color.brand1.base};
+        fill: ${th('color.brand1.base')};
       }
     }
   }

packages/client/app/components/asset-manager/src/ui/FilesTable.jsx

@@ -1,13 +1,12 @@
 /* eslint-disable react/prop-types */
 
-import styled from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 import { th } from '@coko/client'
 import { indexOf } from 'lodash'
 
 import { dateTimeFormatter, fileSizeFormatter } from './helpers'
 import IconButton from './IconButton'
 import { Loading } from './Modal'
-import { color } from '../../../../theme'
 
 const TableWrapper = styled.div`
   align-items: center;
@@ -28,7 +27,7 @@ const TableHead = styled.div`
 
 const TableHeadCell = styled.div`
   align-items: center;
-  background: ${color.gray90};
+  background: ${th('color.gray90')};
   display: flex;
   flex-basis: ${({ width }) => (width ? `${width}%` : '33.33%')};
   padding: 8px;
@@ -61,19 +60,21 @@ const TableBodyEmpty = styled.div`
 
 const TableRow = styled.div`
   align-items: center;
-  background: ${({ selected }) => (selected ? color.brand1.base : 'inherit')};
-  color: ${({ selected }) => (selected ? color.textReverse : 'inherit')};
+  background: ${({ selected, theme }) =>
+    selected ? theme.color.brand1.base : 'inherit'};
+  color: ${({ selected, theme }) =>
+    selected ? theme.color.textReverse : 'inherit'};
   display: flex;
   user-select: none;
   width: 100%;
 
   &:nth-child(even) {
-    background: ${({ selected }) =>
-      selected ? color.brand1.base : color.backgroundC};
+    background: ${({ selected, theme }) =>
+      selected ? theme.color.brand1.base : theme.color.backgroundC};
   }
 
   &:hover {
-    background: ${color.brand1.base};
+    background: ${th('color.brand1.base')};
     color: white;
   }
 `
@@ -94,17 +95,23 @@ const TableCell = styled.div`
   text-align: left;
 `
 
-const ascIcon = (
-  <svg fill={color.text} viewBox="0 0 24 24">
-    <path d="M19 17H22L18 21L14 17H17V3H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z" />
-  </svg>
-)
+const AscIcon = () => {
+  const theme = useTheme()
+  return (
+    <svg fill={theme.color.text} viewBox="0 0 24 24">
+      <path d="M19 17H22L18 21L14 17H17V3H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z" />
+    </svg>
+  )
+}
 
-const descIcon = (
-  <svg fill={color.text} viewBox="0 0 24 24">
-    <path d="M19 7H22L18 3L14 7H17V21H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z" />
-  </svg>
-)
+const DescIcon = () => {
+  const theme = useTheme()
+  return (
+    <svg fill={theme.color.text} viewBox="0 0 24 24">
+      <path d="M19 7H22L18 3L14 7H17V21H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z" />
+    </svg>
+  )
+}
 
 const FilesTable = ({
   checkboxColumn,
@@ -224,7 +231,7 @@ const FilesTable = ({
               <TableHeadCell key={label} width={width}>
                 {sortable && (
                   <IconButton
-                    icon={sortingState[label] ? ascIcon : descIcon}
+                    icon={sortingState[label] ? <AscIcon /> : <DescIcon />}
                     onClick={() => {
                       sortingHandler(label)
                     }}

packages/client/app/components/asset-manager/src/ui/IconButton.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 
 import styled from 'styled-components'
-import { color } from '../../../../theme'
+import { th } from '@coko/client'
 
 const Button = styled.button`
   align-items: center;
@@ -26,13 +26,13 @@ const Button = styled.button`
 
   &:disabled {
     svg {
-      fill: ${color.gray90};
+      fill: ${th('color.gray90')};
     }
   }
 
   &:not(:disabled):hover {
     svg {
-      fill: ${color.brand1.base};
+      fill: ${th('color.brand1.base')};
     }
   }
 `

packages/client/app/components/asset-manager/src/ui/InfoItem.jsx

@@ -8,7 +8,6 @@ import styled from 'styled-components'
 import { th } from '@coko/client'
 
 import { Button, Icons } from './Modal'
-import { color } from '../../../../theme'
 
 const { saveIcon, editIcon, exitIcon } = Icons
 
@@ -22,7 +21,7 @@ const Input = styled.input`
   width: 78.2%;
 
   &:focus {
-    border-bottom: 1px dashed ${color.brand1.base};
+    border-bottom: 1px dashed ${th('color.brand1.base')};
     outline: 0;
   }
 

packages/client/app/components/asset-manager/src/ui/Loader.jsx

@@ -1,6 +1,5 @@
 import styled from 'styled-components'
 import { th } from '@coko/client'
-import { color } from '../../../../theme'
 
 const StyledSpinner = styled.svg`
   animation: rotate 1s linear infinite;
@@ -10,7 +9,7 @@ const StyledSpinner = styled.svg`
 
   & .path {
     animation: dash 1.5s ease-in-out infinite;
-    stroke: ${color.brand1.base};
+    stroke: ${th('color.brand1.base')};
     stroke-linecap: round;
   }
 
@@ -48,7 +47,7 @@ const Wrapper = styled.div`
 `
 
 const Label = styled.div`
-  color: ${color.brand1.base};
+  color: ${th('color.brand1.base')};
   font-family: ${th('fontHeading')};
   font-size: ${th('fontSizeBase')};
   line-height: ${th('lineHeightBase')};

packages/client/app/components/asset-manager/src/ui/Modal/Loading.jsx

@@ -1,8 +1,7 @@
 /* stylelint-disable string-quotes */
 
 import styled from 'styled-components'
-import { rotate360 } from '@coko/client'
-import { color } from '../../../../../theme'
+import { rotate360, th } from '@coko/client'
 
 const Wrapper = styled.div`
   align-items: center;
@@ -20,9 +19,9 @@ const SpinnerAnimation = styled.div`
 
   &::after {
     animation: ${rotate360} 1s linear infinite;
-    border: 5px solid ${color.brand1.base};
-    border-color: ${color.brand1.base} transparent ${color.brand1.base}
-      transparent;
+    border: 5px solid ${th('color.brand1.base')};
+    border-color: ${th('color.brand1.base')} transparent
+      ${th('color.brand1.base')} transparent;
     border-radius: 50%;
     content: ' ';
     display: block;

packages/client/app/components/asset-manager/src/ui/Modal/RootButton.jsx

@@ -1,12 +1,13 @@
 import styled, { css } from 'styled-components'
 import { th, grid } from '@coko/client'
-import { color } from '../../../../../theme'
 
 const activeStyles = css`
-  color: ${({ danger }) => (danger ? th('colorError') : color.brand1.base)};
+  color: ${({ danger, theme }) =>
+    danger ? theme.colorError : theme.color.brand1.base};
 
   > i svg {
-    fill: ${({ danger }) => (danger ? th('colorError') : color.brand1.base)};
+    fill: ${({ danger, theme }) =>
+      danger ? theme.colorError : theme.color.brand1.base};
   }
 `
 
@@ -43,10 +44,12 @@ const RootButton = styled.button.attrs(({ title, type }) => ({
 
   &:hover {
     background: ${th('colorBackgroundHue')};
-    color: ${({ danger }) => (danger ? th('colorError') : color.brand1.base)};
+    color: ${({ danger, theme }) =>
+      danger ? theme.colorError : theme.color.brand1.base};
 
     > i svg {
-      fill: ${({ danger }) => (danger ? th('colorError') : color.brand1.base)};
+      fill: ${({ danger, theme }) =>
+        danger ? theme.colorError : theme.color.brand1.base};
       transition: all 0.1s ease-in;
     }
   }