small styling fixes

kadena-community · Nov 8, 2024 · eb47ae5 · eb47ae5
1 parent 52d01f9
commit eb47ae5
Show file tree

Hide file tree

Showing 18 changed files with 106 additions and 37 deletions.
diff --git a/.changeset/nervous-shoes-grow.md 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
@@ -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={
         <>
           <SideBarItemsInline>
+            <SideBarItem visual={<MonoLogout />} label="Logout">
+              <Button
+                isCompact
+                variant="transparent"
+                onPress={lockProfile}
+                startVisual={<MonoLogout />}
+              />
+            </SideBarItem>
             <SideBarItem
               visual={<MonoContrast />}
               onPress={toggleTheme}

diff --git a/packages/apps/dev-wallet/src/Components/AuthCard/style.css.ts b/packages/apps/dev-wallet/src/Components/AuthCard/style.css.ts
@@ -2,10 +2,8 @@ import { atoms } from '@kadena/kode-ui/styles';
 import { style } from '@vanilla-extract/css';
 
 export const authCard = style([
-  atoms({
-    padding: 'xxl',
-  }),
   {
+    width: '100%',
     borderRadius: '1px',
     textAlign: 'left',
     backgroundColor: 'rgba(255, 255, 255, 0.03)',

diff --git a/packages/apps/dev-wallet/src/pages/account/account.tsx b/packages/apps/dev-wallet/src/pages/account/account.tsx
@@ -29,6 +29,7 @@ import { linkClass } from '../transfer/style.css';
 import { ActivityTable } from './Components/ActivityTable';
 import { AliasForm } from './Components/AliasForm';
 import { Redistribute } from './Components/Redistribute';
+import { addressBreakClass } from './style.css';
 
 export function AccountPage() {
   const { accountId } = useParams();
@@ -116,7 +117,9 @@ export function AccountPage() {
         </Stack>
 
         <Stack justifyContent={'space-between'}>
-          <Heading variant="h5">{account.address}</Heading>
+          <Heading variant="h5" className={addressBreakClass}>
+            {account.address}
+          </Heading>
         </Stack>
 
         <Stack flexDirection={'row'} gap="sm" alignItems={'center'}>
@@ -167,7 +170,7 @@ export function AccountPage() {
       )}
       <Tabs>
         <TabItem key="guard" title="Details">
-          <Stack gap="lg">
+          <Stack gap="lg" width="100%">
             <QRCode
               ecLevel="L"
               size={150}
@@ -185,11 +188,19 @@ export function AccountPage() {
             >
               <Stack flexDirection={'column'} gap={'sm'}>
                 <Text>Contract</Text>
-                <Text color="emphasize" variant="code">
+                <Text
+                  color="emphasize"
+                  variant="code"
+                  className={addressBreakClass}
+                >
                   {account.contract}
                 </Text>
               </Stack>
-              <Stack flexDirection={'column'} gap={'sm'}>
+              <Stack
+                flexDirection={'column'}
+                gap={'sm'}
+                className={addressBreakClass}
+              >
                 <Text>Address</Text>
                 <Text color="emphasize" variant="code">
                   {account.address}
@@ -204,7 +215,12 @@ export function AccountPage() {
               <Stack flexDirection={'column'} gap={'sm'}>
                 <Text>Keys</Text>
                 {keyset.guard.keys.map((key) => (
-                  <Stack key={key} gap="sm" alignItems={'center'}>
+                  <Stack
+                    key={key}
+                    gap="sm"
+                    alignItems={'center'}
+                    className={addressBreakClass}
+                  >
                     <Text>
                       <MonoKey />
                     </Text>

diff --git a/packages/apps/dev-wallet/src/pages/account/style.css.ts b/packages/apps/dev-wallet/src/pages/account/style.css.ts
@@ -35,3 +35,8 @@ export const listItemClass = style([
     },
   },
 ]);
+
+export const addressBreakClass = style({
+  width: '90%',
+  wordBreak: 'break-all',
+});
diff --git a/packages/apps/dev-wallet/src/pages/import-chainweaver-export/import-chainweaver-export.tsx b/packages/apps/dev-wallet/src/pages/import-chainweaver-export/import-chainweaver-export.tsx
@@ -2,8 +2,8 @@ import { useWallet } from '@/modules/wallet/wallet.hook';
 import { Button, Heading, Stack } from '@kadena/kode-ui';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { createSelectionOptions } from './createSelectionOptions';
 import { createProfileFromChainweaverData } from './createProfileFromChainweaverData';
+import { createSelectionOptions } from './createSelectionOptions';
 
 type Inputs = {
   password?: string;
@@ -156,8 +156,11 @@ export const ImportChainweaverExport: React.FC = () => {
   return (
     <>
       {step === 'upload' && (
-        <form onSubmit={handleSubmit(parseAndCreateSelectionOptions)}>
-          <Stack flexDirection="column">
+        <form
+          onSubmit={handleSubmit(parseAndCreateSelectionOptions)}
+          style={{ width: '100%' }}
+        >
+          <Stack flexDirection="column" width="100%" gap="md">
             <label htmlFor="chainweaverFile">
               Upload the exported file from Chainweaver
             </label>
@@ -172,9 +175,12 @@ export const ImportChainweaverExport: React.FC = () => {
       )}
 
       {step === 'select' && (
-        <form onSubmit={handleSubmit(importSelection)}>
+        <form
+          onSubmit={handleSubmit(importSelection)}
+          style={{ width: '100%' }}
+        >
           <Button type="submit">Import</Button>
-          <Stack flexDirection="column">
+          <Stack flexDirection="column" width="100%">
             {Object.keys(selectionOptions).map((key) => {
               const value =
                 selectionOptions[key as keyof typeof selectionOptions];
@@ -232,8 +238,11 @@ export const ImportChainweaverExport: React.FC = () => {
       )}
 
       {step === 'password' && (
-        <form onSubmit={handleSubmit(importSelection)}>
-          <Stack flexDirection="column">
+        <form
+          onSubmit={handleSubmit(importSelection)}
+          style={{ width: '100%' }}
+        >
+          <Stack flexDirection="column" width="100%">
             <label htmlFor="profileName">Enter your Profile Name</label>
             <input type="profileName" {...register('profileName')} />
             <label htmlFor="password">Enter your password</label>

diff --git 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'}
                   >
-                    <Stack gap={'lg'}>
-                      <Text> Index: {key.index}</Text>
-                      <Text>{shorten(key.publicKey, 35)}</Text>
+                    <Stack gap={'md'}>
+                      <Text> Idx: {key.index}</Text>
+                      <Text>{shorten(key.publicKey, 20)}</Text>
                     </Stack>
                     <ContextMenu
                       placement="bottom end"

diff --git a/packages/apps/dev-wallet/src/pages/select-profile/select-profile.tsx b/packages/apps/dev-wallet/src/pages/select-profile/select-profile.tsx
@@ -44,7 +44,7 @@ export function SelectProfile() {
   const redirect = params.get('redirect');
 
   return (
-    <Box>
+    <Box width="100%">
       <Heading variant="h1" className={titleClass}>
         Welcome to <br /> Chainweaver v3.0
       </Heading>
@@ -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
@@ -302,7 +302,7 @@ export function TransferForm({
         />
       )}
 
-      <Stack flexDirection="column" gap="md" flex={1}>
+      <Stack flexDirection="column" gap="md" flex={1} width="100%">
         <Stack gap="sm" flexDirection={'column'}>
           <Heading variant="h2">Transfer</Heading>
         </Stack>
@@ -963,6 +963,7 @@ export function TransferForm({
           flexDirection={'column'}
           className={panelClass}
           paddingBlockEnd={'xxl'}
+          width="100%"
         >
           <AdvancedMode>
             <Stack marginBlockStart={'md'} marginBlockEnd={'sm'}>

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
@@ -263,7 +263,7 @@ export function TransferV2() {
           Transfer
         </SideBarBreadcrumbsItem>
       </SideBarBreadcrumbs>
-      <Stack flexDirection={'column'}>
+      <Stack flexDirection={'column'} width="100%">
         <Stepper direction="horizontal">
           <Step
             icon={<MonoSwapHoriz />}
@@ -282,7 +282,7 @@ export function TransferV2() {
             <Stack
               gap={'lg'}
               flexDirection={'column'}
-              style={{ width: '670px' }}
+              style={{ maxWidth: '670px', width: '100%' }}
             >
               <TransferForm
                 accountId={accountId}

diff --git a/packages/apps/dev-wallet/src/pages/transfer/transfer.tsx b/packages/apps/dev-wallet/src/pages/transfer/transfer.tsx
@@ -326,13 +326,6 @@ export function Transfer() {
     transferAll,
   ]);
 
-  console.log({
-    receiverAccount,
-    discoveredReceivers,
-    isValid,
-    optimalTransfers,
-  });
-
   return (
     <>
       {!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
@@ -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
@@ -290,6 +290,15 @@ export const Primary: IStory = {
           <SideBarBreadcrumbsItem href="/accounts/2">
             Skeletor
           </SideBarBreadcrumbsItem>
+          <SideBarBreadcrumbsItem href="/accounts/2">
+            Cringer
+          </SideBarBreadcrumbsItem>
+          <SideBarBreadcrumbsItem href="/accounts/2">
+            Orko
+          </SideBarBreadcrumbsItem>
+          <SideBarBreadcrumbsItem href="/accounts/2">
+            Masters of the Universe
+          </SideBarBreadcrumbsItem>
         </SideBarBreadcrumbs>
         <InnerLayout />
       </LayoutProvider>

diff --git a/...ges/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/SideBarBreadcrumbs.tsx b/...ges/libs/kode-ui/src/patterns/SideBarLayout/components/Breadcrumbs/SideBarBreadcrumbs.tsx
@@ -15,6 +15,7 @@ export const SideBarBreadcrumbs: FC<IBreadcrumbsProps> = ({
 
   return createPortal(
     <Breadcrumbs {...props}>{children}</Breadcrumbs>,
+
     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
@@ -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
@@ -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<IProps> = ({ minifiedLogo }) => {
             />
           </Stack>
         </Media>
-        <Stack ref={ref} style={{ gridArea: 'header-crumbs' }}></Stack>
+        <Stack className={crumbsWrapperClass} ref={ref}></Stack>
       </Stack>
     </header>
   );

diff --git 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<ISideBarItemProps> = ({
     const LinkWrapper = component ? component : Anchor;
     return (
       <LinkWrapper
-        onPress={handleLinkClick}
         aria-label={label}
         data-isactive={isActiveUrl(href)}
         className={sidebartreeItemClass({
@@ -67,7 +66,7 @@ export const SideBarItem: FC<ISideBarItemProps> = ({
   if (children) return children;
 
   return (
-    <li className={listItemClass}>
+    <li className={listItemClass} onClick={handleLinkClick}>
       <Media lessThan="md" style={{ flex: 1, display: 'flex' }}>
         {render(true)}
       </Media>

diff --git 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' },