chore: update buttons ui and support dark mode

push-protocol · Jul 1, 2024 · 0514ec9 · 0514ec9
1 parent 258f0ce
commit 0514ec9
Show file tree

Hide file tree

Showing 6 changed files with 167 additions and 162 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -370,12 +370,7 @@ export default function App() {
  />
  </HeaderContainer>
 
- <ParentContainer
- bg={
- darkMode ? themeDark.backgroundBG : !isActive ? themeLight.connectWalletBg : themeLight.backgroundBG
- }
- headerHeight={GLOBALS.CONSTANTS.HEADER_HEIGHT}
- >
+ <ParentContainer headerHeight={GLOBALS.CONSTANTS.HEADER_HEIGHT}>
  {!isSnapPage && (
  <LeftBarContainer
  leftBarWidth={

diff --git a/src/blocks/button/Button.constants.ts b/src/blocks/button/Button.constants.ts
@@ -1,150 +1,165 @@
 import { FlattenSimpleInterpolation, css } from 'styled-components';
-import { ButtonSize, ButtonVariantStyles } from './Button.types';
-
-export const buttonVariantStyles: ButtonVariantStyles = {
- primary: `
- background-color: var(--pink-400);
- color: var(--white);
-
- &:hover {
- background-color: var(--pink-400);
- }
-
- &:active {
- background-color: var(--pink-800);
- }
-
- &:focus-visible {
- border: 1px solid var(--pink-300);
- outline: none;
- }
-
- &:disabled {
- background-color: var(--gray-200);
- color: var(--gray-300);
- }
- `,
- secondary: `
- background-color: var(--gray-100);
- color: var(--gray-1000);
-
- &:hover {
- background-color: var(--gray-200);
- }
-
- &:active {
- background-color: var(--gray-300);
- }
-
- &:focus-visible {
- background-color: var(--pink-100);
- border: 1px solid var(--pink-300);
- outline: none;
- }
-
- &:disabled {
- background-color: var(--gray-200);
- color: var(--gray-300);
- }
- `,
- tertiary: `
- background-color: var(--gray-1000);
- color: var(--white);
-
- &:hover {
- background-color: var(--gray-900);
- }
-
- &:active {
- background-color: var(--gray-100);
- color: var(--gray-1000);
+import { ButtonSize, ButtonVariant } from './Button.types';
+import { ThemeMode } from 'blocks/Blocks.types';
+import { getBlocksColor } from 'blocks/Blocks.utils';
+
+export const getButtonVariantStyles = (mode: ThemeMode, variant: ButtonVariant) => {
+ switch (variant) {
+ case 'primary': {
+ return `
+ background-color: var(--pink-500);
+ color: var(--white);
+
+ &:hover {
+ background-color: var(--pink-400);
+ }
+
+ &:active {
+ background-color: ${getBlocksColor(mode, { light: 'pink-800', dark: 'pink-600' })};
+ }
+
+ &:focus-visible {
+ background-color: ${getBlocksColor(mode, { light: 'pink-500', dark: 'pink-400' })};
+ border: 1px solid ${getBlocksColor(mode, { light: 'pink-700', dark: 'pink-200' })};
+ outline: none;
+ }
+
+ &:disabled {
+ background-color: ${getBlocksColor(mode, { light: 'gray-200', dark: 'gray-800' })};
+ color: ${getBlocksColor(mode, { light: 'gray-300', dark: 'gray-700' })};
+ }
+ `;
  }
-
- &:focus-visible {
- border: 1px solid var(--pink-300);
- background-color: var(--pink-100);
- color: var(--gray-1000);
- outline: none;
- }
-
- &:disabled {
- background-color: var(--gray-200);
- color: var(--gray-300);
- }
- `,
- danger: `
- background-color: var(--red-600);
- color: var(--white);
-
- &:hover {
- background-color: var(--red-500);
- }
-
- &:active {
- background-color: var(--red-800);
- }
-
- &:focus-visible {
- background-color: var(--red-500);
- border: 1px solid var(--red-300);
- outline: none;
- }
- 
- &:disabled {
- background-color: var(--gray-200);
- color: var(--gray-300);
+ case 'secondary': {
+ return `
+ background-color: ${getBlocksColor(mode, { light: 'gray-100', dark: 'gray-800' })};
+ color: ${getBlocksColor(mode, { light: 'gray-1000', dark: 'white' })};
+
+ &:hover {
+ background-color: ${getBlocksColor(mode, { light: 'gray-200', dark: 'gray-700' })};
+ }
+
+ &:active {
+ background-color: ${getBlocksColor(mode, { light: 'gray-300', dark: 'gray-1000' })};
+ }
+
+ &:focus-visible {
+ background-color: ${getBlocksColor(mode, { light: 'gray-100', dark: 'gray-800' })};
+ border: 1px solid ${getBlocksColor(mode, { light: 'pink-300', dark: 'pink-400' })};
+ outline: none;
+ }
+
+ &:disabled {
+ background-color: ${getBlocksColor(mode, { light: 'gray-200', dark: 'gray-800' })};
+ color: ${getBlocksColor(mode, { light: 'gray-300', dark: 'gray-700' })};
+ }
+ `;
  }
- `,
- dangerSecondary: `
- background-color: var(--red-200);
- color: var(--red-700);
-
- &:hover {
- background-color: var(--red-100);
- }
-
- &:active {
- background-color: var(--red-500);
- color: var(--red-700);
- }
-
- &:focus-visible {
- background-color: var(--red-100);
- border: 1px solid var(--red-300);
- outline: none;
+ case 'tertiary': {
+ return `
+ background-color: ${getBlocksColor(mode, { light: 'gray-1000', dark: 'gray-700' })};
+ color: var(--white);
+
+ &:hover {
+ color: ${getBlocksColor(mode, { light: 'white', dark: 'gray-200' })};
+ background-color: ${getBlocksColor(mode, { light: 'gray-900', dark: 'gray-300' })};
+ }
+
+ &:active {
+ background-color: ${getBlocksColor(mode, { light: 'gray-100', dark: 'gray-1000' })};
+ color: ${getBlocksColor(mode, { light: 'gray-1000', dark: 'white' })};
+ }
+
+ &:focus-visible {
+ border: 1px solid ${getBlocksColor(mode, { light: 'pink-300', dark: 'pink-400' })};
+ background-color: ${getBlocksColor(mode, { light: 'gray-1000', dark: 'gray-700' })};
+ color: ${getBlocksColor(mode, { light: 'white', dark: 'gray-200' })};
+ outline: none;
+ }
+
+ &:disabled {
+ background-color: ${getBlocksColor(mode, { light: 'gray-200', dark: 'gray-800' })};
+ color: ${getBlocksColor(mode, { light: 'gray-300', dark: 'gray-700' })};
+ }
+ `;
  }
- 
- &:disabled {
- background-color: var(--gray-200);
- color: var(--gray-300);
+ case 'danger': {
+ return `
+ background-color: ${getBlocksColor(mode, { light: 'red-600', dark: 'red-500' })};
+ color: var(--white);
+
+ &:hover {
+ background-color: ${getBlocksColor(mode, { light: 'red-500', dark: 'red-400' })};
+ }
+
+ &:active {
+ background-color: ${getBlocksColor(mode, { light: 'red-800', dark: 'red-700' })};
+ }
+
+ &:focus-visible {
+ background-color: ${getBlocksColor(mode, { light: 'red-500', dark: 'red-400' })};
+ border: 1px solid ${getBlocksColor(mode, { light: 'red-800', dark: 'red-600' })};
+ outline: none;
+ }
+ 
+ &:disabled {
+ background-color: ${getBlocksColor(mode, { light: 'gray-200', dark: 'gray-800' })};
+ color: ${getBlocksColor(mode, { light: 'gray-300', dark: 'gray-700' })};
+ }
+ `;
  }
- `,
- outline: `
- background-color: var(--white);
- border: 1px solid var(--gray-300);
- color: var(--gray-1000);
-
- &:hover {
- background-color: var(--white);
+ case 'dangerSecondary': {
+ return `
+ background-color: ${getBlocksColor(mode, { light: 'red-200', dark: 'red-800' })};
+ color: ${getBlocksColor(mode, { light: 'red-700', dark: 'white' })};
+
+ &:hover {
+ background-color: ${getBlocksColor(mode, { light: 'red-100', dark: 'red-700' })};
+ }
+
+ &:active {
+ background-color: ${getBlocksColor(mode, { light: 'red-500', dark: 'red-1000' })};
+ }
+
+ &:focus-visible {
+ background-color: ${getBlocksColor(mode, { light: 'red-100', dark: 'red-700' })};
+ border: 1px solid ${getBlocksColor(mode, { light: 'red-800', dark: 'red-400' })};
+ outline: none;
+ }
+ 
+ &:disabled {
+ background-color: ${getBlocksColor(mode, { light: 'gray-200', dark: 'gray-800' })};
+ color: ${getBlocksColor(mode, { light: 'gray-300', dark: 'gray-700' })};
+ }
+ `;
  }
-
- &:active {
- background-color: var(--white);
- border: 1px solid var(--gray-600);
- }
-
- &:focus-visible {
- background-color: var(--white);
- border: 1px solid var(--pink-300);
- outline: none;
+ case 'outline': {
+ return `
+ background-color: transparent;
+ border: 1px solid ${getBlocksColor(mode, { light: 'gray-300', dark: 'gray-700' })};
+ color: ${getBlocksColor(mode, { light: 'gray-1000', dark: 'gray-100' })};
+ outline: none;
+
+ &:hover {
+ border: 1px solid ${getBlocksColor(mode, { light: 'pink-300', dark: 'gray-800' })};
+ }
+
+ &:active {
+ border: 1px solid ${getBlocksColor(mode, { light: 'gray-600', dark: 'gray-300' })};
+ }
+
+ &:focus-visible {
+ border: 1px solid ${getBlocksColor(mode, { light: 'pink-300', dark: 'pink-400' })};
+ }
+ 
+ &:disabled {
+ border: none;
+ background-color: ${getBlocksColor(mode, { light: 'gray-200', dark: 'gray-800' })};
+ color: ${getBlocksColor(mode, { light: 'gray-300', dark: 'gray-700' })};
+ }
+ `;
  }
- 
- &:disabled {
- border: none;
- background-color: var(--gray-200);
- color: var(--gray-300);
- }
- `,
+ }
 };
 
 export const getButtonSizeStyles = ({

diff --git a/src/blocks/button/Button.tsx b/src/blocks/button/Button.tsx
@@ -1,8 +1,9 @@
 import { ReactNode, forwardRef } from 'react';
 import styled, { FlattenSimpleInterpolation } from 'styled-components';
-import { getButtonSizeStyles, buttonVariantStyles } from './Button.constants';
-import { TransformedHTMLAttributes } from '../Blocks.types';
-import { ButtonSize, ButtonVariant } from './Button.types';
+import { getButtonSizeStyles, getButtonVariantStyles } from './Button.constants';
+import type { ModeProp, TransformedHTMLAttributes } from '../Blocks.types';
+import type { ButtonSize, ButtonVariant } from './Button.types';
+import { useBlocksTheme } from 'blocks/Blocks.hooks';
 
 export type ButtonProps = {
  /* Child react nodes rendered by Box */
@@ -25,7 +26,7 @@ export type ButtonProps = {
  variant?: ButtonVariant;
 } & TransformedHTMLAttributes<HTMLButtonElement>;
 
-const StyledButton = styled.button<ButtonProps>`
+const StyledButton = styled.button<ButtonProps & ModeProp>`
  /* Common Button CSS */
 
  align-items: center;
@@ -43,7 +44,7 @@ const StyledButton = styled.button<ButtonProps>`
  }
 
  /* Button variant CSS styles */
- ${(props) => buttonVariantStyles[props.variant || 'primary']}
+ ${({ mode, variant }) => getButtonVariantStyles(mode, variant || 'primary')}
 
  /* Button and font size CSS styles */
  ${({ iconOnly, size }) => getButtonSizeStyles({ iconOnly: !!iconOnly, size: size || 'medium' })}
@@ -70,6 +71,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  },
  ref
  ) => {
+ const { mode } = useBlocksTheme();
  return (
  <StyledButton
  {...(disabled ? { 'aria-disabled': true } : {})}
@@ -80,6 +82,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ref={ref}
  size={size}
  variant={variant}
+ mode={mode}
  {...props}
  >
  {leadingIcon && <span className="icon icon-text">{leadingIcon}</span>}

diff --git a/src/blocks/button/Button.types.ts b/src/blocks/button/Button.types.ts
@@ -1,5 +1,3 @@
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'dangerSecondary' | 'outline';
 
 export type ButtonSize = 'extraSmall' | 'small' | 'medium' | 'large';
-
-export type ButtonVariantStyles = Record<ButtonVariant, string>;
diff --git a/src/config/Themization.js b/src/config/Themization.js
@@ -313,7 +313,7 @@ const themeDark = {
 
  // Default Theme
  default: {
- bg: '#2F3137',
+ bg: '#202124',
  secondaryBg: '#282A2E',
  border: '#4A4F67',
  color: '#FFF',
@@ -332,12 +332,12 @@ const themeDark = {
 
  // Header Theme
  header: {
- bg: '#212228', // alt color to try - #F4F5FA, #FFF
+ bg: '#17181B', // alt color to try - #F4F5FA, #FFF
  },
 
  // Navigation Theme
  nav: {
- bg: '#212228', // alt color to try - #212228, #2F3137
+ bg: '#17181B', // alt color to try - #212228, #2F3137
  hamburgerBg: '#00000066',
  color: '#B6BCD6',
  activeColor: '#404650',