use theme colors in spite of @reach styling nonsense

use dai-ui icon component and move svg to theme
makerdao · Oct 14, 2021 · 367de96 · 367de96
1 parent 468c29e
commit 367de96
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 68 deletions.
diff --git a/lib/theme.js b/lib/theme.js
@@ -999,6 +999,37 @@ export default {
           fill="currentColor"
         />
       )
+    },
+    hourglass: {
+      viewBox: '0 0 14 18',
+      path: (
+        <g>
+          <path
+            d="M12.6667 1.66667H1.33333C1.14933 1.66667 1 1.51733 1 1.33333C1 1.14933 1.14933 1 1.33333 1H12.6667C12.8507 1 13 1.14933 13 1.33333C13 1.51733 12.8507 1.66667 12.6667 1.66667Z"
+            fill="currentColor"
+            stroke="currentColor"
+            strokeWidth="0.2"
+          />
+          <path
+            d="M2.66536 17C2.48136 17 2.33203 16.8507 2.33203 16.6667V13.1873C2.33203 12.3387 2.69403 11.526 3.3247 10.9573L4.6747 9.74333C4.88803 9.55133 5.00603 9.28733 5.00603 9C5.00603 8.71267 4.88803 8.44867 4.6747 8.25667L3.32536 7.042C2.69403 6.474 2.33203 5.66133 2.33203 4.81267V1.33333C2.33203 1.14933 2.48136 1 2.66536 1C2.84936 1 2.9987 1.14933 2.9987 1.33333V4.81267C2.9987 5.47267 3.28003 6.10467 3.77136 6.54733L5.12003 7.76133C5.4707 8.07733 5.67203 8.52867 5.67203 9C5.67203 9.47133 5.4707 9.92333 5.1207 10.2387L3.7707 11.4533C3.28003 11.8953 2.9987 12.5273 2.9987 13.1873V16.6667C2.9987 16.8507 2.84936 17 2.66536 17Z"
+            fill="currentColor"
+            stroke="currentColor"
+            strokeWidth="0.2"
+          />
+          <path
+            d="M11.3348 17C11.1508 17 11.0015 16.8507 11.0015 16.6667V13.1873C11.0015 12.5273 10.7201 11.8953 10.2288 11.4527L8.88012 10.2387C8.52946 9.92267 8.32812 9.47133 8.32812 9C8.32812 8.52867 8.52946 8.07667 8.87946 7.76133L10.2295 6.54733C10.7201 6.10467 11.0015 5.47267 11.0015 4.81267V1.33333C11.0015 1.14933 11.1508 1 11.3348 1C11.5188 1 11.6681 1.14933 11.6681 1.33333V4.81267C11.6681 5.66133 11.3061 6.474 10.6755 7.04267L9.32546 8.25667C9.11279 8.44933 8.99479 8.71333 8.99479 9C8.99479 9.28667 9.11279 9.55133 9.32613 9.74333L10.6748 10.9573C11.3061 11.526 11.6681 12.338 11.6681 13.1873V16.6667C11.6681 16.8507 11.5188 17 11.3348 17Z"
+            fill="currentColor"
+            stroke="currentColor"
+            strokeWidth="0.2"
+          />
+          <path
+            d="M12.6667 17.0007H1.33333C1.14933 17.0007 1 16.8513 1 16.6673C1 16.4833 1.14933 16.334 1.33333 16.334H12.6667C12.8507 16.334 13 16.4833 13 16.6673C13 16.8513 12.8507 17.0007 12.6667 17.0007Z"
+            fill="currentColor"
+            stroke="currentColor"
+            strokeWidth="0.2"
+          />
+        </g>
+      )
     }
   }
 };
diff --git a/modules/app/components/Icon/index.tsx b/modules/app/components/Icon/index.tsx
@@ -34,37 +34,6 @@ const icons = {
       </g>
     ),
     viewBox: '0 0 15 15'
-  },
-  hourglass: {
-    path: (
-      <g>
-        <path
-          d="M12.6667 1.66667H1.33333C1.14933 1.66667 1 1.51733 1 1.33333C1 1.14933 1.14933 1 1.33333 1H12.6667C12.8507 1 13 1.14933 13 1.33333C13 1.51733 12.8507 1.66667 12.6667 1.66667Z"
-          fill="#1AAB9B"
-          stroke="#1AAB9B"
-          strokeWidth="0.2"
-        />
-        <path
-          d="M2.66536 17C2.48136 17 2.33203 16.8507 2.33203 16.6667V13.1873C2.33203 12.3387 2.69403 11.526 3.3247 10.9573L4.6747 9.74333C4.88803 9.55133 5.00603 9.28733 5.00603 9C5.00603 8.71267 4.88803 8.44867 4.6747 8.25667L3.32536 7.042C2.69403 6.474 2.33203 5.66133 2.33203 4.81267V1.33333C2.33203 1.14933 2.48136 1 2.66536 1C2.84936 1 2.9987 1.14933 2.9987 1.33333V4.81267C2.9987 5.47267 3.28003 6.10467 3.77136 6.54733L5.12003 7.76133C5.4707 8.07733 5.67203 8.52867 5.67203 9C5.67203 9.47133 5.4707 9.92333 5.1207 10.2387L3.7707 11.4533C3.28003 11.8953 2.9987 12.5273 2.9987 13.1873V16.6667C2.9987 16.8507 2.84936 17 2.66536 17Z"
-          fill="#1AAB9B"
-          stroke="#1AAB9B"
-          strokeWidth="0.2"
-        />
-        <path
-          d="M11.3348 17C11.1508 17 11.0015 16.8507 11.0015 16.6667V13.1873C11.0015 12.5273 10.7201 11.8953 10.2288 11.4527L8.88012 10.2387C8.52946 9.92267 8.32812 9.47133 8.32812 9C8.32812 8.52867 8.52946 8.07667 8.87946 7.76133L10.2295 6.54733C10.7201 6.10467 11.0015 5.47267 11.0015 4.81267V1.33333C11.0015 1.14933 11.1508 1 11.3348 1C11.5188 1 11.6681 1.14933 11.6681 1.33333V4.81267C11.6681 5.66133 11.3061 6.474 10.6755 7.04267L9.32546 8.25667C9.11279 8.44933 8.99479 8.71333 8.99479 9C8.99479 9.28667 9.11279 9.55133 9.32613 9.74333L10.6748 10.9573C11.3061 11.526 11.6681 12.338 11.6681 13.1873V16.6667C11.6681 16.8507 11.5188 17 11.3348 17Z"
-          fill="#1AAB9B"
-          stroke="#1AAB9B"
-          strokeWidth="0.2"
-        />
-        <path
-          d="M12.6667 17.0007H1.33333C1.14933 17.0007 1 16.8513 1 16.6673C1 16.4833 1.14933 16.334 1.33333 16.334H12.6667C12.8507 16.334 13 16.4833 13 16.6673C13 16.8513 12.8507 17.0007 12.6667 17.0007Z"
-          fill="#1AAB9B"
-          stroke="#1AAB9B"
-          strokeWidth="0.2"
-        />
-      </g>
-    ),
-    viewBox: '0 0 14 18'
   }
 };
 

diff --git a/modules/executive/components/SpellEffectsTab.tsx b/modules/executive/components/SpellEffectsTab.tsx
@@ -4,11 +4,27 @@ import { Box, Flex, Text, jsx, Link as ThemeUILink } from 'theme-ui';
 import { Proposal, SpellData } from '../types';
 import { useState } from 'react';
 import { Icon as DaiUIIcon } from '@makerdao/dai-ui-icons';
-import Icon from 'modules/app/components/Icon';
 
 import SkeletonThemed from 'modules/app/components/SkeletonThemed';
 import { formatDateWithoutTime } from 'lib/datetime';
 
+const CircleIcon = ({ name }) => (
+  <Flex
+    mr={2}
+    sx={theme => ({
+      background: theme.colors?.background,
+      borderRadius: '100%',
+      width: '34px',
+      minWidth: '34px',
+      height: '34px',
+      alignItems: 'center',
+      justifyContent: 'center'
+    })}
+  >
+    <DaiUIIcon name={name} size={3} color="primary" />
+  </Flex>
+);
+
 export function SpellEffectsTab({
   proposal,
   spellData
@@ -54,7 +70,7 @@ export function SpellEffectsTab({
           mb: 4
         }}
       >
-        Spell details
+        Spell Details
       </Text>
       <Box mb={4}>
         <Text
@@ -67,13 +83,13 @@ export function SpellEffectsTab({
         </Text>
 
         <Box
-          sx={{
-            background: '#F6F8F9',
+          sx={theme => ({
+            background: theme.colors?.background,
             p: 3,
             transition: 'all 300ms linear',
             overflow: 'hidden',
             borderRadius: '3px'
-          }}
+          })}
         >
           <Flex
             sx={{
@@ -98,10 +114,10 @@ export function SpellEffectsTab({
           {expanded && (
             <Box sx={{ mt: 3 }}>
               <Text as="p" color="textMuted">
-                This hash allows for manually verifying that the Spell belongs to the correct Executive
+                This hash allows for manually verifying that the spell belongs to the correct Executive
                 Proposal. It can be reproduced by hashing the raw markdown text of this Executive Proposal.
                 The hash, the URL to the raw markdown text, and the correct hashing algorithm are all
-                registered on the blockchain in the Spell smart contract.
+                registered on the blockchain in the spell smart contract.
               </Text>
               <Box sx={{ mt: 3 }}>
                 <ThemeUILink
@@ -141,21 +157,7 @@ export function SpellEffectsTab({
         )}
         <Box sx={{ width: ['100%', '50%'] }}>
           <Flex mb={3} mt={[3, 0]}>
-            <Flex
-              mr={2}
-              sx={{
-                color: 'primary',
-                background: '#F6F8F9',
-                borderRadius: '100%',
-                width: '34px',
-                minWidth: '34px',
-                height: '34px',
-                alignItems: 'center',
-                justifyContent: 'center'
-              }}
-            >
-              <Icon name={'hourglass'} size={3} />
-            </Flex>
+            <CircleIcon name="hourglass" />
             <Box>
               <Text
                 as="p"
@@ -172,21 +174,7 @@ export function SpellEffectsTab({
           </Flex>
           {spellData?.officeHours && (
             <Flex mb={3}>
-              <Flex
-                mr={2}
-                sx={{
-                  color: 'primary',
-                  background: '#F6F8F9',
-                  borderRadius: '100%',
-                  width: '34px',
-                  minWidth: '34px',
-                  height: '34px',
-                  alignItems: 'center',
-                  justifyContent: 'center'
-                }}
-              >
-                <DaiUIIcon name={'clock'} size={3} />
-              </Flex>
+              <CircleIcon name="clock" />
               <Box>
                 <Text
                   as="p"