feat: sidebar colors borders adjusted

kadena-community · Nov 9, 2023 · a76b723 · a76b723
1 parent a4180e5
commit a76b723
Show file tree

Hide file tree

Showing 16 changed files with 197 additions and 73 deletions.
diff --git a/packages/apps/tools/src/components/Common/DrawerToolbar/DrawerIcon.tsx b/packages/apps/tools/src/components/Common/DrawerToolbar/DrawerIcon.tsx
@@ -0,0 +1,40 @@
+import { gridMiniMenuListButtonStyle } from '@/components/Common/Layout/partials/Sidebar/styles.css';
+import { SystemIcon } from '@kadena/react-ui';
+import Link from 'next/link';
+import type { ButtonHTMLAttributes, FC } from 'react';
+import React from 'react';
+
+export interface IMenuButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  title?: string;
+  href?: string;
+  active?: boolean;
+  icon: keyof typeof SystemIcon;
+  rotateClass?: string;
+}
+
+export const DrawerIconButton: FC<IMenuButtonProps> = ({
+  active,
+  title,
+  href,
+  icon,
+  rotateClass,
+  ...rest
+}) => {
+  const Icon = SystemIcon[icon];
+
+  const button = (
+    <>
+      <button
+        className={gridMiniMenuListButtonStyle}
+        {...rest}
+        aria-label={title}
+      >
+        <Icon size={'sm'} />
+      </button>
+    </>
+  );
+
+  if (href) return <Link href={href}>{button}</Link>;
+  return button;
+};
diff --git a/packages/apps/tools/src/components/Common/DrawerToolbar/index.tsx b/packages/apps/tools/src/components/Common/DrawerToolbar/index.tsx
@@ -1,3 +1,4 @@
+import { DrawerIconButton } from '@/components/Common/DrawerToolbar/DrawerIcon';
 import type { SystemIcon } from '@kadena/react-ui';
 import { IconButton, Text } from '@kadena/react-ui';
 import classNames from 'classnames';
@@ -54,9 +55,8 @@ export const DrawerToolbar: ForwardRefExoticComponent<
           {/* eslint-disable-next-line @typescript-eslint/naming-convention */}
           {sections.map(({ icon, title }, index) => (
             <div className={buttonWrapperClass} key={title}>
-              <IconButton
+              <DrawerIconButton
                 icon={icon}
-                title={title}
                 onClick={() => handleOpenSection(index)}
               />
             </div>

diff --git a/packages/apps/tools/src/components/Common/DrawerToolbar/styles.css.ts b/packages/apps/tools/src/components/Common/DrawerToolbar/styles.css.ts
@@ -8,7 +8,7 @@ export const gridItemCollapsedSidebarStyle = style([
     top: '$16',
     bottom: 0,
     backgroundColor: '$neutral1',
-    width: '$16',
+    width: '$12',
     zIndex: 1,
   }),
   {
@@ -24,10 +24,11 @@ export const gridItemCollapsedSidebarStyle = style([
 
 export const buttonWrapperClass = style([
   sprinkles({
-    paddingTop: '$3',
-    paddingBottom: '$3',
-    paddingLeft: '$2',
-    paddingRight: '$2',
+    outline: 'none',
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    color: '$gray50',
   }),
   {
     borderBottom: `solid 1px ${vars.colors.$borderSubtle}`,

diff --git a/packages/apps/tools/src/components/Common/Layout/index.tsx b/packages/apps/tools/src/components/Common/Layout/index.tsx
@@ -3,7 +3,12 @@ import classNames from 'classnames';
 import type { FC, ReactNode } from 'react';
 import React from 'react';
 import { Header, Sidebar } from './partials';
-import { gridItemMainStyle, headerStyle, sidebarStyle } from './styles.css';
+import {
+  gridItemMainStyle,
+  headerStyle,
+  mainStyle,
+  sidebarStyle,
+} from './styles.css';
 
 interface IProps {
   children?: ReactNode;
@@ -20,8 +25,10 @@ export const Layout: FC<IProps> = ({ children }: IProps) => {
       <aside className={classNames(sidebarStyle, { isMenuOpen })}>
         <Sidebar />
       </aside>
-      <main className={classNames(gridItemMainStyle, { isMenuOpen })}>
-        {children}
+      <main className={mainStyle}>
+        <div className={classNames(gridItemMainStyle, { isMenuOpen })}>
+          {children}
+        </div>
       </main>
     </div>
   );

diff --git a/packages/apps/tools/src/components/Common/Layout/partials/Sidebar/MenuButton.tsx b/packages/apps/tools/src/components/Common/Layout/partials/Sidebar/MenuButton.tsx
@@ -48,7 +48,7 @@ export const MenuButton: FC<IMenuButtonProps> = ({
         {...rest}
         aria-label={title}
       >
-        <Icon />
+        <Icon size={'sm'} />
       </button>
       {!!title && (
         <Tooltip.Root placement="right" ref={tooltipRef}>

diff --git a/packages/apps/tools/src/components/Common/Layout/partials/Sidebar/MenuLinkButton.tsx b/packages/apps/tools/src/components/Common/Layout/partials/Sidebar/MenuLinkButton.tsx
@@ -31,6 +31,11 @@ export const MenuLinkButton: FC<IMenuLinkButtonProps> = ({
     </>
   );
 
-  if (href) return <Link href={href}>{button}</Link>;
+  if (href)
+    return (
+      <Link href={href} target={target}>
+        {button}
+      </Link>
+    );
   return button;
 };
diff --git a/packages/apps/tools/src/components/Common/Layout/partials/Sidebar/index.tsx b/packages/apps/tools/src/components/Common/Layout/partials/Sidebar/index.tsx
@@ -1,15 +1,13 @@
-import classNames from 'classnames';
 import type { FC } from 'react';
 import React from 'react';
 import { Menu } from './Menu';
 import { Toolbar } from './Toolbar';
-import { sidebarClass } from './styles.css';
 
 export const Sidebar: FC = () => {
   return (
-    <div className={classNames(sidebarClass)}>
+    <>
       <Toolbar />
       <Menu />
-    </div>
+    </>
   );
 };
diff --git a/packages/apps/tools/src/components/Common/Layout/partials/Sidebar/styles.css.ts b/packages/apps/tools/src/components/Common/Layout/partials/Sidebar/styles.css.ts
@@ -1,21 +1,6 @@
 import { darkThemeClass, sprinkles, vars } from '@kadena/react-ui/theme';
 import { style } from '@vanilla-extract/css';
 
-export const sidebarClass = style([
-  sprinkles({
-    position: 'fixed',
-    left: 0,
-    top: '$16',
-    bottom: 0,
-    backgroundColor: '$neutral1',
-    display: 'flex',
-    zIndex: 1,
-  }),
-  {
-    borderRight: `1px solid ${vars.colors.$borderSubtle}`,
-  },
-]);
-
 export const gridItemMiniMenuStyle = style([
   {
     height: '100%',
@@ -30,12 +15,10 @@ export const gridMiniMenuListButtonStyle = style([
     background: 'none',
     border: 'none',
     cursor: 'pointer',
-    padding: '$5',
+    padding: '$4',
     color: '$gray50',
   }),
   {
-    transition: 'width 0.1s ease',
-    width: '100%',
     selectors: {
       [`${darkThemeClass} &:hover`]: {
         color: vars.colors.$white,
@@ -71,8 +54,12 @@ export const gridMiniMenuLinkButtonStyle = style([
   }),
   {
     width: '100%',
-    borderBottom: `1px solid ${vars.colors.$borderDefault}`,
+    borderBottom: `1px solid #E3E1E5`,
+
     selectors: {
+      [`${darkThemeClass} &`]: {
+        borderBottom: `1px solid #27232999`,
+      },
       [`${darkThemeClass} &:hover`]: {
         color: vars.colors.$white,
       },
@@ -99,7 +86,12 @@ export const gridMiniMenuLinkButtonStyle = style([
 ]);
 export const gridMiniMenuListItemStyle = style([
   {
-    borderBottom: `1px solid ${vars.colors.$borderSubtle}`,
+    borderBottom: `1px solid #E3E1E5`,
+    selectors: {
+      [`${darkThemeClass} &`]: {
+        borderBottom: `1px solid #27232999`,
+      },
+    },
   },
 ]);
 
@@ -119,14 +111,23 @@ export const bottomIconsContainerStyle = style([
     bottom: 0,
   }),
   {
-    borderTop: `1px solid ${vars.colors.$borderSubtle}`,
+    borderTop: `1px solid #E3E1E5`,
+    selectors: {
+      [`${darkThemeClass} &`]: {
+        borderTop: `1px solid #27232999`,
+      },
+    },
   },
 ]);
 
 export const gridItemMenuStyle = style([
   {
-    width: `calc(${vars.sizes.$64} + ${vars.sizes.$6})`,
-    borderLeft: `1px solid ${vars.colors.$borderSubtle}`,
+    borderLeft: `1px solid #E3E1E5`,
+    selectors: {
+      [`${darkThemeClass} &`]: {
+        borderLeft: `1px solid #27232999`,
+      },
+    },
   },
 ]);
 
@@ -137,11 +138,17 @@ export const subMenuTitleClass = style([
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingX: '$4',
+    paddingX: '$3',
   }),
   {
-    borderBottom: `1px solid ${vars.colors.$borderSubtle}`,
-    padding: '0.625rem 1rem',
+    padding: '0.125rem 1rem',
+    borderBottom: `1px solid #E3E1E5`,
+
+    selectors: {
+      [`${darkThemeClass} &`]: {
+        borderBottom: `1px solid #27232999`,
+      },
+    },
   },
 ]);
 
@@ -159,7 +166,14 @@ export const iconRightStyle = style([
 
 export const subMenuContentStyle = style([
   sprinkles({
-    backgroundColor: '$neutral2',
     height: '100%',
   }),
+  {
+    backgroundColor: '#F5F2F7',
+    selectors: {
+      [`${darkThemeClass} &`]: {
+        backgroundColor: '#171519',
+      },
+    },
+  },
 ]);
diff --git a/packages/apps/tools/src/components/Common/Layout/styles.css.ts b/packages/apps/tools/src/components/Common/Layout/styles.css.ts
@@ -1,4 +1,4 @@
-import { sprinkles, vars } from '@kadena/react-ui/theme';
+import { darkThemeClass, sprinkles, vars } from '@kadena/react-ui/theme';
 import { style } from '@vanilla-extract/css';
 
 export const headerStyle = style([
@@ -11,34 +11,70 @@ export const headerStyle = style([
   }),
 ]);
 
+export const mainStyle = style([
+  sprinkles({
+    width: '100%',
+  }),
+  {
+    backgroundColor: '#E3E1E5',
+    selectors: {
+      [`${darkThemeClass} &`]: {
+        backgroundColor: '#272329',
+      },
+    },
+  },
+]);
+
 export const gridItemMainStyle = style([
   sprinkles({
     paddingTop: '$20',
     paddingBottom: '$16',
     paddingRight: '$6',
-    width: 'max-content',
+    width: '100%',
   }),
   {
+    // width: `calc(${vars.sizes.$20} + ${vars.sizes.$8} + 680px)`,
+    width: 'auto',
     paddingLeft: `calc(${vars.sizes.$20} + ${vars.sizes.$2})`,
+    borderRight: `1px solid #E3E1E5`,
     selectors: {
+      [`${darkThemeClass} &`]: {
+        borderRight: `1px solid #27232999`,
+      },
+
       '&.isMenuOpen': {
-        width: `calc(${vars.sizes.$20} + ${vars.sizes.$2}) + 680px`,
+        // width: `calc(${vars.sizes.$64} + ${vars.sizes.$20} + ${vars.sizes.$12} + 680px)`,
+        width: 'auto',
         paddingLeft: `calc(${vars.sizes.$64} + ${vars.sizes.$20} + ${vars.sizes.$6})`,
-        borderRight: `1px solid ${vars.colors.$borderSubtle}`,
+      },
+      [`${darkThemeClass} &.isMenuOpen`]: {
+        borderRight: `1px solid #27232999`,
       },
     },
   },
 ]);
 
 export const sidebarStyle = style([
   sprinkles({
-    width: '$16',
+    position: 'fixed',
+    left: 0,
+    top: '$16',
+    bottom: 0,
+    backgroundColor: '$neutral1',
+    display: 'flex',
+    overflow: 'hidden',
+    zIndex: 1,
+    width: '$12',
   }),
   {
-    transition: 'width 0.1s ease',
+    transition: 'width 0.1s ease-in',
+    borderRight: `1px solid #E3E1E5`,
     selectors: {
       '&.isMenuOpen': {
-        width: `calc(${vars.sizes.$64} + ${vars.sizes.$35})`,
+        width: `calc(${vars.sizes.$64} + ${vars.sizes.$20})`,
+      },
+      [`${darkThemeClass} &`]: {
+        borderRight: `1px solid #27232999`,
       },
     },
   },

diff --git a/packages/apps/tools/src/pages/faucet/existing/index.tsx b/packages/apps/tools/src/pages/faucet/existing/index.tsx
@@ -27,15 +27,12 @@ import type { FC } from 'react';
 import React, { useCallback, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import * as z from 'zod';
-import {
-  buttonContainerClass,
-  containerClass,
-  notificationContainerStyle,
-} from './styles.css';
+import { buttonContainerClass, notificationContainerStyle } from './styles.css';
 
 import {
   accountNameContainerClass,
   chainSelectContainerClass,
+  containerClass,
   inputContainerClass,
 } from '../styles.css';
 

diff --git a/packages/apps/tools/src/pages/faucet/existing/styles.css.ts b/packages/apps/tools/src/pages/faucet/existing/styles.css.ts
@@ -1,14 +1,8 @@
 import { sprinkles } from '@kadena/react-ui/theme';
 import { style } from '@vanilla-extract/css';
 
-export const containerClass = style([
-  {
-    width: '680px',
-  },
-]);
-
 export const buttonContainerClass = style([
-  { display: 'flex', flexDirection: 'row-reverse' },
+  sprinkles({ display: 'flex', flexDirection: 'row-reverse' }),
 ]);
 export const notificationContainerStyle = style([
   sprinkles({ fontSize: '$xs', marginY: '$6' }),