From ffdbbb7a39adc0c320cdd3708659f537b3052730 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=B3vis=20Neto?= Date: Fri, 18 Oct 2024 09:43:18 +0200 Subject: [PATCH 01/10] fix(safe-deployments-version): update safe-deployments version in order to fix issues on Linea --- apps/tx-builder/package.json | 2 +- yarn.lock | 15 ++++++++++----- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/apps/tx-builder/package.json b/apps/tx-builder/package.json index 4f59aedf..57fca853 100644 --- a/apps/tx-builder/package.json +++ b/apps/tx-builder/package.json @@ -9,7 +9,7 @@ "@material-ui/icons": "^4.11.3", "@material-ui/lab": "^4.0.0-alpha.60", "@safe-global/safe-apps-provider": "^0.18.0", - "@safe-global/safe-deployments": "^1.26.0", + "@safe-global/safe-deployments": "^1.27.0", "@safe-global/safe-gateway-typescript-sdk": "^3.19.0", "axios": "^1.6.0", "evm-proxy-detection": "1.0.0", diff --git a/yarn.lock b/yarn.lock index 24a7ed95..f37a9a31 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2922,12 +2922,12 @@ "@safe-global/safe-gateway-typescript-sdk" "^3.5.3" viem "^1.0.0" -"@safe-global/safe-deployments@^1.26.0": - version "1.26.0" - resolved "https://registry.yarnpkg.com/@safe-global/safe-deployments/-/safe-deployments-1.26.0.tgz#b83615b3b5a66e736e08f8ecf2801ed988e9e007" - integrity sha512-Tw89O4/paT19ieMoiWQbqRApb0Bef/DxweS9rxodXAM5EQModkbyFXGZca+YxXE67sLvWjLr2jJUOxwze8mhGw== +"@safe-global/safe-deployments@^1.27.0": + version "1.37.10" + resolved "https://registry.yarnpkg.com/@safe-global/safe-deployments/-/safe-deployments-1.37.10.tgz#2f61a25bd479332821ba2e91a575237d77406ec3" + integrity sha512-lcxX9CV+xdcLs4dF6Cx18zDww5JyqaX6RdcvU0o/34IgJ4Wjo3J/RNzJAoMhurCAfTGr+0vyJ9V13Qo50AR6JA== dependencies: - semver "^7.3.7" + semver "^7.6.2" "@safe-global/safe-gateway-typescript-sdk@^3.19.0": version "3.22.2" @@ -13933,6 +13933,11 @@ semver@^7.1.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7: dependencies: lru-cache "^6.0.0" +semver@^7.6.2: + version "7.6.3" + resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143" + integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A== + send@0.17.2: version "0.17.2" resolved "https://registry.yarnpkg.com/send/-/send-0.17.2.tgz#926622f76601c41808012c8bf1688fe3906f7820" From 9220ac1ac9f1a5c4647e74d8da3f20dfe75b2bb9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=B3vis=20Neto?= Date: Fri, 18 Oct 2024 09:45:00 +0200 Subject: [PATCH 02/10] feat(replace-icons): replace old images the correct ones from figma --- apps/tx-builder/src/assets/add-new-batch.svg | 12 ------------ apps/tx-builder/src/assets/arrowtotheblock.svg | 3 +++ apps/tx-builder/src/assets/empty-library-dark.svg | 12 ++++++++++++ apps/tx-builder/src/assets/empty-library-light.svg | 12 ++++++++++++ apps/tx-builder/src/assets/empty-library.svg | 10 ---------- apps/tx-builder/src/assets/new-batch-dark.svg | 12 ++++++++++++ apps/tx-builder/src/assets/new-batch-light.svg | 12 ++++++++++++ 7 files changed, 51 insertions(+), 22 deletions(-) delete mode 100644 apps/tx-builder/src/assets/add-new-batch.svg create mode 100644 apps/tx-builder/src/assets/arrowtotheblock.svg create mode 100644 apps/tx-builder/src/assets/empty-library-dark.svg create mode 100644 apps/tx-builder/src/assets/empty-library-light.svg delete mode 100644 apps/tx-builder/src/assets/empty-library.svg create mode 100644 apps/tx-builder/src/assets/new-batch-dark.svg create mode 100644 apps/tx-builder/src/assets/new-batch-light.svg diff --git a/apps/tx-builder/src/assets/add-new-batch.svg b/apps/tx-builder/src/assets/add-new-batch.svg deleted file mode 100644 index 274ee096..00000000 --- a/apps/tx-builder/src/assets/add-new-batch.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/apps/tx-builder/src/assets/arrowtotheblock.svg b/apps/tx-builder/src/assets/arrowtotheblock.svg new file mode 100644 index 00000000..54436b81 --- /dev/null +++ b/apps/tx-builder/src/assets/arrowtotheblock.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/tx-builder/src/assets/empty-library-dark.svg b/apps/tx-builder/src/assets/empty-library-dark.svg new file mode 100644 index 00000000..487d38fd --- /dev/null +++ b/apps/tx-builder/src/assets/empty-library-dark.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/apps/tx-builder/src/assets/empty-library-light.svg b/apps/tx-builder/src/assets/empty-library-light.svg new file mode 100644 index 00000000..649f8dc7 --- /dev/null +++ b/apps/tx-builder/src/assets/empty-library-light.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/apps/tx-builder/src/assets/empty-library.svg b/apps/tx-builder/src/assets/empty-library.svg deleted file mode 100644 index 7e6198d6..00000000 --- a/apps/tx-builder/src/assets/empty-library.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/apps/tx-builder/src/assets/new-batch-dark.svg b/apps/tx-builder/src/assets/new-batch-dark.svg new file mode 100644 index 00000000..f80dc18a --- /dev/null +++ b/apps/tx-builder/src/assets/new-batch-dark.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/apps/tx-builder/src/assets/new-batch-light.svg b/apps/tx-builder/src/assets/new-batch-light.svg new file mode 100644 index 00000000..82b946d2 --- /dev/null +++ b/apps/tx-builder/src/assets/new-batch-light.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + From d2c865b151e69b3d08fd7f1a82cd7b2fff22fadb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=B3vis=20Neto?= Date: Fri, 18 Oct 2024 10:02:38 +0200 Subject: [PATCH 03/10] fix(empty-library-screen): adjust empty library screen to be according to figmadesign --- .../src/pages/TransactionLibrary.tsx | 60 +++++++------------ 1 file changed, 23 insertions(+), 37 deletions(-) diff --git a/apps/tx-builder/src/pages/TransactionLibrary.tsx b/apps/tx-builder/src/pages/TransactionLibrary.tsx index dbbe67b4..72d1282c 100644 --- a/apps/tx-builder/src/pages/TransactionLibrary.tsx +++ b/apps/tx-builder/src/pages/TransactionLibrary.tsx @@ -1,15 +1,15 @@ -import { useState } from 'react' +import { useContext, useState } from 'react' import IconButton from '@material-ui/core/IconButton' -import { useHref, useLinkClickHandler, useNavigate } from 'react-router-dom' +import { useNavigate } from 'react-router-dom' import styled from 'styled-components' -import { ReactComponent as EmptyLibrary } from '../assets/empty-library.svg' +import { ReactComponent as EmptyLibraryDark } from '../assets/empty-library-dark.svg' +import { ReactComponent as EmptyLibraryLight } from '../assets/empty-library-light.svg' import DeleteBatchFromLibrary from '../components/modals/DeleteBatchFromLibrary' import TransactionsBatchList from '../components/TransactionsBatchList' import useModal from '../hooks/useModal/useModal' import { getEditBatchUrl, - HOME_PATH, REVIEW_AND_CONFIRM_PATH, TRANSACTION_LIBRARY_PATH, } from '../routes/routes' @@ -24,12 +24,13 @@ import Button from '../components/Button' 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' +import { EModes, ThemeModeContext } from '../theme/SafeThemeProvider' const TransactionLibrary = () => { const { batches, removeBatch, executeBatch, downloadBatch, renameBatch } = useTransactionLibrary() const navigate = useNavigate() + const mode = useContext(ThemeModeContext) const { open: showDeleteBatchModal, openModal: openDeleteBatchModal, @@ -37,14 +38,8 @@ const TransactionLibrary = () => { } = useModal() const [batchToRemove, setBatchToRemove] = useState() - const hrefToHome = useHref(HOME_PATH) - const internalOnClick = useLinkClickHandler(HOME_PATH) - const redirectToHome = (event: React.MouseEvent) => { - internalOnClick(event) - } - return ( - + Your transaction library {batches.length > 0 ? ( @@ -143,13 +138,19 @@ const TransactionLibrary = () => { )) ) : ( - + {/* Empty library Screen */} - - You don't have any saved batches. - - Safe a batch by{' '} - + {mode === EModes.DARK ? : } + + You don't have any saved batches. + + Safe a batch by{' '} { aria-label="go to transaction list view" /> in transaction list view. - - + + )} {showDeleteBatchModal && batchToRemove && ( @@ -265,17 +266,8 @@ const StyledIconButton = styled(IconButton)` const StyledEmptyLibraryText = styled(Text)` && { max-width: 320px; - margin-top: 32px; - font-size: 20px; - color: #566976; - } -` - -const StyledEmptyLibraryTextLink = styled(Text)` - && { - margin-top: 8px; - color: #566976; - text-decoration: none; + margin-bottom: 8px; + color: ${({ theme }) => theme.palette.text.secondary}; } ` @@ -283,9 +275,3 @@ const StyledLinkIcon = styled(Icon)` vertical-align: middle; margin-right: 2px; ` - -const StyledEmptyLibraryLink = styled(Link)` - && { - text-decoration: none; - } -` From 009b9c2857a4e6144f348b98d7c105fffcf0e4e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=B3vis=20Neto?= Date: Fri, 18 Oct 2024 10:04:05 +0200 Subject: [PATCH 04/10] fix(icons-alginment): adjust general icons colors and screens alignment --- .../src/components/CreateNewBatchCard.tsx | 97 ++++++++++++------- .../src/components/FixedIcon/index.tsx | 5 +- .../components/TransactionBatchListItem.tsx | 14 ++- .../src/components/Wrapper/index.tsx | 12 ++- .../modals/DeleteBatchFromLibrary.tsx | 3 +- .../components/modals/DeleteBatchModal.tsx | 3 +- .../modals/DeleteTransactionModal.tsx | 3 +- .../modals/SuccessBatchCreationModal.tsx | 4 +- .../src/pages/CreateTransactions.tsx | 6 +- apps/tx-builder/src/pages/Dashboard.tsx | 2 +- .../tx-builder/src/pages/ReviewAndConfirm.tsx | 2 +- 11 files changed, 94 insertions(+), 57 deletions(-) diff --git a/apps/tx-builder/src/components/CreateNewBatchCard.tsx b/apps/tx-builder/src/components/CreateNewBatchCard.tsx index 88306992..6673ce41 100644 --- a/apps/tx-builder/src/components/CreateNewBatchCard.tsx +++ b/apps/tx-builder/src/components/CreateNewBatchCard.tsx @@ -1,15 +1,18 @@ -import { useRef } from 'react' +import { useContext, useRef } from 'react' import { alpha } from '@material-ui/core' import Hidden from '@material-ui/core/Hidden' import styled from 'styled-components' import { useTheme } from '@material-ui/core/styles' -import { ReactComponent as CreateNewBatchSVG } from '../assets/add-new-batch.svg' +import { ReactComponent as CreateNewBatchLightSvg } from '../assets/new-batch-light.svg' +import { ReactComponent as CreateNewBatchDarkSvg } from '../assets/new-batch-dark.svg' +import { ReactComponent as ArrowBlock } from '../assets/arrowtotheblock.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' +import { EModes, ThemeModeContext } from '../theme/SafeThemeProvider' type CreateNewBatchCardProps = { onFileSelected: (file: File | null) => void @@ -17,6 +20,7 @@ type CreateNewBatchCardProps = { const CreateNewBatchCard = ({ onFileSelected }: CreateNewBatchCardProps) => { const theme = useTheme() + const mode = useContext(ThemeModeContext) const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm')) const fileRef = useRef(null) @@ -40,36 +44,42 @@ const CreateNewBatchCard = ({ onFileSelected }: CreateNewBatchCardProps) => { return ( - + {mode === EModes.DARK ? : } + - - {isAcceptError ? ( - - The uploaded file is not a valid JSON file - - ) : ( - <> - - Drag and drop a JSON file or - - choose a file - - - )} - - + + + Start creating a new batch + or + + {isAcceptError ? ( + + The uploaded file is not a valid JSON file + + ) : ( + <> + + Drag and drop a JSON file or + + choose a file + + + )} + + + ) } @@ -77,28 +87,48 @@ const CreateNewBatchCard = ({ onFileSelected }: CreateNewBatchCardProps) => { export default CreateNewBatchCard const Wrapper = styled.div<{ isSmallScreen: boolean }>` + text-align: center; + position: relative; margin-top: ${({ isSmallScreen }) => (isSmallScreen ? '0' : '64px')}; ` +const StyledArrowBlock = styled(ArrowBlock)` + position: absolute; + left: -2px; + top: 7rem; +` + +const StyledCreateBatchContent = styled.div` + margin-top: 1rem; + display: flex; + flex-direction: column; + gap: 1rem; +` + const StyledDragAndDropFileContainer = styled.div<{ dragOver: Boolean fullWidth: boolean error: Boolean }>` box-sizing: border-box; - max-width: ${({ fullWidth }) => (fullWidth ? '100%' : '420px')}; + max-width: ${({ fullWidth }) => (fullWidth ? '100%' : '430px')}; + width: 100%; border: 2px dashed ${({ theme, error }) => (error ? theme.palette.error.main : theme.palette.secondary.dark)}; border-radius: 8px; background-color: ${({ theme, error }) => error ? alpha(theme.palette.error.main, 0.7) : theme.palette.secondary.background}; padding: 24px; - margin: 24px auto 0 auto; + margin: 6px auto; display: flex; justify-content: center; align-items: center; + svg { + margin-right: 4px; + } + ${({ dragOver, error, theme }) => { if (dragOver) { return ` @@ -118,7 +148,6 @@ const StyledDragAndDropFileContainer = styled.div<{ const StyledText = styled(Text)<{ error?: Boolean }>` && { - margin-left: 4px; color: ${({ error, theme }) => error ? theme.palette.common.white : theme.palette.text.secondary}; } diff --git a/apps/tx-builder/src/components/FixedIcon/index.tsx b/apps/tx-builder/src/components/FixedIcon/index.tsx index 918605a6..65c33bba 100644 --- a/apps/tx-builder/src/components/FixedIcon/index.tsx +++ b/apps/tx-builder/src/components/FixedIcon/index.tsx @@ -61,13 +61,14 @@ export type IconTypes = keyof IconType type Props = { type: IconTypes + className?: string } /** * The `FixedIcon` renders an icon */ -function FixedIcon({ type }: Props): React.ReactElement { - return {icons[type]} +function FixedIcon({ type, className }: Props): React.ReactElement { + return {icons[type]} } export default FixedIcon diff --git a/apps/tx-builder/src/components/TransactionBatchListItem.tsx b/apps/tx-builder/src/components/TransactionBatchListItem.tsx index 2f1a587a..34f7dd80 100644 --- a/apps/tx-builder/src/components/TransactionBatchListItem.tsx +++ b/apps/tx-builder/src/components/TransactionBatchListItem.tsx @@ -172,7 +172,7 @@ const TransactionBatchListItem = memo( size="medium" aria-label="Expand transaction details" > - + )} @@ -224,7 +224,17 @@ const TransactionListItem = styled.li` margin-bottom: 8px; ` -// transaction postion dot styles +const StyledArrow = styled(FixedIcon)<{ isTxExpanded: boolean }>` + .icon-color { + fill: #b2b5b2; + } + ${({ isTxExpanded }) => + isTxExpanded && + ` + transform: rotateZ(180deg); + + `} +` const PositionWrapper = styled.div` display: flex; diff --git a/apps/tx-builder/src/components/Wrapper/index.tsx b/apps/tx-builder/src/components/Wrapper/index.tsx index 8b98c33d..dc033d00 100644 --- a/apps/tx-builder/src/components/Wrapper/index.tsx +++ b/apps/tx-builder/src/components/Wrapper/index.tsx @@ -1,25 +1,27 @@ import React from 'react' import styled from 'styled-components' -function Wrapper({ children }: { children: React.ReactNode }) { +function Wrapper({ children, centered }: { children: React.ReactNode; centered?: boolean }) { return ( - +
{children}
 ) } -const StyledWrapper = styled.main` +const StyledWrapper = styled.main<{ centered?: boolean }>` width: 100%; min-height: 100%; + display: flex; background: ${({ theme }) => theme.palette.background.main}; color: ${({ theme }) => theme.palette.text.primary}; > section { - padding: 120px 48px 48px; + width: 100%; + padding: 120px 4rem 48px; box-sizing: border-box; - max-width: 1024px; margin: 0 auto; + max-width: ${({ centered }) => (centered ? '1000px' : '1500px')}; } ` diff --git a/apps/tx-builder/src/components/modals/DeleteBatchFromLibrary.tsx b/apps/tx-builder/src/components/modals/DeleteBatchFromLibrary.tsx index 6accf41d..feed76d6 100644 --- a/apps/tx-builder/src/components/modals/DeleteBatchFromLibrary.tsx +++ b/apps/tx-builder/src/components/modals/DeleteBatchFromLibrary.tsx @@ -21,7 +21,7 @@ const DeleteBatchFromLibrary = ({ batch, onClick, onClose }: DeleteBatchFromLibr body={ - {batch.transactions.length} + {batch.transactions.length} {`${batch.name} batch will be permanently deleted`} @@ -58,7 +58,6 @@ const StyledModalDot = styled(Dot)` height: 24px; width: 24px; min-width: 24px; - background-color: #566976; position: absolute; top: 22px; diff --git a/apps/tx-builder/src/components/modals/DeleteBatchModal.tsx b/apps/tx-builder/src/components/modals/DeleteBatchModal.tsx index 9e595031..78e5bc7c 100644 --- a/apps/tx-builder/src/components/modals/DeleteBatchModal.tsx +++ b/apps/tx-builder/src/components/modals/DeleteBatchModal.tsx @@ -19,7 +19,7 @@ const DeleteBatchModal = ({ count, onClick, onClose }: DeleteBatchModalProps) => body={ - {count} + {count} {`transaction${count > 1 ? 's' : ''}`} will be cleared @@ -55,7 +55,6 @@ const StyledModalDot = styled(Dot)` height: 24px; width: 24px; min-width: 24px; - background-color: #566976; position: absolute; top: 22px; diff --git a/apps/tx-builder/src/components/modals/DeleteTransactionModal.tsx b/apps/tx-builder/src/components/modals/DeleteTransactionModal.tsx index fb64d4af..b610ea84 100644 --- a/apps/tx-builder/src/components/modals/DeleteTransactionModal.tsx +++ b/apps/tx-builder/src/components/modals/DeleteTransactionModal.tsx @@ -26,7 +26,7 @@ const DeleteTransactionModal = ({ body={ - {positionLabel} + {positionLabel} {`${txDescription} will be permanently deleted from the batch`} @@ -62,7 +62,6 @@ const StyledModalDot = styled(Dot)` height: 24px; width: 24px; min-width: 24px; - background-color: #566976; position: absolute; top: 22px; diff --git a/apps/tx-builder/src/components/modals/SuccessBatchCreationModal.tsx b/apps/tx-builder/src/components/modals/SuccessBatchCreationModal.tsx index 9f2b0e86..9980ceaf 100644 --- a/apps/tx-builder/src/components/modals/SuccessBatchCreationModal.tsx +++ b/apps/tx-builder/src/components/modals/SuccessBatchCreationModal.tsx @@ -35,7 +35,7 @@ const SuccessBatchCreationModal = ({ count, onClick, onClose }: SuccessBatchCrea {/* Text */} - {count} + {count} Transaction Batch in the queue. @@ -76,8 +76,6 @@ const StyledModalDot = styled(Dot)` width: 24px; min-width: 24px; top: -1px; - - background-color: #566976; ` const StyledModalText = styled(Text)` diff --git a/apps/tx-builder/src/pages/CreateTransactions.tsx b/apps/tx-builder/src/pages/CreateTransactions.tsx index b8cb7d3c..a1ccc7c7 100644 --- a/apps/tx-builder/src/pages/CreateTransactions.tsx +++ b/apps/tx-builder/src/pages/CreateTransactions.tsx @@ -40,7 +40,7 @@ const CreateTransactions = () => { return ( <> - + {transactions.length > 0 ? ( <> { export default CreateTransactions -const TransactionsSectionWrapper = styled(Grid)` +const TransactionsSectionWrapper = styled(Grid)<{ sticky?: boolean }>` position: sticky; - top: 40px; + top: 80px; align-self: flex-start; ` diff --git a/apps/tx-builder/src/pages/Dashboard.tsx b/apps/tx-builder/src/pages/Dashboard.tsx index 71df62f5..395b4a51 100644 --- a/apps/tx-builder/src/pages/Dashboard.tsx +++ b/apps/tx-builder/src/pages/Dashboard.tsx @@ -106,7 +106,7 @@ const Dashboard = (): ReactElement => { return ( - + diff --git a/apps/tx-builder/src/pages/ReviewAndConfirm.tsx b/apps/tx-builder/src/pages/ReviewAndConfirm.tsx index eceb7af5..f61c384a 100644 --- a/apps/tx-builder/src/pages/ReviewAndConfirm.tsx +++ b/apps/tx-builder/src/pages/ReviewAndConfirm.tsx @@ -77,7 +77,7 @@ const ReviewAndConfirm = () => { return ( <> - + Review and Confirm Date: Fri, 18 Oct 2024 10:06:22 +0200 Subject: [PATCH 05/10] feat(mode-in-context): add theme mode in the context in order to use it across the application --- .../src/theme/SafeThemeProvider.tsx | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/apps/tx-builder/src/theme/SafeThemeProvider.tsx b/apps/tx-builder/src/theme/SafeThemeProvider.tsx index fdb5f888..af0f837e 100644 --- a/apps/tx-builder/src/theme/SafeThemeProvider.tsx +++ b/apps/tx-builder/src/theme/SafeThemeProvider.tsx @@ -1,17 +1,24 @@ -import { useEffect, useMemo, useState, type FC } from 'react' +import React, { 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' +export enum EModes { + DARK = 'dark', + LIGHT = 'light', +} + type SafeThemeProviderProps = { children: (theme: Theme) => React.ReactNode } +export const ThemeModeContext = React.createContext(EModes.LIGHT) + const SafeThemeProvider: FC = ({ children }) => { - const [isDarkMode, setDarkMode] = useState(false) + const [mode, setMode] = useState(EModes.LIGHT) - const theme = useMemo(() => createSafeTheme(isDarkMode ? 'dark' : 'light'), [isDarkMode]) + const theme = useMemo(() => createSafeTheme(mode), [mode]) useEffect(() => { window.parent.postMessage( @@ -26,11 +33,15 @@ const SafeThemeProvider: FC = ({ children }) => { window.addEventListener('message', function ({ data: eventData }) { if (!eventData?.data?.hasOwnProperty('darkMode')) return - setDarkMode(eventData?.data.darkMode) + setMode(eventData?.data.darkMode ? EModes.DARK : EModes.LIGHT) }) }, []) - return {children(theme)} + return ( + + {children(theme)} + + ) } export default SafeThemeProvider From 5fd16aef8f952aee438b2218456c21958f3398d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=B3vis=20Neto?= Date: Fri, 18 Oct 2024 10:14:20 +0200 Subject: [PATCH 06/10] fix(library-icon-color): change icon color in your transactions library page --- apps/tx-builder/src/pages/TransactionLibrary.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/apps/tx-builder/src/pages/TransactionLibrary.tsx b/apps/tx-builder/src/pages/TransactionLibrary.tsx index 72d1282c..3e2fba21 100644 --- a/apps/tx-builder/src/pages/TransactionLibrary.tsx +++ b/apps/tx-builder/src/pages/TransactionLibrary.tsx @@ -151,12 +151,7 @@ const TransactionLibrary = () => { You don't have any saved batches. Safe a batch by{' '} - + in transaction list view. @@ -274,4 +269,8 @@ const StyledEmptyLibraryText = styled(Text)` const StyledLinkIcon = styled(Icon)` vertical-align: middle; margin-right: 2px; + + .icon-color { + fill: ${({ theme }) => theme.palette.text.secondary}; + } ` From e35bf4ca18c938018c6c1539f2a81f608dc5bde2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=B3vis=20Neto?= Date: Fri, 18 Oct 2024 10:49:06 +0200 Subject: [PATCH 07/10] fix(remove-unused-code): remove stick parameter definition from the TransactionSectionWrapper --- apps/tx-builder/src/pages/CreateTransactions.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/tx-builder/src/pages/CreateTransactions.tsx b/apps/tx-builder/src/pages/CreateTransactions.tsx index a1ccc7c7..db164ceb 100644 --- a/apps/tx-builder/src/pages/CreateTransactions.tsx +++ b/apps/tx-builder/src/pages/CreateTransactions.tsx @@ -40,7 +40,7 @@ const CreateTransactions = () => { return ( <> - + {transactions.length > 0 ? ( <> { export default CreateTransactions -const TransactionsSectionWrapper = styled(Grid)<{ sticky?: boolean }>` +const TransactionsSectionWrapper = styled(Grid)` position: sticky; top: 80px; align-self: flex-start; From 067bd9dd5142f1516432b0dc4975d3bd800bbbae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=B3vis=20Neto?= Date: Mon, 21 Oct 2024 13:28:17 +0200 Subject: [PATCH 08/10] fix(tx-builder-alignment): put the TxBuilder form aligned on top --- apps/tx-builder/src/pages/Dashboard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/tx-builder/src/pages/Dashboard.tsx b/apps/tx-builder/src/pages/Dashboard.tsx index 395b4a51..f28802b5 100644 --- a/apps/tx-builder/src/pages/Dashboard.tsx +++ b/apps/tx-builder/src/pages/Dashboard.tsx @@ -106,7 +106,7 @@ const Dashboard = (): ReactElement => { return ( - + From 5b6014c20467fabe0f42e9b59c2264ced6a6ffa8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=B3vis=20Neto?= Date: Mon, 21 Oct 2024 14:42:12 +0200 Subject: [PATCH 09/10] fix(tx-builder-tooltips): fix tooltip background on generic modal --- apps/tx-builder/src/components/Tooltip.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/tx-builder/src/components/Tooltip.tsx b/apps/tx-builder/src/components/Tooltip.tsx index 8aadc667..5ab31a71 100644 --- a/apps/tx-builder/src/components/Tooltip.tsx +++ b/apps/tx-builder/src/components/Tooltip.tsx @@ -59,7 +59,7 @@ const customTooltip = ({ backgroundColor, textColor, size = 'md' }: TooltipProps backgroundColor: backgroundColor && theme.palette[backgroundColor] ? (theme.palette[backgroundColor] as PaletteColor).main - : '#E8E7E6', + : theme.palette.primary.main, boxShadow: `1px 2px 10px ${alpha('#28363D', 0.18)}`, border: getBorderBySize(size), color: textColor From 7611fa54fed89b350f6270f335213dfa13e7c06e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=B3vis=20Neto?= Date: Mon, 21 Oct 2024 14:53:31 +0200 Subject: [PATCH 10/10] fix(tx-builder-upload): change upload file text color --- apps/tx-builder/src/components/CreateNewBatchCard.tsx | 8 ++++++-- apps/tx-builder/src/theme/darkPalette.ts | 3 +++ apps/tx-builder/src/theme/lightPalette.ts | 3 +++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/apps/tx-builder/src/components/CreateNewBatchCard.tsx b/apps/tx-builder/src/components/CreateNewBatchCard.tsx index 6673ce41..e1ae18f6 100644 --- a/apps/tx-builder/src/components/CreateNewBatchCard.tsx +++ b/apps/tx-builder/src/components/CreateNewBatchCard.tsx @@ -156,9 +156,13 @@ const StyledText = styled(Text)<{ error?: Boolean }>` const StyledButtonLink = styled(ButtonLink)` margin-left: 0.3rem; padding: 0; - text-decoration: none; && > p { - color: ${({ theme }) => theme.palette.secondary.dark}; + color: ${({ theme }) => theme.palette.upload.primary}; + text-decoration: underline; + + &:hover { + color: ${({ theme }) => theme.palette.backdrop.main}; + } } ` diff --git a/apps/tx-builder/src/theme/darkPalette.ts b/apps/tx-builder/src/theme/darkPalette.ts index 5e1b9b12..3ed7ebf0 100644 --- a/apps/tx-builder/src/theme/darkPalette.ts +++ b/apps/tx-builder/src/theme/darkPalette.ts @@ -57,6 +57,9 @@ const darkPalette = { main: '#FFFFFF', background: '#303033', }, + upload: { + primary: '#fff', + }, static: { main: '#121312', }, diff --git a/apps/tx-builder/src/theme/lightPalette.ts b/apps/tx-builder/src/theme/lightPalette.ts index c9983511..413a65df 100644 --- a/apps/tx-builder/src/theme/lightPalette.ts +++ b/apps/tx-builder/src/theme/lightPalette.ts @@ -57,6 +57,9 @@ const lightPalette = { main: '#121312', background: '#EEEFF0', }, + upload: { + primary: '#12FF80', + }, static: { main: '#121312', },