diff --git a/.eslintrc b/.eslintrc index e5559d1a..e6c6a2ae 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,11 +1,22 @@ { "parser": "@typescript-eslint/parser", "extends": [ - "react-app", - "prettier", - "prettier/react", - "plugin:import/errors", - "plugin:@typescript-eslint/recommended" + "plugin:react/recommended", + "plugin:@typescript-eslint/recommended", + "prettier/@typescript-eslint", + "plugin:prettier/recommended" ], - "plugins": ["prettier", "import"] + "plugins": ["react-hooks"], + "parserOptions": { + "ecmaVersion": 2018, + "sourceType": "module", + "ecmaFeatures": { + "jsx": true + } + }, + "rules": { + "react-hooks/rules-of-hooks": "error", + "react-hooks/exhaustive-deps": "warn", + "react/prop-types": "off" + } } diff --git a/.prettierrc b/.prettierrc index eccaf745..7f0a1dfc 100644 --- a/.prettierrc +++ b/.prettierrc @@ -3,7 +3,7 @@ "jsxBracketSameLine": true, "printWidth": 80, "singleQuote": true, - "trailingComma": "none", + "trailingComma": "es5", "tabWidth": 2, "useTabs": false } \ No newline at end of file diff --git a/package.json b/package.json index 62792a57..f7f0fa87 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "build": "rimraf dist && webpack --mode production", "build-storybook": "build-storybook -s public --docs", "storybook": "start-storybook -p 9009 -s public --docs", + "lint:check": "eslint './src/**/*.{js,jsx,ts,tsx}'", "prepare": "yarn build" }, "author": "Gnosis (https://gnosis.pm)", @@ -40,34 +41,31 @@ "@testing-library/user-event": "10.3.1", "@types/big.js": "^4.0.5", "@types/classnames": "^2.2.10", - "@types/jest": "26.0.3", + "@types/jest": "26.0.5", "@types/material-ui": "^0.21.7", - "@types/node": "14.0.14", - "@types/react": "16.9.41", + "@types/node": "14.0.24", + "@types/react": "16.9.43", "@types/react-dom": "16.9.8", - "@types/styled-components": "5.1.0", + "@types/styled-components": "5.1.1", "@types/yup": "0.29.3", - "@typescript-eslint/eslint-plugin": "^3.5.0", - "@typescript-eslint/parser": "^3.5.0", + "@typescript-eslint/eslint-plugin": "^3.7.0", + "@typescript-eslint/parser": "^3.7.0", "awesome-typescript-loader": "^5.2.1", "babel-eslint": "^10.0.3", "babel-loader": "8.1.0", "copy-webpack-plugin": "^5.1.1", - "eslint": "7.3.1", + "eslint": "7.5.0", "eslint-config-prettier": "6.11.0", - "eslint-config-react-app": "5.2.1", - "eslint-plugin-import": "2.22.0", - "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-prettier": "3.1.4", - "eslint-plugin-react": "7.20.2", - "eslint-plugin-react-hooks": "4.0.4", + "eslint-plugin-react": "7.20.3", + "eslint-plugin-react-hooks": "4.0.8", "ethereum-blockies-base64": "^1.0.2", "prettier": "2.0.5", "react": "16.13.1", "react-dom": "16.13.1", "rimraf": "^3.0.2", "styled-components": "5.1.1", - "typescript": "3.9.5", + "typescript": "3.9.7", "webpack": "4.43.0", "webpack-cli": "^3.3.10", "webpack-node-externals": "^1.7.2" diff --git a/src/dataDisplay/Card/card.stories.tsx b/src/dataDisplay/Card/card.stories.tsx index b77d8b6e..7fcb6c88 100644 --- a/src/dataDisplay/Card/card.stories.tsx +++ b/src/dataDisplay/Card/card.stories.tsx @@ -7,11 +7,11 @@ export default { title: 'Data Display/Card', component: Card, parameters: { - componentSubtitle: 'Useful to wrap content inside a styled container.' - } + componentSubtitle: 'Useful to wrap content inside a styled container.', + }, }; -export const card = () => ( +export const SimpleCard = (): React.ReactElement => ( Some text diff --git a/src/dataDisplay/Card/index.tsx b/src/dataDisplay/Card/index.tsx index be470af1..7640ad2c 100644 --- a/src/dataDisplay/Card/index.tsx +++ b/src/dataDisplay/Card/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import styled from 'styled-components'; import { rgba } from 'polished'; -const Card = styled.div` +const StyledCard = styled.div` box-shadow: 1px 2px 10px 0 ${({ theme }) => rgba(theme.colors.shadow.color, 0.08)}; border-radius: 8px; @@ -10,4 +10,13 @@ const Card = styled.div` background-color: ${({ theme }) => theme.colors.white}; `; -export default ({ ...args }) => ; +type Props = { + className?: string; + children: React.ReactNode; +}; + +const Card = ({ className, children }: Props): React.ReactElement => ( + {children} +); + +export default Card; diff --git a/src/dataDisplay/Divider/divider.stories.tsx b/src/dataDisplay/Divider/divider.stories.tsx index aac78fd4..3fe6d54c 100644 --- a/src/dataDisplay/Divider/divider.stories.tsx +++ b/src/dataDisplay/Divider/divider.stories.tsx @@ -6,11 +6,11 @@ export default { title: 'Data Display/Divider', component: Divider, parameters: { - componentSubtitle: 'Used to separate content.' - } + componentSubtitle: 'Used to separate content.', + }, }; -export const section = () => ( +export const Section = (): React.ReactElement => ( <>
Some content
diff --git a/src/dataDisplay/Divider/index.tsx b/src/dataDisplay/Divider/index.tsx index d2bb56fe..84ee31c8 100644 --- a/src/dataDisplay/Divider/index.tsx +++ b/src/dataDisplay/Divider/index.tsx @@ -1,9 +1,17 @@ import React from 'react'; import styled from 'styled-components'; -const Divider = styled.div` +const StyledDivider = styled.div` border-top: 2px solid ${({ theme }) => theme.colors.separator}; margin: 16px 0; `; -export default ({ ...args }) => ; +type Props = { + className?: string; +}; + +const Divider = ({ className }: Props): React.ReactElement => ( + +); + +export default Divider; diff --git a/src/dataDisplay/FixedDialog/FixedDialog.stories.tsx b/src/dataDisplay/FixedDialog/FixedDialog.stories.tsx index fe96227d..591daae4 100644 --- a/src/dataDisplay/FixedDialog/FixedDialog.stories.tsx +++ b/src/dataDisplay/FixedDialog/FixedDialog.stories.tsx @@ -8,15 +8,15 @@ export default { parameters: { componentSubtitle: `It shows a Dialog, with a modal look and feels, but only being rendered inside a container instead of taking position absolute. - ` - } + `, + }, }; -export const fixedDialog = () => ( +export const SimpleFixedDialog = (): React.ReactElement => ( Some Body} - onCancel={() => {}} - onConfirm={() => {}} + onCancel={() => undefined} + onConfirm={() => undefined} /> ); diff --git a/src/dataDisplay/FixedDialog/index.tsx b/src/dataDisplay/FixedDialog/index.tsx index a8e883b9..37be1fd7 100644 --- a/src/dataDisplay/FixedDialog/index.tsx +++ b/src/dataDisplay/FixedDialog/index.tsx @@ -51,7 +51,12 @@ type Props = { onConfirm: () => void; }; -const FixedDialog = ({ body, title, onConfirm, onCancel }: Props) => { +const FixedDialog = ({ + body, + title, + onConfirm, + onCancel, +}: Props): React.ReactElement => { return ( diff --git a/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx b/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx index 86dad44e..eb5b9cf8 100644 --- a/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx +++ b/src/dataDisplay/FixedIcon/fixedIcon.stories.tsx @@ -1,18 +1,18 @@ import React from 'react'; import styled from 'styled-components'; -import FixedIcon from './index'; +import FixedIcon, { IconTypes } from './index'; export default { title: 'Data Display/FixedIcon', component: FixedIcon, parameters: { componentSubtitle: `Components that renders an icon customized for Safe Multisig app, this icon is not - customizable by props. If you need generic purposes Icons, try Icon component.` - } + customizable by props. If you need generic purposes Icons, try Icon component.`, + }, }; -export const icons = () => { +export const Icons = (): React.ReactElement => { const Wrapper = styled.div` display: flex; flex-wrap: wrap; @@ -32,29 +32,29 @@ export const icons = () => { font-size: 14px; `; + const icons: IconTypes[] = [ + 'arrowSort', + 'connectedRinkeby', + 'connectedWallet', + 'bullit', + 'dropdownArrowSmall', + 'arrowReceived', + 'arrowSent', + 'threeDots', + 'options', + 'plus', + 'chevronRight', + 'chevronLeft', + 'chevronUp', + 'chevronDown', + 'settingsChange', + 'creatingInProgress', + 'notOwner', + ]; + return ( - {[ - 'arrowSort', - 'connectedRinkeby', - 'connectedWallet', - 'bullit', - 'dropdownArrowSmall', - 'arrowReceived', - 'arrowSent', - 'threeDots', - 'options', - 'plus', - 'chevronRight', - 'chevronLeft', - 'chevronUp', - 'chevronDown', - 'settingsChange', - 'creatingInProgress', - 'notOwner' - - - ].map((type: any, index) => ( + {icons.map((type, index) => ( {type} @@ -63,4 +63,3 @@ export const icons = () => { ); }; - diff --git a/src/dataDisplay/FixedIcon/images/arrowReceived.tsx b/src/dataDisplay/FixedIcon/images/arrowReceived.tsx index 426c7ea0..19e5ee26 100644 --- a/src/dataDisplay/FixedIcon/images/arrowReceived.tsx +++ b/src/dataDisplay/FixedIcon/images/arrowReceived.tsx @@ -1,17 +1,17 @@ import React from 'react'; const icon = ( - - - -) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/arrowSent.tsx b/src/dataDisplay/FixedIcon/images/arrowSent.tsx index 35652e8e..bfdf83ba 100644 --- a/src/dataDisplay/FixedIcon/images/arrowSent.tsx +++ b/src/dataDisplay/FixedIcon/images/arrowSent.tsx @@ -1,17 +1,17 @@ import React from 'react'; const icon = ( - - - -) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/arrowSort.tsx b/src/dataDisplay/FixedIcon/images/arrowSort.tsx index 1f8bc114..52a5e371 100644 --- a/src/dataDisplay/FixedIcon/images/arrowSort.tsx +++ b/src/dataDisplay/FixedIcon/images/arrowSort.tsx @@ -1,17 +1,17 @@ import React from 'react'; const icon = ( - - - -) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/bullit.tsx b/src/dataDisplay/FixedIcon/images/bullit.tsx index 7f487dc0..fa50f3f7 100644 --- a/src/dataDisplay/FixedIcon/images/bullit.tsx +++ b/src/dataDisplay/FixedIcon/images/bullit.tsx @@ -1,17 +1,17 @@ import React from 'react'; const icon = ( - - - -) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/chevronDown.tsx b/src/dataDisplay/FixedIcon/images/chevronDown.tsx index 8c0aa4f3..4ad8f8d1 100644 --- a/src/dataDisplay/FixedIcon/images/chevronDown.tsx +++ b/src/dataDisplay/FixedIcon/images/chevronDown.tsx @@ -1,17 +1,17 @@ import React from 'react'; const icon = ( - - - -) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/chevronLeft.tsx b/src/dataDisplay/FixedIcon/images/chevronLeft.tsx index 51d9e418..5dd9168b 100644 --- a/src/dataDisplay/FixedIcon/images/chevronLeft.tsx +++ b/src/dataDisplay/FixedIcon/images/chevronLeft.tsx @@ -1,17 +1,17 @@ import React from 'react'; const icon = ( - - - -) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/chevronRight.tsx b/src/dataDisplay/FixedIcon/images/chevronRight.tsx index 98731a23..5d2f868a 100644 --- a/src/dataDisplay/FixedIcon/images/chevronRight.tsx +++ b/src/dataDisplay/FixedIcon/images/chevronRight.tsx @@ -1,17 +1,17 @@ import React from 'react'; const icon = ( - - - -) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/chevronUp.tsx b/src/dataDisplay/FixedIcon/images/chevronUp.tsx index 3235d893..6122d200 100644 --- a/src/dataDisplay/FixedIcon/images/chevronUp.tsx +++ b/src/dataDisplay/FixedIcon/images/chevronUp.tsx @@ -1,17 +1,17 @@ import React from 'react'; const icon = ( - - - - ) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/connectedRinkeby.tsx b/src/dataDisplay/FixedIcon/images/connectedRinkeby.tsx index d62b726f..32471f9b 100644 --- a/src/dataDisplay/FixedIcon/images/connectedRinkeby.tsx +++ b/src/dataDisplay/FixedIcon/images/connectedRinkeby.tsx @@ -1,16 +1,16 @@ import React from 'react'; const icon = ( - - - -) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/connectedWallet.tsx b/src/dataDisplay/FixedIcon/images/connectedWallet.tsx index bec90f84..6c8c1ca3 100644 --- a/src/dataDisplay/FixedIcon/images/connectedWallet.tsx +++ b/src/dataDisplay/FixedIcon/images/connectedWallet.tsx @@ -1,16 +1,16 @@ import React from 'react'; const icon = ( - - - - ) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/creatingInProgress.tsx b/src/dataDisplay/FixedIcon/images/creatingInProgress.tsx index 7f656d40..19ff2035 100644 --- a/src/dataDisplay/FixedIcon/images/creatingInProgress.tsx +++ b/src/dataDisplay/FixedIcon/images/creatingInProgress.tsx @@ -1,20 +1,20 @@ import React from 'react'; const icon = ( - - - - - - -) + + + + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/dropdownArrowSmall.tsx b/src/dataDisplay/FixedIcon/images/dropdownArrowSmall.tsx index 6f9be316..19bde4e6 100644 --- a/src/dataDisplay/FixedIcon/images/dropdownArrowSmall.tsx +++ b/src/dataDisplay/FixedIcon/images/dropdownArrowSmall.tsx @@ -1,16 +1,16 @@ import React from 'react'; const icon = ( - - - -) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/options.tsx b/src/dataDisplay/FixedIcon/images/options.tsx index 1332e21d..532c6412 100644 --- a/src/dataDisplay/FixedIcon/images/options.tsx +++ b/src/dataDisplay/FixedIcon/images/options.tsx @@ -1,17 +1,17 @@ import React from 'react'; const icon = ( - - - - - - - -) + + + + + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/plus.tsx b/src/dataDisplay/FixedIcon/images/plus.tsx index e3477b92..4a7a73cf 100644 --- a/src/dataDisplay/FixedIcon/images/plus.tsx +++ b/src/dataDisplay/FixedIcon/images/plus.tsx @@ -1,17 +1,17 @@ import React from 'react'; const icon = ( - - - -) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/settingsChange.tsx b/src/dataDisplay/FixedIcon/images/settingsChange.tsx index 1cc3a811..24a5bece 100644 --- a/src/dataDisplay/FixedIcon/images/settingsChange.tsx +++ b/src/dataDisplay/FixedIcon/images/settingsChange.tsx @@ -1,17 +1,17 @@ import React from 'react'; const icon = ( - - - -) + + + +); export default icon; diff --git a/src/dataDisplay/FixedIcon/images/threeDots.tsx b/src/dataDisplay/FixedIcon/images/threeDots.tsx index a907c0dc..fdfd26dc 100644 --- a/src/dataDisplay/FixedIcon/images/threeDots.tsx +++ b/src/dataDisplay/FixedIcon/images/threeDots.tsx @@ -1,17 +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 17cb521d..d523cfaf 100644 --- a/src/dataDisplay/FixedIcon/index.tsx +++ b/src/dataDisplay/FixedIcon/index.tsx @@ -18,7 +18,6 @@ import settingsChange from './images/settingsChange'; import creatingInProgress from './images/creatingInProgress'; import notOwner from './images/notOwner'; - const icons = { arrowSort, connectedRinkeby, @@ -40,16 +39,17 @@ const icons = { }; export type IconType = typeof icons; +export type IconTypes = keyof IconType; type Props = { - type: keyof IconType; + type: IconTypes; }; /** * The `FixedIcon` renders an icon */ -function FixedIcon({ type }: Props) { +function FixedIcon({ type }: Props): React.ReactElement { return {icons[type]}; } -export default FixedIcon; \ No newline at end of file +export default FixedIcon; diff --git a/src/dataDisplay/Icon/icon.stories.tsx b/src/dataDisplay/Icon/icon.stories.tsx index c4992229..0755dda9 100644 --- a/src/dataDisplay/Icon/icon.stories.tsx +++ b/src/dataDisplay/Icon/icon.stories.tsx @@ -1,18 +1,18 @@ import React from 'react'; import styled from 'styled-components'; -import Icon from './index'; +import Icon, { IconTypes } from './index'; export default { title: 'Data Display/Icon', component: Icon, parameters: { componentSubtitle: - 'Icon component, you can select one of the set of icons we already have configured.' - } + 'Icon component, you can select one of the set of icons we already have configured.', + }, }; -export const icons = () => { +export const Icons = (): React.ReactElement => { const Wrapper = styled.div` display: flex; flex-wrap: wrap; @@ -32,84 +32,79 @@ export const icons = () => { font-size: 14px; `; - const IconDisplay = styled.div` - display: flex; - align-items: center; - flex-direction: column; - justify-content: space-evenly; - `; + const icons: IconTypes[] = [ + 'add', + 'addressBook', + 'addressBookAdd', + 'alert', + 'allowances', + 'apps', + 'arrowDown', + 'assets', + 'awaitingConfirmations', + 'camera', + 'chain', + 'check', + 'circleCheck', + 'circleCross', + 'circleDropdown', + 'code', + 'collectibles', + 'copy', + 'cross', + 'currency', + 'delete', + 'devicePassword', + 'edit', + 'error', + 'eth', + 'externalLink', + 'eye', + 'eyeOff', + 'filledCross', + 'fingerPrint', + 'getInTouch', + 'home', + 'info', + 'knowledge', + 'licenses', + 'loadSafe', + 'locked', + 'mobileConfirm', + 'noInternet', + 'owners', + 'paste', + 'paymentToken', + 'privacyPolicy', + 'qrCode', + 'question', + 'rateApp', + 'received', + 'recover', + 'replaceOwner', + 'requiredConfirmations', + 'restricted', + 'resync', + 'rocket', + 'scan', + 'search', + 'sendAgain', + 'sent', + 'serverError', + 'settings', + 'settingsChange', + 'settingsTool', + 'share', + 'termsOfUse', + 'transactionsInactive', + 'unlocked', + 'userEdit', + 'wallet', + ]; return ( - {[ - 'add', - 'addressBook', - 'addressBookAdd', - 'alert', - 'allowances', - 'apps', - 'arrowDown', - 'assets', - 'awaitingConfirmations', - 'camera', - 'chain', - 'check', - 'circleCheck', - 'circleCross', - 'circleDropdown', - 'code', - 'collectibles', - 'copy', - 'cross', - 'currency', - 'delete', - 'devicePassword', - 'edit', - 'error', - 'eth', - 'externalLink', - 'eye', - 'eyeOff', - 'filledCross', - 'fingerPrint', - 'getInTouch', - 'home', - 'info', - 'knowledge', - 'licenses', - 'loadSafe', - 'locked', - 'mobileConfirm', - 'noInternet', - 'owners', - 'paste', - 'paymentToken', - 'privacyPolicy', - 'qrCode', - 'question', - 'rateApp', - 'received', - 'recover', - 'replaceOwner', - 'requiredConfirmations', - 'restricted', - 'resync', - 'rocket', - 'scan', - 'search', - 'sendAgain', - 'sent', - 'serverError', - 'settings', - 'settingsChange', - 'settingsTool', - 'share', - 'termsOfUse', - 'transactionsInactive', - 'unlocked', - 'userEdit', - 'wallet' - ].map((type: any, index) => ( + {icons.map((type, index) => ( {type} @@ -119,17 +114,21 @@ export const icons = () => { ); }; -export const customSize = () => ( +export const CustomSize = (): React.ReactElement => ( <> ); -export const customColor = () => ( +export const CustomColor = (): React.ReactElement => ( <> ); + +export const WithTooltip = (): React.ReactElement => ( + +); diff --git a/src/dataDisplay/Icon/images/add.tsx b/src/dataDisplay/Icon/images/add.tsx index adce7474..7f4c07cf 100644 --- a/src/dataDisplay/Icon/images/add.tsx +++ b/src/dataDisplay/Icon/images/add.tsx @@ -40,5 +40,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/addressBook.tsx b/src/dataDisplay/Icon/images/addressBook.tsx index f1e90ebb..a8ca04a2 100644 --- a/src/dataDisplay/Icon/images/addressBook.tsx +++ b/src/dataDisplay/Icon/images/addressBook.tsx @@ -32,5 +32,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/addressBookAdd.tsx b/src/dataDisplay/Icon/images/addressBookAdd.tsx index e0a8f7e6..1806a32e 100644 --- a/src/dataDisplay/Icon/images/addressBookAdd.tsx +++ b/src/dataDisplay/Icon/images/addressBookAdd.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/alert.tsx b/src/dataDisplay/Icon/images/alert.tsx index e26f9bda..ecd0ca98 100644 --- a/src/dataDisplay/Icon/images/alert.tsx +++ b/src/dataDisplay/Icon/images/alert.tsx @@ -38,5 +38,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/allowances.tsx b/src/dataDisplay/Icon/images/allowances.tsx index 299f4825..2d5812fb 100644 --- a/src/dataDisplay/Icon/images/allowances.tsx +++ b/src/dataDisplay/Icon/images/allowances.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/apps.tsx b/src/dataDisplay/Icon/images/apps.tsx index 28a851f4..c3d5d9c5 100644 --- a/src/dataDisplay/Icon/images/apps.tsx +++ b/src/dataDisplay/Icon/images/apps.tsx @@ -44,5 +44,5 @@ export default { - ) + ), }; diff --git a/src/dataDisplay/Icon/images/arrowDown.tsx b/src/dataDisplay/Icon/images/arrowDown.tsx index b25f3051..d5720705 100644 --- a/src/dataDisplay/Icon/images/arrowDown.tsx +++ b/src/dataDisplay/Icon/images/arrowDown.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/assets.tsx b/src/dataDisplay/Icon/images/assets.tsx index 982be10e..749e96ba 100644 --- a/src/dataDisplay/Icon/images/assets.tsx +++ b/src/dataDisplay/Icon/images/assets.tsx @@ -40,5 +40,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/awaitingConfirmations.tsx b/src/dataDisplay/Icon/images/awaitingConfirmations.tsx index fc9bb7ef..b70ecdd2 100644 --- a/src/dataDisplay/Icon/images/awaitingConfirmations.tsx +++ b/src/dataDisplay/Icon/images/awaitingConfirmations.tsx @@ -38,5 +38,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/camera.tsx b/src/dataDisplay/Icon/images/camera.tsx index f73114a0..a1c5766e 100644 --- a/src/dataDisplay/Icon/images/camera.tsx +++ b/src/dataDisplay/Icon/images/camera.tsx @@ -41,5 +41,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/chain.tsx b/src/dataDisplay/Icon/images/chain.tsx index cd2119ce..a058610e 100644 --- a/src/dataDisplay/Icon/images/chain.tsx +++ b/src/dataDisplay/Icon/images/chain.tsx @@ -42,5 +42,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/check.tsx b/src/dataDisplay/Icon/images/check.tsx index 495cf105..a8151a14 100644 --- a/src/dataDisplay/Icon/images/check.tsx +++ b/src/dataDisplay/Icon/images/check.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/circleCheck.tsx b/src/dataDisplay/Icon/images/circleCheck.tsx index 5f33a2e9..83eb9ba1 100644 --- a/src/dataDisplay/Icon/images/circleCheck.tsx +++ b/src/dataDisplay/Icon/images/circleCheck.tsx @@ -42,5 +42,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/circleCross.tsx b/src/dataDisplay/Icon/images/circleCross.tsx index b0a58f5e..4b6442ce 100644 --- a/src/dataDisplay/Icon/images/circleCross.tsx +++ b/src/dataDisplay/Icon/images/circleCross.tsx @@ -40,5 +40,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/circleDropdown.tsx b/src/dataDisplay/Icon/images/circleDropdown.tsx index e32174b5..ac362730 100644 --- a/src/dataDisplay/Icon/images/circleDropdown.tsx +++ b/src/dataDisplay/Icon/images/circleDropdown.tsx @@ -40,5 +40,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/code.tsx b/src/dataDisplay/Icon/images/code.tsx index 63c99a12..2c20439e 100644 --- a/src/dataDisplay/Icon/images/code.tsx +++ b/src/dataDisplay/Icon/images/code.tsx @@ -31,5 +31,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/collectibles.tsx b/src/dataDisplay/Icon/images/collectibles.tsx index bf362eb4..26072e69 100644 --- a/src/dataDisplay/Icon/images/collectibles.tsx +++ b/src/dataDisplay/Icon/images/collectibles.tsx @@ -42,5 +42,5 @@ export default { - ) + ), }; diff --git a/src/dataDisplay/Icon/images/copy.tsx b/src/dataDisplay/Icon/images/copy.tsx index 3563173d..7fcfb458 100644 --- a/src/dataDisplay/Icon/images/copy.tsx +++ b/src/dataDisplay/Icon/images/copy.tsx @@ -32,5 +32,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/cross.tsx b/src/dataDisplay/Icon/images/cross.tsx index 64295c27..49a04252 100644 --- a/src/dataDisplay/Icon/images/cross.tsx +++ b/src/dataDisplay/Icon/images/cross.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/currency.tsx b/src/dataDisplay/Icon/images/currency.tsx index 06ea0cd9..56d2a830 100644 --- a/src/dataDisplay/Icon/images/currency.tsx +++ b/src/dataDisplay/Icon/images/currency.tsx @@ -34,5 +34,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/delete.tsx b/src/dataDisplay/Icon/images/delete.tsx index 37c6b79b..d13a6da9 100644 --- a/src/dataDisplay/Icon/images/delete.tsx +++ b/src/dataDisplay/Icon/images/delete.tsx @@ -34,5 +34,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/devicePassword.tsx b/src/dataDisplay/Icon/images/devicePassword.tsx index 36f5c4de..7e37242c 100644 --- a/src/dataDisplay/Icon/images/devicePassword.tsx +++ b/src/dataDisplay/Icon/images/devicePassword.tsx @@ -42,5 +42,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/edit.tsx b/src/dataDisplay/Icon/images/edit.tsx index 3d57be0b..47f3f94a 100644 --- a/src/dataDisplay/Icon/images/edit.tsx +++ b/src/dataDisplay/Icon/images/edit.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/error.tsx b/src/dataDisplay/Icon/images/error.tsx index c02ff88d..0dd76846 100644 --- a/src/dataDisplay/Icon/images/error.tsx +++ b/src/dataDisplay/Icon/images/error.tsx @@ -44,5 +44,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/eth.tsx b/src/dataDisplay/Icon/images/eth.tsx index bfccdb65..9512f4e8 100644 --- a/src/dataDisplay/Icon/images/eth.tsx +++ b/src/dataDisplay/Icon/images/eth.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/externalLink.tsx b/src/dataDisplay/Icon/images/externalLink.tsx index 5ccbd07b..d1f2492a 100644 --- a/src/dataDisplay/Icon/images/externalLink.tsx +++ b/src/dataDisplay/Icon/images/externalLink.tsx @@ -40,5 +40,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/eye.tsx b/src/dataDisplay/Icon/images/eye.tsx index 07c96c91..58a7c741 100644 --- a/src/dataDisplay/Icon/images/eye.tsx +++ b/src/dataDisplay/Icon/images/eye.tsx @@ -38,5 +38,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/eyeOff.tsx b/src/dataDisplay/Icon/images/eyeOff.tsx index 2435366d..bc8ab58a 100644 --- a/src/dataDisplay/Icon/images/eyeOff.tsx +++ b/src/dataDisplay/Icon/images/eyeOff.tsx @@ -34,5 +34,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/filledCross.tsx b/src/dataDisplay/Icon/images/filledCross.tsx index 3aa38aaf..f361f603 100644 --- a/src/dataDisplay/Icon/images/filledCross.tsx +++ b/src/dataDisplay/Icon/images/filledCross.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/fingerPrint.tsx b/src/dataDisplay/Icon/images/fingerPrint.tsx index cfca49d7..7195239e 100644 --- a/src/dataDisplay/Icon/images/fingerPrint.tsx +++ b/src/dataDisplay/Icon/images/fingerPrint.tsx @@ -50,5 +50,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/getInTouch.tsx b/src/dataDisplay/Icon/images/getInTouch.tsx index 0ad18fe9..468ead6f 100644 --- a/src/dataDisplay/Icon/images/getInTouch.tsx +++ b/src/dataDisplay/Icon/images/getInTouch.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/home.tsx b/src/dataDisplay/Icon/images/home.tsx index 26413300..029e2cfb 100644 --- a/src/dataDisplay/Icon/images/home.tsx +++ b/src/dataDisplay/Icon/images/home.tsx @@ -32,5 +32,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/info.tsx b/src/dataDisplay/Icon/images/info.tsx index ef1d6c8e..62180e49 100644 --- a/src/dataDisplay/Icon/images/info.tsx +++ b/src/dataDisplay/Icon/images/info.tsx @@ -31,7 +31,14 @@ export default { viewBox="0 0 24 24"> - + - ) + ), }; diff --git a/src/dataDisplay/Icon/images/knowledge.tsx b/src/dataDisplay/Icon/images/knowledge.tsx index c92930bf..676a9b89 100644 --- a/src/dataDisplay/Icon/images/knowledge.tsx +++ b/src/dataDisplay/Icon/images/knowledge.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/licenses.tsx b/src/dataDisplay/Icon/images/licenses.tsx index 676a0dd4..d0c78931 100644 --- a/src/dataDisplay/Icon/images/licenses.tsx +++ b/src/dataDisplay/Icon/images/licenses.tsx @@ -38,5 +38,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/loadSafe.tsx b/src/dataDisplay/Icon/images/loadSafe.tsx index af8fb4bc..54e9d904 100644 --- a/src/dataDisplay/Icon/images/loadSafe.tsx +++ b/src/dataDisplay/Icon/images/loadSafe.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/locked.tsx b/src/dataDisplay/Icon/images/locked.tsx index e65bd8bb..6b593150 100644 --- a/src/dataDisplay/Icon/images/locked.tsx +++ b/src/dataDisplay/Icon/images/locked.tsx @@ -38,5 +38,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/mobileConfirm.tsx b/src/dataDisplay/Icon/images/mobileConfirm.tsx index 3517fad9..c8e48317 100644 --- a/src/dataDisplay/Icon/images/mobileConfirm.tsx +++ b/src/dataDisplay/Icon/images/mobileConfirm.tsx @@ -38,5 +38,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/noInternet.tsx b/src/dataDisplay/Icon/images/noInternet.tsx index d574cc07..ab165541 100644 --- a/src/dataDisplay/Icon/images/noInternet.tsx +++ b/src/dataDisplay/Icon/images/noInternet.tsx @@ -38,5 +38,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/owners.tsx b/src/dataDisplay/Icon/images/owners.tsx index 4c034a49..96ac09fc 100644 --- a/src/dataDisplay/Icon/images/owners.tsx +++ b/src/dataDisplay/Icon/images/owners.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/paste.tsx b/src/dataDisplay/Icon/images/paste.tsx index 8b193430..5ad469a0 100644 --- a/src/dataDisplay/Icon/images/paste.tsx +++ b/src/dataDisplay/Icon/images/paste.tsx @@ -32,5 +32,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/paymentToken.tsx b/src/dataDisplay/Icon/images/paymentToken.tsx index 5c827b2f..d5c5882a 100644 --- a/src/dataDisplay/Icon/images/paymentToken.tsx +++ b/src/dataDisplay/Icon/images/paymentToken.tsx @@ -32,5 +32,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/privacyPolicy.tsx b/src/dataDisplay/Icon/images/privacyPolicy.tsx index c75cd60b..f5f93fbd 100644 --- a/src/dataDisplay/Icon/images/privacyPolicy.tsx +++ b/src/dataDisplay/Icon/images/privacyPolicy.tsx @@ -32,5 +32,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/qrCode.tsx b/src/dataDisplay/Icon/images/qrCode.tsx index 88a4379f..2948087d 100644 --- a/src/dataDisplay/Icon/images/qrCode.tsx +++ b/src/dataDisplay/Icon/images/qrCode.tsx @@ -82,5 +82,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/question.tsx b/src/dataDisplay/Icon/images/question.tsx index 92d9f51d..5f8e2f09 100644 --- a/src/dataDisplay/Icon/images/question.tsx +++ b/src/dataDisplay/Icon/images/question.tsx @@ -43,5 +43,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/rateApp.tsx b/src/dataDisplay/Icon/images/rateApp.tsx index 082410c2..3469ead3 100644 --- a/src/dataDisplay/Icon/images/rateApp.tsx +++ b/src/dataDisplay/Icon/images/rateApp.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/received.tsx b/src/dataDisplay/Icon/images/received.tsx index cc02dff3..a1e4783a 100644 --- a/src/dataDisplay/Icon/images/received.tsx +++ b/src/dataDisplay/Icon/images/received.tsx @@ -40,5 +40,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/recover.tsx b/src/dataDisplay/Icon/images/recover.tsx index 888d24c4..52ff33da 100644 --- a/src/dataDisplay/Icon/images/recover.tsx +++ b/src/dataDisplay/Icon/images/recover.tsx @@ -42,5 +42,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/replaceOwner.tsx b/src/dataDisplay/Icon/images/replaceOwner.tsx index 7cd19560..6a8ac1c1 100644 --- a/src/dataDisplay/Icon/images/replaceOwner.tsx +++ b/src/dataDisplay/Icon/images/replaceOwner.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/requiredConfirmations.tsx b/src/dataDisplay/Icon/images/requiredConfirmations.tsx index 0b2164c1..c4cef5a0 100644 --- a/src/dataDisplay/Icon/images/requiredConfirmations.tsx +++ b/src/dataDisplay/Icon/images/requiredConfirmations.tsx @@ -34,5 +34,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/restricted.tsx b/src/dataDisplay/Icon/images/restricted.tsx index b31f4cb5..96049bdf 100644 --- a/src/dataDisplay/Icon/images/restricted.tsx +++ b/src/dataDisplay/Icon/images/restricted.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/resync.tsx b/src/dataDisplay/Icon/images/resync.tsx index 13fdde23..61f4c598 100644 --- a/src/dataDisplay/Icon/images/resync.tsx +++ b/src/dataDisplay/Icon/images/resync.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/rocket.tsx b/src/dataDisplay/Icon/images/rocket.tsx index cc14cd89..8ce25758 100644 --- a/src/dataDisplay/Icon/images/rocket.tsx +++ b/src/dataDisplay/Icon/images/rocket.tsx @@ -32,5 +32,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/scan.tsx b/src/dataDisplay/Icon/images/scan.tsx index 655d10c2..5ed956e1 100644 --- a/src/dataDisplay/Icon/images/scan.tsx +++ b/src/dataDisplay/Icon/images/scan.tsx @@ -31,8 +31,15 @@ export default { fillRule="nonzero" d="M22 4v4c0 .552-.448 1-1 1s-1-.448-1-1V4h-4c-.552 0-1-.448-1-1s.448-1 1-1h4c1.105 0 2 .895 2 2zM4 4v4c0 .552-.448 1-1 1s-1-.448-1-1V4c0-1.105.895-2 2-2h4c.552 0 1 .448 1 1s-.448 1-1 1H4zM20 20v-4c0-.552.448-1 1-1s1 .448 1 1v4c0 1.105-.895 2-2 2h-4c-.552 0-1-.448-1-1s.448-1 1-1h4zM4 20h4c.552 0 1 .448 1 1s-.448 1-1 1H4c-1.105 0-2-.895-2-2v-4c0-.552.448-1 1-1s1 .448 1 1v4z" /> - + - ) + ), }; diff --git a/src/dataDisplay/Icon/images/search.tsx b/src/dataDisplay/Icon/images/search.tsx index 3b28d871..635edd84 100644 --- a/src/dataDisplay/Icon/images/search.tsx +++ b/src/dataDisplay/Icon/images/search.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/sendAgain.tsx b/src/dataDisplay/Icon/images/sendAgain.tsx index f5074f75..28830885 100644 --- a/src/dataDisplay/Icon/images/sendAgain.tsx +++ b/src/dataDisplay/Icon/images/sendAgain.tsx @@ -42,5 +42,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/sent.tsx b/src/dataDisplay/Icon/images/sent.tsx index 41f8c3e7..af16196d 100644 --- a/src/dataDisplay/Icon/images/sent.tsx +++ b/src/dataDisplay/Icon/images/sent.tsx @@ -40,5 +40,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/serverError.tsx b/src/dataDisplay/Icon/images/serverError.tsx index 365d6538..3593c258 100644 --- a/src/dataDisplay/Icon/images/serverError.tsx +++ b/src/dataDisplay/Icon/images/serverError.tsx @@ -11,10 +11,12 @@ export default { + d="M2 13h10v-2H2v2zm0-5.997h3.213c.21.74.567 1.418 1.043 1.996H2V7.003zm0-4h3.604c-.312.61-.515 1.282-.579 1.997H2V3.003zM14 5.5C14 7.43 12.43 9 10.5 9S7 7.43 7 5.5 8.57 2 10.5 2 14 3.57 14 5.5zm2 0C16 2.462 13.538 0 10.5 0 9.323 0 8.235.373 7.34 1.003H2c-1.105 0-2 .894-2 2v2c0 .365.106.703.277.998-.171.295-.277.633-.277 1v2c0 .365.106.703.277.998-.171.296-.277.634-.277 1v2c0 1.104.895 2 2 2h10c1.104 0 2-.896 2-2v-2c0-.366-.105-.704-.277-1 .013-.022.019-.049.031-.072C15.114 8.927 16 7.318 16 5.5z" + /> + d="M10.5 4.482l1.018-1.02c.281-.28.737-.28 1.018 0 .283.283.283.739 0 1.02L11.52 5.5l1.017 1.018c.281.28.281.737 0 1.019-.282.28-.738.28-1.019 0L10.5 6.518l-1.018 1.02c-.281.28-.738.28-1.018 0-.281-.282-.281-.738 0-1.02L9.48 5.502 8.462 4.48c-.281-.28-.281-.736 0-1.018.28-.281.737-.281 1.019 0L10.5 4.482z" + /> ), @@ -28,11 +30,13 @@ export default { + d="M17.99 18.996c0 .551-.448 1-1 1H4c-.552 0-1-.449-1-1v-2c0-.546.44-.988.983-.997l.017.002h12.99l.017-.002c.543.01.983.451.983.997v2zM3 11.001c0-.552.448-1 1-1h4.151c.318 1.565 1.13 2.948 2.258 3.995H4l-.017.001c-.543-.009-.983-.45-.983-.996v-2zm0-5.995c0-.552.448-1 1-1h5.506C8.66 5.134 8.124 6.506 8.026 8H4c-.552 0-1-.449-1-1V5.006zM21 8.5c0 3.032-2.467 5.5-5.5 5.5-3.032 0-5.5-2.468-5.5-5.5C10 5.467 12.468 3 15.5 3 18.533 3 21 5.467 21 8.5zm2 0C23 4.357 19.642 1 15.5 1c-1.364 0-2.639.37-3.74 1.006H4c-1.657 0-3 1.343-3 3V7c0 .772.3 1.47.78 2.001-.48.531-.78 1.228-.78 2.001v2c0 .77.3 1.466.776 1.997C1.3 15.53 1 16.225 1 16.996v2c0 1.656 1.343 3 3 3h12.99c1.657 0 3-1.344 3-3v-2c0-.768-.296-1.459-.77-1.989C21.475 13.714 23 11.287 23 8.5z" + /> + d="M15.5 7.086l1.414-1.414c.391-.391 1.024-.391 1.414 0 .391.391.391 1.023 0 1.414L16.914 8.5l1.414 1.414c.391.39.391 1.024 0 1.414-.39.391-1.023.391-1.414 0L15.5 9.914l-1.413 1.414c-.391.391-1.025.391-1.415 0-.391-.39-.391-1.024 0-1.414L14.086 8.5l-1.414-1.414c-.391-.391-.391-1.023 0-1.414.39-.391 1.024-.391 1.415 0L15.5 7.086z" + /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/settings.tsx b/src/dataDisplay/Icon/images/settings.tsx index 2a5ecf35..c128e880 100644 --- a/src/dataDisplay/Icon/images/settings.tsx +++ b/src/dataDisplay/Icon/images/settings.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/settingsChange.tsx b/src/dataDisplay/Icon/images/settingsChange.tsx index 22058335..892a79a3 100644 --- a/src/dataDisplay/Icon/images/settingsChange.tsx +++ b/src/dataDisplay/Icon/images/settingsChange.tsx @@ -40,5 +40,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/settingsTool.tsx b/src/dataDisplay/Icon/images/settingsTool.tsx index e124f17f..4acb8284 100644 --- a/src/dataDisplay/Icon/images/settingsTool.tsx +++ b/src/dataDisplay/Icon/images/settingsTool.tsx @@ -32,5 +32,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/share.tsx b/src/dataDisplay/Icon/images/share.tsx index abe3454d..1a25a687 100644 --- a/src/dataDisplay/Icon/images/share.tsx +++ b/src/dataDisplay/Icon/images/share.tsx @@ -31,5 +31,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/termsOfUse.tsx b/src/dataDisplay/Icon/images/termsOfUse.tsx index 4ce60f15..a6e15dd3 100644 --- a/src/dataDisplay/Icon/images/termsOfUse.tsx +++ b/src/dataDisplay/Icon/images/termsOfUse.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/transactionsInactive.tsx b/src/dataDisplay/Icon/images/transactionsInactive.tsx index 9544eb3e..0841ad81 100644 --- a/src/dataDisplay/Icon/images/transactionsInactive.tsx +++ b/src/dataDisplay/Icon/images/transactionsInactive.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/unlocked.tsx b/src/dataDisplay/Icon/images/unlocked.tsx index 50247af4..7a4b853a 100644 --- a/src/dataDisplay/Icon/images/unlocked.tsx +++ b/src/dataDisplay/Icon/images/unlocked.tsx @@ -38,5 +38,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/userEdit.tsx b/src/dataDisplay/Icon/images/userEdit.tsx index 655a2a2d..2de38503 100644 --- a/src/dataDisplay/Icon/images/userEdit.tsx +++ b/src/dataDisplay/Icon/images/userEdit.tsx @@ -30,5 +30,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/images/wallet.tsx b/src/dataDisplay/Icon/images/wallet.tsx index 990ac946..b2f82f78 100644 --- a/src/dataDisplay/Icon/images/wallet.tsx +++ b/src/dataDisplay/Icon/images/wallet.tsx @@ -32,5 +32,5 @@ export default { /> - ) + ), }; diff --git a/src/dataDisplay/Icon/index.tsx b/src/dataDisplay/Icon/index.tsx index 17f8b1e8..b4fddea0 100644 --- a/src/dataDisplay/Icon/index.tsx +++ b/src/dataDisplay/Icon/index.tsx @@ -1,5 +1,7 @@ import React from 'react'; import styled from 'styled-components'; +import Tooltip from '@material-ui/core/Tooltip'; +import { withStyles } from '@material-ui/core/styles'; import add from './images/add'; import addressBook from './images/addressBook'; @@ -68,16 +70,26 @@ import transactionsInactive from './images/transactionsInactive'; import unlocked from './images/unlocked'; import userEdit from './images/userEdit'; import wallet from './images/wallet'; +import { rgba } from 'polished'; -import { Theme } from '../../theme'; +import theme, { Theme, ThemeColors, ThemeIconSize } from '../../theme'; -const StyledIcon = styled.span` +const StyledIcon = styled.span<{ color?: ThemeColors }>` .icon-color { fill: ${({ theme, color }) => color ? theme.colors[color] : theme.colors.icon}; } `; +const StyledTooltip = withStyles(() => ({ + tooltip: { + backgroundColor: theme.colors.overlay.color, + border: `1px solid ${theme.colors.icon}`, + boxShadow: `1px 2px 4px ${rgba(theme.colors.shadow.color, 0.08)}`, + color: theme.colors.text, + }, +}))(Tooltip); + const icons = { add, addressBook, @@ -149,19 +161,39 @@ const icons = { }; export type IconType = typeof icons; +export type IconTypes = keyof IconType; type Props = { - type: keyof IconType; - color?: keyof Theme['colors']; - size: keyof Theme['icons']['size']; + type: IconTypes; + size: ThemeIconSize; + color?: ThemeColors; + tooltip?: string; + className?: string; }; /** * The `Icon` renders an icon, it can be one already defined specified by * the type props or custom one using the customUrl. */ -function Icon({ type, size, color }: Props) { - return {icons[type][size]}; -} +const Icon = ({ + type, + size, + color, + tooltip, + className, +}: Props): React.ReactElement => { + const IconElement = ( + + {icons[type][size]} + + ); + return tooltip === undefined ? ( + IconElement + ) : ( + + {IconElement} + + ); +}; export default Icon; diff --git a/src/dataDisplay/IconText/index.stories.tsx b/src/dataDisplay/IconText/index.stories.tsx index 5e0860af..a162f722 100644 --- a/src/dataDisplay/IconText/index.stories.tsx +++ b/src/dataDisplay/IconText/index.stories.tsx @@ -6,13 +6,11 @@ export default { title: 'Data Display/Icon Text', component: IconText, parameters: { - componentSubtitle: 'IconText, It combines both Icon and Text component.' - } + componentSubtitle: 'IconText, It combines both Icon and Text component.', + }, }; -//export const title = () => Title LG; - -export const sizes = () => { +export const Sizes = (): React.ReactElement => { return ( <> diff --git a/src/dataDisplay/IconText/index.tsx b/src/dataDisplay/IconText/index.tsx index 26cb76b2..7aee7b5e 100644 --- a/src/dataDisplay/IconText/index.tsx +++ b/src/dataDisplay/IconText/index.tsx @@ -1,15 +1,15 @@ import React from 'react'; import styled from 'styled-components'; -import { Theme } from '../../theme'; +import { ThemeColors, ThemeIconSize, ThemeTextSize } from '../../theme'; import Icon, { IconType } from '../Icon'; import Text from '../Text'; type Props = { iconType: keyof IconType; - iconSize: keyof Theme['icons']['size']; - textSize: keyof Theme['text']['size']; - color?: keyof Theme['colors']; + iconSize: ThemeIconSize; + textSize: ThemeTextSize; + color?: ThemeColors; text: string; className?: string; }; @@ -32,7 +32,7 @@ const IconText = ({ iconType, text, color, - className + className, }: Props): React.ReactElement => ( diff --git a/src/dataDisplay/Layout/index.tsx b/src/dataDisplay/Layout/index.tsx index b6be356d..3c8b5078 100644 --- a/src/dataDisplay/Layout/index.tsx +++ b/src/dataDisplay/Layout/index.tsx @@ -11,45 +11,44 @@ const Container = styled.div` grid-template-rows: 50px auto 60px; grid-gap: 10px; grid-template-areas: - "title title" - "navbar body" - "footer footer"; + 'title title' + 'navbar body' + 'footer footer'; - @media(max-width: 400px) { + @media (max-width: 400px) { grid-template-columns: 1fr; grid-template-rows: 50px auto 1fr; grid-template-areas: - "title" - "navbar" - "body" - "footer"; + 'title' + 'navbar' + 'body' + 'footer'; } `; const Title = styled.div` - background: rgb(137, 180, 206); - grid-area: title; + background: rgb(137, 180, 206); + grid-area: title; `; const Navbar = styled.div` - background: rgb(139, 131, 127); - grid-area: navbar; + background: rgb(139, 131, 127); + grid-area: navbar; `; const Body = styled.div` - background: rgb(193, 197, 197); - grid-area: body; + background: rgb(193, 197, 197); + grid-area: body; `; const Footer = styled.div` - background: rgb(158, 158, 158); - grid-area: footer; + background: rgb(158, 158, 158); + grid-area: footer; `; - -const Layout = () => ( +const Layout = (): React.ReactElement => ( - Title - Navbar - Body -
footer
+ Title + Navbar + Body +
footer
 ); diff --git a/src/dataDisplay/Layout/layout.stories.tsx b/src/dataDisplay/Layout/layout.stories.tsx index 899c6bff..0318e062 100644 --- a/src/dataDisplay/Layout/layout.stories.tsx +++ b/src/dataDisplay/Layout/layout.stories.tsx @@ -1,13 +1,13 @@ -import React from "react"; +import React from 'react'; -import Layout from "./index"; +import Layout from './index'; export default { - title: "Data Display/Layout", + title: 'Data Display/Layout', component: Layout, parameters: { - componentSubtitle: "It provides a custom layout used in Safe Multisig" - } + componentSubtitle: 'It provides a custom layout used in Safe Multisig', + }, }; -export const layout = () => ; +export const SimpleLayout = (): React.ReactElement => ; diff --git a/src/dataDisplay/Section/index.tsx b/src/dataDisplay/Section/index.tsx index 915e7639..949152b3 100644 --- a/src/dataDisplay/Section/index.tsx +++ b/src/dataDisplay/Section/index.tsx @@ -1,5 +1,5 @@ -import React from "react"; -import styled from "styled-components"; +import React from 'react'; +import styled from 'styled-components'; const StyledSection = styled.div` /* border: 1px solid #e8e7e6; @@ -10,13 +10,13 @@ const StyledSection = styled.div` `; type Props = { - children: any; + children: React.ReactNode; }; /** * Use `Section` to highlight/group content. */ -const Section = ({ children }: Props) => ( +const Section = ({ children }: Props): React.ReactElement => ( {children} ); diff --git a/src/dataDisplay/Table/index.tsx b/src/dataDisplay/Table/index.tsx new file mode 100644 index 00000000..015a847f --- /dev/null +++ b/src/dataDisplay/Table/index.tsx @@ -0,0 +1,186 @@ +import React from 'react'; +import TableMui from '@material-ui/core/Table'; +import TableBody from '@material-ui/core/TableBody'; +import TableSortLabel from '@material-ui/core/TableSortLabel'; +import TableCell from '@material-ui/core/TableCell'; +import TableContainer from '@material-ui/core/TableContainer'; +import TableHead from '@material-ui/core/TableHead'; +import TableRow from '@material-ui/core/TableRow'; +import Paper from '@material-ui/core/Paper'; +import Box from '@material-ui/core/Box'; +import Collapse from '@material-ui/core/Collapse'; + +//import styled from 'styled-components'; + +import { FixedIcon } from '../..'; + +// const TextTHead = styled(Text)` +// text-transform: uppercase; +// `; + +// const StyledTableCell = styled(TableCell)` +// border-bottom: 2px solid ${({ theme }) => theme.colors.separator} !important; +// `; + +export enum TableAlignment { + left = 'left', + right = 'right', + center = 'center', +} + +export enum TableSortDirection { + asc = 'asc', + desc = 'desc', +} + +export type TableHeader = { + id: string; + alignment?: TableAlignment; + label: string; +}; + +type RowCells = { + id?: string; + alignment?: TableAlignment; + content: React.ReactNode; +}; + +export type TableRow = { + id: string; + collapsibleContent?: React.ReactNode; + cells: RowCells[]; +}; + +type Props = { + rows: TableRow[]; + headers?: TableHeader[]; + isCollapsible?: boolean; + className?: string; + selectedRowIds?: Set; + sortedByHeaderId?: string; + sortDirection?: TableSortDirection; + onHeaderClick?: (id: string) => void; + onRowClick?: (id: string) => void; +}; + +const getHeaders = ( + headers: TableHeader[], + isCollapsible: boolean +): TableHeader[] => { + if (!isCollapsible) { + return headers; + } + + return [ + ...headers, + { + id: 'chevron', + label: '', + }, + ]; +}; + +const getRowCells = ( + cells: RowCells[], + isSelected: boolean, + isCollapsible: boolean +): RowCells[] => { + if (!isCollapsible) { + return cells; + } + + return [ + ...cells, + { + alignment: TableAlignment.center, + content: isSelected ? ( + + ) : ( + + ), + }, + ]; +}; + +export const Table = ({ + rows, + headers, + isCollapsible = false, + className, + selectedRowIds = new Set(), + sortedByHeaderId, + sortDirection, + onRowClick = () => undefined, + onHeaderClick = () => undefined, +}: Props): React.ReactElement => ( + + + {/* HEADER CELLS */} + {headers && ( + + + {getHeaders(headers || [], isCollapsible).map((header) => ( + + onHeaderClick(header.id)}> + {header.label} + + + ))} + + + )} + + {/* TABLE BODY */} + + {rows.map((row) => { + const rowCells = getRowCells( + row.cells, + selectedRowIds.has(row.id), + isCollapsible + ); + + return ( + <> + onRowClick(row.id)}> + {rowCells.map((c, index) => { + return ( + + {c.content} + + ); + })} + + + {/* Collapsible content */} + {isCollapsible && ( + + + + {row.collapsibleContent} + + + + )} + + ); + })} + + + +); diff --git a/src/dataDisplay/Table/table.stories.tsx b/src/dataDisplay/Table/table.stories.tsx new file mode 100644 index 00000000..4991180b --- /dev/null +++ b/src/dataDisplay/Table/table.stories.tsx @@ -0,0 +1,140 @@ +import React, { useState } from 'react'; + +import { Table, TableAlignment, TableSortDirection } from './index'; +import { Icon } from '../../'; + +export default { + title: 'Data Display/Table', + component: Table, + parameters: { + componentSubtitle: + 'Used for tabular information. It allows sorting by a single column.', + }, +}; + +const headerCells = [ + { + id: 'col1', + label: 'col1', + }, + { + id: 'col2', + alignment: TableAlignment.right, + label: 'col2', + }, + { + id: 'col3', + alignment: TableAlignment.right, + label: 'col3', + }, +]; + +const rows = [ + { + id: '1', + collapsibleContent:
content 1
, + cells: [ + { + content: , + }, + { + content: 1, + alignment: TableAlignment.right, + }, + { + content: 'safe', + alignment: TableAlignment.right, + }, + ], + }, + { + id: '2', + collapsibleContent:
content 2
, + cells: [ + { + content: , + }, + { + content: 2, + alignment: TableAlignment.right, + }, + { + content: 'gnosis', + alignment: TableAlignment.right, + }, + ], + }, +]; + +export const SimpleTable = (): React.ReactElement => ( + +); + +export const WithoutHeader = (): React.ReactElement =>
; + +export const Sortable = (): React.ReactElement => { + const [sortedByHeaderId, setSortedByHeaderId] = useState( + 'col2' + ); + const [sortDirection, setSortDirection] = useState( + TableSortDirection.asc + ); + + const onHeaderClick = (headerId: string) => { + if (!['col2'].includes(headerId)) { + return; + } + + const newDirection = + sortedByHeaderId === headerId && sortDirection === TableSortDirection.asc + ? TableSortDirection.desc + : TableSortDirection.asc; + + setSortDirection(newDirection); + setSortedByHeaderId(headerId); + }; + + const getSortedRows = () => { + const cp = [...rows]; + return cp.sort((a, b) => { + return sortDirection === TableSortDirection.asc + ? Number(a.cells[1].content) - Number(b.cells[1].content) + : Number(b.cells[1].content) - Number(a.cells[1].content); + }); + }; + + return ( +
+ ); +}; + +export const Collapsible = (): React.ReactElement => { + const [selectedRowIds, setSelectedRowIds] = useState>(new Set()); + + const onRowClick = (rowId: string) => { + const cp = new Set(selectedRowIds); + if (cp.has(rowId)) { + cp.delete(rowId); + } else { + cp.add(rowId); + } + setSelectedRowIds(cp); + }; + + return ( +
+ ); +}; diff --git a/src/dataDisplay/Text/index.tsx b/src/dataDisplay/Text/index.tsx index 24e94273..bebaaf82 100644 --- a/src/dataDisplay/Text/index.tsx +++ b/src/dataDisplay/Text/index.tsx @@ -1,18 +1,25 @@ import React from 'react'; import styled from 'styled-components'; +import Tooltip from '@material-ui/core/Tooltip'; +import { withStyles } from '@material-ui/core/styles'; +import { rgba } from 'polished'; -import { Theme } from '../../theme'; +import theme, { ThemeTextSize, ThemeColors } from '../../theme'; type Props = { - children: any; - size: keyof Theme['text']['size']; - color?: keyof Theme['colors']; + children: React.ReactNode; + size: ThemeTextSize; + color?: ThemeColors; strong?: boolean; center?: boolean; + tooltip?: string; + className?: string; }; const StyledText = styled.p` font-family: 'Averta'; + display: ${({ tooltip }) => + tooltip === undefined ? 'inline-block' : 'block'}; color: ${({ color, theme }) => color ? theme.colors[color] : theme.colors.text}; margin: 0; @@ -22,8 +29,28 @@ const StyledText = styled.p` text-align: ${({ center }) => (center ? 'center' : 'start')}; `; -const Text = ({ children, ...rest }: Props) => ( - {children} -); +const StyledTooltip = withStyles(() => ({ + tooltip: { + backgroundColor: theme.colors.white, + color: theme.colors.text, + boxShadow: `0px 0px 10px ${rgba(theme.colors.shadow.color, 0.2)}`, + }, + arrow: { + color: theme.colors.white, + boxShadow: `0px 0px 10px ${rgba(theme.colors.shadow.color, 0.2)}`, + }, +}))(Tooltip); + +const Text = ({ children, tooltip, ...rest }: Props): React.ReactElement => { + const TextElement = {children}; + + return tooltip === undefined ? ( + TextElement + ) : ( + + {TextElement} + + ); +}; export default Text; diff --git a/src/dataDisplay/Text/text.stories.tsx b/src/dataDisplay/Text/text.stories.tsx index dcf5f711..77b654e9 100644 --- a/src/dataDisplay/Text/text.stories.tsx +++ b/src/dataDisplay/Text/text.stories.tsx @@ -1,31 +1,33 @@ -import React from "react"; +import React from 'react'; -import Text from "./index"; +import Text from './index'; export default { - title: "Data Display/Text", + title: 'Data Display/Text', component: Text, parameters: { - componentSubtitle: "Text component, it allows several configurations" - } + componentSubtitle: 'Text component, it allows several configurations', + }, }; -export const text = () => Some Text...; +export const SimpleTexttext = (): React.ReactElement => ( + Some Text... +); -export const bold = () => ( +export const Bold = (): React.ReactElement => ( Some Text... ); -export const centered = () => ( +export const Centered = (): React.ReactElement => ( Some Text... ); -export const customSize = () => ( - <> +export const CustomSize = (): React.ReactElement => ( + <> Some Text... Some Text... Some Text... @@ -33,8 +35,14 @@ export const customSize = () => ( ); -export const color = () => ( - <> - Some Text... - +export const CustomColor = (): React.ReactElement => ( + + Some Text... + +); + +export const WithTooltip = (): React.ReactElement => ( + + Some Text... + ); diff --git a/src/dataDisplay/Title/index.tsx b/src/dataDisplay/Title/index.tsx index f75e12d3..fe776c18 100644 --- a/src/dataDisplay/Title/index.tsx +++ b/src/dataDisplay/Title/index.tsx @@ -1,11 +1,11 @@ import React from 'react'; import styled from 'styled-components'; -import { Theme } from '../../theme'; +import { ThemeTitleSize } from '../../theme'; type Props = { children: string; - size: keyof Theme['title']['size']; + size: ThemeTitleSize; withoutMargin?: boolean; }; @@ -49,7 +49,12 @@ const StyledH5 = styled.h5<{ withoutMargin?: boolean }>` margin: ${({ withoutMargin }) => (withoutMargin ? 0 : '18px')} 0; `; -const Title = ({ children, size, withoutMargin, ...rest }: Props) => { +const Title = ({ + children, + size, + withoutMargin, + ...rest +}: Props): React.ReactElement => { switch (size) { case 'xl': { return ( diff --git a/src/dataDisplay/Title/title.stories.tsx b/src/dataDisplay/Title/title.stories.tsx index 959edf1e..aabd4b3e 100644 --- a/src/dataDisplay/Title/title.stories.tsx +++ b/src/dataDisplay/Title/title.stories.tsx @@ -6,13 +6,15 @@ export default { title: 'Data Display/Title', component: Title, parameters: { - componentSubtitle: 'Title Component.' - } + componentSubtitle: 'Title Component.', + }, }; -export const title = () => Title LG; +export const SimpleTitle = (): React.ReactElement => ( + Title LG +); -export const sizes = () => { +export const WithSizes = (): React.ReactElement => { return ( <> Title XL diff --git a/src/dataDisplay/index.ts b/src/dataDisplay/index.ts index 2f27a0f3..42c2b3cd 100644 --- a/src/dataDisplay/index.ts +++ b/src/dataDisplay/index.ts @@ -5,6 +5,7 @@ export { default as FixedDialog } from './FixedDialog'; export { default as Icon } from './Icon'; export { default as IconText } from './IconText'; export { default as Layout } from './Layout'; +export * from './Table'; export { default as Text } from './Text'; export { default as Title } from './Title'; export { default as Section } from './Section'; diff --git a/src/feedback/Loader/index.tsx b/src/feedback/Loader/index.tsx index cf6249e2..ab130391 100644 --- a/src/feedback/Loader/index.tsx +++ b/src/feedback/Loader/index.tsx @@ -2,24 +2,26 @@ import React from 'react'; import styled from 'styled-components'; import CircularProgress from '@material-ui/core/CircularProgress'; -import theme, { Theme } from '../../theme'; - -const Wrapper = styled.div` - display: flex; - height: 100%; - width: 100%; - justify-content: center; - align-items: center; -`; +import theme, { ThemeLoaderSize, ThemeColors } from '../../theme'; type Props = { - size: keyof Theme['loader']['size']; + size: ThemeLoaderSize; + color?: ThemeColors; + className?: string; }; -const Loader = ({ size }: Props) => ( - - - +const StyledCircularProgress = styled( + ({ size, className }: Props): React.ReactElement => ( + + ) +)` + &.MuiCircularProgress-colorPrimary { + color: ${({ theme, color = 'primary' }) => theme.colors[color]}; + } +`; + +const Loader = ({ className, size, color }: Props): React.ReactElement => ( + ); export default Loader; diff --git a/src/feedback/Loader/loader.stories.tsx b/src/feedback/Loader/loader.stories.tsx index 0f5f98d1..d2e7fe41 100644 --- a/src/feedback/Loader/loader.stories.tsx +++ b/src/feedback/Loader/loader.stories.tsx @@ -1,16 +1,16 @@ -import React from "react"; +import React from 'react'; -import Loader from "./index"; +import Loader from './index'; export default { - title: "Feedback/Loader", + title: 'Feedback/Loader', component: Loader, parameters: { - componentSubtitle: "Loader component" - } + componentSubtitle: 'Loader component', + }, }; -export const loader = () => ( +export const loader = (): React.ReactElement => ( <> @@ -18,3 +18,7 @@ export const loader = () => ( ); + +export const withColor = (): React.ReactElement => ( + +); diff --git a/src/feedback/StatusDot/index.stories.tsx b/src/feedback/StatusDot/index.stories.tsx new file mode 100644 index 00000000..df7fdf52 --- /dev/null +++ b/src/feedback/StatusDot/index.stories.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +import StatusDot from './index'; + +export default { + title: 'Feedback/StatusDot', + component: StatusDot, + parameters: {}, +}; + +export const SimpleStatusDot = (): React.ReactElement => ( + <> + +
+ + +); diff --git a/src/feedback/StatusDot/index.tsx b/src/feedback/StatusDot/index.tsx new file mode 100644 index 00000000..89df6b8a --- /dev/null +++ b/src/feedback/StatusDot/index.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; + +import styled from 'styled-components'; +import { ThemeColors, ThemeStatusDotSize } from '../../theme'; + +type Props = { + color: ThemeColors; + size: ThemeStatusDotSize; + className?: string; +}; + +const StyledDot = styled.div` + border-radius: 50%; + background-color: ${({ theme, color }) => theme.colors[color]}; + height: ${({ theme, size }) => theme.statusDot.size[size]}; + width: ${({ theme, size }) => theme.statusDot.size[size]}; +`; + +const StatusDot = (props: Props): React.ReactElement => ( + +); + +export default StatusDot; diff --git a/src/feedback/index.ts b/src/feedback/index.ts index 84c801d8..1fa0f34e 100644 --- a/src/feedback/index.ts +++ b/src/feedback/index.ts @@ -1 +1 @@ -export { default as Loader } from './Loader' +export { default as Loader } from './Loader'; diff --git a/src/inputs/Button/button.stories.tsx b/src/inputs/Button/button.stories.tsx index 6b638748..1a157c83 100644 --- a/src/inputs/Button/button.stories.tsx +++ b/src/inputs/Button/button.stories.tsx @@ -6,11 +6,11 @@ export default { title: 'Inputs/Button', component: Button, parameters: { - componentSubtitle: 'Button component with several variants' - } + componentSubtitle: 'Button component with several variants', + }, }; -export const button = () => ( +export const SimpleButton = (): React.ReactElement => ( <>