diff --git a/apps/tx-builder/src/assets/add-new-batch.svg b/apps/tx-builder/src/assets/add-new-batch.svg index 5303c416d..274ee0969 100644 --- a/apps/tx-builder/src/assets/add-new-batch.svg +++ b/apps/tx-builder/src/assets/add-new-batch.svg @@ -2,7 +2,7 @@ - + diff --git a/apps/tx-builder/src/components/Button.tsx b/apps/tx-builder/src/components/Button.tsx index 739dd810b..50075d132 100644 --- a/apps/tx-builder/src/components/Button.tsx +++ b/apps/tx-builder/src/components/Button.tsx @@ -3,7 +3,7 @@ import ButtonMUI, { ButtonProps as ButtonMUIProps } from '@material-ui/core/Butt import { alpha } from '@material-ui/core/styles' import styled, { css, DefaultTheme, FlattenInterpolation, ThemeProps } from 'styled-components' -import { Icon, IconProps, IconTypes } from './Icon' +import { Icon, IconProps } from './Icon' type Colors = 'primary' | 'secondary' | 'error' type Variations = 'bordered' | 'contained' | 'outlined' @@ -68,6 +68,10 @@ const customStyles: { &.Mui-disabled { color: ${({ theme }) => theme.palette.primary.main}; } + + &:hover { + background: ${({ theme }) => theme.palette.background.light}; + } `, }, secondary: { @@ -114,12 +118,12 @@ const customStyles: { }, error: { contained: css` - color: ${({ theme }) => theme.palette.common.white}; - background-color: ${({ theme }) => theme.palette.error.main}; - box-shadow: 1px 2px 10px ${alpha('#28363D', 0.18)}; + color: ${({ theme }) => theme.palette.error.main}; + background-color: ${({ theme }) => theme.palette.error.background}; &:hover { - background-color: ${({ theme }) => theme.palette.error.dark}; + background-color: ${({ theme }) => theme.palette.error.light}; + color: ${({ theme }) => theme.palette.error.dark}; } `, outlined: css` diff --git a/apps/tx-builder/src/components/CreateNewBatchCard.tsx b/apps/tx-builder/src/components/CreateNewBatchCard.tsx index 3ffe0e30e..883069928 100644 --- a/apps/tx-builder/src/components/CreateNewBatchCard.tsx +++ b/apps/tx-builder/src/components/CreateNewBatchCard.tsx @@ -1,5 +1,4 @@ import { useRef } from 'react' -import { ButtonLink, Icon, Text } from '@gnosis.pm/safe-react-components' import { alpha } from '@material-ui/core' import Hidden from '@material-ui/core/Hidden' import styled from 'styled-components' @@ -8,6 +7,9 @@ import { useTheme } from '@material-ui/core/styles' import { ReactComponent as CreateNewBatchSVG } from '../assets/add-new-batch.svg' import useDropZone from '../hooks/useDropZone' import { useMediaQuery } from '@material-ui/core' +import { Icon } from './Icon' +import Text from './Text' +import ButtonLink from './buttons/ButtonLink' type CreateNewBatchCardProps = { onFileSelected: (file: File | null) => void @@ -47,14 +49,14 @@ const CreateNewBatchCard = ({ onFileSelected }: CreateNewBatchCardProps) => { error={isAcceptError} > {isAcceptError ? ( - + The uploaded file is not a valid JSON file ) : ( <> - Drag and drop a JSON file or - + Drag and drop a JSON file or + choose a file @@ -85,9 +87,11 @@ const StyledDragAndDropFileContainer = styled.div<{ }>` box-sizing: border-box; max-width: ${({ fullWidth }) => (fullWidth ? '100%' : '420px')}; - border: 2px dashed ${({ theme, error }) => (error ? theme.colors.error : '#008c73')}; + border: 2px dashed + ${({ theme, error }) => (error ? theme.palette.error.main : theme.palette.secondary.dark)}; border-radius: 8px; - background-color: ${({ theme, error }) => (error ? alpha(theme.colors.error, 0.7) : '#eaf7f4')}; + background-color: ${({ theme, error }) => + error ? alpha(theme.palette.error.main, 0.7) : theme.palette.secondary.background}; padding: 24px; margin: 24px auto 0 auto; @@ -104,22 +108,28 @@ const StyledDragAndDropFileContainer = styled.div<{ } return ` - border-color: ${error ? theme.colors.error : '#008c73'}; - background-color: ${error ? alpha(theme.colors.error, 0.7) : '#eaf7f4'}; + border-color: ${error ? theme.palette.error.main : theme.palette.secondary.dark}; + background-color: ${ + error ? alpha(theme.palette.error.main, 0.7) : theme.palette.secondary.background + }; ` }} ` const StyledText = styled(Text)<{ error?: Boolean }>` - margin-left: 4px; - color: ${({ error }) => (error ? '#FFF' : '#566976')}; + && { + margin-left: 4px; + color: ${({ error, theme }) => + error ? theme.palette.common.white : theme.palette.text.secondary}; + } ` const StyledButtonLink = styled(ButtonLink)` + margin-left: 0.3rem; padding: 0; text-decoration: none; && > p { - font-size: 16px; + color: ${({ theme }) => theme.palette.secondary.dark}; } ` diff --git a/apps/tx-builder/src/components/FixedIcon/images/plus.tsx b/apps/tx-builder/src/components/FixedIcon/images/plus.tsx index 408a2bf71..290cfea6e 100644 --- a/apps/tx-builder/src/components/FixedIcon/images/plus.tsx +++ b/apps/tx-builder/src/components/FixedIcon/images/plus.tsx @@ -1,11 +1,16 @@ -import React from 'react' - const icon = ( - + + ) diff --git a/apps/tx-builder/src/components/Header.tsx b/apps/tx-builder/src/components/Header.tsx index e4cb36827..ba727e6d3 100644 --- a/apps/tx-builder/src/components/Header.tsx +++ b/apps/tx-builder/src/components/Header.tsx @@ -1,4 +1,3 @@ -import { FixedIcon, Icon, Text, Title, Tooltip } from '@gnosis.pm/safe-react-components' import { Link, useLocation, useNavigate } from 'react-router-dom' import styled from 'styled-components' @@ -12,6 +11,11 @@ import { import { useTransactionLibrary } from '../store' import ChecksumWarning from './ChecksumWarning' import ErrorAlert from './ErrorAlert' +import { Tooltip } from './Tooltip' +import { Icon } from './Icon' +import FixedIcon from './FixedIcon' +import { Typography } from '@material-ui/core' +import Text from './Text' const HELP_ARTICLE_LINK = 'https://help.safe.global/en/articles/40841-transaction-builder' @@ -51,31 +55,25 @@ const Header = () => { {showTitle ? ( <> {/* Transaction Builder Title */} - Transaction Builder - - + Transaction Builder + + - + ) : ( {/* Go Back link */} - {goBackLabel[previousUrl]} + {goBackLabel[previousUrl]} )} {showLinkToLibrary && ( - {`(${batches.length}) Your transaction library`} + {`(${batches.length}) Your transaction library`} @@ -102,21 +100,35 @@ const HeaderWrapper = styled.header` box-sizing: border-box; ` -const StyledTitle = styled(Title)` - font-size: 20px; - margin: 0 10px 0 0; +const StyledTitle = styled(Typography)` + && { + font-size: 20px; + font-weight: 700; + margin: 0 10px 0 0; + } ` const StyledLink = styled(Link)` display: flex; align-items: center; - color: #000000; + color: ${({ theme }) => theme.palette.common.black}; font-size: 16px; text-decoration: none; + + > span { + padding-top: 3px; + + path { + fill: ${({ theme }) => theme.palette.common.black}; + } + } ` const StyledLeftLinkLabel = styled(Text)` - margin-left: 8px; + && { + margin-left: 8px; + font-weight: 700; + } ` const RigthLinkWrapper = styled.div` @@ -126,5 +138,13 @@ const RigthLinkWrapper = styled.div` ` const StyledRightLinkLabel = styled(Text)` - margin-right: 8px; + && { + font-weight: 700; + margin-right: 8px; + } +` + +const StyledIconLink = styled.a` + display: flex; + align-items: center; ` diff --git a/apps/tx-builder/src/components/Icon/images/bookmark.tsx b/apps/tx-builder/src/components/Icon/images/bookmark.tsx index 1482b7203..6f6cc8e33 100644 --- a/apps/tx-builder/src/components/Icon/images/bookmark.tsx +++ b/apps/tx-builder/src/components/Icon/images/bookmark.tsx @@ -1,28 +1,22 @@ const Bookmark = { sm: ( - - - - + + ), md: ( - - - - + + ), } diff --git a/apps/tx-builder/src/components/Icon/images/bookmarkFilled.tsx b/apps/tx-builder/src/components/Icon/images/bookmarkFilled.tsx new file mode 100644 index 000000000..c0128163d --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/bookmarkFilled.tsx @@ -0,0 +1,30 @@ +const BookMarkFilled = { + sm: ( + + + + + + ), + md: ( + + + + + + ), +} + +export default BookMarkFilled diff --git a/apps/tx-builder/src/components/Icon/images/copy.tsx b/apps/tx-builder/src/components/Icon/images/copy.tsx new file mode 100644 index 000000000..652ff813e --- /dev/null +++ b/apps/tx-builder/src/components/Icon/images/copy.tsx @@ -0,0 +1,28 @@ +const Copy = { + sm: ( + + + + + + + ), + md: ( + + + + + + + ), +} + +export default Copy diff --git a/apps/tx-builder/src/components/Icon/images/delete.tsx b/apps/tx-builder/src/components/Icon/images/delete.tsx index da88fa336..8a60a4bbc 100644 --- a/apps/tx-builder/src/components/Icon/images/delete.tsx +++ b/apps/tx-builder/src/components/Icon/images/delete.tsx @@ -1,28 +1,52 @@ const Delete = { sm: ( - - - - - + + + + ), md: ( - - - - - - + + + + ), } diff --git a/apps/tx-builder/src/components/Icon/images/edit.tsx b/apps/tx-builder/src/components/Icon/images/edit.tsx index 86839998e..aa21ab2e8 100644 --- a/apps/tx-builder/src/components/Icon/images/edit.tsx +++ b/apps/tx-builder/src/components/Icon/images/edit.tsx @@ -1,24 +1,22 @@ const Edit = { sm: ( - - - - - + + ), md: ( - - - - - + + ), } diff --git a/apps/tx-builder/src/components/Icon/images/import.tsx b/apps/tx-builder/src/components/Icon/images/import.tsx index 5c8fc0153..906cd8da6 100644 --- a/apps/tx-builder/src/components/Icon/images/import.tsx +++ b/apps/tx-builder/src/components/Icon/images/import.tsx @@ -1,33 +1,33 @@ const Import = { sm: ( - + ), md: ( - + ), diff --git a/apps/tx-builder/src/components/Icon/images/termsOfUse.tsx b/apps/tx-builder/src/components/Icon/images/termsOfUse.tsx index 85f370690..43b1d071b 100644 --- a/apps/tx-builder/src/components/Icon/images/termsOfUse.tsx +++ b/apps/tx-builder/src/components/Icon/images/termsOfUse.tsx @@ -1,24 +1,22 @@ const TermsOfUse = { sm: ( - - - - - + + ), md: ( - - - - - + + ), } diff --git a/apps/tx-builder/src/components/Icon/index.tsx b/apps/tx-builder/src/components/Icon/index.tsx index 4cefcd063..0830ccf30 100644 --- a/apps/tx-builder/src/components/Icon/index.tsx +++ b/apps/tx-builder/src/components/Icon/index.tsx @@ -6,8 +6,10 @@ import { Tooltip } from '../Tooltip' import alert from './images/alert' import bookmark from './images/bookmark' +import bookmarkFilled from './images/bookmarkFilled' import check from './images/check' import code from './images/code' +import copy from './images/copy' import cross from './images/cross' import deleteIcon from './images/delete' import edit from './images/edit' @@ -31,7 +33,9 @@ const StyledIcon = styled.span<{ color?: keyof Theme['palette'] }>` const icons = { alert, bookmark, + bookmarkFilled, check, + copy, code, cross, delete: deleteIcon, diff --git a/apps/tx-builder/src/components/Link/index.tsx b/apps/tx-builder/src/components/Link/index.tsx index 0e13278d5..444fb3df8 100644 --- a/apps/tx-builder/src/components/Link/index.tsx +++ b/apps/tx-builder/src/components/Link/index.tsx @@ -7,11 +7,11 @@ export interface Props extends React.AnchorHTMLAttributes { } const StyledLink = styled.a` - text-decoration: none; cursor: pointer; color: ${({ theme, color = 'primary' }) => color === 'white' ? theme.palette.common.white : theme.palette[color].dark}; font-family: ${({ theme }) => theme.typography.fontFamily}; + text-decoration: underline; ` const Link: React.FC = ({ children, ...rest }): React.ReactElement => { diff --git a/apps/tx-builder/src/components/QuickTip.tsx b/apps/tx-builder/src/components/QuickTip.tsx index ac1a46c48..b3382bc79 100644 --- a/apps/tx-builder/src/components/QuickTip.tsx +++ b/apps/tx-builder/src/components/QuickTip.tsx @@ -1,8 +1,7 @@ -import { Icon } from '@gnosis.pm/safe-react-components' import MuiAlert from '@material-ui/lab/Alert' import MuiAlertTitle from '@material-ui/lab/AlertTitle' -import React from 'react' import styled from 'styled-components' +import { Icon } from './Icon' type QuickTipProps = { onClose: () => void @@ -23,11 +22,10 @@ const QuickTip = ({ onClose }: QuickTipProps) => { const StyledAlert = styled(MuiAlert)` && { - font-family: 'Averta'; font-size: 14px; padding: 24px; - background: #eaf7f4; - color: #566976; + background: ${({ theme }) => theme.palette.secondary.background}; + color: ${({ theme }) => theme.palette.text.primary}; border-radius: 8px; .MuiAlert-action { diff --git a/apps/tx-builder/src/components/ShowMoreText.tsx b/apps/tx-builder/src/components/ShowMoreText.tsx index 83e150bbc..b920d99e3 100644 --- a/apps/tx-builder/src/components/ShowMoreText.tsx +++ b/apps/tx-builder/src/components/ShowMoreText.tsx @@ -1,5 +1,5 @@ import { useState, SyntheticEvent } from 'react' -import { Link } from '@gnosis.pm/safe-react-components' +import Link from './Link' type ShowMoreTextProps = { children: string diff --git a/apps/tx-builder/src/components/TransactionBatchListItem.tsx b/apps/tx-builder/src/components/TransactionBatchListItem.tsx index 53785d6ce..1254ca7da 100644 --- a/apps/tx-builder/src/components/TransactionBatchListItem.tsx +++ b/apps/tx-builder/src/components/TransactionBatchListItem.tsx @@ -1,13 +1,3 @@ -import { - Accordion, - AccordionSummary, - Dot, - EthHashInfo, - FixedIcon, - Icon, - Text, - Tooltip, -} from '@gnosis.pm/safe-react-components' import { AccordionDetails, IconButton } from '@material-ui/core' import { memo, useState } from 'react' import { DraggableProvided, DraggableStateSnapshot } from 'react-beautiful-dnd' @@ -16,6 +6,13 @@ import DragIndicatorIcon from '@material-ui/icons/DragIndicator' import { ProposedTransaction } from '../typings/models' import TransactionDetails from './TransactionDetails' import { getTransactionText } from '../utils' +import Text from './Text' +import { Accordion, AccordionSummary } from './Accordion' +import { Tooltip } from './Tooltip' +import EthHashInfo from './ETHHashInfo' +import { Icon } from './Icon' +import FixedIcon from './FixedIcon' +import Dot from './Dot' const UNKNOWN_POSITION_LABEL = '?' const minArrowSize = '12' @@ -86,8 +83,8 @@ const TransactionBatchListItem = memo( {/* Transacion Position */} - - {displayedTxPosition} + + {displayedTxPosition} {showArrowAdornment && } @@ -107,19 +104,13 @@ const TransactionBatchListItem = memo( > {/* Drag & Drop Indicator */} {reorderTransactions && ( - + )} {/* Destination Address label */} - {/* Transaction Description label */} - {transactionDescription} + {transactionDescription} {/* Transaction Actions */} {/* Edit transaction */} {replaceTransaction && ( - + + { event.stopPropagation() @@ -177,7 +162,6 @@ const TransactionBatchListItem = memo( placement="top" title="Expand transaction details" backgroundColor="primary" - textColor="white" arrow > (isDragging ? '#92c9be' : ' #e2e3e3')}; + background-color: #e2e3e3; transition: background-color 0.5s linear; ` @@ -301,27 +285,35 @@ const StyledAccordion = styled(Accordion).withConfig({ &.MuiAccordion-root { margin-bottom: 0; - border-color: ${({ isDragging, expanded }) => (isDragging || expanded ? '#92c9be' : '#e8e7e6')}; + border-width: 1px; + border-color: ${({ isDragging, expanded, theme }) => + isDragging || expanded ? theme.palette.secondary.light : theme.palette.common.white}; transition: border-color 0.5s linear; + + &:hover { + border-color: ${({ theme }) => theme.palette.secondary.light}; + + .MuiAccordionSummary-root { + background-color: ${({ theme }) => theme.palette.secondary.background}; + } + } } .MuiAccordionSummary-root { height: 52px; padding: 0px 8px; - background-color: ${({ isDragging }) => (isDragging ? '#EFFAF8' : '#FFFFFF')}; - - &:hover { - background-color: #ffffff; - } + background-color: ${({ isDragging, theme }) => + isDragging ? theme.palette.secondary.background : theme.palette.common.white}; .MuiIconButton-root { padding: 8px; } &.Mui-expanded { - background-color: #effaf8; - border-color: ${({ isDragging, expanded }) => - isDragging || expanded ? '#92c9be' : '#e8e7e6'}; + border-width: 1px; + background-color: ${({ theme }) => theme.palette.secondary.background}; + border-color: ${({ isDragging, expanded, theme }) => + isDragging || expanded ? theme.palette.secondary.light : '#e8e7e6'}; } } @@ -338,12 +330,15 @@ const TransactionActionButton = styled(IconButton)` ` const TransactionsDescription = styled(Text)` - flex-grow: 1; - padding-left: 24px; - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + && { + flex-grow: 1; + padding-left: 24px; + font-size: 14px; + + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } ` const DragAndDropIndicatorIcon = styled(DragIndicatorIcon)` @@ -351,4 +346,10 @@ const DragAndDropIndicatorIcon = styled(DragIndicatorIcon)` margin-right: 4px; ` +const StyledEthHashInfo = styled(EthHashInfo)` + p { + font-size: 14px; + } +` + export default TransactionBatchListItem diff --git a/apps/tx-builder/src/components/TransactionDetails.tsx b/apps/tx-builder/src/components/TransactionDetails.tsx index 5aaeb1c67..46e3b209d 100644 --- a/apps/tx-builder/src/components/TransactionDetails.tsx +++ b/apps/tx-builder/src/components/TransactionDetails.tsx @@ -1,10 +1,13 @@ -import { ButtonLink, EthHashInfo, Text, Title } from '@gnosis.pm/safe-react-components' import React, { useEffect, useState } from 'react' import styled from 'styled-components' import useElementHeight from '../hooks/useElementHeight/useElementHeight' import { ProposedTransaction } from '../typings/models' import { weiToEther } from '../utils' +import EthHashInfo from './ETHHashInfo' +import Text from './Text' +import { Typography } from '@material-ui/core' +import ButtonLink from './buttons/ButtonLink' type TransactionDetailsProp = { transaction: ProposedTransaction @@ -29,13 +32,13 @@ const TransactionDetails = ({ transaction }: TransactionDetailsProp) => { return ( - + {isTokenTransferTx ? `Transfer ${weiToEther(value)} ${nativeCurrencySymbol} to:` : 'Interact with:'} - { {/* to address */} - - to (address) - - to (address) + { /> {/* value */} - - value: - + value: {`${weiToEther(value)} ${nativeCurrencySymbol}`} {/* data */} - - data: - + data: {data} {isContractInteractionTx && ( <> {/* method */} - - method: - - {contractMethod.name} + method: + {contractMethod.name} {/* method inputs */} {contractMethod.inputs.map(({ name, type }, index) => { @@ -84,7 +79,7 @@ const TransactionDetails = ({ transaction }: TransactionDetailsProp) => { return ( {/* input name */} - + {inputLabel} {/* input value */} @@ -115,11 +110,19 @@ const TxSummaryContainer = styled.div` margin-top: 16px; ` -const StyledTxTitle = styled(Title)` - font-size: 16px; - margin: 8px 0; - font-weight: bold; - line-height: initial; +const StyledTxTitle = styled(Typography)` + && { + font-size: 16px; + margin: 8px 0; + font-weight: bold; + line-height: initial; + } +` +const StyledText = styled(Text)` + && { + color: ${({ theme }) => theme.palette.text.secondary}; + font-weight: 400; + } ` const StyledMethodNameLabel = styled(Text)` @@ -152,7 +155,7 @@ const TxValueLabel = ({ children }: { children: React.ReactNode }) => { return (
{/* value */} - + {children} @@ -169,21 +172,28 @@ const TxValueLabel = ({ children }: { children: React.ReactNode }) => { const StyledTxValueLabel = styled(Text).withConfig({ shouldForwardProp: prop => !['showMore'].includes(prop) || !['showEllipsis'].includes(prop), })<{ showMore?: boolean; showEllipsis?: boolean }>` - max-height: ${({ showMore }) => (showMore ? '100%' : `${MAX_HEIGHT + 1}px`)}; - - line-break: anywhere; - overflow: hidden; - word-break: break-all; - text-overflow: ellipsis; - - ${({ showEllipsis, showMore }) => - !showMore && - showEllipsis && - `@supports (-webkit-line-clamp: 2) { + && { + max-height: ${({ showMore }) => (showMore ? '100%' : `${MAX_HEIGHT + 1}px`)}; + font-size: 14px; + line-break: anywhere; + overflow: hidden; + word-break: break-all; + text-overflow: ellipsis; + + ${({ showEllipsis, showMore }) => + !showMore && + showEllipsis && + `@supports (-webkit-line-clamp: 2) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }`} + } +` +const StyledEthHashInfo = styled(EthHashInfo)` + p { + font-size: 14px; + } ` const StyledButtonLink = styled(ButtonLink)` diff --git a/apps/tx-builder/src/components/TransactionsBatchList.tsx b/apps/tx-builder/src/components/TransactionsBatchList.tsx index f2382b911..7fdf31a76 100644 --- a/apps/tx-builder/src/components/TransactionsBatchList.tsx +++ b/apps/tx-builder/src/components/TransactionsBatchList.tsx @@ -1,5 +1,4 @@ import { isValidElement, useMemo, useState } from 'react' -import { Dot, Text, Title, Icon, Tooltip } from '@gnosis.pm/safe-react-components' import IconButton from '@material-ui/core/IconButton' import styled from 'styled-components' @@ -25,6 +24,11 @@ import Item from './TransactionBatchListItem' import VirtualizedList from './VirtualizedList' import { getTransactionText } from '../utils' import { EditableLabelProps } from './EditableLabel' +import Text from './Text' +import { Tooltip } from './Tooltip' +import { Icon } from './Icon' +import { Typography } from '@material-ui/core' +import Dot from './Dot' type TransactionsBatchListProps = { transactions: ProposedTransaction[] @@ -142,28 +146,16 @@ const TransactionsBatchList = ({ {showBatchHeader && ( {/* Transactions Batch Counter */} - - - {transactions.length} - + + {transactions.length} {/* Transactions Batch Title */} - {batchTitle && ( - - {batchTitle} - - )} + {batchTitle && {batchTitle}} {/* Transactions Batch Actions */} {saveBatch && ( - + )} {downloadBatch && ( - + downloadBatch(fileName, transactions)}> @@ -189,13 +175,7 @@ const TransactionsBatchList = ({ )} {removeAllTransactions && ( - + @@ -402,7 +382,6 @@ const TransactionsBatchWrapper = styled.section` // batch header styles const TransactionHeader = styled.header` - margin-top: 24px; display: flex; align-items: center; ` @@ -411,18 +390,19 @@ const TransactionCounterDot = styled(Dot)` height: 24px; width: 24px; min-width: 24px; - background-color: #566976; ` -const TransactionsTitle = styled(Title)` - flex-grow: 1; - margin-left: 14px; - min-width: 0; +const TransactionsTitle = styled(Typography)` + && { + flex-grow: 1; + margin-left: 14px; + min-width: 0; - font-size: 16px; - line-height: normal; - display: flex; - align-items: center; + font-size: 16px; + line-height: normal; + display: flex; + align-items: center; + } ` const StyledHeaderIconButton = styled(IconButton)` diff --git a/apps/tx-builder/src/components/forms/AddNewTransactionForm.tsx b/apps/tx-builder/src/components/forms/AddNewTransactionForm.tsx index e5df78724..88fc08993 100644 --- a/apps/tx-builder/src/components/forms/AddNewTransactionForm.tsx +++ b/apps/tx-builder/src/components/forms/AddNewTransactionForm.tsx @@ -1,4 +1,3 @@ -import { Title, Button } from '@gnosis.pm/safe-react-components' import styled from 'styled-components' import { ContractInterface } from '../../typings/models' @@ -10,6 +9,9 @@ import SolidityForm, { parseFormToProposedTransaction, } from './SolidityForm' import { useTransactions, useNetwork } from '../../store' +import { Typography } from '@material-ui/core' +import Button from '../Button' +import FixedIcon from '../FixedIcon' type AddNewTransactionFormProps = { contract: ContractInterface | null @@ -43,7 +45,9 @@ const AddNewTransactionForm = ({ return ( <> - Transaction information + + Transaction information + {/* Add transaction btn */} - @@ -68,8 +73,19 @@ const AddNewTransactionForm = ({ export default AddNewTransactionForm +const StyledButtonLabel = styled.span` + margin-left: 8px; +` const ButtonContainer = styled.div` display: flex; justify-content: space-between; margin-top: 15px; + + .MuiButton-root { + padding-left: 10px; + } + + span { + display: flex; + } ` diff --git a/apps/tx-builder/src/components/forms/fields/AddressContractField.tsx b/apps/tx-builder/src/components/forms/fields/AddressContractField.tsx index 194c74be5..134bbf5ee 100644 --- a/apps/tx-builder/src/components/forms/fields/AddressContractField.tsx +++ b/apps/tx-builder/src/components/forms/fields/AddressContractField.tsx @@ -1,5 +1,5 @@ import { ReactElement } from 'react' -import { AddressInput } from '@gnosis.pm/safe-react-components' +import AddressInput from './AddressInput' const AddressContractField = ({ id, diff --git a/apps/tx-builder/src/components/forms/fields/JsonField.tsx b/apps/tx-builder/src/components/forms/fields/JsonField.tsx index 8c4c86e77..b5d1036c9 100644 --- a/apps/tx-builder/src/components/forms/fields/JsonField.tsx +++ b/apps/tx-builder/src/components/forms/fields/JsonField.tsx @@ -1,17 +1,12 @@ import { useState, useCallback, ClipboardEvent } from 'react' import styled from 'styled-components' -import { - Icon, - TextFieldInput, - Tooltip, - GenericModal, - Text, - Button, - IconTypes, -} from '@gnosis.pm/safe-react-components' import IconButton from '@material-ui/core/IconButton' -import { Box } from '@material-ui/core' +import { Box, Button, Tooltip } from '@material-ui/core' import useModal from '../../../hooks/useModal/useModal' +import { Icon, IconTypes } from '../../Icon' +import Text from '../../Text' +import GenericModal from '../../GenericModal' +import TextFieldInput from './TextFieldInput' const DEFAULT_ROWS = 4 @@ -113,17 +108,17 @@ const JsonField = ({ id, name, label, value, onChange }: Props) => { - Do you want to replace the current ABI? + Do you want to replace the current ABI? } onClose={toggleModal} title="Replace ABI" footer={ - - @@ -159,7 +154,7 @@ const IconContainerButton = ({ }) => ( - + ) @@ -173,7 +168,7 @@ const IconContainer = styled.div<{ error: boolean }>` top: -10px; right: 15px; border: 1px solid - ${({ theme, error }) => (error ? theme.colors.error : theme.colors.inputDefault)}; + ${({ theme, error }) => (error ? theme.palette.error.main : theme.palette.primary.main)}; border-radius: 50%; background-color: #fff; ` diff --git a/apps/tx-builder/src/components/forms/fields/SelectContractField.tsx b/apps/tx-builder/src/components/forms/fields/SelectContractField.tsx index c6016f586..45ddb69dd 100644 --- a/apps/tx-builder/src/components/forms/fields/SelectContractField.tsx +++ b/apps/tx-builder/src/components/forms/fields/SelectContractField.tsx @@ -1,7 +1,7 @@ import Autocomplete from '@mui/material/Autocomplete' -import { TextFieldInput } from '@gnosis.pm/safe-react-components' import { SelectItem } from '@gnosis.pm/safe-react-components/dist/inputs/Select' import { type SyntheticEvent, useCallback, useMemo } from 'react' +import TextFieldInput from './TextFieldInput' type SelectContractFieldTypes = { options: SelectItem[] diff --git a/apps/tx-builder/src/components/forms/fields/TextContractField.tsx b/apps/tx-builder/src/components/forms/fields/TextContractField.tsx index 544273d5d..693c50a72 100644 --- a/apps/tx-builder/src/components/forms/fields/TextContractField.tsx +++ b/apps/tx-builder/src/components/forms/fields/TextContractField.tsx @@ -1,6 +1,5 @@ -import { TextFieldInput } from '@gnosis.pm/safe-react-components' -import { TextFieldInputProps } from '@gnosis.pm/safe-react-components/dist/inputs/TextFieldInput' import styled from 'styled-components' +import TextFieldInput, { TextFieldInputProps } from './TextFieldInput' type TextContractFieldTypes = TextFieldInputProps & { networkPrefix?: undefined | string diff --git a/apps/tx-builder/src/components/forms/fields/TextareaContractField.tsx b/apps/tx-builder/src/components/forms/fields/TextareaContractField.tsx index f5be176ad..dce59f50d 100644 --- a/apps/tx-builder/src/components/forms/fields/TextareaContractField.tsx +++ b/apps/tx-builder/src/components/forms/fields/TextareaContractField.tsx @@ -1,5 +1,5 @@ -import { TextFieldInputProps } from '@gnosis.pm/safe-react-components/dist/inputs/TextFieldInput' import TextContractField from './TextContractField' +import { TextFieldInputProps } from './TextFieldInput' const DEFAULT_ROWS = 4 diff --git a/apps/tx-builder/src/components/modals/DeleteBatchFromLibrary.tsx b/apps/tx-builder/src/components/modals/DeleteBatchFromLibrary.tsx index 3409f8a14..6accf41d2 100644 --- a/apps/tx-builder/src/components/modals/DeleteBatchFromLibrary.tsx +++ b/apps/tx-builder/src/components/modals/DeleteBatchFromLibrary.tsx @@ -1,8 +1,11 @@ -import { Dot, Text, Button, GenericModal } from '@gnosis.pm/safe-react-components' import Box from '@material-ui/core/Box' import styled from 'styled-components' import { Batch } from '../../typings/models' +import GenericModal from '../GenericModal' +import Text from '../Text' +import Button from '../Button' +import Dot from '../Dot' type DeleteBatchFromLibraryProps = { batch: Batch @@ -17,28 +20,21 @@ const DeleteBatchFromLibrary = ({ batch, onClick, onClose }: DeleteBatchFromLibr withoutBodyPadding body={ - - - {batch.transactions.length} - + + {batch.transactions.length} - {`${batch.name} batch will be permanently deleted`} + {`${batch.name} batch will be permanently deleted`} - - @@ -58,13 +54,15 @@ const StyledModalBodyWrapper = styled.div` ` const StyledModalDot = styled(Dot)` - height: 24px; - width: 24px; - min-width: 24px; - background-color: #566976; + && { + height: 24px; + width: 24px; + min-width: 24px; + background-color: #566976; - position: absolute; - top: 22px; + position: absolute; + top: 22px; + } ` const StyledModalText = styled(Text)` diff --git a/apps/tx-builder/src/components/modals/DeleteBatchModal.tsx b/apps/tx-builder/src/components/modals/DeleteBatchModal.tsx index 00a61cdeb..9e5950316 100644 --- a/apps/tx-builder/src/components/modals/DeleteBatchModal.tsx +++ b/apps/tx-builder/src/components/modals/DeleteBatchModal.tsx @@ -1,6 +1,9 @@ -import { Dot, Text, Button, GenericModal } from '@gnosis.pm/safe-react-components' import Box from '@material-ui/core/Box' import styled from 'styled-components' +import GenericModal from '../GenericModal' +import Text from '../Text' +import Button from '../Button' +import Dot from '../Dot' type DeleteBatchModalProps = { count: number @@ -15,25 +18,21 @@ const DeleteBatchModal = ({ count, onClick, onClose }: DeleteBatchModalProps) => withoutBodyPadding body={ - - - {count} - + + {count} - - {`transaction${count > 1 ? 's' : ''}`} will be cleared - + {`transaction${count > 1 ? 's' : ''}`} will be cleared - - diff --git a/apps/tx-builder/src/components/modals/DeleteTransactionModal.tsx b/apps/tx-builder/src/components/modals/DeleteTransactionModal.tsx index fd0bc20bc..fb64d4af3 100644 --- a/apps/tx-builder/src/components/modals/DeleteTransactionModal.tsx +++ b/apps/tx-builder/src/components/modals/DeleteTransactionModal.tsx @@ -1,6 +1,9 @@ -import { Dot, Text, Button, GenericModal } from '@gnosis.pm/safe-react-components' import Box from '@material-ui/core/Box' import styled from 'styled-components' +import GenericModal from '../GenericModal' +import Text from '../Text' +import Button from '../Button' +import Dot from '../Dot' type DeleteTransactionModalProps = { txIndex: number @@ -22,23 +25,21 @@ const DeleteTransactionModal = ({ withoutBodyPadding body={ - - - {positionLabel} - + + {positionLabel} - {`${txDescription} will be permanently deleted from the batch`} + {`${txDescription} will be permanently deleted from the batch`} - - diff --git a/apps/tx-builder/src/components/modals/EditTransactionModal.tsx b/apps/tx-builder/src/components/modals/EditTransactionModal.tsx index 203e5b0b9..1dd29f282 100644 --- a/apps/tx-builder/src/components/modals/EditTransactionModal.tsx +++ b/apps/tx-builder/src/components/modals/EditTransactionModal.tsx @@ -1,4 +1,3 @@ -import { GenericModal, Button } from '@gnosis.pm/safe-react-components' import styled from 'styled-components' import { ProposedTransaction } from '../../typings/models' import SolidityForm, { @@ -11,6 +10,8 @@ import SolidityForm, { TO_ADDRESS_FIELD_NAME, } from '../forms/SolidityForm' import { weiToEther } from '../../utils' +import GenericModal from '../GenericModal' +import Button from '../Button' type EditTransactionModalProps = { txIndex: number @@ -78,12 +79,12 @@ const EditTransactionModal = ({ > {/* Remove transaction btn */} - {/* Add transaction btn */} - diff --git a/apps/tx-builder/src/components/modals/ImplementationABIDialog.tsx b/apps/tx-builder/src/components/modals/ImplementationABIDialog.tsx index 7cd0c2f6a..1f7ef59e2 100644 --- a/apps/tx-builder/src/components/modals/ImplementationABIDialog.tsx +++ b/apps/tx-builder/src/components/modals/ImplementationABIDialog.tsx @@ -1,7 +1,10 @@ import React from 'react' -import { Text, Button, GenericModal, EthHashInfo } from '@gnosis.pm/safe-react-components' import Box from '@material-ui/core/Box' import styled from 'styled-components' +import Text from '../Text' +import Button from '../Button' +import EthHashInfo from '../ETHHashInfo' +import GenericModal from '../GenericModal' type Props = { networkPrefix: string @@ -24,9 +27,7 @@ const ImplementationABIDialog: React.FC = ({ withoutBodyPadding body={ - - The contract looks like a proxy. Do you want to use the Implementation ABI? - + The contract looks like a proxy. Do you want to use the Implementation ABI? = ({ justifyContent="center" maxWidth="470px" > - - diff --git a/apps/tx-builder/src/components/modals/SaveBatchModal.tsx b/apps/tx-builder/src/components/modals/SaveBatchModal.tsx index 88c1f6f89..6fdf0fa64 100644 --- a/apps/tx-builder/src/components/modals/SaveBatchModal.tsx +++ b/apps/tx-builder/src/components/modals/SaveBatchModal.tsx @@ -1,4 +1,3 @@ -import { Button, GenericModal } from '@gnosis.pm/safe-react-components' import Box from '@material-ui/core/Box' import { useForm, ValidateResult } from 'react-hook-form' import { useNavigate } from 'react-router-dom' @@ -9,6 +8,8 @@ import { useTransactionLibrary } from '../../store' import { Batch } from '../../typings/models' import Field from '../forms/fields/Field' import { TEXT_FIELD_TYPE } from '../forms/fields/fields' +import GenericModal from '../GenericModal' +import Button from '../Button' type SaveBatchModalProps = { onClick: (name: string) => void @@ -53,8 +54,8 @@ const SaveBatchModal = ({ onClick, onClose }: SaveBatchModalProps) => { control={control} showErrorsInTheLabel={false} /> - - diff --git a/apps/tx-builder/src/components/modals/SuccessBatchCreationModal.tsx b/apps/tx-builder/src/components/modals/SuccessBatchCreationModal.tsx index 22c23adb2..9f2b0e86b 100644 --- a/apps/tx-builder/src/components/modals/SuccessBatchCreationModal.tsx +++ b/apps/tx-builder/src/components/modals/SuccessBatchCreationModal.tsx @@ -1,8 +1,12 @@ -import { Dot, Text, Button, GenericModal, Title } from '@gnosis.pm/safe-react-components' import Box from '@material-ui/core/Box' import styled from 'styled-components' import { ReactComponent as SuccessBatchSVG } from '../../assets/success-batch.svg' +import GenericModal from '../GenericModal' +import Text from '../Text' +import Button from '../Button' +import { Typography } from '@material-ui/core' +import Dot from '../Dot' type SuccessBatchCreationModalProps = { count: number @@ -26,25 +30,21 @@ const SuccessBatchCreationModal = ({ count, onClick, onClose }: SuccessBatchCrea {/* Title */} - Success! + Success! {/* Text */} - - - {count} - + + {count} - Transaction Batch in the queue. + Transaction Batch in the queue. - You can now sign and execute it. + You can now sign and execute it. {/* Button */} - + } onClose={onClose} @@ -58,9 +58,11 @@ const StyledBodyWrapper = styled(Box)` padding: 50px; ` -const StyledBodyTitle = styled(Title)` - font-size: 32px; - margin: 16px 0; +const StyledBodyTitle = styled(Typography)` + && { + font-size: 32px; + margin: 16px 0; + } ` const StyledTextWrapper = styled.div` diff --git a/apps/tx-builder/src/components/modals/WrongChainBatchModal.tsx b/apps/tx-builder/src/components/modals/WrongChainBatchModal.tsx index c6f79b22f..fe40f3f1c 100644 --- a/apps/tx-builder/src/components/modals/WrongChainBatchModal.tsx +++ b/apps/tx-builder/src/components/modals/WrongChainBatchModal.tsx @@ -1,6 +1,9 @@ -import { Button, GenericModal, Icon, Text } from '@gnosis.pm/safe-react-components' import Box from '@material-ui/core/Box' import styled from 'styled-components' +import GenericModal from '../GenericModal' +import { Icon } from '../Icon' +import Text from '../Text' +import Button from '../Button' type WrongChainBatchModalProps = { onClick: () => void @@ -25,7 +28,7 @@ const WrongChainBatchModal = ({ onClick, onClose, fileChainId }: WrongChainBatch withoutBodyPadding body={ - + This batch is from another Chain {fileChainId ? ` (${fileChainId})` : ''}! @@ -35,7 +38,7 @@ const WrongChainBatchModal = ({ onClick, onClose, fileChainId }: WrongChainBatch justifyContent="center" maxWidth={'450px'} > - diff --git a/apps/tx-builder/src/global.ts b/apps/tx-builder/src/global.ts index db2e02198..31d967e3b 100644 --- a/apps/tx-builder/src/global.ts +++ b/apps/tx-builder/src/global.ts @@ -1,6 +1,6 @@ import { createGlobalStyle } from 'styled-components' -import avertaFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-normal.woff2' -import avertaBoldFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-bold.woff2' +import DMSansFont from './assets/fonts/DMSansRegular.woff2' +import DMSansBoldFont from './assets/fonts/DMSans700.woff2' const GlobalStyle = createGlobalStyle` html { @@ -17,12 +17,19 @@ const GlobalStyle = createGlobalStyle` #root { height: 100%; } + + @font-face { + font-family: 'DM Sans'; + font-display: swap; + font-weight: 400; + src: url(${DMSansFont}) format('woff2'); + } @font-face { - font-family: 'Averta'; - src: local('Averta'), local('Averta Bold'), - url(${avertaFont}) format('woff2'), - url(${avertaBoldFont}) format('woff'); + font-family: 'DM Sans'; + font-display: swap; + font-weight: bold; + src: url(${DMSansBoldFont}) format('woff2'); } input:-webkit-autofill, diff --git a/apps/tx-builder/src/index.tsx b/apps/tx-builder/src/index.tsx index 13b2b2994..32049448e 100644 --- a/apps/tx-builder/src/index.tsx +++ b/apps/tx-builder/src/index.tsx @@ -1,6 +1,4 @@ import ReactDOM from 'react-dom' -import { ThemeProvider } from 'styled-components' -import { theme } from '@gnosis.pm/safe-react-components' import { SafeProvider } from '@safe-global/safe-apps-react-sdk' import { BrowserRouter } from 'react-router-dom' @@ -9,19 +7,25 @@ import * as serviceWorker from './serviceWorker' import GlobalStyles from './global' import App from './App' import StoreProvider from './store' +import SafeThemeProvider from './theme/SafeThemeProvider' +import { ThemeProvider } from 'styled-components' ReactDOM.render( <> - - - - - - - - - + + {theme => ( + + + + + + + + + + )} + , document.getElementById('root'), ) diff --git a/apps/tx-builder/src/pages/CreateTransactions.tsx b/apps/tx-builder/src/pages/CreateTransactions.tsx index 6cfd73535..b8cb7d3c1 100644 --- a/apps/tx-builder/src/pages/CreateTransactions.tsx +++ b/apps/tx-builder/src/pages/CreateTransactions.tsx @@ -1,15 +1,16 @@ import { useState } from 'react' import { useNavigate } from 'react-router-dom' import styled from 'styled-components' -import { Button, Tooltip } from '@gnosis.pm/safe-react-components' import Grid from '@material-ui/core/Grid' -import TransactionsBatchList from '../components/TransactionsBatchList' -import CreateNewBatchCard from '../components/CreateNewBatchCard' import { CREATE_BATCH_PATH, REVIEW_AND_CONFIRM_PATH } from '../routes/routes' import QuickTip from '../components/QuickTip' import { useNetwork, useTransactionLibrary, useTransactions } from '../store' import useModal from '../hooks/useModal/useModal' +import Button from '../components/Button' +import { Tooltip } from '../components/Tooltip' +import CreateNewBatchCard from '../components/CreateNewBatchCard' +import TransactionsBatchList from '../components/TransactionsBatchList' import WrongChainBatchModal from '../components/modals/WrongChainBatchModal' const CreateTransactions = () => { @@ -56,7 +57,6 @@ const CreateTransactions = () => { /> {/* Go to Review Screen button */} )} @@ -139,21 +128,17 @@ const ReviewAndConfirm = () => { {simulationRequestStatus === FETCH_STATUS.ERROR && ( - - An unexpected error occurred during simulation. - + An unexpected error occurred during simulation. )} {simulationRequestStatus === FETCH_STATUS.LOADING && ( <> - - Running simulation... - + Running simulation... )} @@ -166,15 +151,14 @@ const ReviewAndConfirm = () => { iconType="alert" iconColor="error" text="Failed" - textSize="lg" color="error" /> - + The batch failed during the simulation throwing error{' '} {simulation.transaction.error_message} in the contract at{' '} {simulation.transaction.error_info?.address}. Full simulation report is available{' '} - + on Tenderly . @@ -188,12 +172,11 @@ const ReviewAndConfirm = () => { iconType="check" iconColor="primary" text="Success" - textSize="lg" color="primary" /> - + The batch was successfully simulated. Full simulation report is available{' '} - + on Tenderly . @@ -236,15 +219,17 @@ const ReviewAndConfirm = () => { export default ReviewAndConfirm const StyledButton = styled(ButtonLink)` - position: absolute; - right: 26px; - padding: 5px; - width: 26px; - height: 26px; + && { + position: absolute; + right: 26px; + padding: 5px; + width: 26px; + height: 26px; - :hover { - background: ${({ theme }) => theme.colors.separator}; - border-radius: 16px; + :hover { + background: ${({ theme }) => theme.palette.divider}; + border-radius: 16px; + } } ` @@ -266,11 +251,14 @@ const Wrapper = styled.main` } ` -const StyledTitle = styled(Title)` - margin-top: 0px; - margin-bottom: 5px; - font-size: 20px; - line-height: normal; +const StyledTitle = styled(Typography)` + && { + margin-top: 0px; + margin-bottom: 1rem; + font-size: 20px; + font-weight: 700; + line-height: normal; + } ` const ButtonsWrapper = styled.div` diff --git a/apps/tx-builder/src/pages/SaveTransactionLibrary.tsx b/apps/tx-builder/src/pages/SaveTransactionLibrary.tsx index 5808ed672..10ea2a26d 100644 --- a/apps/tx-builder/src/pages/SaveTransactionLibrary.tsx +++ b/apps/tx-builder/src/pages/SaveTransactionLibrary.tsx @@ -2,12 +2,12 @@ import { useEffect } from 'react' import { useNavigate } from 'react-router-dom' import Grid from '@material-ui/core/Grid' import styled from 'styled-components' -import { Button } from '@gnosis.pm/safe-react-components' import TransactionsBatchList from '../components/TransactionsBatchList' import { useTransactionLibrary, useTransactions } from '../store' import { CREATE_BATCH_PATH, REVIEW_AND_CONFIRM_PATH, SAVE_BATCH_PATH } from '../routes/routes' import EditableLabel from '../components/EditableLabel' +import Button from '../components/Button' const SaveTransactionLibrary = () => { const { @@ -52,7 +52,6 @@ const SaveTransactionLibrary = () => { /> {/* Go to Review Screen button */}