Merge pull request #135 from blockscout/refactor-mode-toggler

refactoring

.nvmrc

+16

package.json

@@ -2,6 +2,11 @@
   "name": "block-scout",
   "version": "0.1.0",
   "private": true,
+  "homepage": "https://github.com/blockscout/frontend#readme",
+  "engines": {
+    "node": "16",
+    "npm": "8"
+  },
   "scripts": {
     "dev": "next dev",
     "build": "next build",

theme/components/Drawer.ts

@@ -3,7 +3,8 @@ import {
   createMultiStyleConfigHelpers,
   defineStyle,
 } from '@chakra-ui/styled-system';
-import { mode, runIfFn } from '@chakra-ui/theme-tools';
+import { mode } from '@chakra-ui/theme-tools';
+import { runIfFn } from '@chakra-ui/utils';
 
 const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(parts.keys);

theme/components/Modal.ts

@@ -4,7 +4,8 @@ import {
   createMultiStyleConfigHelpers,
   defineStyle,
 } from '@chakra-ui/styled-system';
-import { mode, runIfFn } from '@chakra-ui/theme-tools';
+import { mode } from '@chakra-ui/theme-tools';
+import { runIfFn } from '@chakra-ui/utils';
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);

theme/foundations/transition.ts

+const transitionDuration = {
+  'ultra-fast': '50ms',
+  faster: '100ms',
+  fast: '150ms',
+  normal: '200ms',
+  slow: '300ms',
+  slower: '400ms',
+  'ultra-slow': '500ms',
+};
+
+const transition = {
+  duration: transitionDuration,
+};
+
+export default transition;

theme/index.ts

@@ -5,6 +5,7 @@ import config from './config';
 import borders from './foundations/borders';
 import breakpoints from './foundations/breakpoints';
 import colors from './foundations/colors';
+import transition from './foundations/transition';
 import typography from './foundations/typography';
 import global from './global';
 
@@ -18,6 +19,7 @@ const overrides = {
     global,
   },
   breakpoints,
+  transition,
 };
 
 export default extendTheme(overrides);

theme/utils/getOutlinedFieldStyles.ts

@@ -35,7 +35,7 @@ export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
     _focusVisible: {
       zIndex: 1,
       borderColor: getColor(theme, fc),
-      boxShadow: '0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06)',
+      boxShadow: 'md',
     },
     _placeholder: {
       color: mode('blackAlpha.600', 'whiteAlpha.600')(props),

ui/blocks/header/ColorModeToggler.module.css

-.root {
-    display: inline-block;
-    position: relative;
-    vertical-align: middle;
-    line-height: 0;
-}
-
-.track {
-    width: 72px;
-    height: 32px;
-    background-color: rgba(16, 17, 18, 0.06);
-    border-radius: 16px;
-    display: inline-flex;
-    flex-shrink: 0;
-    justify-content: space-between;
-    box-sizing: content-box;
-    cursor: pointer;
-}
-
-.input {
-    border: 0px;
-    clip: rect(0px, 0px, 0px, 0px);
-    height: 1px;
-    width: 1px;
-    margin: -1px;
-    padding: 0px;
-    overflow: hidden;
-    white-space: nowrap;
-    position: absolute;
-}
-
-.thumb {
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-    width: 24px;
-    height: 24px;
-    border-radius: 12px;
-    position: absolute;
-    transform: translate(4px, 4px);
-}
-
-.thumb[data-checked] {
-    transform: translate(44px, 4px);
-}
-
-.nightIcon {
-    margin: 8px;
-    z-index: 5;
-}
-
-.dayIcon {
-    margin: 8px;
-    z-index: 5;
-}
\ No newline at end of file

ui/blocks/header/ColorModeToggler.tsx

@@ -18,8 +18,6 @@ import * as React from 'react';
 import moonIcon from 'icons/moon.svg';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
-import styles from './ColorModeToggler.module.css';
-
 export interface ColorModeTogglerProps
   extends Omit<UseCheckboxProps, 'isIndeterminate'>,
   Omit<HTMLChakraProps<'label'>, keyof UseCheckboxProps>,
@@ -42,44 +40,71 @@ const ColorModeToggler = forwardRef<ColorModeTogglerProps, 'input'>((props, ref)
 
   const trackStyles: SystemStyleObject = React.useMemo(() => ({
     bg: trackBg,
+    width: '72px',
+    height: '32px',
+    borderRadius: 'full',
+    display: 'inline-flex',
+    flexShrink: 0,
+    justifyContent: 'space-between',
+    boxSizing: 'content-box',
+    cursor: 'pointer',
     ...transitionProps,
-    transitionDuration: '500ms',
+    transitionDuration: 'ultra-slow',
   }), [ trackBg, transitionProps ]);
 
   const thumbStyles: SystemStyleObject = React.useMemo(() => ({
     bg: thumbBg,
+    boxShadow: 'md',
+    width: '24px',
+    height: '24px',
+    borderRadius: 'md',
+    position: 'absolute',
+    transform: state.isChecked ? 'translate(44px, 4px)' : 'translate(4px, 4px)',
     ...transitionProps,
     transitionProperty: 'background-color, transform',
-    transitionDuration: '500ms',
-  }), [ thumbBg, transitionProps ]);
+    transitionDuration: 'ultra-slow',
+  }), [ thumbBg, transitionProps, state.isChecked ]);
 
   return (
     <chakra.label
       { ...getRootProps({ onChange: toggleColorMode }) }
-      className={ styles.root }
+      display="inline-block"
+      position="relative"
+      verticalAlign="middle"
+      lineHeight={ 0 }
     >
-      <input className={ styles.input } { ...getInputProps({}, ref) }/>
+      <chakra.input
+        { ...getInputProps({}, ref) }
+        border="none"
+        height="1px"
+        width="1px"
+        margin="1px"
+        padding="0"
+        overflow="hidden"
+        whiteSpace="nowrap"
+        position="absolute"
+      />
       <chakra.div
         { ...getCheckboxProps() }
-        className={ styles.track }
         __css={ trackStyles }
       >
         <Icon
-          className={ styles.nightIcon }
           boxSize={ 4 }
+          margin={ 2 }
+          zIndex="docked"
           as={ moonIcon }
           color={ useColorModeValue('blue.600', 'white') }
           { ...transitionProps }
         />
         <chakra.div
-          className={ styles.thumb }
           data-checked={ dataAttr(state.isChecked) }
           data-hover={ dataAttr(state.isHovered) }
           __css={ thumbStyles }
         />
         <SunIcon
-          className={ styles.dayIcon }
           boxSize={ 4 }
+          margin={ 2 }
+          zIndex="docked"
           color={ useColorModeValue('gray.500', 'blue.600') }
           { ...transitionProps }
         />

ui/publicTags/PublicTagsForm/PublicTagsForm.tsx

@@ -82,7 +82,7 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
 
   const [ isAlertVisible, setAlertVisible ] = useState(false);
 
-  const onAddFieldClick = useCallback(() => append({ address: '' }), [ append ]);
+  const onAddFieldClick = useCallback(() => append({ address: '', name: '' }), [ append ]);
 
   const onRemoveFieldClick = useCallback((index: number) => () => remove(index), [ remove ]);