From 80435ab7e85c084e8bad00ac87dbf1f97b910646 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Fri, 7 Aug 2020 09:36:16 -0300 Subject: [PATCH 1/3] add send icon and fix ideticon lg size --- src/dataDisplay/FixedIcon/fixedIcon.stories.tsx | 1 + .../FixedIcon/images/arrowSentWhite.tsx | 17 +++++++++++++++++ src/dataDisplay/FixedIcon/index.tsx | 2 ++ src/theme.ts | 2 +- 4 files changed, 21 insertions(+), 1 deletion(-) create mode 100644 src/dataDisplay/FixedIcon/images/arrowSentWhite.tsx diff --git a/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx b/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx index eb5b9cf8..ec4dcadd 100644 --- a/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx +++ b/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx @@ -40,6 +40,7 @@ export const Icons = (): React.ReactElement => { 'dropdownArrowSmall', 'arrowReceived', 'arrowSent', + 'arrowSentWhite', 'threeDots', 'options', 'plus', diff --git a/src/dataDisplay/FixedIcon/images/arrowSentWhite.tsx b/src/dataDisplay/FixedIcon/images/arrowSentWhite.tsx new file mode 100644 index 00000000..696af3ab --- /dev/null +++ b/src/dataDisplay/FixedIcon/images/arrowSentWhite.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +const icon = ( + + + +); + +export default icon; diff --git a/src/dataDisplay/FixedIcon/index.tsx b/src/dataDisplay/FixedIcon/index.tsx index d523cfaf..75cf85bc 100644 --- a/src/dataDisplay/FixedIcon/index.tsx +++ b/src/dataDisplay/FixedIcon/index.tsx @@ -7,6 +7,7 @@ import bullit from './images/bullit'; import dropdownArrowSmall from './images/dropdownArrowSmall'; import arrowReceived from './images/arrowReceived'; import arrowSent from './images/arrowSent'; +import arrowSentWhite from './images/arrowSentWhite'; import threeDots from './images/threeDots'; import options from './images/options'; import plus from './images/plus'; @@ -26,6 +27,7 @@ const icons = { dropdownArrowSmall, arrowReceived, arrowSent, + arrowSentWhite, threeDots, options, plus, diff --git a/src/theme.ts b/src/theme.ts index 42ad44e0..ac1ecc5b 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -70,7 +70,7 @@ const theme = { xs: '10px', sm: '16px', md: '32px', - lg: '60px', + lg: '40px', }, }, loader: { From 2bddc477db94c8a188a56a1c5ac588efa674b057 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Fri, 7 Aug 2020 10:58:06 -0300 Subject: [PATCH 2/3] add fixedIcons stories --- .../FixedIcon/fixedIcon.stories.tsx | 39 +++++++++++++++++-- .../FixedIcon/images/arrowReceivedWhite.tsx | 17 ++++++++ src/dataDisplay/FixedIcon/index.tsx | 2 + 3 files changed, 55 insertions(+), 3 deletions(-) create mode 100644 src/dataDisplay/FixedIcon/images/arrowReceivedWhite.tsx diff --git a/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx b/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx index ec4dcadd..2ebb6ee2 100644 --- a/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx +++ b/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx @@ -23,12 +23,11 @@ export const Icons = (): React.ReactElement => { align-items: center; flex-direction: column; justify-content: space-evenly; - padding: 5px; width: 140px; height: 140px; border: 1px solid ${({ theme }) => theme.colors.background}; - font-family: 'Averta', sans-serif; + font-family: ${({ theme }) => theme.fonts.fontFamily}; font-size: 14px; `; @@ -40,7 +39,6 @@ export const Icons = (): React.ReactElement => { 'dropdownArrowSmall', 'arrowReceived', 'arrowSent', - 'arrowSentWhite', 'threeDots', 'options', 'plus', @@ -64,3 +62,38 @@ export const Icons = (): React.ReactElement => { ); }; + +export const IconsWhite = (): React.ReactElement => { + const Wrapper = styled.div` + display: flex; + flex-wrap: wrap; + `; + + const IconBoxColor = styled.div` + display: flex; + align-items: center; + flex-direction: column; + justify-content: space-evenly; + padding: 5px; + width: 140px; + height: 140px; + border: 1px solid ${({ theme }) => theme.colors.background}; + background-color: ${({ theme }) => theme.colors.primary}; + font-family: ${({ theme }) => theme.fonts.fontFamily}; + font-size: 14px; + color: white; + `; + + const iconsWhite: IconTypes[] = ['arrowSentWhite', 'arrowReceivedWhite']; + + return ( + + {iconsWhite.map((iconsWhite, index) => ( + + + {iconsWhite} + + ))} + + ); +}; diff --git a/src/dataDisplay/FixedIcon/images/arrowReceivedWhite.tsx b/src/dataDisplay/FixedIcon/images/arrowReceivedWhite.tsx new file mode 100644 index 00000000..7d2fcef0 --- /dev/null +++ b/src/dataDisplay/FixedIcon/images/arrowReceivedWhite.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +const icon = ( + + + +); + +export default icon; diff --git a/src/dataDisplay/FixedIcon/index.tsx b/src/dataDisplay/FixedIcon/index.tsx index 75cf85bc..57050982 100644 --- a/src/dataDisplay/FixedIcon/index.tsx +++ b/src/dataDisplay/FixedIcon/index.tsx @@ -6,6 +6,7 @@ import connectedWallet from './images/connectedWallet'; import bullit from './images/bullit'; import dropdownArrowSmall from './images/dropdownArrowSmall'; import arrowReceived from './images/arrowReceived'; +import arrowReceivedWhite from './images/arrowReceivedWhite'; import arrowSent from './images/arrowSent'; import arrowSentWhite from './images/arrowSentWhite'; import threeDots from './images/threeDots'; @@ -26,6 +27,7 @@ const icons = { bullit, dropdownArrowSmall, arrowReceived, + arrowReceivedWhite, arrowSent, arrowSentWhite, threeDots, From 7ef42c7c97a81f8b4f5b64a1c2be30faee6b7703 Mon Sep 17 00:00:00 2001 From: nicosampler Date: Thu, 13 Aug 2020 18:28:35 -0300 Subject: [PATCH 3/3] fixed icon style refactor --- .../FixedIcon/fixedIcon.stories.tsx | 57 +++++++------------ 1 file changed, 21 insertions(+), 36 deletions(-) diff --git a/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx b/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx index 2ebb6ee2..de09d9b0 100644 --- a/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx +++ b/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx @@ -12,25 +12,25 @@ export default { }, }; -export const Icons = (): React.ReactElement => { - const Wrapper = styled.div` - display: flex; - flex-wrap: wrap; - `; +const Wrapper = styled.div` + display: flex; + flex-wrap: wrap; +`; - const IconBox = styled.div` - display: flex; - align-items: center; - flex-direction: column; - justify-content: space-evenly; - padding: 5px; - width: 140px; - height: 140px; - border: 1px solid ${({ theme }) => theme.colors.background}; - font-family: ${({ theme }) => theme.fonts.fontFamily}; - font-size: 14px; - `; +const IconBox = styled.div` + display: flex; + align-items: center; + flex-direction: column; + justify-content: space-evenly; + padding: 5px; + width: 140px; + height: 140px; + border: 1px solid ${({ theme }) => theme.colors.background}; + font-family: ${({ theme }) => theme.fonts.fontFamily}; + font-size: 14px; +`; +export const Icons = (): React.ReactElement => { const icons: IconTypes[] = [ 'arrowSort', 'connectedRinkeby', @@ -64,23 +64,8 @@ export const Icons = (): React.ReactElement => { }; export const IconsWhite = (): React.ReactElement => { - const Wrapper = styled.div` - display: flex; - flex-wrap: wrap; - `; - - const IconBoxColor = styled.div` - display: flex; - align-items: center; - flex-direction: column; - justify-content: space-evenly; - padding: 5px; - width: 140px; - height: 140px; - border: 1px solid ${({ theme }) => theme.colors.background}; + const GreenBoxColor = styled(IconBox)` background-color: ${({ theme }) => theme.colors.primary}; - font-family: ${({ theme }) => theme.fonts.fontFamily}; - font-size: 14px; color: white; `; @@ -88,11 +73,11 @@ export const IconsWhite = (): React.ReactElement => { return ( - {iconsWhite.map((iconsWhite, index) => ( - + {iconsWhite.map((iconsWhite) => ( + {iconsWhite} - + ))} );