[Refact/Fix] typescript styled components

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",

packages/react-app/src/assets/quest-logo.tsx

@@ -6,7 +6,9 @@ type Props = {
   animated?: boolean;
 };
 
-const DivStyled = styled.div`
+const DivStyled = styled.div<{
+  animated?: boolean;
+}>`
   @keyframes textScale1 {
     0% {
       transform: scale(1);
@@ -18,7 +20,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()};
 `;
 

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<AccountButtonBackgroundStyledProps>`
   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%;
 `;
 

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 (
-    <BoxStyled padding={2 * GU} theme={theme}>
+    <BoxStyled theme={theme}>
       <ChildSpacer justify="space-around" align="center">
         <FieldInput
           label={<LabelStyled>Bounty Pool</LabelStyled>}

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<WrapperStyledProps>`
   display: flex;
   flex-wrap: nowrap;
-  ${(props: any) => (props.wide ? 'width:100%;' : '')}
+  ${(props) =>
+    props.wide &&
+    css`
+      width: 100%;
+    `}
+
   max-width: 100%;
   input {
     cursor: default;

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<AmountTokenWrapperStyledProps>`
   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)`

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<HTMLInputElement> & Function;
   error?: string | false;
 };
 

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)};
 `;
 

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

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,36 @@ const StatusDropdownStyled = styled(DropDown)`
   border: 1px solid ${(props: any) => props.borderColor};
 `;
 
-const FilterWrapperStyled = styled.div`
+const FilterWrapperStyled = styled.div<{
+  colDisplay?: boolean;
+  isSmallResolution?: boolean;
+}>`
   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()};
+      `}
   }
 `;
 

packages/react-app/src/components/footer.tsx

@@ -9,15 +9,15 @@ 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;
   flex-wrap: wrap;
   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 (
-    <FooterContainerStyled background={theme.surface} color={theme.contentSecondary}>
+    <FooterContainerStyled color={theme.contentSecondary}>
       <FooterContainerStyledSide>
         <FooterColumnStyled>
           <TitleLinkStyled href="#" external={false}>

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<HTMLAnchorElement>;
 };
 
 export default function HeaderTitle({ onClick = noop }: Props) {

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) {
           )}
         </Header>
       </HeaderWrapperStyled>
-      <ScrollViewStyled id="scroll-view" theme={currentTheme} isSmallResolution={below('medium')}>
+      <ScrollViewStyled id="scroll-view" theme={currentTheme}>
         <ContentWrapperStyled
           isSmallResolution={below('medium')}
           top={headerRef.current?.clientHeight}