fix: 🐛 linting

.eslintrc.js

@@ -20,7 +20,7 @@ module.exports = {
     linkComponents: ['Hyperlink', { name: 'Link', linkAttribute: 'to' }],
   },
   extends: [
-    "eslint:recommended",
+    'eslint:recommended',
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:react/recommended',
@@ -33,6 +33,7 @@ module.exports = {
     'plugin:prettier/recommended',
   ],
   rules: {
+    '@typescript-eslint/explicit-function-return-type': 'off',
     'import/no-unresolved': 'off',
     camelcase: 'off',
     '@typescript-eslint/camelcase': 'off',

src/components/buttons/colorButton/ColorButton.tsx

@@ -23,7 +23,7 @@ interface GeneralProps {
   mobileMargin?: string;
 }
 
-const GeneralButton = styled.button`
+const GeneralButton = styled.button<GeneralProps>`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -36,7 +36,7 @@ const GeneralButton = styled.button`
   font-size: 14px;
   box-sizing: border-box;
   margin: ${({ withMargin }) => (withMargin ? withMargin : '0')};
-  width: ${({ fullWidth, buttonWidth }: GeneralProps) =>
+  width: ${({ fullWidth, buttonWidth }) =>
     fullWidth ? '100%' : buttonWidth ? buttonWidth : 'auto'};
 
   @media (${mediaWidths.mobile}) {
@@ -73,13 +73,13 @@ interface BorderProps {
   withBorder?: boolean;
 }
 
-const BorderButton = styled(GeneralButton)`
+const BorderButton = styled(GeneralButton)<BorderProps>`
   ${({ selected }) => selected && 'cursor: default'};
   ${({ selected }) => selected && 'font-weight: 800'};
   background-color: ${colorButtonBackground};
   color: ${textColor};
   border: 1px solid
-    ${({ borderColor, selected, withBorder }: BorderProps) =>
+    ${({ borderColor, selected, withBorder }) =>
       withBorder
         ? borderColor
           ? borderColor

src/components/buttons/multiButton/MultiButton.tsx

@@ -11,7 +11,7 @@ interface StyledSingleProps {
   buttonColor?: string;
 }
 
-const StyledSingleButton = styled.button`
+const StyledSingleButton = styled.button<StyledSingleProps>`
   border-radius: 4px;
   cursor: pointer;
   outline: none;
@@ -22,7 +22,7 @@ const StyledSingleButton = styled.button`
   color: ${multiSelectColor};
   flex-grow: 1;
 
-  ${({ selected, buttonColor }: StyledSingleProps) =>
+  ${({ selected, buttonColor }) =>
     selected
       ? css`
           color: white;
@@ -61,7 +61,7 @@ interface MultiBackProps {
   margin?: string;
 }
 
-const MultiBackground = styled.div`
+const MultiBackground = styled.div<MultiBackProps>`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -70,7 +70,7 @@ const MultiBackground = styled.div`
   background: ${multiButtonColor};
   flex-wrap: wrap;
 
-  ${({ margin }: MultiBackProps) => margin && `margin: ${margin}`}
+  ${({ margin }) => margin && `margin: ${margin}`}
 `;
 
 interface MultiButtonProps {

src/components/checkbox/Checkbox.tsx

@@ -21,7 +21,7 @@ const FixedWidth = styled.div`
   margin-right: 8px;
 `;
 
-const StyledCheckbox = styled.div`
+const StyledCheckbox = styled.div<{ checked: boolean }>`
   height: 16px;
   width: 16px;
   margin: 0;
@@ -33,8 +33,7 @@ const StyledCheckbox = styled.div`
   box-sizing: border-box;
   border-radius: 50%;
 
-  ${({ checked }: { checked: boolean }) =>
-    checked && `background-color: ${themeColors.blue2}`}
+  ${({ checked }) => checked && `background-color: ${themeColors.blue2}`}
 `;
 
 type CheckboxProps = {

src/components/generic/CardGeneric.tsx

@@ -18,16 +18,16 @@ interface ProgressBar {
   order?: number;
 }
 
-export const ProgressBar = styled.div`
+export const ProgressBar = styled.div<ProgressBar>`
   height: 10px;
   background-image: linear-gradient(
     to bottom,
     rgba(255, 255, 255, 0.3),
     rgba(0, 0, 0, 0.05)
   );
-  background-color: ${({ order }: ProgressBar) =>
+  background-color: ${({ order }) =>
     order === 2 ? progressFirst : progressSecond};
-  width: ${({ percent }: ProgressBar) => `${percent}%`};
+  width: ${({ percent }) => `${percent}%`};
 `;
 
 export const NodeTitle = styled.div`
@@ -83,13 +83,13 @@ export interface CardProps {
   cardPadding?: string;
 }
 
-export const Card = styled.div`
-  padding: ${({ cardPadding }: CardProps) => cardPadding ?? '16px'};
+export const Card = styled.div<CardProps>`
+  padding: ${({ cardPadding }) => cardPadding ?? '16px'};
   background: ${cardColor};
   box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   border: 1px solid ${cardBorderColor};
-  margin-bottom: ${({ bottom }: CardProps) => (bottom ? bottom : '25px')};
+  margin-bottom: ${({ bottom }) => (bottom ? bottom : '25px')};
   width: 100%;
 `;
 

src/components/generic/Styled.tsx

@@ -59,10 +59,9 @@ interface SeparationProps {
   lineColor?: string | ThemeSet;
 }
 
-export const Separation = styled.div`
-  height: ${({ height }: SeparationProps) => (height ? height : '1')}px;
-  background-color: ${({ lineColor }: SeparationProps) =>
-    lineColor ?? separationColor};
+export const Separation = styled.div<SeparationProps>`
+  height: ${({ height }) => (height ? height : '1')}px;
+  background-color: ${({ lineColor }) => lineColor ?? separationColor};
   width: 100%;
   margin: 16px 0;
 `;
@@ -73,13 +72,12 @@ interface SubCardProps {
   withMargin?: string;
 }
 
-export const SubCard = styled.div`
+export const SubCard = styled.div<SubCardProps>`
   margin: ${({ withMargin }) => (withMargin ? withMargin : '0 0 10px 0')};
   padding: ${({ padding }) => (padding ? padding : '16px')};
   background: ${subCardColor};
   border: 1px solid ${cardBorderColor};
-  border-left: ${({ color }: SubCardProps) =>
-    color ? `2px solid ${color}` : ''};
+  border-left: ${({ color }) => (color ? `2px solid ${color}` : '')};
 
   &:hover {
     box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.1);
@@ -148,15 +146,14 @@ export const ColumnLine = styled.div`
   }
 `;
 
-export const SimpleButton = styled.button`
+export const SimpleButton = styled.button<{ enabled?: boolean }>`
   cursor: pointer;
   outline: none;
   padding: 5px;
   margin: 5px;
   text-decoration: none;
   background-color: transparent;
-  color: ${({ enabled = true }: { enabled?: boolean }) =>
-    enabled ? textColor : unSelectedNavButton};
+  color: ${({ enabled = true }) => (enabled ? textColor : unSelectedNavButton)};
   border: 1px solid ${buttonBorderColor};
   display: flex;
   align-items: center;
@@ -175,20 +172,19 @@ interface DarkProps {
   withMargin?: string;
 }
 
-export const DarkSubTitle = styled.div`
-  font-size: ${({ fontSize }: DarkProps) => (fontSize ? fontSize : '14px')};
+export const DarkSubTitle = styled.div<DarkProps>`
+  font-size: ${({ fontSize }) => (fontSize ? fontSize : '14px')};
   color: ${unSelectedNavButton};
-  margin: ${({ withMargin }: DarkProps) => (withMargin ? withMargin : '0')};
+  margin: ${({ withMargin }) => (withMargin ? withMargin : '0')};
 `;
 
 interface ColorProps {
   color: string;
   selected?: boolean;
 }
-export const ColorButton = styled(SimpleButton)`
+export const ColorButton = styled(SimpleButton)<ColorProps>`
   color: ${({ selected }) => (selected ? textColor : chartLinkColor)};
-  border: ${({ selected, color }: ColorProps) =>
-    selected ? `1px solid ${color}` : ''};
+  border: ${({ selected, color }) => (selected ? `1px solid ${color}` : '')};
 
   &:hover {
     border: 1px solid ${({ color }: ColorProps) => color};

src/layouts/header/Header.styled.ts

@@ -11,14 +11,14 @@ export const IconPadding = styled.div`
   margin-bottom: -4px;
 `;
 
-export const HeaderTitle = styled.div`
+export const HeaderTitle = styled.div<{ withPadding: boolean }>`
   color: ${headerTextColor};
   font-weight: 800;
   display: flex;
   align-items: center;
   justify-content: center;
 
-  ${({ withPadding }: { withPadding: boolean }) =>
+  ${({ withPadding }) =>
     withPadding &&
     css`
       @media (${mediaWidths.mobile}) {
@@ -35,19 +35,18 @@ export const IconWrapper = styled.div`
   height: 24px;
 `;
 
-export const LinkWrapper = styled.div`
+export const LinkWrapper = styled.div<{ last?: boolean }>`
   color: ${headerTextColor};
-  margin: ${({ last }: { last?: boolean }) =>
-    last ? '0 16px 0 4px' : '0 4px'};
+  margin: ${({ last }) => (last ? '0 16px 0 4px' : '0 4px')};
 
   :hover {
     color: ${themeColors.blue2};
   }
 `;
 
-export const HeaderLine = styled(SingleLine)`
+export const HeaderLine = styled(SingleLine)<{ loggedIn: boolean }>`
   @media (${mediaWidths.mobile}) {
-    ${({ loggedIn }: { loggedIn: boolean }) =>
+    ${({ loggedIn }) =>
       !loggedIn &&
       css`
         width: 100%;

src/layouts/navigation/Navigation.tsx

@@ -29,9 +29,9 @@ import { useRouter } from 'next/router';
 import { Link } from '../../components/link/Link';
 import { useStatusState } from '../../context/StatusContext';
 
-const NavigationStyle = styled.div`
+const NavigationStyle = styled.div<{ isOpen: boolean }>`
   grid-area: nav;
-  width: ${({ isOpen }: { isOpen: boolean }) => (isOpen ? '200px' : '60px')};
+  width: ${({ isOpen }) => (isOpen ? '200px' : '60px')};
 
   @media (${mediaWidths.mobile}) {
     display: none;
@@ -51,9 +51,9 @@ const LinkView = styled.div`
   padding: 8px 0;
 `;
 
-const ButtonSection = styled.div`
+const ButtonSection = styled.div<{ isOpen: boolean }>`
   width: 100%;
-  ${({ isOpen }: { isOpen: boolean }) =>
+  ${({ isOpen }) =>
     !isOpen &&
     css`
       margin: 8px 0;
@@ -70,18 +70,17 @@ interface NavProps {
   isOpen?: boolean;
 }
 
-const NavButton = styled.div`
+const NavButton = styled.div<NavProps>`
   padding: 4px;
   border-radius: 4px;
-  background: ${({ selected }: NavProps) => selected && navBackgroundColor};
+  background: ${({ selected }) => selected && navBackgroundColor};
   display: flex;
   align-items: center;
-  ${({ isOpen }: NavProps) => !isOpen && 'justify-content: center'};
+  ${({ isOpen }) => !isOpen && 'justify-content: center'};
   width: 100%;
   text-decoration: none;
   margin: 4px 0;
-  color: ${({ selected }: NavProps) =>
-    selected ? navTextColor : unSelectedNavButton};
+  color: ${({ selected }) => (selected ? navTextColor : unSelectedNavButton)};
 
   &:hover {
     color: ${navTextColor};
@@ -99,7 +98,7 @@ const BurgerRow = styled.div`
   padding: 16px;
 `;
 
-const BurgerNav = styled.a`
+const BurgerNav = styled.a<NavProps>`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -107,10 +106,9 @@ const BurgerNav = styled.a`
   padding: 16px 16px 8px;
   border-radius: 4px;
   text-decoration: none;
-  background: ${({ selected }: NavProps) => selected && subCardColor};
-  ${({ isOpen }: NavProps) => !isOpen && 'justify-content: center'};
-  color: ${({ selected }: NavProps) =>
-    selected ? navTextColor : unSelectedNavButton};
+  background: ${({ selected }) => selected && subCardColor};
+  ${({ isOpen }) => !isOpen && 'justify-content: center'};
+  color: ${({ selected }) => (selected ? navTextColor : unSelectedNavButton)};
 `;
 
 const HOME = '/home';

src/layouts/navigation/sideSettings/SideSettings.tsx

@@ -10,7 +10,7 @@ import {
   unSelectedNavButton,
 } from '../../../styles/Themes';
 
-const SelectedIcon = styled.div`
+const SelectedIcon = styled.div<{ selected: boolean }>`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -27,8 +27,7 @@ const SelectedIcon = styled.div`
       color: ${inverseTextColor};
     }
   }
-  background-color: ${({ selected }: { selected: boolean }) =>
-    selected ? progressBackground : ''};
+  background-color: ${({ selected }) => (selected ? progressBackground : '')};
 `;
 
 const Symbol = styled.div`
@@ -36,12 +35,12 @@ const Symbol = styled.div`
   font-weight: 700;
 `;
 
-const IconRow = styled.div`
+const IconRow = styled.div<{ center?: boolean }>`
   margin: 5px 0;
   display: flex;
   justify-content: center;
   align-items: center;
-  ${({ center }: { center?: boolean }) => center && 'width: 100%'}
+  ${({ center }) => center && 'width: 100%'}
 `;
 
 const BurgerPadding = styled(SingleLine)`

src/views/chat/ChatBubble.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { MessageType } from './Chat.types';
+import { ThemeSet } from 'styled-theming';
 import {
   ChatStyledMessage,
   ChatBubbleMessage,
@@ -91,7 +92,7 @@ export const ChatBubble = ({ message }: ChatBubbleProps) => {
     tokens,
   } = message;
 
-  let color = chatBubbleColor;
+  let color: ThemeSet | string = chatBubbleColor;
   let textMessage = chatMessage;
   let dotColor = '';
   let showButton = false;