diff --git a/.github/workflows/deployment.yml b/.github/workflows/deployment.yml index 96f3c663..329542d7 100644 --- a/.github/workflows/deployment.yml +++ b/.github/workflows/deployment.yml @@ -17,7 +17,7 @@ env: jobs: pr: name: Pull Request - runs-on: ubuntu-latest + runs-on: ubuntu-22.04 if: ${{ github.event_name == 'pull_request' }} steps: - uses: actions/checkout@v3 @@ -68,7 +68,7 @@ jobs: deploy: name: Deploy Dev/Staging - runs-on: ubuntu-latest + runs-on: ubuntu-22.04 if: github.event_name != 'pull_request' && github.event_name != 'workflow_dispatch' steps: @@ -114,7 +114,7 @@ jobs: release: name: Production release - runs-on: ubuntu-latest + runs-on: ubuntu-22.04 if: github.ref == 'refs/heads/main' && github.event_name == 'workflow_dispatch' steps: diff --git a/apps/tx-builder/src/components/Button.tsx b/apps/tx-builder/src/components/Button.tsx index 50075d13..3f1edba7 100644 --- a/apps/tx-builder/src/components/Button.tsx +++ b/apps/tx-builder/src/components/Button.tsx @@ -33,12 +33,12 @@ const customStyles: { } = { primary: { contained: css` - color: ${({ theme }) => theme.palette.common.white}; + color: ${({ theme }) => theme.palette.background.main}; background-color: ${({ theme }) => theme.palette.primary.main}; box-shadow: 1px 2px 10px ${alpha('#28363D', 0.18)}; &:hover { - color: ${({ theme }) => theme.palette.common.white}; + color: ${({ theme }) => theme.palette.background.main}; background-color: ${({ theme }) => theme.palette.primary.dark}; } `, @@ -165,11 +165,11 @@ const StyledButton = styled(ButtonMUI)<{ $localProps: LocalProps }>` } &.Mui-disabled { - color: ${({ theme }) => theme.palette.common.white}; + color: ${({ theme }) => theme.palette.background.main}; } path.icon-color { - fill: ${({ theme }) => theme.palette.common.white}; + fill: ${({ theme }) => theme.palette.background.main}; } &:disabled { diff --git a/apps/tx-builder/src/components/Divider.tsx b/apps/tx-builder/src/components/Divider.tsx index 93c28df3..e423550a 100644 --- a/apps/tx-builder/src/components/Divider.tsx +++ b/apps/tx-builder/src/components/Divider.tsx @@ -8,7 +8,7 @@ type Props = { const HorizontalDivider = styled.div` margin: 16px -1.6rem; - border-top: solid 1px #dcdee0; + border-top: solid 1px ${({ theme }) => theme.palette.border.light}; width: calc(100% + 3.2rem); ` diff --git a/apps/tx-builder/src/components/FixedIcon/images/arrowReceived.tsx b/apps/tx-builder/src/components/FixedIcon/images/arrowReceived.tsx index db52c68b..20ab6167 100644 --- a/apps/tx-builder/src/components/FixedIcon/images/arrowReceived.tsx +++ b/apps/tx-builder/src/components/FixedIcon/images/arrowReceived.tsx @@ -1,11 +1,10 @@ -import React from 'react' - const icon = ( ) diff --git a/apps/tx-builder/src/components/FixedIcon/images/arrowReceivedWhite.tsx b/apps/tx-builder/src/components/FixedIcon/images/arrowReceivedWhite.tsx index c827097b..07d980af 100644 --- a/apps/tx-builder/src/components/FixedIcon/images/arrowReceivedWhite.tsx +++ b/apps/tx-builder/src/components/FixedIcon/images/arrowReceivedWhite.tsx @@ -6,6 +6,7 @@ const icon = ( fill="#FFFFFF" fillRule="evenodd" d="M3.431 7.99h2.6c.554 0 1.004.45 1.004 1.005C7.035 9.55 6.585 10 6.03 10H1.005c-.277 0-.529-.112-.71-.294C.111 9.524 0 9.272 0 8.995V3.97c0-.555.45-1.005 1.005-1.005.555 0 1.005.45 1.005 1.005v2.599L8.284.294c.393-.392 1.03-.392 1.422 0 .392.393.392 1.03 0 1.422L3.43 7.99z" + className="icon-color" /> ) diff --git a/apps/tx-builder/src/components/FixedIcon/images/arrowSent.tsx b/apps/tx-builder/src/components/FixedIcon/images/arrowSent.tsx index 53fb1e69..9fa0ddf7 100644 --- a/apps/tx-builder/src/components/FixedIcon/images/arrowSent.tsx +++ b/apps/tx-builder/src/components/FixedIcon/images/arrowSent.tsx @@ -6,6 +6,7 @@ const icon = ( fill="#F02525" fillRule="evenodd" d="M6.569 2.01h-2.6c-.554 0-1.004-.45-1.004-1.005C2.965.45 3.415 0 3.97 0h5.025c.277 0 .529.112.71.294.183.182.295.434.295.711V6.03c0 .555-.45 1.005-1.005 1.005-.555 0-1.005-.45-1.005-1.005V3.431L1.716 9.706c-.393.392-1.03.392-1.422 0-.392-.393-.392-1.03 0-1.422L6.57 2.01z" + className="icon-color" /> ) diff --git a/apps/tx-builder/src/components/FixedIcon/images/arrowSentWhite.tsx b/apps/tx-builder/src/components/FixedIcon/images/arrowSentWhite.tsx index 89c2e70c..3818a64a 100644 --- a/apps/tx-builder/src/components/FixedIcon/images/arrowSentWhite.tsx +++ b/apps/tx-builder/src/components/FixedIcon/images/arrowSentWhite.tsx @@ -6,6 +6,7 @@ const icon = ( fill="#FFFFFF" fillRule="evenodd" d="M6.569 2.01h-2.6c-.554 0-1.004-.45-1.004-1.005C2.965.45 3.415 0 3.97 0h5.025c.277 0 .529.112.71.294.183.182.295.434.295.711V6.03c0 .555-.45 1.005-1.005 1.005-.555 0-1.005-.45-1.005-1.005V3.431L1.716 9.706c-.393.392-1.03.392-1.422 0-.392-.393-.392-1.03 0-1.422L6.57 2.01z" + className="icon-color" /> ) diff --git a/apps/tx-builder/src/components/FixedIcon/images/arrowSort.tsx b/apps/tx-builder/src/components/FixedIcon/images/arrowSort.tsx index 7ff362f9..59871608 100644 --- a/apps/tx-builder/src/components/FixedIcon/images/arrowSort.tsx +++ b/apps/tx-builder/src/components/FixedIcon/images/arrowSort.tsx @@ -6,6 +6,7 @@ const icon = ( fill="#5D6D74" fillRule="evenodd" d="M4.984 4.608l1.302-1.322c.384-.384 1.024-.384 1.408 0 .384.384.384 1.024 0 1.408L4.728 7.702C4.537 7.893 4.28 8 4.024 8c-.256 0-.511-.107-.704-.298L.29 4.694c-.426-.427-.383-1.152.13-1.515.404-.298.98-.213 1.322.15l1.13 1.108.129.022V.982C3 .427 3.447 0 3.98 0c.577 0 1.004.448 1.004.982v3.626z" + className="icon-color" /> ) diff --git a/apps/tx-builder/src/components/FixedIcon/images/bullit.tsx b/apps/tx-builder/src/components/FixedIcon/images/bullit.tsx index 78749632..3e956920 100644 --- a/apps/tx-builder/src/components/FixedIcon/images/bullit.tsx +++ b/apps/tx-builder/src/components/FixedIcon/images/bullit.tsx @@ -5,6 +5,7 @@ const icon = ( diff --git a/apps/tx-builder/src/components/FixedIcon/images/chevronDown.tsx b/apps/tx-builder/src/components/FixedIcon/images/chevronDown.tsx index ce111fd0..9e9aaa30 100644 --- a/apps/tx-builder/src/components/FixedIcon/images/chevronDown.tsx +++ b/apps/tx-builder/src/components/FixedIcon/images/chevronDown.tsx @@ -5,6 +5,7 @@ const icon = ( diff --git a/apps/tx-builder/src/components/FixedIcon/images/chevronLeft.tsx b/apps/tx-builder/src/components/FixedIcon/images/chevronLeft.tsx index 5d34bd87..fcd0c42e 100644 --- a/apps/tx-builder/src/components/FixedIcon/images/chevronLeft.tsx +++ b/apps/tx-builder/src/components/FixedIcon/images/chevronLeft.tsx @@ -4,6 +4,7 @@ const icon = ( diff --git a/apps/tx-builder/src/components/FixedIcon/images/chevronRight.tsx b/apps/tx-builder/src/components/FixedIcon/images/chevronRight.tsx index 46dcd7a2..42209a6d 100644 --- a/apps/tx-builder/src/components/FixedIcon/images/chevronRight.tsx +++ b/apps/tx-builder/src/components/FixedIcon/images/chevronRight.tsx @@ -4,6 +4,7 @@ const icon = ( diff --git a/apps/tx-builder/src/components/FixedIcon/images/chevronUp.tsx b/apps/tx-builder/src/components/FixedIcon/images/chevronUp.tsx index 7b30e056..5d6bdc44 100644 --- a/apps/tx-builder/src/components/FixedIcon/images/chevronUp.tsx +++ b/apps/tx-builder/src/components/FixedIcon/images/chevronUp.tsx @@ -5,6 +5,7 @@ const icon = ( diff --git a/apps/tx-builder/src/components/FixedIcon/images/connectedRinkeby.tsx b/apps/tx-builder/src/components/FixedIcon/images/connectedRinkeby.tsx index fbc514c9..98a397a7 100644 --- a/apps/tx-builder/src/components/FixedIcon/images/connectedRinkeby.tsx +++ b/apps/tx-builder/src/components/FixedIcon/images/connectedRinkeby.tsx @@ -5,6 +5,7 @@ const icon = ( ) diff --git a/apps/tx-builder/src/components/FixedIcon/images/connectedWallet.tsx b/apps/tx-builder/src/components/FixedIcon/images/connectedWallet.tsx index 6372e94e..53bd24a1 100644 --- a/apps/tx-builder/src/components/FixedIcon/images/connectedWallet.tsx +++ b/apps/tx-builder/src/components/FixedIcon/images/connectedWallet.tsx @@ -5,6 +5,7 @@ const icon = ( ) diff --git a/apps/tx-builder/src/components/FixedIcon/images/creatingInProgress.tsx b/apps/tx-builder/src/components/FixedIcon/images/creatingInProgress.tsx index 90937ac8..542b2c4e 100644 --- a/apps/tx-builder/src/components/FixedIcon/images/creatingInProgress.tsx +++ b/apps/tx-builder/src/components/FixedIcon/images/creatingInProgress.tsx @@ -7,6 +7,7 @@ const icon = ( diff --git a/apps/tx-builder/src/components/FixedIcon/images/dropdownArrowSmall.tsx b/apps/tx-builder/src/components/FixedIcon/images/dropdownArrowSmall.tsx index 531776bb..0bc2c5d7 100644 --- a/apps/tx-builder/src/components/FixedIcon/images/dropdownArrowSmall.tsx +++ b/apps/tx-builder/src/components/FixedIcon/images/dropdownArrowSmall.tsx @@ -5,6 +5,7 @@ const icon = ( ) diff --git a/apps/tx-builder/src/components/FixedIcon/images/options.tsx b/apps/tx-builder/src/components/FixedIcon/images/options.tsx index 6ab2a5ab..f8689a2f 100644 --- a/apps/tx-builder/src/components/FixedIcon/images/options.tsx +++ b/apps/tx-builder/src/components/FixedIcon/images/options.tsx @@ -2,7 +2,7 @@ import React from 'react' const icon = ( - + diff --git a/apps/tx-builder/src/components/FixedIcon/images/plus.tsx b/apps/tx-builder/src/components/FixedIcon/images/plus.tsx index 290cfea6..526b2fb6 100644 --- a/apps/tx-builder/src/components/FixedIcon/images/plus.tsx +++ b/apps/tx-builder/src/components/FixedIcon/images/plus.tsx @@ -5,12 +5,14 @@ const icon = ( clip-rule="evenodd" d="M11.7895 4C12.3708 4 12.8421 4.47128 12.8421 5.05263L12.8421 18.9474C12.8421 19.5287 12.3708 20 11.7895 20C11.2081 20 10.7368 19.5287 10.7368 18.9474L10.7368 5.05263C10.7368 4.47128 11.2081 4 11.7895 4Z" fill="#F4F4F4" + className="icon-color" /> ) diff --git a/apps/tx-builder/src/components/FixedIcon/images/settingsChange.tsx b/apps/tx-builder/src/components/FixedIcon/images/settingsChange.tsx index 9ada76f0..bec1264e 100644 --- a/apps/tx-builder/src/components/FixedIcon/images/settingsChange.tsx +++ b/apps/tx-builder/src/components/FixedIcon/images/settingsChange.tsx @@ -5,6 +5,7 @@ const icon = ( diff --git a/apps/tx-builder/src/components/FixedIcon/images/threeDots.tsx b/apps/tx-builder/src/components/FixedIcon/images/threeDots.tsx index 43dfe865..7a8eda5e 100644 --- a/apps/tx-builder/src/components/FixedIcon/images/threeDots.tsx +++ b/apps/tx-builder/src/components/FixedIcon/images/threeDots.tsx @@ -2,7 +2,7 @@ import React from 'react' const icon = ( - + diff --git a/apps/tx-builder/src/components/FixedIcon/index.tsx b/apps/tx-builder/src/components/FixedIcon/index.tsx index 823e5a03..918605a6 100644 --- a/apps/tx-builder/src/components/FixedIcon/index.tsx +++ b/apps/tx-builder/src/components/FixedIcon/index.tsx @@ -21,7 +21,17 @@ import creatingInProgress from './images/creatingInProgress' import notOwner from './images/notOwner' import notConnected from './images/notConnected' import networkError from './images/networkError' +import styled from 'styled-components' +const StyledIcon = styled.span` + .icon-color { + fill: ${({ theme }) => theme.palette.text.primary}; + } + + .icon-stroke { + fill: ${({ theme }) => theme.palette.text.primary}; + } +` const icons = { arrowSort, connectedRinkeby, @@ -57,7 +67,7 @@ type Props = { * The `FixedIcon` renders an icon */ function FixedIcon({ type }: Props): React.ReactElement { - return {icons[type]} + return {icons[type]} } export default FixedIcon diff --git a/apps/tx-builder/src/components/GenericModal.tsx b/apps/tx-builder/src/components/GenericModal.tsx index d0f15d52..36583818 100644 --- a/apps/tx-builder/src/components/GenericModal.tsx +++ b/apps/tx-builder/src/components/GenericModal.tsx @@ -4,7 +4,6 @@ import { makeStyles } from '@material-ui/core/styles' import { alpha } from '@material-ui/core/styles' import styled from 'styled-components' import Media from 'react-media' -import { defaultTheme } from '../theme/safeTheme' import { Typography } from '@material-ui/core' import { Icon } from './Icon' @@ -50,6 +49,11 @@ const FooterSection = styled.div` padding: 16px 24px; ` +const ModalPaper = styled.div` + background: ${({ theme }) => theme.palette.background.paper}; + color: ${({ theme }) => theme.palette.text.primary}; +` + export type GenericModalProps = { title: string | React.ReactNode body: React.ReactNode @@ -72,7 +76,6 @@ const useStyles = makeStyles({ top: (props: { smallHeight: boolean }) => (props.smallHeight ? 'unset' : '121px'), minWidth: '500px', width: (props: { smallHeight: boolean }) => (props.smallHeight ? '500px' : 'inherit'), - backgroundColor: defaultTheme.palette.common.white, borderRadius: '8px', boxShadow: `0 0 0.75 0 #28363D`, @@ -94,7 +97,7 @@ const GenericModalComponent = ({ return ( -
+ {title} @@ -107,7 +110,7 @@ const GenericModalComponent = ({ {footer && {footer}} -
+ ) } diff --git a/apps/tx-builder/src/components/Header.tsx b/apps/tx-builder/src/components/Header.tsx index ba727e6d..23a55f8e 100644 --- a/apps/tx-builder/src/components/Header.tsx +++ b/apps/tx-builder/src/components/Header.tsx @@ -92,9 +92,10 @@ const HeaderWrapper = styled.header` width: 100%; display: flex; align-items: center; - border-bottom: 1px solid #e2e3e3; + border-bottom: 1px solid ${({ theme }) => theme.palette.border.light}; z-index: 10; - background-color: white; + background-color: ${({ theme }) => theme.palette.background.paper}; + color: ${({ theme }) => theme.palette.text.primary}; height: 70px; padding: 0 40px; box-sizing: border-box; diff --git a/apps/tx-builder/src/components/Icon/images/bookmark.tsx b/apps/tx-builder/src/components/Icon/images/bookmark.tsx index 6f6cc8e3..ec17e217 100644 --- a/apps/tx-builder/src/components/Icon/images/bookmark.tsx +++ b/apps/tx-builder/src/components/Icon/images/bookmark.tsx @@ -6,12 +6,14 @@ const Bookmark = { clip-rule="evenodd" d="M4.875 3.2C4.70924 3.2 4.55027 3.26321 4.43306 3.37574C4.31585 3.48826 4.25 3.64087 4.25 3.8V12.2341L7.63673 9.91176C7.85404 9.76275 8.14596 9.76275 8.36327 9.91176L11.75 12.2341V3.8C11.75 3.64087 11.6842 3.48826 11.5669 3.37574C11.4497 3.26321 11.2908 3.2 11.125 3.2H4.875ZM3.54917 2.52721C3.90081 2.18964 4.37772 2 4.875 2H11.125C11.6223 2 12.0992 2.18964 12.4508 2.52721C12.8025 2.86477 13 3.32261 13 3.8V13.4C13 13.6248 12.8692 13.8307 12.661 13.9335C12.4528 14.0363 12.2022 14.0189 12.0117 13.8882L8 11.1373L3.98827 13.8882C3.79776 14.0189 3.54718 14.0363 3.33901 13.9335C3.13084 13.8307 3 13.6248 3 13.4V3.8C3 3.32261 3.19754 2.86477 3.54917 2.52721Z" fill="black" + className="icon-color" /> ), md: ( ), @@ -14,6 +15,7 @@ const Edit = { diff --git a/apps/tx-builder/src/components/Icon/images/import.tsx b/apps/tx-builder/src/components/Icon/images/import.tsx index 906cd8da..051dfdd5 100644 --- a/apps/tx-builder/src/components/Icon/images/import.tsx +++ b/apps/tx-builder/src/components/Icon/images/import.tsx @@ -5,12 +5,14 @@ const Import = { fill-rule="evenodd" clip-rule="evenodd" d="M8.66699 10.3893L8.66699 2.00062C8.66699 1.63195 8.36832 1.33395 8.00032 1.33395C7.63166 1.33395 7.33366 1.63195 7.33366 2.00062L7.33366 10.3893L4.58566 7.64195C4.32499 7.38128 3.90299 7.38128 3.64299 7.64195C3.38232 7.90262 3.38232 8.32395 3.64299 8.58462L7.41432 12.3559C7.43366 12.3753 7.45432 12.3933 7.47499 12.4093C7.59766 12.5659 7.78699 12.6653 8.00032 12.6653C8.21299 12.6653 8.40299 12.5659 8.52499 12.4093C8.54566 12.3933 8.56699 12.3753 8.58566 12.3559L12.357 8.58462C12.6177 8.32395 12.6177 7.90262 12.357 7.64195C12.097 7.38128 11.675 7.38128 11.4143 7.64195L8.66699 10.3893Z" + className="icon-color" fill="black" /> @@ -21,10 +23,12 @@ const Import = { fill-rule="evenodd" clip-rule="evenodd" d="M8.66699 10.3893L8.66699 2.00062C8.66699 1.63195 8.36832 1.33395 8.00032 1.33395C7.63166 1.33395 7.33366 1.63195 7.33366 2.00062L7.33366 10.3893L4.58566 7.64195C4.32499 7.38128 3.90299 7.38128 3.64299 7.64195C3.38232 7.90262 3.38232 8.32395 3.64299 8.58462L7.41432 12.3559C7.43366 12.3753 7.45432 12.3933 7.47499 12.4093C7.59766 12.5659 7.78699 12.6653 8.00032 12.6653C8.21299 12.6653 8.40299 12.5659 8.52499 12.4093C8.54566 12.3933 8.56699 12.3753 8.58566 12.3559L12.357 8.58462C12.6177 8.32395 12.6177 7.90262 12.357 7.64195C12.097 7.38128 11.675 7.38128 11.4143 7.64195L8.66699 10.3893Z" + className="icon-color" fill="black" /> @@ -15,6 +16,7 @@ const TermsOfUse = { fill-rule="evenodd" clip-rule="evenodd" d="M3.50153 1.53477C3.82266 1.19235 4.2582 1 4.71233 1H9.09587C9.25936 1 9.41615 1.06925 9.53176 1.19252L12.8194 4.69815C12.9351 4.82142 13 4.9886 13 5.16293V12.1742C13 12.6583 12.8196 13.1228 12.4985 13.4651C12.4985 13.4652 12.4984 13.4652 12.4984 13.4652C12.4984 13.4653 12.4984 13.4653 12.4983 13.4653C12.1771 13.8079 11.7415 14 11.2876 14H4.71233C4.25827 14 3.82268 13.8078 3.50148 13.4652C3.18035 13.1228 3 12.6583 3 12.1742V2.82585C3 2.3416 3.18041 1.87719 3.50152 1.53478C3.50153 1.53478 3.50153 1.53478 3.50153 1.53477ZM4.71233 2.31461C4.58515 2.31461 4.46321 2.36848 4.37331 2.46434L4.3733 2.46434C4.28339 2.56023 4.23287 2.69026 4.23287 2.82585V12.1742C4.23287 12.3098 4.28341 12.4398 4.37326 12.5356L4.37336 12.5357C4.46318 12.6315 4.58508 12.6854 4.71233 12.6854H11.2876C11.4149 12.6854 11.5368 12.6315 11.6266 12.5358L11.6267 12.5356C11.7166 12.4398 11.7671 12.3097 11.7671 12.1742V5.82024H9.09533C8.93183 5.82024 8.77502 5.75097 8.65941 5.62768C8.54381 5.50439 8.47887 5.33717 8.4789 5.16283L8.47933 2.31461H4.71233ZM9.71206 3.24391L10.8953 4.50563H9.71187L9.71206 3.24391ZM5.19204 5.74749C5.19204 5.38447 5.46803 5.09018 5.80848 5.09018H6.90437C7.24482 5.09018 7.5208 5.38447 7.5208 5.74749C7.5208 6.11051 7.24482 6.4048 6.90437 6.4048H5.80848C5.46803 6.4048 5.19204 6.11051 5.19204 5.74749ZM5.19124 8.08486C5.19124 7.72184 5.46723 7.42756 5.80767 7.42756H10.1912C10.5316 7.42756 10.8076 7.72184 10.8076 8.08486C10.8076 8.44788 10.5316 8.74217 10.1912 8.74217H5.80767C5.46723 8.74217 5.19124 8.44788 5.19124 8.08486ZM5.19124 10.4214C5.19124 10.0584 5.46723 9.76407 5.80767 9.76407H10.1912C10.5316 9.76407 10.8076 10.0584 10.8076 10.4214C10.8076 10.7844 10.5316 11.0787 10.1912 11.0787H5.80767C5.46723 11.0787 5.19124 10.7844 5.19124 10.4214Z" + className="icon-color" fill="#A1A3A7" /> diff --git a/apps/tx-builder/src/components/Switch.tsx b/apps/tx-builder/src/components/Switch.tsx index bb027a50..dd07fc37 100644 --- a/apps/tx-builder/src/components/Switch.tsx +++ b/apps/tx-builder/src/components/Switch.tsx @@ -6,8 +6,7 @@ import { alpha } from '@material-ui/core/styles' const StyledSwitch = styled(({ ...rest }) => )` && { .MuiSwitch-thumb { - background: ${({ theme, checked }) => - checked ? theme.palette.secondary.main : theme.palette.common.white}; + background: ${({ theme, checked }) => (checked ? '#12FF80' : theme.palette.common.white)}; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.5); diff --git a/apps/tx-builder/src/components/Text.tsx b/apps/tx-builder/src/components/Text.tsx index ea4cb567..e3fa2062 100644 --- a/apps/tx-builder/src/components/Text.tsx +++ b/apps/tx-builder/src/components/Text.tsx @@ -34,7 +34,7 @@ const StyledTypography = styled(Typography)<{ $color?: keyof Theme['palette'] | ? $color === 'white' ? theme.palette.common.white : theme.palette[$color].main - : theme.palette.primary.main}; + : theme.palette.text.primary}; ${({ center }) => center && 'text-align: center;'} diff --git a/apps/tx-builder/src/components/Tooltip.tsx b/apps/tx-builder/src/components/Tooltip.tsx index 62cc86cd..8aadc667 100644 --- a/apps/tx-builder/src/components/Tooltip.tsx +++ b/apps/tx-builder/src/components/Tooltip.tsx @@ -64,9 +64,7 @@ const customTooltip = ({ backgroundColor, textColor, size = 'md' }: TooltipProps border: getBorderBySize(size), color: textColor ? (theme.palette[textColor] as PaletteColor).main - : backgroundColor === 'primary' - ? theme.palette.common.white - : theme.palette.text.primary, + : theme.palette.background.default, borderRadius: '4px', fontFamily: theme.typography.fontFamily, padding: getPaddingBySize(size), diff --git a/apps/tx-builder/src/components/TransactionBatchListItem.tsx b/apps/tx-builder/src/components/TransactionBatchListItem.tsx index 1254ca7d..2f1a587a 100644 --- a/apps/tx-builder/src/components/TransactionBatchListItem.tsx +++ b/apps/tx-builder/src/components/TransactionBatchListItem.tsx @@ -239,13 +239,13 @@ const PositionDot = styled(Dot).withConfig({ height: 24px; width: 24px; min-width: 24px; - background-color: #e2e3e3; + background-color: ${({ theme }) => theme.palette.border.light}; transition: background-color 0.5s linear; ` const ArrowAdornment = styled.div` position: relative; - border-left: 1px solid #e2e3e3; + border-left: 1px solid ${({ theme }) => theme.palette.border.light}; flex-grow: 1; margin-top: 8px; @@ -253,7 +253,7 @@ const ArrowAdornment = styled.div` content: ' '; display: inline-block; position: absolute; - border-left: 1px solid #e2e3e3; + border-left: 1px solid ${({ theme }) => theme.palette.border.light}; height: ${minArrowSize}px; bottom: -${minArrowSize}px; @@ -269,7 +269,7 @@ const ArrowAdornment = styled.div` border-width: 0 1px 1px 0; border-style: solid; - border-color: #e2e3e3; + border-color: ${({ theme }) => theme.palette.border.light}; padding: 3px; transform: rotate(45deg); @@ -287,7 +287,7 @@ const StyledAccordion = styled(Accordion).withConfig({ margin-bottom: 0; border-width: 1px; border-color: ${({ isDragging, expanded, theme }) => - isDragging || expanded ? theme.palette.secondary.light : theme.palette.common.white}; + isDragging || expanded ? theme.palette.secondary.light : theme.palette.background.paper}; transition: border-color 0.5s linear; &:hover { @@ -303,7 +303,7 @@ const StyledAccordion = styled(Accordion).withConfig({ height: 52px; padding: 0px 8px; background-color: ${({ isDragging, theme }) => - isDragging ? theme.palette.secondary.background : theme.palette.common.white}; + isDragging ? theme.palette.secondary.background : theme.palette.background.paper}; .MuiIconButton-root { padding: 8px; diff --git a/apps/tx-builder/src/components/TransactionsBatchList.tsx b/apps/tx-builder/src/components/TransactionsBatchList.tsx index 7fdf31a7..4b8075f1 100644 --- a/apps/tx-builder/src/components/TransactionsBatchList.tsx +++ b/apps/tx-builder/src/components/TransactionsBatchList.tsx @@ -147,7 +147,7 @@ const TransactionsBatchList = ({ {/* Transactions Batch Counter */} - {transactions.length} + {transactions.length} {/* Transactions Batch Title */} @@ -390,6 +390,10 @@ const TransactionCounterDot = styled(Dot)` height: 24px; width: 24px; min-width: 24px; + + p { + color: ${({ theme }) => theme.palette.background.main}; + } ` const TransactionsTitle = styled(Typography)` @@ -408,7 +412,7 @@ const TransactionsTitle = styled(Typography)` const StyledHeaderIconButton = styled(IconButton)` &.MuiIconButton-root { border-radius: 4px; - background-color: white; + background-color: ${({ theme }) => theme.palette.code.main}; margin-left: 8px; } ` diff --git a/apps/tx-builder/src/components/Wrapper/index.tsx b/apps/tx-builder/src/components/Wrapper/index.tsx new file mode 100644 index 00000000..8b98c33d --- /dev/null +++ b/apps/tx-builder/src/components/Wrapper/index.tsx @@ -0,0 +1,26 @@ +import React from 'react' +import styled from 'styled-components' + +function Wrapper({ children }: { children: React.ReactNode }) { + return ( + +
{children}
+ + ) +} + +const StyledWrapper = styled.main` + width: 100%; + min-height: 100%; + background: ${({ theme }) => theme.palette.background.main}; + color: ${({ theme }) => theme.palette.text.primary}; + + > section { + padding: 120px 48px 48px; + box-sizing: border-box; + max-width: 1024px; + margin: 0 auto; + } +` + +export default Wrapper diff --git a/apps/tx-builder/src/components/forms/fields/JsonField.tsx b/apps/tx-builder/src/components/forms/fields/JsonField.tsx index b5d1036c..736e6632 100644 --- a/apps/tx-builder/src/components/forms/fields/JsonField.tsx +++ b/apps/tx-builder/src/components/forms/fields/JsonField.tsx @@ -170,7 +170,7 @@ const IconContainer = styled.div<{ error: boolean }>` border: 1px solid ${({ theme, error }) => (error ? theme.palette.error.main : theme.palette.primary.main)}; border-radius: 50%; - background-color: #fff; + background-color: ${({ theme }) => theme.palette.code.main}; ` const StyledTextField = styled(TextFieldInput)` diff --git a/apps/tx-builder/src/components/forms/fields/styles.ts b/apps/tx-builder/src/components/forms/fields/styles.ts index 3581130b..839bf797 100644 --- a/apps/tx-builder/src/components/forms/fields/styles.ts +++ b/apps/tx-builder/src/components/forms/fields/styles.ts @@ -5,7 +5,6 @@ export const inputLabelStyles = css` &:hover { .MuiInputLabel-root { &.MuiInputLabel-shrink:not(.Mui-focused):not(.Mui-disabled) { - color: ${({ theme }) => theme.palette.primary.main}; &.Mui-error { color: ${({ theme }) => theme.palette.error.main}; } @@ -20,7 +19,7 @@ export const inputLabelStyles = css` font-size: 16px; &.MuiInputLabel-shrink { - color: #162d45; + color: ${({ theme }) => theme.palette.border.main}; &.Mui-error { color: ${({ theme }) => theme.palette.error.main}; @@ -49,6 +48,12 @@ export const inputLabelStyles = css` export const inputStyles = css` .MuiOutlinedInput-input:-webkit-autofill { -webkit-text-fill-color: ${({ theme }) => theme.palette.text.primary}; + /* needs to use important because we have important styles being injected in this component */ + box-shadow: inset 0 0 0 100px ${({ theme }) => theme.palette.background.paper} !important; + } + + .MuiSvgIcon-root { + color: ${({ theme }) => theme.palette.text.primary}; } .MuiOutlinedInput-root { @@ -67,7 +72,8 @@ export const inputStyles = css` .MuiOutlinedInput-notchedOutline { ${({ hiddenLabel }) => (hiddenLabel ? 'top: 0' : '')}; transition: border-color 0.2s ease-in-out; - border: 1px solid ${({ theme, value }) => (value ? theme.palette.border.main : '#DADADA')}; + border: 1px solid + ${({ theme, value }) => (value ? theme.palette.border.main : theme.palette.border.light)}; border-radius: 6px; legend { display: ${({ hiddenLabel }) => (hiddenLabel ? 'none' : 'block')}; @@ -76,13 +82,13 @@ export const inputStyles = css` &:hover { .MuiOutlinedInput-notchedOutline { - border-color: ${({ theme }) => theme.palette.primary.main}; + border-color: ${({ theme }) => theme.palette.border.light}; } } &.Mui-focused { .MuiOutlinedInput-notchedOutline { - border-color: #566976; + border-color: ${({ theme }) => theme.palette.border.light}; } &.Mui-error { .MuiOutlinedInput-notchedOutline { @@ -99,7 +105,8 @@ export const inputStyles = css` .MuiFormLabel-filled + .MuiOutlinedInput-root:not(:hover):not(.Mui-disabled) .MuiOutlinedInput-notchedOutline { - border-color: ${({ theme, error }) => (error ? theme.palette.error.main : '#566976')}; + border-color: ${({ theme, error }) => + error ? theme.palette.error.main : theme.palette.border.light}; } ` diff --git a/apps/tx-builder/src/components/modals/EditTransactionModal.tsx b/apps/tx-builder/src/components/modals/EditTransactionModal.tsx index 1dd29f28..94663bf8 100644 --- a/apps/tx-builder/src/components/modals/EditTransactionModal.tsx +++ b/apps/tx-builder/src/components/modals/EditTransactionModal.tsx @@ -107,7 +107,7 @@ const FormContainer = styled.div` padding: 24px; border-radius: 8px; - background-color: white; + background-color: ${({ theme }) => theme.palette.background.paper}; ` export default EditTransactionModal diff --git a/apps/tx-builder/src/index.tsx b/apps/tx-builder/src/index.tsx index 32049448..87c6ebae 100644 --- a/apps/tx-builder/src/index.tsx +++ b/apps/tx-builder/src/index.tsx @@ -13,7 +13,7 @@ import { ThemeProvider } from 'styled-components' ReactDOM.render( <> - + {theme => ( diff --git a/apps/tx-builder/src/pages/Dashboard.tsx b/apps/tx-builder/src/pages/Dashboard.tsx index 2232aee5..71df62f5 100644 --- a/apps/tx-builder/src/pages/Dashboard.tsx +++ b/apps/tx-builder/src/pages/Dashboard.tsx @@ -18,6 +18,7 @@ import Switch from '../components/Switch' import { Typography } from '@material-ui/core' import Divider from '../components/Divider' import AddressInput from '../components/forms/fields/AddressInput' +import Wrapper from '../components/Wrapper' const Dashboard = (): ReactElement => { const [abiAddress, setAbiAddress] = useState('') @@ -191,12 +192,20 @@ const Dashboard = (): ReactElement => { onCancel={() => { setAbiAddress(implementationABIDialog.proxyAddress) setTransactionRecipientAddress(implementationABIDialog.proxyAddress) - setImplementationABIDialog({ open: false, implementationAddress: '', proxyAddress: '' }) + setImplementationABIDialog({ + open: false, + implementationAddress: '', + proxyAddress: '', + }) }} onConfirm={() => { setAbiAddress(implementationABIDialog.implementationAddress) setTransactionRecipientAddress(implementationABIDialog.proxyAddress) - setImplementationABIDialog({ open: false, implementationAddress: '', proxyAddress: '' }) + setImplementationABIDialog({ + open: false, + implementationAddress: '', + proxyAddress: '', + }) }} /> )} @@ -206,17 +215,10 @@ const Dashboard = (): ReactElement => { export default Dashboard -const Wrapper = styled.main` - && { - padding: 120px 48px 48px; - max-width: 1024px; - margin: 0 auto; - } -` - const AddNewTransactionFormWrapper = styled(Grid)` border-radius: 8px; - background-color: white; + background-color: ${({ theme }) => theme.palette.background.paper}; + color: ${({ theme }) => theme.palette.text.primary}; ` const StyledTitle = styled(Typography)` @@ -239,8 +241,10 @@ const StyledWarningText = styled(Text)` ` const CheckIconAddressAdornment = styled(CheckCircle)` - color: #03ae60; - height: 20px; + && path { + color: ${({ theme }) => theme.palette.secondary.dark}; + height: 20px; + } ` const StyledDivider = styled(Divider)` diff --git a/apps/tx-builder/src/pages/ReviewAndConfirm.tsx b/apps/tx-builder/src/pages/ReviewAndConfirm.tsx index 7a8cb4bf..eceb7af5 100644 --- a/apps/tx-builder/src/pages/ReviewAndConfirm.tsx +++ b/apps/tx-builder/src/pages/ReviewAndConfirm.tsx @@ -19,6 +19,7 @@ import { Typography } from '@material-ui/core' import Loader from '../components/Loader' import IconText from '../components/IconText' import Card from '../components/Card' +import Wrapper from '../components/Wrapper' const ReviewAndConfirm = () => { const { @@ -236,6 +237,7 @@ const StyledButton = styled(ButtonLink)` const SimulationContainer = styled(Card)` box-shadow: none; margin: 24px 0 0 34px; + background: ${({ theme }) => theme.palette.background.paper}; // last child is the status result & > :last-child { @@ -243,14 +245,6 @@ const SimulationContainer = styled(Card)` } ` -const Wrapper = styled.main` - && { - padding: 120px 48px 48px; - max-width: 650px; - margin: 0 auto; - } -` - const StyledTitle = styled(Typography)` && { margin-top: 0px; diff --git a/apps/tx-builder/src/pages/TransactionLibrary.tsx b/apps/tx-builder/src/pages/TransactionLibrary.tsx index 9cccb5cc..dbbe67b4 100644 --- a/apps/tx-builder/src/pages/TransactionLibrary.tsx +++ b/apps/tx-builder/src/pages/TransactionLibrary.tsx @@ -25,6 +25,7 @@ import FixedIcon from '../components/FixedIcon' import { Icon } from '../components/Icon' import { Accordion, AccordionSummary } from '../components/Accordion' import Link from '../components/Link' +import Wrapper from '../components/Wrapper' const TransactionLibrary = () => { const { batches, removeBatch, executeBatch, downloadBatch, renameBatch } = useTransactionLibrary() @@ -49,10 +50,10 @@ const TransactionLibrary = () => { {batches.length > 0 ? ( batches.map(batch => ( - + {/* transactions count */} - {batch.transactions.length} + {batch.transactions.length} {/* editable batch name */} @@ -180,15 +181,6 @@ const TransactionLibrary = () => { export default TransactionLibrary -const Wrapper = styled.main` - && { - padding: 48px; - padding-top: 120px; - max-width: 650px; - margin: 0 auto; - } -` - const StyledTitle = styled(Typography)` && { margin-top: 0px; @@ -210,6 +202,12 @@ const StyledAccordion = styled(Accordion)` const StyledAccordionSummary = styled(AccordionSummary)` height: 64px; + &.MuiAccordionSummary-root, + &.MuiAccordionSummary-root.Mui-expanded, + &.MuiAccordionSummary-root:hover { + background-color: ${({ theme }) => theme.palette.background.paper}; + } + & > .MuiAccordionSummary-content { display: flex; align-items: center; @@ -229,6 +227,10 @@ const TransactionCounterDot = styled(Dot)` flex-shrink: 0; ` +const StyledDotText = styled(Text)` + color: ${({ theme }) => theme.palette.background.paper}; +` + const StyledBatchTitle = styled.div` padding-left: 4px; min-width: 10px; @@ -257,7 +259,6 @@ const StyledIconButton = styled(IconButton)` &.MuiIconButton-root { border-radius: 4px; margin-left: 8px; - background-color: #f6f7f8; } ` diff --git a/apps/tx-builder/src/test-utils.tsx b/apps/tx-builder/src/test-utils.tsx index cc8960fc..40ba31c8 100644 --- a/apps/tx-builder/src/test-utils.tsx +++ b/apps/tx-builder/src/test-utils.tsx @@ -8,7 +8,7 @@ import SafeThemeProvider from './theme/SafeThemeProvider' const renderWithProviders = (Components: ReactElement): RenderResult => { return render( - + {theme => ( diff --git a/apps/tx-builder/src/theme/SafeThemeProvider.tsx b/apps/tx-builder/src/theme/SafeThemeProvider.tsx index 784f3a3f..fdb5f888 100644 --- a/apps/tx-builder/src/theme/SafeThemeProvider.tsx +++ b/apps/tx-builder/src/theme/SafeThemeProvider.tsx @@ -1,15 +1,34 @@ -import { useMemo, type FC } from 'react' -import { type PaletteMode, type Theme } from '@mui/material' +import { useEffect, useMemo, useState, type FC } from 'react' +import { type Theme } from '@mui/material' import { ThemeProvider } from '@material-ui/core' import createSafeTheme from './safeTheme' +import { getSDKVersion } from '@safe-global/safe-apps-sdk' type SafeThemeProviderProps = { children: (theme: Theme) => React.ReactNode - mode: PaletteMode } -const SafeThemeProvider: FC = ({ children, mode }) => { - const theme = useMemo(() => createSafeTheme(mode), [mode]) +const SafeThemeProvider: FC = ({ children }) => { + const [isDarkMode, setDarkMode] = useState(false) + + const theme = useMemo(() => createSafeTheme(isDarkMode ? 'dark' : 'light'), [isDarkMode]) + + useEffect(() => { + window.parent.postMessage( + { + id: 'tx-builder', + env: { sdkVersion: getSDKVersion() }, + method: 'getCurrentTheme', + }, + '*', + ) + + window.addEventListener('message', function ({ data: eventData }) { + if (!eventData?.data?.hasOwnProperty('darkMode')) return + + setDarkMode(eventData?.data.darkMode) + }) + }, []) return {children(theme)} } diff --git a/apps/tx-builder/src/theme/darkPalette.ts b/apps/tx-builder/src/theme/darkPalette.ts new file mode 100644 index 00000000..5e1b9b12 --- /dev/null +++ b/apps/tx-builder/src/theme/darkPalette.ts @@ -0,0 +1,68 @@ +const darkPalette = { + text: { + primary: '#FFFFFF', + secondary: '#636669', + disabled: '#636669', + }, + primary: { + dark: '#0cb259', + main: '#12FF80', + light: '#A1A3A7', + }, + secondary: { + dark: '#636669', + main: '#FFFFFF', + light: '#B0FFC9', + background: '#1B2A22', + }, + border: { + main: '#636669', + light: '#303033', + background: '#121312', + }, + error: { + dark: '#AC2C3B', + main: '#FF5F72', + light: '#FFB4BD', + background: '#2F2527', + }, + success: { + dark: '#028D4C', + main: '#00B460', + light: '#81C784', + background: '#1F2920', + }, + info: { + dark: '#52BFDC', + main: '#5FDDFF', + light: '#B7F0FF', + background: '#19252C', + }, + warning: { + dark: '#C04C32', + main: '#FF8061', + light: '#FFBC9F', + background: '#2F2318', + }, + background: { + default: '#121312', + main: '#121312', + paper: '#1C1C1C', + light: '#1B2A22', + }, + backdrop: { + main: '#636669', + }, + logo: { + main: '#FFFFFF', + background: '#303033', + }, + static: { + main: '#121312', + }, + code: { + main: 'transparent', + }, +} + +export default darkPalette diff --git a/apps/tx-builder/src/theme/lightPalette.ts b/apps/tx-builder/src/theme/lightPalette.ts index a47daca3..c9983511 100644 --- a/apps/tx-builder/src/theme/lightPalette.ts +++ b/apps/tx-builder/src/theme/lightPalette.ts @@ -60,6 +60,9 @@ const lightPalette = { static: { main: '#121312', }, + code: { + main: '#FFFFFF', + }, } export default lightPalette diff --git a/apps/tx-builder/src/theme/safeTheme.ts b/apps/tx-builder/src/theme/safeTheme.ts index 97f356d4..799b2860 100644 --- a/apps/tx-builder/src/theme/safeTheme.ts +++ b/apps/tx-builder/src/theme/safeTheme.ts @@ -4,6 +4,7 @@ import type { Shadows } from '@mui/material/styles' import { createTheme } from '@mui/material/styles' import palette from './lightPalette' +import darkPalette from './darkPalette' import typography from './typography' export const base = 8 @@ -67,12 +68,13 @@ declare module '@mui/material/IconButton' { const createSafeTheme = (mode: PaletteMode): Theme => { const isDarkMode = mode === 'dark' - const shadowColor = palette.primary.light + const colors = isDarkMode ? darkPalette : palette + const shadowColor = colors.primary.light return createTheme({ palette: { mode: isDarkMode ? 'dark' : 'light', - ...palette, + ...colors, }, spacing: base, shape: { @@ -515,6 +517,4 @@ const createSafeTheme = (mode: PaletteMode): Theme => { }) } -export const defaultTheme = createSafeTheme('light') - export default createSafeTheme