Update Colors In Design Lib / Theme (#144)

* Create PR for #143 * replace colors vars Co-authored-by: netanelben <[email protected]> Co-authored-by: Nate <[email protected]>
owlprotocol · Apr 25, 2022 · 6331b9a · 6331b9a
1 parent 9c703a6
commit 6331b9a
Show file tree

Hide file tree

Showing 15 changed files with 149 additions and 143 deletions.
diff --git a/packages/web3-redux-components/.storybook/preview.tsx b/packages/web3-redux-components/.storybook/preview.tsx
@@ -22,6 +22,19 @@ export const parameters = {
             date: /Date$/,
         },
     },
+    backgrounds: {
+        default: 'owl',
+        values:[
+            {
+                name: 'owl',
+                value: THEME_COLORS['theme1'].color5,
+            },
+            {
+                name: 'white',
+                value: THEME_COLORS['theme1'].color7,
+            },
+        ],
+    },
 }
 
 //Browser wallet context provider
@@ -38,7 +51,7 @@ export const decorators = [
             Contract.create(TestData.contractWETH),
         ]);
         return (
-            <ThemeProvider theme={THEME_COLORS.light}>
+            <ThemeProvider theme={THEME_COLORS.theme1}>
                 <Web3ReactProvider getLibrary={getLibrary}>
                     <Web3ProviderWallet getLibrary={getLibrary}>
                         <Router>

diff --git a/packages/web3-redux-components/src/components/AddressDisplay/index.tsx b/packages/web3-redux-components/src/components/AddressDisplay/index.tsx
@@ -5,8 +5,8 @@ import copy from 'copy-to-clipboard';
 import QRCodePopover from '../QRCodePopover';
 import OwlButton from '../Button';
 
-const Wrapper = styled.div`
-    background: #2c2c30;
+const Wrapper: any = styled.div`
+    background: ${(props: any) => props.color6};
     border-radius: 12px;
     height: 60px;
     width: 100%;
@@ -23,17 +23,18 @@ const Wrapper = styled.div`
     input {
         flex: 1;
         background-color: transparent;
-        border-bottom: 1px solid #92929d;
+        border-bottom: 1px solid;
+        border-color: ${(props: any) => props.color9};
         margin-right: 12px;
-        color: #92929d;
+        color: ${(props: any) => props.color9};
     }
 `;
 
-const Address = styled.div`
+const Address: any = styled.div`
     font-weight: 600;
     font-size: 14px;
     line-height: 24px;
-    color: #92929d;
+    color: ${(props: any) => props.color9};
     flex: 1;
     word-break: break-all;
 `;
@@ -59,8 +60,8 @@ const SaveButton = styled.button`
     text-align: center;
 `;
 
-const CancelButton = styled.button`
-    color: #92929d;
+const CancelButton: any = styled.button`
+    color: ${(props: any) => props.color9};
     font-weight: 400;
     font-size: 14px;
     line-height: 19px;
@@ -74,13 +75,12 @@ export interface Props {
 }
 
 const AddressDisplay = ({ address, label, isFavorite }: Props) => {
+    const { themes } = useTheme();
+
     const [editLabel, setEditLabel] = useState(false);
     const [_label, setLabel] = useState('');
     const [_isFavorite, setFavorite] = useState(false);
 
-    const theme = useTheme();
-    console.log({ theme });
-
     useEffect(() => {
         setLabel(label);
         setFavorite(isFavorite);
@@ -105,7 +105,7 @@ const AddressDisplay = ({ address, label, isFavorite }: Props) => {
     };
 
     return (
-        <Wrapper>
+        <Wrapper color6={themes.color6} color9={themes.color9}>
             <QRCodePopover address={address} />
 
             {editLabel && (
@@ -118,7 +118,7 @@ const AddressDisplay = ({ address, label, isFavorite }: Props) => {
             )}
 
             {!editLabel && (
-                <Address>
+                <Address color9={themes.color9}>
                     {_label ? (
                         <div>
                             {_label} &lt; {address} &gt;
@@ -132,7 +132,9 @@ const AddressDisplay = ({ address, label, isFavorite }: Props) => {
             {editLabel ? (
                 <div>
                     <SaveButton onClick={handleSave}>Save</SaveButton>
-                    <CancelButton onClick={() => setEditLabel(false)}>Cancel</CancelButton>
+                    <CancelButton onClick={() => setEditLabel(false)} color9={themes.color9}>
+                        Cancel
+                    </CancelButton>
                 </div>
             ) : (
                 <Controls>

diff --git a/packages/web3-redux-components/src/components/InputField/index.tsx b/packages/web3-redux-components/src/components/InputField/index.tsx
@@ -1,8 +1,9 @@
 import styled from 'styled-components';
+import { useTheme } from '@chakra-ui/react';
 import Icon from '../Icon';
 
-const Wrapper = styled.div`
-    background: #2c2c30;
+const Wrapper: any = styled.div`
+    background: ${(props: any) => props.color6};
     border-radius: 8px;
     height: 52px;
     padding: 16px;
@@ -35,14 +36,18 @@ export interface Props {
     icon: string;
 }
 
-const InputField = ({ icon, onChange, placeholder, hasError }: Props) => (
-    <>
-        <Wrapper>
-            <Icon icon={icon} />
-            <input type="text" onChange={onChange} placeholder={placeholder} />
-        </Wrapper>
-        {hasError && <ValidationMsg>*Invalid address</ValidationMsg>}
-    </>
-);
+const InputField = ({ icon, onChange, placeholder, hasError }: Props) => {
+    const { themes } = useTheme();
+
+    return (
+        <>
+            <Wrapper color6={themes.color6}>
+                <Icon icon={icon} />
+                <input type="text" onChange={onChange} placeholder={placeholder} />
+            </Wrapper>
+            {hasError && <ValidationMsg>*Invalid address</ValidationMsg>}
+        </>
+    );
+};
 
 export default InputField;
diff --git a/packages/web3-redux-components/src/components/QRCodePopover/index.tsx b/packages/web3-redux-components/src/components/QRCodePopover/index.tsx
@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import styled from 'styled-components';
-import { Popover, PopoverContent, PopoverTrigger, PopoverBody } from '@chakra-ui/react';
+import { Popover, PopoverContent, PopoverTrigger, PopoverBody, useTheme } from '@chakra-ui/react';
+import { ReactComponent as QRIcon } from './assets/qr.svg';
+import { ReactComponent as QRHoverIcon } from './assets/qr-hover.svg';
+import { ReactComponent as QRSelectedIcon } from './assets/qr-selected.svg';
 import Erc20QRGenerator from '../Erc20QRGenerator';
-import { ReactComponent as QRIcon } from './assets/qr.svg'
-import { ReactComponent as QRHoverIcon } from './assets/qr-hover.svg'
-import { ReactComponent as QRSelectedIcon } from './assets/qr-selected.svg'
 
 export interface Props {
     address: string;
@@ -20,8 +20,8 @@ const QRbutton = styled.button`
     }
 `;
 
-const QRPopup = styled.div`
-    background: #1C1C24;
+const QRPopup: any = styled.div`
+    background: ${(props: any) => props.color5};
     border-radius: 8px;
     padding: 12px;
     position: relative;
@@ -33,32 +33,32 @@ const QRPopup = styled.div`
 `;
 
 const QRCodePopover = ({ address }: Props) => {
+    const { themes } = useTheme();
     const [isHovered, setHovered] = useState(false);
     const [isSelected, setSelected] = useState(false);
 
     return (
-        <Popover closeOnBlur={false} onClose={() => setSelected(false)} placement='bottom'>
+        <Popover closeOnBlur={false} onClose={() => setSelected(false)} placement="bottom">
             <PopoverTrigger>
                 <QRbutton
                     onMouseEnter={() => setHovered(true)}
                     onMouseLeave={() => setHovered(false)}
-                    onClick={() => setSelected(true)}>
-                    {isSelected ? <QRSelectedIcon /> : (
-                        isHovered ? <QRHoverIcon /> : <QRIcon />
-                    )}
+                    onClick={() => setSelected(true)}
+                >
+                    {isSelected ? <QRSelectedIcon /> : isHovered ? <QRHoverIcon /> : <QRIcon />}
                 </QRbutton>
             </PopoverTrigger>
 
             {/* @ts-ignore */}
-            <PopoverContent w='240px' h='240px' _focus={false}>
-                <QRPopup>
+            <PopoverContent w="240px" h="240px" _focus={false} border="1px" bg="transparent">
+                <QRPopup color5={themes.color5}>
                     <PopoverBody>
                         <Erc20QRGenerator address={address} />
                     </PopoverBody>
                 </QRPopup>
             </PopoverContent>
         </Popover>
     );
-}
+};
 
 export default QRCodePopover;
diff --git a/packages/web3-redux-components/src/components/SingleNFTInstance/index.tsx b/packages/web3-redux-components/src/components/SingleNFTInstance/index.tsx
@@ -1,8 +1,9 @@
+import { useTheme } from '@chakra-ui/react';
 import styled from 'styled-components';
 import Icon from '../Icon';
 
-const Wrapper = styled.div`
-    background: #1C1C24;
+const Wrapper: any = styled.div`
+    background: ${(props: any) => props.color5};
     border-radius: 12px;
     height: 346px;
     width: 264px;
@@ -12,7 +13,7 @@ const Wrapper = styled.div`
 `;
 
 const Item = styled.div`
-    background: #2C2F33;
+    background: #2c2f33;
     border-radius: 12px;
     width: 100%;
     height: 196px;
@@ -27,36 +28,36 @@ const Flex = styled.div`
 `;
 
 const Name = styled.div`
-    color: #FFFFFF;
+    color: #ffffff;
     font-weight: 700;
     font-size: 14px;
     line-height: 20px;
     text-align: center;
     padding: 6px;
-    border: 2px solid #2D2D3A;
+    border: 2px solid #2d2d3a;
     box-sizing: border-box;
     border-radius: 12px;
     margin-bottom: 16px;
 `;
 
 const Avatar = styled.div`
-    background: #2C2F33;
+    background: #2c2f33;
     margin-right: 8px;
     width: 24px;
     height: 24px;
     border-radius: 50%;
     float: left;
 `;
 
-const Owner = styled.div`
-    color: #92929D;
+const Owner: any = styled.div`
+    color: ${(props: any) => props.color9};
     font-weight: 400;
     font-size: 14px;
     line-height: 24px;
 `;
 
-const Price = styled.div`
-    color: #92929D;
+const Price: any = styled.div`
+    color: ${(props: any) => props.color9};
     font-weight: 600;
     font-size: 14px;
     line-height: 24px;
@@ -69,22 +70,26 @@ export interface Props {
     isSelected: boolean;
 }
 
-const SingleNFTInstance = ({ itemName, owner, price, isSelected }: Props) => (
-    // @ts-ignore
-    <Wrapper isSelected={isSelected}>
-        <Item />
-        <Name>{itemName}</Name>
-        <Flex>
-            <Owner>
-                <Avatar />
-                {owner}
-            </Owner>
-        </Flex>
-        <Flex>
-            <Price>{price} ETH</Price>
-            <Icon icon="ETH" />
-        </Flex>
-    </Wrapper>
-);
+const SingleNFTInstance = ({ itemName, owner, price, isSelected }: Props) => {
+    const { themes } = useTheme();
+
+    return (
+        // @ts-ignore
+        <Wrapper isSelected={isSelected} color5={themes.color5}>
+            <Item />
+            <Name>{itemName}</Name>
+            <Flex>
+                <Owner color9={themes.color9}>
+                    <Avatar />
+                    {owner}
+                </Owner>
+            </Flex>
+            <Flex>
+                <Price color9={themes.color9}>{price} ETH</Price>
+                <Icon icon="ETH" />
+            </Flex>
+        </Wrapper>
+    );
+};
 
 export default SingleNFTInstance;
diff --git a/packages/web3-redux-components/src/components/TransactionFlowModal/index.tsx b/packages/web3-redux-components/src/components/TransactionFlowModal/index.tsx
@@ -7,6 +7,7 @@ import {
     ModalFooter,
     ModalBody,
     Button,
+    useTheme,
 } from '@chakra-ui/react';
 import styled from 'styled-components';
 import { ReactComponent as CardIcon } from './assets/card.svg';
@@ -37,7 +38,9 @@ const StatusIcon = ({ icon }: any) => {
 };
 
 const TransactionFlowModal = ({ isOpen, tokenName, stage, actionHandler }: Props) => {
+    const { themes } = useTheme();
     const { onClose } = useDisclosure();
+
     const settings = {
         closeOnEsc: false,
         closeOnOverlayClick: false,
@@ -56,7 +59,7 @@ const TransactionFlowModal = ({ isOpen, tokenName, stage, actionHandler }: Props
         <>
             <Modal {...settings}>
                 <ModalOverlay />
-                <ModalContent bg="#1C1C24" borderRadius={'8px'}>
+                <ModalContent bg={themes.color5} borderRadius={'8px'}>
                     <ModalBody>
                         <TransactionProgressBarWrapper>
                             <TransactionProgressBar stage={stage} labels={TXFlowLabels} />