From 47436afda7a111322460f7ccb0bc6c87190f421d Mon Sep 17 00:00:00 2001 From: Felipe Novaes Rocha Date: Sat, 9 Apr 2022 19:46:59 -0300 Subject: [PATCH 01/16] refact: adding types, cleanup not used code --- packages/react-app/package.json | 2 +- packages/react-app/src/assets/quest-logo.tsx | 8 +++-- .../src/components/account/account-button.tsx | 11 ++++-- .../react-app/src/components/dashboard.tsx | 4 +-- .../field-input/address-field-input.tsx | 14 ++++++-- .../field-input/amount-field-input.tsx | 15 ++++---- packages/react-app/src/components/filter.tsx | 35 +++++++++++++------ packages/react-app/src/types.d.ts | 1 - yarn.lock | 8 ++--- 9 files changed, 66 insertions(+), 32 deletions(-) diff --git a/packages/react-app/package.json b/packages/react-app/package.json index 4653a176..de33b5bd 100644 --- a/packages/react-app/package.json +++ b/packages/react-app/package.json @@ -96,7 +96,7 @@ "@testing-library/react-hooks": "^7.0.2", "@types/lodash-es": "^4.17.5", "@types/react-router-dom": "^5.3.1", - "@types/styled-components": "^5.1.15", + "@types/styled-components": "^5.1.25", "babel-eslint": "^10.1.0", "babel-plugin-styled-components": "^1.10.6", "babel-plugin-transform-class-properties": "^6.24.1", diff --git a/packages/react-app/src/assets/quest-logo.tsx b/packages/react-app/src/assets/quest-logo.tsx index 8abf88db..b7b86b0b 100644 --- a/packages/react-app/src/assets/quest-logo.tsx +++ b/packages/react-app/src/assets/quest-logo.tsx @@ -6,7 +6,11 @@ type Props = { animated?: boolean; }; -const DivStyled = styled.div` +interface DivStyledProps { + animated?: boolean; +} + +const DivStyled = styled.div` @keyframes textScale1 { 0% { transform: scale(1); @@ -18,7 +22,7 @@ const DivStyled = styled.div` transform: scale(1); } } - ${({ animated }: any) => animated && `animation: textScale1 1.15s infinite;`} + ${({ animated }) => animated && `animation: textScale1 1.15s infinite;`} margin-bottom: ${GUpx()}; `; diff --git a/packages/react-app/src/components/account/account-button.tsx b/packages/react-app/src/components/account/account-button.tsx index 6e1a8371..b54749e4 100644 --- a/packages/react-app/src/components/account/account-button.tsx +++ b/packages/react-app/src/components/account/account-button.tsx @@ -7,14 +7,19 @@ import HeaderModule from '../header/header-module'; // #region StyledComponents -const AccountButtonBackgroundStyled = styled.div` +interface AccountButtonBackgroundStyledProps { + background: any; + borderColor: any; +} + +const AccountButtonBackgroundStyled = styled.div` position: absolute; bottom: -3px; right: -3px; width: 10px; height: 10px; - background: ${({ background }: any) => background}; - border: 2px solid ${({ borderColor }: any) => borderColor}; + background: ${({ background }) => background}; + border: 2px solid ${({ borderColor }) => borderColor}; border-radius: 50%; `; diff --git a/packages/react-app/src/components/dashboard.tsx b/packages/react-app/src/components/dashboard.tsx index bc530cd8..26ad8bee 100644 --- a/packages/react-app/src/components/dashboard.tsx +++ b/packages/react-app/src/components/dashboard.tsx @@ -1,4 +1,4 @@ -import { GU, useTheme, textStyle } from '@1hive/1hive-ui'; +import { useTheme, textStyle } from '@1hive/1hive-ui'; import { useEffect, useState } from 'react'; import { ENUM_QUEST_VIEW_MODE } from 'src/constants'; import { DashboardModel } from 'src/models/dashboard.model'; @@ -52,7 +52,7 @@ export default function Dashboard() { }, []); return ( - + Bounty Pool} diff --git a/packages/react-app/src/components/field-input/address-field-input.tsx b/packages/react-app/src/components/field-input/address-field-input.tsx index 877322ad..4062c52e 100644 --- a/packages/react-app/src/components/field-input/address-field-input.tsx +++ b/packages/react-app/src/components/field-input/address-field-input.tsx @@ -2,7 +2,7 @@ import { TextInput, EthIdenticon, AddressField } from '@1hive/1hive-ui'; import { noop } from 'lodash-es'; import React from 'react'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import { FieldInput } from './field-input'; // #region Styled @@ -19,10 +19,18 @@ const EthIdenticonStyled = styled(EthIdenticon)` height: 38.4px; `; -const WrapperStyled = styled.div` +interface WrapperStyledProps { + wide?: boolean; +} +const WrapperStyled = styled.div` display: flex; flex-wrap: nowrap; - ${(props: any) => (props.wide ? 'width:100%;' : '')} + ${(props) => + props.wide && + css` + width: 100%; + `} + max-width: 100%; input { cursor: default; diff --git a/packages/react-app/src/components/field-input/amount-field-input.tsx b/packages/react-app/src/components/field-input/amount-field-input.tsx index 956df39d..cdab36d2 100644 --- a/packages/react-app/src/components/field-input/amount-field-input.tsx +++ b/packages/react-app/src/components/field-input/amount-field-input.tsx @@ -37,12 +37,12 @@ const TokenBadgeStyled = styled(TokenBadge)` width: fit-content; `; -const AutoCompleteWrapperStyled = styled.div` +const AutoCompleteWrapperStyled = styled.div<{ wide?: boolean }>` flex-grow: 3; input { & + div { pointer-events: none; - ${({ wide }: any) => (wide ? 'justify-content: end;' : '')} + ${({ wide }) => (wide ? 'justify-content: end;' : '')} } } ul[role='listbox'] { @@ -60,13 +60,16 @@ const LineStyled = styled.div` display: flex; justify-content: space-between; `; - -const AmountTokenWrapperStyled = styled.div` +interface AmountTokenWrapperStyledProps { + isEdit?: boolean; + wide?: boolean; +} +const AmountTokenWrapperStyled = styled.div` display: flex; justify-content: flex-end; align-items: center; - ${({ wide, isEdit }: any) => (wide && isEdit ? '' : `padding-right:${GUpx()};`)} - ${({ wide }: any) => (wide ? `width:100%;` : 'max-width:100%;')} + ${({ wide, isEdit }) => (wide && isEdit ? '' : `padding-right:${GUpx()};`)} + ${({ wide }) => (wide ? `width:100%;` : 'max-width:100%;')} `; const IconEditStyled = styled(IconEdit)` diff --git a/packages/react-app/src/components/filter.tsx b/packages/react-app/src/components/filter.tsx index 909c40be..55c8d91e 100644 --- a/packages/react-app/src/components/filter.tsx +++ b/packages/react-app/src/components/filter.tsx @@ -1,7 +1,7 @@ import { Button, SearchInput, DropDown, useTheme, useViewport } from '@1hive/1hive-ui'; import { useFilterContext } from 'src/contexts/filter.context'; import { GUpx } from 'src/utils/style.util'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import { DEFAULT_FILTER, ENUM_QUEST_STATE } from '../constants'; import DateFieldInput from './field-input/date-field-input'; import { FieldInput } from './field-input/field-input'; @@ -12,23 +12,38 @@ const StatusDropdownStyled = styled(DropDown)` border: 1px solid ${(props: any) => props.borderColor}; `; -const FilterWrapperStyled = styled.div` +interface FilterWrapperProps { + colDisplay?: boolean; + isSmallResolution?: boolean; +} + +const FilterWrapperStyled = styled.div` display: flex; flex-direction: row; align-items: center; justify-content: space-between; - flex-wrap: ${({ colDisplay }: any) => (colDisplay ? 'wrap' : 'no-wrap')}; + + flex-wrap: ${({ colDisplay }) => (colDisplay ? 'wrap' : 'no-wrap')}; + padding: 0 ${GUpx(2)}; - ${({ isSmallResolution }: any) => + + ${({ isSmallResolution }) => isSmallResolution - ? ` - margin-right: 20px; - padding-bottom: ${GUpx(2)}; - ` - : 'height:80px;'} // Size of scrollbar because parent is 100% + 20px + ? css` + margin-right: 20px; + padding-bottom: ${GUpx(2)}; + ` + : css` + height: 80px; + `} // Size of scrollbar because parent is 100% + 20px + // Each filter having a sibling & > div + div { - ${({ isSmallResolution }: any) => !isSmallResolution && `margin-left: ${GUpx()};`} + ${({ isSmallResolution }) => + !isSmallResolution && + css` + margin-left: ${GUpx()}; + `} } `; diff --git a/packages/react-app/src/types.d.ts b/packages/react-app/src/types.d.ts index 18875dce..7befb60e 100644 --- a/packages/react-app/src/types.d.ts +++ b/packages/react-app/src/types.d.ts @@ -1,4 +1,3 @@ // TODO : Declare full library type declare module '@1hive/1hive-ui'; declare module 'use-wallet'; -declare module 'styled-components'; diff --git a/yarn.lock b/yarn.lock index aa5c240b..3b004937 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3881,10 +3881,10 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c" integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw== -"@types/styled-components@^5.1.15": - version "5.1.15" - resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.15.tgz#30855b40aa80b3b4e4c0e43a4af366e7c246d148" - integrity sha512-4evch8BRI3AKgb0GAZ/sn+mSeB+Dq7meYtMi7J/0Mg98Dt1+r8fySOek7Sjw1W+Wskyjc93565o5xWAT/FdY0Q== +"@types/styled-components@^5.1.25": + version "5.1.25" + resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.25.tgz#0177c4ab5fa7c6ed0565d36f597393dae3f380ad" + integrity sha512-fgwl+0Pa8pdkwXRoVPP9JbqF0Ivo9llnmsm+7TCI330kbPIFd9qv1Lrhr37shf4tnxCOSu+/IgqM7uJXLWZZNQ== dependencies: "@types/hoist-non-react-statics" "*" "@types/react" "*" From 95f32efe10b3edcb8bddbe554a2f2638c2d3d139 Mon Sep 17 00:00:00 2001 From: Felipe Novaes Rocha Date: Sat, 9 Apr 2022 19:56:44 -0300 Subject: [PATCH 02/16] refact: props not used removed --- packages/react-app/src/components/filter.tsx | 6 ++---- packages/react-app/src/components/views/quest-list.tsx | 8 +++++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/react-app/src/components/filter.tsx b/packages/react-app/src/components/filter.tsx index 55c8d91e..05f04212 100644 --- a/packages/react-app/src/components/filter.tsx +++ b/packages/react-app/src/components/filter.tsx @@ -12,12 +12,10 @@ const StatusDropdownStyled = styled(DropDown)` border: 1px solid ${(props: any) => props.borderColor}; `; -interface FilterWrapperProps { +const FilterWrapperStyled = styled.div<{ colDisplay?: boolean; isSmallResolution?: boolean; -} - -const FilterWrapperStyled = styled.div` +}>` display: flex; flex-direction: row; align-items: center; diff --git a/packages/react-app/src/components/views/quest-list.tsx b/packages/react-app/src/components/views/quest-list.tsx index d54d60b4..0e2e2074 100644 --- a/packages/react-app/src/components/views/quest-list.tsx +++ b/packages/react-app/src/components/views/quest-list.tsx @@ -37,13 +37,15 @@ const EmptyStateCardStyled = styled(EmptyStateCard)` } `; -const FilterWrapperStyled = styled.div` +const FilterWrapperStyled = styled.div<{ + backgroundMotif?: any; // TODO Check if it still used +}>` position: sticky; top: 0; width: calc(100% + 20px); // Size of scrollbar z-index: 1; background-image: url(${background}); - background-color: ${({ theme }: any) => theme.background}; + background-color: ${({ theme }) => theme.background}; &::after { content: ''; background: url(${backgroundMotif}) no-repeat center -113px; @@ -139,7 +141,7 @@ export default function QuestList() { {!below('medium') && } - + Date: Sat, 9 Apr 2022 21:07:23 -0300 Subject: [PATCH 03/16] fix: remove alot dead codes --- packages/react-app/src/assets/quest-logo.tsx | 6 +-- .../field-input/date-field-input.tsx | 32 ++++++++---- .../components/field-input/field-input.tsx | 27 +++++++--- .../field-input/text-field-input.tsx | 8 +-- packages/react-app/src/components/footer.tsx | 6 +-- .../src/components/header/header-title.tsx | 3 +- .../react-app/src/components/main-view.tsx | 9 ++-- packages/react-app/src/components/quest.tsx | 8 +-- .../src/components/side-content-layout.tsx | 19 ++++--- .../src/components/utils/spacer-util.tsx | 51 +++++++++---------- .../utils/transaction-progress-component.tsx | 4 +- 11 files changed, 99 insertions(+), 74 deletions(-) diff --git a/packages/react-app/src/assets/quest-logo.tsx b/packages/react-app/src/assets/quest-logo.tsx index b7b86b0b..93325d9b 100644 --- a/packages/react-app/src/assets/quest-logo.tsx +++ b/packages/react-app/src/assets/quest-logo.tsx @@ -6,11 +6,9 @@ type Props = { animated?: boolean; }; -interface DivStyledProps { +const DivStyled = styled.div<{ animated?: boolean; -} - -const DivStyled = styled.div` +}>` @keyframes textScale1 { 0% { transform: scale(1); diff --git a/packages/react-app/src/components/field-input/date-field-input.tsx b/packages/react-app/src/components/field-input/date-field-input.tsx index 8905ffd1..eb9a38d8 100644 --- a/packages/react-app/src/components/field-input/date-field-input.tsx +++ b/packages/react-app/src/components/field-input/date-field-input.tsx @@ -1,28 +1,42 @@ import { useTheme } from '@1hive/1hive-ui'; import { connect } from 'formik'; import { noop } from 'lodash-es'; -import { CSSProperties, ReactNode } from 'react'; +import { CSSProperties, FocusEventHandler, ReactNode } from 'react'; import { GUpx, isDarkTheme } from 'src/utils/style.util'; -import styled from 'styled-components'; +import styled, { css as _css } from 'styled-components'; import { addTime, dateFormat, ONE_HOUR_IN_MS } from '../../utils/date.utils'; import { FieldInput } from './field-input'; // #region StyledComponents -const InputStyled = styled.input` - ${(props: any) => (props.wide ? 'width:100%;' : '')} - border: 1px solid ${(props: any) => props.borderColor}; +const InputStyled = styled.input<{ + borderColor?: string; + focusBorderColor?: string; + background?: string; + wide?: boolean; + isDarkTheme?: boolean; +}>` + ${(props: any) => + props.wide && + _css` + width: 100%; + `} + border: 1px solid ${(props) => props.borderColor}; border-radius: 12px; - background-color: ${({ background }: any) => background}; + background-color: ${({ background }) => background}; height: 40px; padding: ${GUpx()}; font-size: 14px; &:focus-visible { - border: 1px solid ${(props: any) => props.focusBorderColor}; + border: 1px solid ${(props) => props.focusBorderColor}; outline: none; } &::-webkit-calendar-picker-indicator { - ${(props: any) => (props.isDarkTheme ? 'filter: invert();' : '')}; + ${(props) => + props.isDarkTheme && + _css` + filter: invert(); + `}; } `; @@ -41,7 +55,7 @@ type Props = { compact?: boolean; wide?: boolean; formik?: any; - onBlur?: Function; + onBlur?: FocusEventHandler & Function; error?: string | false; }; diff --git a/packages/react-app/src/components/field-input/field-input.tsx b/packages/react-app/src/components/field-input/field-input.tsx index e73a76cb..265b4ffe 100644 --- a/packages/react-app/src/components/field-input/field-input.tsx +++ b/packages/react-app/src/components/field-input/field-input.tsx @@ -5,16 +5,22 @@ import { GUpx } from 'src/utils/style.util'; import styled from 'styled-components'; import { IconTooltip } from './icon-tooltip'; -const FieldStyled = styled.div` - ${({ compact }: any) => (!compact ? `margin-bottom:${GUpx(1)}` : '')}; - ${({ isLoading, wide }: any) => (isLoading || wide ? `width: 100%;` : 'max-width: 100%;')}; +const FieldStyled = styled.div<{ + compact?: boolean; + isLoading?: boolean; + wide?: boolean; +}>` + ${({ compact }) => (!compact ? `margin-bottom:${GUpx(1)}` : '')}; + ${({ isLoading, wide }) => (isLoading || wide ? `width: 100%;` : 'max-width: 100%;')}; `; + const ErrorStyled = styled.span` color: ${(props: any) => props.theme.negative}; font-size: small; margin-left: ${GUpx(2)}; font-style: italic; `; + const LabelStyled = styled.label` color: ${(props: any) => props.color}; font-size: 12px; @@ -33,16 +39,21 @@ const LineStyled = styled.div` margin-top: ${GUpx(0.5)}; `; -const ContentWrapperStyled = styled.div` +const ContentWrapperStyled = styled.div<{ + compact?: boolean; + wide?: boolean; + align: string; + direction: string; +}>` display: flex; - align-items: ${({ align }: any) => align}; - ${(props: any) => (!props.compact ? 'min-height: 45px;' : '')} + align-items: ${({ align }) => align}; + ${(props) => (!props.compact ? 'min-height: 45px;' : '')} & > div { input { - ${({ wide }: any) => (wide ? `max-width:none;` : '')} + ${({ wide }) => (wide ? `max-width:none;` : '')} } } - flex-direction: ${({ direction }: any) => direction}; + flex-direction: ${({ direction }) => direction}; padding-left: ${GUpx(0.5)}; `; diff --git a/packages/react-app/src/components/field-input/text-field-input.tsx b/packages/react-app/src/components/field-input/text-field-input.tsx index ef36e764..56fa903a 100644 --- a/packages/react-app/src/components/field-input/text-field-input.tsx +++ b/packages/react-app/src/components/field-input/text-field-input.tsx @@ -8,10 +8,10 @@ import { FieldInput } from './field-input'; // #region Styled -const MaxLineStyled = styled.div` +const MaxLineStyled = styled.div<{ maxLine: number }>` margin-bottom: ${GUpx()}; display: -webkit-box; - -webkit-line-clamp: ${(props: any) => props.maxLine}; + -webkit-line-clamp: ${(props) => props.maxLine}; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; @@ -21,8 +21,8 @@ const MaxLineStyled = styled.div` } `; -const BlockStyled = styled.div` - ${({ wide }: any) => wide && 'width: 100%;'} +const BlockStyled = styled.div<{ wide?: boolean }>` + ${({ wide }) => wide && 'width: 100%;'} `; // #endregion diff --git a/packages/react-app/src/components/footer.tsx b/packages/react-app/src/components/footer.tsx index f76c9edc..6436994c 100644 --- a/packages/react-app/src/components/footer.tsx +++ b/packages/react-app/src/components/footer.tsx @@ -9,7 +9,7 @@ import QuestModal from './modals/quest-modal'; // #region StyledComponent -const FooterContainerStyled = styled.div` +const FooterContainerStyled = styled.div<{ color: string }>` margin: auto; box-shadow: rgb(0 0 0 / 5%) 3px -2px 0px; display: flex; @@ -17,7 +17,7 @@ const FooterContainerStyled = styled.div` justify-content: space-between; a { - color: ${({ color }: any) => color} !important; + color: ${({ color }) => color} !important; } padding: ${GUpx(8)}; @@ -83,7 +83,7 @@ export default function footer() { const year = new Date().getFullYear(); return ( - + diff --git a/packages/react-app/src/components/header/header-title.tsx b/packages/react-app/src/components/header/header-title.tsx index 98faf9d0..4f02ed87 100644 --- a/packages/react-app/src/components/header/header-title.tsx +++ b/packages/react-app/src/components/header/header-title.tsx @@ -2,6 +2,7 @@ import { noop } from 'lodash'; import { Link } from 'react-router-dom'; import { GUpx } from 'src/utils/style.util'; import styled from 'styled-components'; +import { MouseEventHandler } from 'react'; import { ENUM_PAGES } from '../../constants'; import { LogoTitle } from '../../assets/logo-title'; @@ -22,7 +23,7 @@ const TitleLinkWrapperStyled = styled.div` // #endregion type Props = { - onClick?: Function; + onClick?: MouseEventHandler; }; export default function HeaderTitle({ onClick = noop }: Props) { diff --git a/packages/react-app/src/components/main-view.tsx b/packages/react-app/src/components/main-view.tsx index d05bfe0d..7931ae1f 100644 --- a/packages/react-app/src/components/main-view.tsx +++ b/packages/react-app/src/components/main-view.tsx @@ -22,8 +22,11 @@ const HeaderWrapperStyled = styled.div` width: 100%; `; -const ContentWrapperStyled = styled.div` - padding: ${({ isSmallResolution }: any) => (isSmallResolution ? GUpx() : GUpx(4))}; +const ContentWrapperStyled = styled.div<{ + isSmallResolution?: boolean; + top?: number; +}>` + padding: ${({ isSmallResolution }) => (isSmallResolution ? GUpx() : GUpx(4))}; `; const ScrollViewStyled = styled.div` @@ -89,7 +92,7 @@ function MainView({ children }: Props) { )} - + ` display: flex; flex-direction: row; justify-content: space-between; width: 100%; - ${(props: any) => (props.twoCol ? '' : 'flex-wrap: wrap;')} + ${(props) => (props.twoCol ? '' : 'flex-wrap: wrap;')} `; const FirstColStyled = styled.div` @@ -413,7 +413,7 @@ export default function Quest({ )} <> - + {isEdit && titleInput} - + {(bounty !== null || isEdit) && ( - props.scrollable - ? ` +const ScrollViewStyled = styled.div<{ scrollable?: boolean }>` + ${(props) => + props.scrollable && + css` overflow-x: auto; ::-webkit-scrollbar { display: none; @@ -35,8 +35,7 @@ const ScrollViewStyled = styled.div` -ms-overflow-style: none; scrollbar-width: none; height: calc(100vh - 64px); - ` - : ''} + `} grid-area: m; `; @@ -50,8 +49,8 @@ type Props = { function SideContentLayout({ main, side, footer }: Props) { const { width: vw } = useViewport(); const wrapperElement = document.getElementById('main-scroll'); - const scrollRef = useRef(); - const footerRef = useRef(); + const scrollRef = useRef(null); + const footerRef = useRef(null); const [isOneCol, setIsOneCol] = useState(false); useEffect(() => { @@ -101,7 +100,7 @@ function SideContentLayout({ main, side, footer }: Props) { return ( <> - + {side && {side}} {main} diff --git a/packages/react-app/src/components/utils/spacer-util.tsx b/packages/react-app/src/components/utils/spacer-util.tsx index c1c10b5a..24cabe53 100644 --- a/packages/react-app/src/components/utils/spacer-util.tsx +++ b/packages/react-app/src/components/utils/spacer-util.tsx @@ -1,27 +1,35 @@ import React, { ReactNode } from 'react'; -import styled from 'styled-components'; +import styled, { css as _css } from 'styled-components'; -const ChildWrapperStyled = styled.div` +export type ChildSpacerProps = { + children?: ReactNode; + size?: 4 | 8 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72; + vertical?: boolean; + justify?: 'start' | 'middle' | 'center' | 'end' | 'space-between' | 'space-around'; + align?: 'start' | 'center' | 'end'; + buttonEnd?: boolean; +}; + +const ChildWrapperStyled = styled.div` display: flex; flex-wrap: wrap; - flex-direction: ${(props: any) => (props.vertical ? 'column' : 'row')}; - ${(props: any) => (props.justify ? `justify-content:${props.justify};` : '')} - ${(props: any) => (props.align ? `align-items:${props.align};` : '')} + flex-direction: ${(props) => (props.vertical ? 'column' : 'row')}; + ${(props) => (props.justify ? `justify-content:${props.justify};` : '')} + ${(props) => (props.align ? `align-items:${props.align};` : '')} - ${(props: any) => - props.buttonEnd - ? ` - & > div:last-child { - flex-grow: 1; - display: flex; - justify-content: flex-end; + ${(props) => + props.buttonEnd && + _css` + & > div:last-child { + flex-grow: 1; + display: flex; + justify-content: flex-end; - button { - margin-left: auto; + button { + margin-left: auto; + } } - } - ` - : ''} + `} `; type Props = { @@ -158,15 +166,6 @@ export function Inset({ ); } -type ChildSpacerProps = { - children?: ReactNode; - size?: 4 | 8 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72; - vertical?: boolean; - justify?: 'start' | 'middle' | 'center' | 'end' | 'space-between' | 'space-around'; - align?: 'start' | 'center' | 'end'; - buttonEnd?: boolean; -}; - export function ChildSpacer({ children, size = 8, diff --git a/packages/react-app/src/components/utils/transaction-progress-component.tsx b/packages/react-app/src/components/utils/transaction-progress-component.tsx index 22e4d47c..0f3cd634 100644 --- a/packages/react-app/src/components/utils/transaction-progress-component.tsx +++ b/packages/react-app/src/components/utils/transaction-progress-component.tsx @@ -15,8 +15,8 @@ const WrapperStyled = styled.div` flex-direction: column; `; -const MessageStyled = styled.div` - color: ${({ messageColor }: any) => messageColor}; +const MessageStyled = styled.div<{ messageColor?: string }>` + color: ${({ messageColor }) => messageColor}; margin-bottom: ${GUpx()}; `; From 89052833d63f34d019007f76b871dc639fa6fe43 Mon Sep 17 00:00:00 2001 From: Felipe Novaes Rocha Date: Sat, 9 Apr 2022 21:09:09 -0300 Subject: [PATCH 04/16] refact: simple way --- .../src/components/account/account-button.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/react-app/src/components/account/account-button.tsx b/packages/react-app/src/components/account/account-button.tsx index b54749e4..cb8a3581 100644 --- a/packages/react-app/src/components/account/account-button.tsx +++ b/packages/react-app/src/components/account/account-button.tsx @@ -7,12 +7,10 @@ import HeaderModule from '../header/header-module'; // #region StyledComponents -interface AccountButtonBackgroundStyledProps { - background: any; - borderColor: any; -} - -const AccountButtonBackgroundStyled = styled.div` +const AccountButtonBackgroundStyled = styled.div<{ + background: string; + borderColor: string; +}>` position: absolute; bottom: -3px; right: -3px; From bfbb88ea2032de89bd96ee935159ea1695f05d76 Mon Sep 17 00:00:00 2001 From: Felipe Novaes Rocha Date: Sat, 9 Apr 2022 21:10:36 -0300 Subject: [PATCH 05/16] refact: simple way --- .../src/components/field-input/address-field-input.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/react-app/src/components/field-input/address-field-input.tsx b/packages/react-app/src/components/field-input/address-field-input.tsx index 4062c52e..41a3cae6 100644 --- a/packages/react-app/src/components/field-input/address-field-input.tsx +++ b/packages/react-app/src/components/field-input/address-field-input.tsx @@ -19,10 +19,9 @@ const EthIdenticonStyled = styled(EthIdenticon)` height: 38.4px; `; -interface WrapperStyledProps { +const WrapperStyled = styled.div<{ wide?: boolean; -} -const WrapperStyled = styled.div` +}>` display: flex; flex-wrap: nowrap; ${(props) => From 0991f8d0f5ee17617f69dbf14efa3cd30741758e Mon Sep 17 00:00:00 2001 From: Felipe Novaes Rocha Date: Sat, 9 Apr 2022 21:17:10 -0300 Subject: [PATCH 06/16] refact: css template string --- .../src/components/field-input/field-input.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/react-app/src/components/field-input/field-input.tsx b/packages/react-app/src/components/field-input/field-input.tsx index 265b4ffe..adca1fc9 100644 --- a/packages/react-app/src/components/field-input/field-input.tsx +++ b/packages/react-app/src/components/field-input/field-input.tsx @@ -2,7 +2,7 @@ import { useTheme } from '@1hive/1hive-ui'; import React from 'react'; import Skeleton from 'react-loading-skeleton'; import { GUpx } from 'src/utils/style.util'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import { IconTooltip } from './icon-tooltip'; const FieldStyled = styled.div<{ @@ -10,8 +10,19 @@ const FieldStyled = styled.div<{ isLoading?: boolean; wide?: boolean; }>` - ${({ compact }) => (!compact ? `margin-bottom:${GUpx(1)}` : '')}; - ${({ isLoading, wide }) => (isLoading || wide ? `width: 100%;` : 'max-width: 100%;')}; + ${({ compact }) => + !compact && + css` + margin-bottom: ${GUpx(1)}; + `}; + ${({ isLoading, wide }) => + isLoading || wide + ? css` + width: 100%; + ` + : css` + max-width: 100%; + `}; `; const ErrorStyled = styled.span` From df4703cc015333e40b13770de9cfa745e734cb86 Mon Sep 17 00:00:00 2001 From: Corantin Noll Date: Tue, 12 Apr 2022 13:08:42 -0400 Subject: [PATCH 07/16] Add babel ts and styled component pluggin + add ThemeInterface + Object.Freeze for constants --- packages/react-app/.babelrc | 5 +- packages/react-app/package.json | 3 +- packages/react-app/src/app.tsx | 1 - .../react-app/src/components/main-view.tsx | 15 +- .../src/components/side-content-layout.tsx | 114 -------- .../utils/transaction-progress-component.tsx | 10 +- .../src/components/views/quest-list.tsx | 4 +- packages/react-app/src/constants.ts | 48 ++-- .../react-app/src/contexts/theme.context.tsx | 5 +- .../react-app/src/hooks/use-toggle-theme.ts | 5 +- packages/react-app/src/networks.ts | 4 +- packages/react-app/src/styles/dark-theme.ts | 3 +- packages/react-app/src/styles/light-theme.ts | 3 +- packages/react-app/src/styles/theme.d.ts | 252 ++++++++++++++++++ yarn.lock | 204 +++++++++++++- 15 files changed, 506 insertions(+), 170 deletions(-) delete mode 100644 packages/react-app/src/components/side-content-layout.tsx create mode 100644 packages/react-app/src/styles/theme.d.ts diff --git a/packages/react-app/.babelrc b/packages/react-app/.babelrc index 189bb6c5..97b61640 100644 --- a/packages/react-app/.babelrc +++ b/packages/react-app/.babelrc @@ -8,10 +8,11 @@ "corejs": 3 } ], - "@babel/preset-react" + "@babel/preset-react", + "@babel/preset-typescript" ], "plugins": [ - ["styled-components", { "displayName": true }], + ["babel-plugin-styled-components", { "displayName": true }], "@babel/plugin-transform-react-jsx-source", "@babel/plugin-proposal-class-properties" ], diff --git a/packages/react-app/package.json b/packages/react-app/package.json index 2c119865..89dbefa9 100644 --- a/packages/react-app/package.json +++ b/packages/react-app/package.json @@ -92,13 +92,14 @@ "@babel/plugin-transform-react-jsx-source": "^7.12.13", "@babel/preset-env": "^7.7.4", "@babel/preset-react": "^7.7.4", + "@babel/preset-typescript": "^7.16.7", "@sentry/webpack-plugin": "^1.15.1", "@testing-library/react-hooks": "^7.0.2", "@types/lodash-es": "^4.17.5", "@types/react-router-dom": "^5.3.1", "@types/styled-components": "^5.1.25", "babel-eslint": "^10.1.0", - "babel-plugin-styled-components": "^1.10.6", + "babel-plugin-styled-components": "^2.0.7", "babel-plugin-transform-class-properties": "^6.24.1", "cross-env": "^7.0.2", "eslint-config-prettier": "^8.1.0", diff --git a/packages/react-app/src/app.tsx b/packages/react-app/src/app.tsx index 055c9e34..e884b969 100644 --- a/packages/react-app/src/app.tsx +++ b/packages/react-app/src/app.tsx @@ -37,7 +37,6 @@ const AppStyled = styled.div` function App() { const { currentTheme } = useThemeContext(); - return ( diff --git a/packages/react-app/src/components/main-view.tsx b/packages/react-app/src/components/main-view.tsx index ec456baf..973bc3cd 100644 --- a/packages/react-app/src/components/main-view.tsx +++ b/packages/react-app/src/components/main-view.tsx @@ -1,12 +1,11 @@ import { Root, useViewport, Button, IconFilter } from '@1hive/1hive-ui'; -import React, { useEffect, useRef } from 'react'; +import React, { useEffect } from 'react'; import { useWallet } from 'src/contexts/wallet.context'; import { Logger } from 'src/utils/logger'; import { isConnected } from 'src/utils/web3.utils'; import styled from 'styled-components'; import { usePageContext } from 'src/contexts/page.context'; import Skeleton from 'react-loading-skeleton'; -import { useThemeContext } from 'src/contexts/theme.context'; import { GUpx } from 'src/utils/style.util'; import { useFilterContext } from 'src/contexts/filter.context'; import Header from './header'; @@ -24,7 +23,6 @@ const HeaderWrapperStyled = styled.div` const ContentWrapperStyled = styled.div<{ isSmallResolution?: boolean; - top?: number; }>` padding: ${({ isSmallResolution }) => (isSmallResolution ? GUpx() : GUpx(4))}; min-height: calc(100vh - 80px); @@ -64,8 +62,6 @@ function MainView({ children }: Props) { const { activateWallet, walletAddress } = useWallet(); const { page } = usePageContext(); const { below } = useViewport(); - const headerRef = useRef(null); - const { currentTheme } = useThemeContext(); const { toggleFilter } = useFilterContext(); useEffect(() => { @@ -81,7 +77,7 @@ function MainView({ children }: Props) { return ( - +
{below('medium') && (