From b28d165aaa381ccfb22a253040d089874ac20f66 Mon Sep 17 00:00:00 2001 From: Steven Date: Fri, 8 Nov 2024 16:10:29 +0100 Subject: [PATCH] small styling fixes (#2654) --- .changeset/nervous-shoes-grow.md | 2 ++ .../dev-wallet/src/App/Layout/SideBar.tsx | 11 ++++++++ .../src/Components/AuthCard/style.css.ts | 4 +-- .../dev-wallet/src/pages/account/account.tsx | 26 +++++++++++++++---- .../dev-wallet/src/pages/account/style.css.ts | 5 ++++ .../import-chainweaver-export.tsx | 23 +++++++++++----- .../src/pages/keys/Components/Keys.tsx | 6 ++--- .../pages/select-profile/select-profile.tsx | 3 ++- .../pages/transfer-v2/Steps/TransferForm.tsx | 3 ++- .../src/pages/transfer-v2/transfer-v2.tsx | 4 +-- .../src/pages/transfer/transfer.tsx | 7 ----- .../components/Breadcrumbs/Breadcrumbs.css.ts | 5 ++-- .../SideBarLayout/SideBarLayout.stories.tsx | 9 +++++++ .../Breadcrumbs/SideBarBreadcrumbs.tsx | 1 + .../components/RightAside/style.css.ts | 11 +++++--- .../components/SideBarHeader.tsx | 3 ++- .../SideBarLayout/components/SideBarItem.tsx | 3 +-- .../src/patterns/SideBarLayout/sidebar.css.ts | 17 ++++++++++++ 18 files changed, 106 insertions(+), 37 deletions(-) create mode 100644 .changeset/nervous-shoes-grow.md diff --git a/.changeset/nervous-shoes-grow.md b/.changeset/nervous-shoes-grow.md new file mode 100644 index 0000000000..a845151cc8 --- /dev/null +++ b/.changeset/nervous-shoes-grow.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx b/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx index 4d0cadaef2..9d386c9164 100644 --- a/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx +++ b/packages/apps/dev-wallet/src/App/Layout/SideBar.tsx @@ -6,6 +6,7 @@ import { MonoDarkMode, MonoKey, MonoLightMode, + MonoLogout, MonoNetworkCheck, MonoSignature, MonoSwapHoriz, @@ -14,6 +15,7 @@ import { import { NetworkSelector } from '@/Components/NetworkSelector/NetworkSelector'; +import { useWallet } from '@/modules/wallet/wallet.hook'; import { Button, Themes, useTheme } from '@kadena/kode-ui'; import { SideBarItem, @@ -28,6 +30,7 @@ import { KLogo } from './KLogo'; export const SideBar: FC = () => { const { theme, setTheme } = useTheme(); const { isExpanded } = useLayout(); + const { lockProfile } = useWallet(); const toggleTheme = (): void => { const newTheme = theme === Themes.dark ? Themes.light : Themes.dark; @@ -105,6 +108,14 @@ export const SideBar: FC = () => { context={ <> + } label="Logout"> + - + {Object.keys(selectionOptions).map((key) => { const value = selectionOptions[key as keyof typeof selectionOptions]; @@ -232,8 +238,11 @@ export const ImportChainweaverExport: React.FC = () => { )} {step === 'password' && ( - - + + diff --git a/packages/apps/dev-wallet/src/pages/keys/Components/Keys.tsx b/packages/apps/dev-wallet/src/pages/keys/Components/Keys.tsx index 1adcef170f..7376bae20e 100644 --- a/packages/apps/dev-wallet/src/pages/keys/Components/Keys.tsx +++ b/packages/apps/dev-wallet/src/pages/keys/Components/Keys.tsx @@ -155,9 +155,9 @@ export function Keys() { justifyContent={'space-between'} alignItems={'center'} > - - Index: {key.index} - {shorten(key.publicKey, 35)} + + Idx: {key.index} + {shorten(key.publicKey, 20)} + Welcome to
Chainweaver v3.0 @@ -58,6 +58,7 @@ export function SelectProfile() { gap="sm" flexWrap="wrap" marginBlock="lg" + width="100%" > {profileList.map((profile) => profile.options.authMode === 'WEB_AUTHN' ? ( diff --git a/packages/apps/dev-wallet/src/pages/transfer-v2/Steps/TransferForm.tsx b/packages/apps/dev-wallet/src/pages/transfer-v2/Steps/TransferForm.tsx index d6a1507893..e10b6b072b 100644 --- a/packages/apps/dev-wallet/src/pages/transfer-v2/Steps/TransferForm.tsx +++ b/packages/apps/dev-wallet/src/pages/transfer-v2/Steps/TransferForm.tsx @@ -302,7 +302,7 @@ export function TransferForm({ /> )} - + Transfer @@ -963,6 +963,7 @@ export function TransferForm({ flexDirection={'column'} className={panelClass} paddingBlockEnd={'xxl'} + width="100%" > diff --git a/packages/apps/dev-wallet/src/pages/transfer-v2/transfer-v2.tsx b/packages/apps/dev-wallet/src/pages/transfer-v2/transfer-v2.tsx index a2a926d154..f56f6f8e57 100644 --- a/packages/apps/dev-wallet/src/pages/transfer-v2/transfer-v2.tsx +++ b/packages/apps/dev-wallet/src/pages/transfer-v2/transfer-v2.tsx @@ -263,7 +263,7 @@ export function TransferV2() { Transfer - + } @@ -282,7 +282,7 @@ export function TransferV2() { {!receiverAccount && discoveredReceivers.length > 1 && ( diff --git a/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.css.ts b/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.css.ts index 9ec08e3230..dca92a4206 100644 --- a/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.css.ts +++ b/packages/libs/kode-ui/src/components/Breadcrumbs/Breadcrumbs.css.ts @@ -19,16 +19,17 @@ export const itemClass = style([ display: 'flex', padding: 0, whiteSpace: 'nowrap', + marginInlineEnd: token('spacing.sm'), selectors: { '&:not(:first-child):not(:last-child)::before': { content: '/', color: token('color.text.gray.default'), - marginInline: token('spacing.sm'), + marginInlineEnd: token('spacing.sm'), }, '&:not(:first-child):last-child::before': { content: '/', color: token('color.text.gray.default'), - marginInline: token('spacing.sm'), + marginInlineEnd: token('spacing.sm'), }, }, }, diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx index ad15215c3d..fca059bfe2 100644 --- a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx +++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx @@ -290,6 +290,15 @@ export const Primary: IStory = { Skeletor + + Cringer + + + Orko + + + Masters of the Universe + diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/SideBarBreadcrumbs.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/SideBarBreadcrumbs.tsx index 84fea359be..2ff11b72ad 100644 --- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/SideBarBreadcrumbs.tsx +++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/SideBarBreadcrumbs.tsx @@ -15,6 +15,7 @@ export const SideBarBreadcrumbs: FC = ({ return createPortal( {children}, + breadcrumbsRef, ); }; diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/RightAside/style.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/RightAside/style.css.ts index 42d6651064..f51b931b25 100644 --- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/RightAside/style.css.ts +++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/RightAside/style.css.ts @@ -1,12 +1,17 @@ -import { atoms, globalStyle, style } from './../../../../styles'; +import { atoms, globalStyle, style, token } from './../../../../styles'; export const rightAsideClass = style([ atoms({ display: 'flex', flexDirection: 'column', flex: 1 }), {}, ]); export const rightAsideContentClass = style([ - atoms({ flex: 1, display: 'flex', flexDirection: 'column', width: '100%' }), - {}, + atoms({ + flex: 1, + display: 'flex', + flexDirection: 'column', + width: '100%', + }), + { paddingInline: token('spacing.md') }, ]); globalStyle(`${rightAsideClass} > form `, { diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarHeader.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarHeader.tsx index 4d8c75623e..56b55658e5 100644 --- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarHeader.tsx +++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarHeader.tsx @@ -4,6 +4,7 @@ import type { FC, PropsWithChildren, ReactElement } from 'react'; import React, { useEffect, useRef } from 'react'; import type { PressEvent } from 'react-aria'; import { + crumbsWrapperClass, headerClass, headerExpandedClass, headerWrapperClass, @@ -60,7 +61,7 @@ export const SideBarHeader: FC = ({ minifiedLogo }) => { /> - + ); diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarItem.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarItem.tsx index 7c437c2f63..e8dbf20ab7 100644 --- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarItem.tsx +++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarItem.tsx @@ -47,7 +47,6 @@ export const SideBarItem: FC = ({ const LinkWrapper = component ? component : Anchor; return ( = ({ if (children) return children; return ( -
  • +
  • {render(true)} diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts index 0ebdf189e3..9bca095d48 100644 --- a/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts +++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/sidebar.css.ts @@ -315,6 +315,23 @@ export const headerClass = style([ }), ]); +export const crumbsWrapperClass = style([ + { + gridArea: 'header-crumbs', + }, +]); + +globalStyle(`${crumbsWrapperClass} > *`, { + ...responsiveStyle({ + xs: { + display: 'none!important', + }, + sm: { + display: 'flex!important', + }, + }), +}); + export const headerExpandedClass = style([ responsiveStyle({ md: { paddingInlineStart: '50px' },