From 5c81e456605ae46cd458a1ecb6524a571ee147fd Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sun, 5 Jan 2025 18:51:14 +0700 Subject: [PATCH 1/8] update license config --- .licenserc.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.licenserc.json b/.licenserc.json index de68ae8bb5..8988c18eaf 100644 --- a/.licenserc.json +++ b/.licenserc.json @@ -7,5 +7,5 @@ "/* Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors", "SPDX-License-Identifier: GPL-3.0-only */" ], - "ignore": ["testdata", "npm", "public/", "Dockerfile", "src/config/validators/"] + "ignore": ["testdata", "npm", "public/", "Dockerfile", "packages/app/src/config/validators/"] } From 4f3db3589de8d18f1952245c9140661ccb37a344 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sun, 5 Jan 2025 18:51:26 +0700 Subject: [PATCH 2/8] solid icons to workspace --- package.json | 1 + packages/app/package.json | 2 +- packages/ui-core/package.json | 1 + yarn.lock | 3 ++- 4 files changed, 5 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 015a0da1e2..00b25261b2 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.7.2", + "@fortawesome/free-solid-svg-icons": "^6.7.2", "@tanstack/react-query": "^5.62.15", "@w3ux/hooks": "^1.4.0", "@w3ux/utils": "^1.2.0", diff --git a/packages/app/package.json b/packages/app/package.json index 24c41ba065..bde1dc545c 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -16,7 +16,6 @@ "@dotlottie/player-component": "^2.7.12", "@fortawesome/free-brands-svg-icons": "^6.7.2", "@fortawesome/free-regular-svg-icons": "^6.7.2", - "@fortawesome/free-solid-svg-icons": "^6.7.2", "@fortawesome/react-fontawesome": "^0.2.2", "@ledgerhq/hw-transport-webhid": "^6.30.0", "@polkadot-api/merkleize-metadata": "^1.1.12", @@ -73,6 +72,7 @@ }, "peerDependencies": { "@fortawesome/fontawesome-svg-core": "*", + "@fortawesome/free-solid-svg-icons": "*", "@tanstack/react-query": "*", "eslint": "*", "react": "*", diff --git a/packages/ui-core/package.json b/packages/ui-core/package.json index 235514ae5e..87d9bcc94b 100644 --- a/packages/ui-core/package.json +++ b/packages/ui-core/package.json @@ -17,6 +17,7 @@ }, "peerDependencies": { "@fortawesome/fontawesome-svg-core": "*", + "@fortawesome/free-solid-svg-icons": "*", "react": "*" } } diff --git a/yarn.lock b/yarn.lock index cfd6e6f216..7684c86db1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4998,7 +4998,6 @@ __metadata: "@dotlottie/player-component": "npm:^2.7.12" "@fortawesome/free-brands-svg-icons": "npm:^6.7.2" "@fortawesome/free-regular-svg-icons": "npm:^6.7.2" - "@fortawesome/free-solid-svg-icons": "npm:^6.7.2" "@fortawesome/react-fontawesome": "npm:^0.2.2" "@ledgerhq/hw-transport-webhid": "npm:^6.30.0" "@polkadot-api/merkleize-metadata": "npm:^1.1.12" @@ -5052,6 +5051,7 @@ __metadata: xxhash-wasm: "npm:^1.0.2" peerDependencies: "@fortawesome/fontawesome-svg-core": "*" + "@fortawesome/free-solid-svg-icons": "*" "@tanstack/react-query": "*" eslint: "*" react: "*" @@ -9817,6 +9817,7 @@ __metadata: dependencies: "@eslint/js": "npm:^9.17.0" "@fortawesome/fontawesome-svg-core": "npm:^6.7.2" + "@fortawesome/free-solid-svg-icons": "npm:^6.7.2" "@ledgerhq/logs": "npm:^6.12.0" "@tanstack/react-query": "npm:^5.62.15" "@types/chroma-js": "npm:^2.4.5" From 8b5c6fc02eb30a2542b32b391fd194b154990987 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Sun, 5 Jan 2025 18:52:07 +0700 Subject: [PATCH 3/8] refactor modal close --- packages/app/src/library/Modal/Close.tsx | 18 --- packages/app/src/library/Modal/Title.tsx | 38 ++--- packages/app/src/library/Modal/Wrappers.ts | 28 ---- packages/app/src/library/SideMenu/index.tsx | 8 +- .../src/overlay/modals/BalanceTest/index.tsx | 3 +- .../app/src/overlay/modals/Bond/index.tsx | 3 +- .../overlay/modals/ChangePoolRoles/index.tsx | 3 +- .../src/overlay/modals/ClaimReward/index.tsx | 3 +- .../app/src/overlay/modals/Connect/index.tsx | 3 +- .../modals/ManageFastUnstake/index.tsx | 3 +- .../overlay/modals/StopNominations/index.tsx | 3 +- .../app/src/overlay/modals/Unbond/index.tsx | 3 +- .../app/src/overlay/modals/Unstake/index.tsx | 3 +- .../overlay/modals/UpdateReserve/index.tsx | 148 +++++++++--------- .../src/base/OfflineLabel/index.module.scss | 2 +- .../src/overlay/ModalClose/index.module.scss | 16 ++ .../ui-core/src/overlay/ModalClose/index.tsx | 14 ++ packages/ui-core/src/overlay/index.tsx | 1 + packages/ui-overlay/src/Close.tsx | 11 ++ packages/ui-overlay/src/index.tsx | 1 + 20 files changed, 146 insertions(+), 166 deletions(-) delete mode 100644 packages/app/src/library/Modal/Close.tsx create mode 100644 packages/ui-core/src/overlay/ModalClose/index.module.scss create mode 100644 packages/ui-core/src/overlay/ModalClose/index.tsx create mode 100644 packages/ui-overlay/src/Close.tsx diff --git a/packages/app/src/library/Modal/Close.tsx b/packages/app/src/library/Modal/Close.tsx deleted file mode 100644 index 6516110530..0000000000 --- a/packages/app/src/library/Modal/Close.tsx +++ /dev/null @@ -1,18 +0,0 @@ -// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors -// SPDX-License-Identifier: GPL-3.0-only - -import CrossSVG from 'assets/svg/icons/cross.svg?react' -import { useOverlay } from 'ui-overlay' -import { CloseWrapper } from './Wrappers' - -export const Close = () => { - const { setModalStatus } = useOverlay().modal - - return ( - - - - ) -} diff --git a/packages/app/src/library/Modal/Title.tsx b/packages/app/src/library/Modal/Title.tsx index 1c3751a1ab..fe0880770f 100644 --- a/packages/app/src/library/Modal/Title.tsx +++ b/packages/app/src/library/Modal/Title.tsx @@ -4,13 +4,12 @@ import type { IconProp } from '@fortawesome/fontawesome-svg-core' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import type { AnyJson } from '@w3ux/types' -import CrossSVG from 'assets/svg/icons/cross.svg?react' import { useHelp } from 'contexts/Help' import type { FunctionComponent, SVGProps } from 'react' import type { CSSProperties } from 'styled-components' import { ButtonHelp } from 'ui-buttons' import { ModalTitle } from 'ui-core/overlay' -import { useOverlay } from 'ui-overlay' +import { Close } from 'ui-overlay' import { TitleWrapper } from './Wrappers' interface TitleProps { @@ -31,7 +30,6 @@ export const Title = ({ style, }: TitleProps) => { const { openHelp } = useHelp() - const { setModalStatus } = useOverlay().modal const graphic = Svg ? ( @@ -40,23 +38,21 @@ export const Title = ({ ) : null return ( - -
- {graphic} - {title && ( - - {title} - {helpKey ? ( - openHelp(helpKey)} /> - ) : null} - - )} -
-
- -
-
+ <> + + +
+ {graphic} + {title && ( + + {title} + {helpKey ? ( + openHelp(helpKey)} /> + ) : null} + + )} +
+
+ ) } diff --git a/packages/app/src/library/Modal/Wrappers.ts b/packages/app/src/library/Modal/Wrappers.ts index 9b30da0f26..5bb68f07df 100644 --- a/packages/app/src/library/Modal/Wrappers.ts +++ b/packages/app/src/library/Modal/Wrappers.ts @@ -44,18 +44,6 @@ export const TitleWrapper = styled.div<{ $fixed: boolean }>` margin-right: 0.9rem; } } - - &:last-child { - button { - position: absolute; - top: 1.5rem; - right: 1.5rem; - opacity: 0.25; - &:hover { - opacity: 1; - } - } - } } ` @@ -106,19 +94,3 @@ export const StatWrapper = styled.div` } } ` - -export const CloseWrapper = styled.div` - position: absolute; - right: 1.5rem; - top: 1.5rem; - z-index: 2; - - > button { - opacity: 0.4; - transition: opacity var(--transition-duration) ease-in-out; - - &:hover { - opacity: 1; - } - } -` diff --git a/packages/app/src/library/SideMenu/index.tsx b/packages/app/src/library/SideMenu/index.tsx index 78da419ea2..3ee4187e6b 100644 --- a/packages/app/src/library/SideMenu/index.tsx +++ b/packages/app/src/library/SideMenu/index.tsx @@ -8,12 +8,12 @@ import { capitalizeFirstLetter } from '@w3ux/utils' import DiscordSVG from 'assets/svg/brands/discord.svg?react' import LogoGithubSVG from 'assets/svg/brands/github.svg?react' import BookSVG from 'assets/svg/icons/book.svg?react' -import CogOutlineSVG from 'assets/svg/icons/cogOutline.svg?react' +import CogSVG from 'assets/svg/icons/cog.svg?react' import EnvelopeSVG from 'assets/svg/icons/envelope.svg?react' import LanguageSVG from 'assets/svg/icons/language.svg?react' import LogoSVG from 'assets/svg/icons/logo.svg?react' -import MoonOutlineSVG from 'assets/svg/icons/moonOutline.svg?react' -import SunnyOutlineSVG from 'assets/svg/icons/sunnyOutline.svg?react' +import MoonOutlineSVG from 'assets/svg/icons/moon.svg?react' +import SunnyOutlineSVG from 'assets/svg/icons/sun.svg?react' import { PageWidthMediumThreshold, SideMenuMaximisedWidth } from 'consts' import { useApi } from 'contexts/Api' import { useHelp } from 'contexts/Help' @@ -176,7 +176,7 @@ export const SideMenu = () => { onClick={() => openModal({ key: 'Settings' })} aria-label="Settings" > - +