feat: dark mode support

AutarkLabs · Jan 28, 2020 · 060e038 · 060e038
1 parent eec8d4b
commit 060e038
Show file tree

Hide file tree

Showing 18 changed files with 380 additions and 312 deletions.
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     }
   },
   "peerDependencies": {
-    "@aragon/ui": "^1.0.0-alpha.26",
+    "@aragon/ui": "^1.2.1",
     "prop-types": "^15.6.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

diff --git a/src/client/App.js b/src/client/App.js
@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Main } from '@aragon/ui'
 import styled from 'styled-components'
 
 // import { EthereumAddressType } from '../../../prop-types'
@@ -12,33 +11,31 @@ import { DragWrapper } from './wrappers/drag'
 import { determineAddress, isViewMode } from './utils'
 
 const App = ({ account, enableWallet, onSignatures, parts, web3Provider }) => (
-  <Main>
-    <BoxWrapper
-      isViewMode={isViewMode(account, parts)}
+  <BoxWrapper
+    isViewMode={isViewMode(account, parts)}
+    ethereumAddress={determineAddress(account, parts)}
+    onSignatures={onSignatures}
+    web3Provider={web3Provider}
+  >
+    <ModalWrapper
       ethereumAddress={determineAddress(account, parts)}
       onSignatures={onSignatures}
-      web3Provider={web3Provider}
     >
-      <ModalWrapper
-        ethereumAddress={determineAddress(account, parts)}
-        onSignatures={onSignatures}
-      >
-        <DragWrapper>
-          <BaseLayout>
-            <LoadAndErrorWrapper
+      <DragWrapper>
+        <BaseLayout>
+          <LoadAndErrorWrapper
+            ethereumAddress={determineAddress(account, parts)}
+            enableWallet={enableWallet}
+          >
+            <Profile
               ethereumAddress={determineAddress(account, parts)}
-              enableWallet={enableWallet}
-            >
-              <Profile
-                ethereumAddress={determineAddress(account, parts)}
-                onSignatures={onSignatures}
-              />
-            </LoadAndErrorWrapper>
-          </BaseLayout>
-        </DragWrapper>
-      </ModalWrapper>
-    </BoxWrapper>
-  </Main>
+              onSignatures={onSignatures}
+            />
+          </LoadAndErrorWrapper>
+        </BaseLayout>
+      </DragWrapper>
+    </ModalWrapper>
+  </BoxWrapper>
 )
 
 App.propTypes = {

diff --git a/src/client/components/EducationHistoryTile.js b/src/client/components/EducationHistoryTile.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
-import { Text, theme } from '@aragon/ui'
+import { Text, useTheme } from '@aragon/ui'
 import { IconPencil, IconTrash, TileHeader } from './styled-components'
 import { displayStartEndDates } from '../utils'
 
@@ -11,26 +11,39 @@ const EducationHistoryTile = ({
   openModal,
   removeItem,
   viewMode,
-}) => (
-  <SingleEducationItem>
-    <div>
-      <TileHeader>{educationHistoryData.organization}</TileHeader>
-      <Text.Block size="normal" css="line-height: 1.8">
-        {educationHistoryData.degree}
-        {educationHistoryData.fieldOfStudy
-          ? ', ' + educationHistoryData.fieldOfStudy
-          : ''}
-      </Text.Block>
-      <Dates>{displayStartEndDates(educationHistoryData)}</Dates>
-    </div>
-    {!viewMode && (
-      <Icons>
-        <IconPencil color={theme.accent} width="16px" onClick={openModal} />
-        <IconTrash color={theme.accent} width="16px" onClick={removeItem} />
-      </Icons>
-    )}
-  </SingleEducationItem>
-)
+}) => {
+  const theme = useTheme()
+  return (
+    <SingleEducationItem>
+      <div>
+        <TileHeader>{educationHistoryData.organization}</TileHeader>
+        <Text.Block size="normal" css="line-height: 1.8">
+          {educationHistoryData.degree}
+          {educationHistoryData.fieldOfStudy
+            ? ', ' + educationHistoryData.fieldOfStudy
+            : ''}
+        </Text.Block>
+        <Dates theme={theme}>
+          {displayStartEndDates(educationHistoryData)}
+        </Dates>
+      </div>
+      {!viewMode && (
+        <Icons>
+          <IconPencil
+            color={theme.accent.toString()}
+            width="16px"
+            onClick={openModal}
+          />
+          <IconTrash
+            color={theme.accent.toString()}
+            width="16px"
+            onClick={removeItem}
+          />
+        </Icons>
+      )}
+    </SingleEducationItem>
+  )
+}
 
 const SingleEducationItem = styled.div`
   width: 100%;
@@ -49,7 +62,7 @@ const Icons = styled.div`
 `
 
 const Dates = styled(Text.Block).attrs({ size: 'xsmall' })`
-  color: ${theme.textTertiary};
+  color: ${({ theme }) => theme.contentSecondary};
   margin-top: 2px;
 `
 

diff --git a/src/client/components/OrganizationPanel.js b/src/client/components/OrganizationPanel.js
@@ -4,10 +4,11 @@ import { useProfile } from '../hooks'
 import { ModalContext } from '../wrappers/modal'
 import OrganizationTile from './OrganizationTile'
 import { open, removeItem } from '../stateManagers/modal'
-import { Text, theme, Button } from '@aragon/ui'
+import { Text, Button, useTheme } from '@aragon/ui'
 import styled from 'styled-components'
 
 const OrganizationPanel = () => {
+  const theme = useTheme()
   const { organizations, viewMode } = useProfile()
   const { dispatchModal } = useContext(ModalContext)
 
@@ -42,7 +43,7 @@ const OrganizationPanel = () => {
               size="small"
               onClick={() => dispatchModal(open('organization'))}
             >
-              <Text color={theme.accent} size="small">
+              <Text color={theme.accent.toString()} size="small">
                 Add organisation
               </Text>
             </Button>

diff --git a/src/client/components/OrganizationTile.js b/src/client/components/OrganizationTile.js
@@ -2,21 +2,28 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
-import { Button as AragonButton, Text, theme } from '@aragon/ui'
+import { Button as AragonButton, Text, useTheme } from '@aragon/ui'
 import { IconTrash } from './styled-components'
 
-const OrganizationTile = ({ organizationData, removeItem, viewMode }) => (
-  <OrganizationItem>
-    <Text.Block size="large">{organizationData.address}</Text.Block>
-    {!viewMode && (
-      <Icons>
-        <Button onClick={removeItem}>
-          <IconTrash width="16px" height="16px" color={theme.accent} />
-        </Button>
-      </Icons>
-    )}
-  </OrganizationItem>
-)
+const OrganizationTile = ({ organizationData, removeItem, viewMode }) => {
+  const theme = useTheme()
+  return (
+    <OrganizationItem>
+      <Text.Block size="large">{organizationData.address}</Text.Block>
+      {!viewMode && (
+        <Icons>
+          <Button onClick={removeItem}>
+            <IconTrash
+              width="16px"
+              height="16px"
+              color={theme.accent.toString()}
+            />
+          </Button>
+        </Icons>
+      )}
+    </OrganizationItem>
+  )
+}
 const OrganizationItem = styled.div`
   position: relative;
 `

diff --git a/src/client/components/WorkHistoryTile.js b/src/client/components/WorkHistoryTile.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
-import { Text, theme } from '@aragon/ui'
+import { Text, useTheme } from '@aragon/ui'
 import { IconPencil, IconTrash, TileHeader } from './styled-components'
 import { displayStartEndDates } from '../utils'
 
@@ -11,27 +11,41 @@ const WorkHistoryTile = ({
   openModal,
   removeItem,
   viewMode,
-}) => (
-  <SingleWorkItem>
-    <Details>
-      <TileHeader>{workHistoryData.workPlace}</TileHeader>
-      <Text.Block size="large">
-        {workHistoryData.jobTitle}
-        <Text color={theme.textTertiary} size="xsmall" css="margin-left: 13px">
-          {displayStartEndDates(workHistoryData)}
-        </Text>
-      </Text.Block>
-      <Text.Block size="small">{workHistoryData.description}</Text.Block>
-    </Details>
-    {!viewMode && (
-      <Icons>
-        <IconPencil color={theme.accent} width="16px" onClick={openModal} />
-        <IconTrash color={theme.accent} width="16px" onClick={removeItem} />
-      </Icons>
-    )}
-  </SingleWorkItem>
-)
-
+}) => {
+  const theme = useTheme()
+  return (
+    <SingleWorkItem>
+      <Details>
+        <TileHeader>{workHistoryData.workPlace}</TileHeader>
+        <Text.Block size="large">
+          {workHistoryData.jobTitle}
+          <Text
+            color={theme.contentSecondary.toString()}
+            size="xsmall"
+            css="margin-left: 13px"
+          >
+            {displayStartEndDates(workHistoryData)}
+          </Text>
+        </Text.Block>
+        <Text.Block size="small">{workHistoryData.description}</Text.Block>
+      </Details>
+      {!viewMode && (
+        <Icons>
+          <IconPencil
+            color={theme.accent.toString()}
+            width="16px"
+            onClick={openModal}
+          />
+          <IconTrash
+            color={theme.accent.toString()}
+            width="16px"
+            onClick={removeItem}
+          />
+        </Icons>
+      )}
+    </SingleWorkItem>
+  )
+}
 const SingleWorkItem = styled.div`
   width: 100%;
   display: flex;
@@ -64,7 +78,7 @@ WorkHistoryTile.propTypes = {
   workHistoryData: PropTypes.shape({
     workPlace: PropTypes.string.isRequired,
     jobTitle: PropTypes.string.isRequired,
-    description: PropTypes.string.isRequired,
+    description: PropTypes.string,
     startDate: PropTypes.number,
     endDate: PropTypes.number,
   }).isRequired,