sidebar nav tmp

BoostIO · Apr 21, 2021 · e943dfc · e943dfc
1 parent 424a375
commit e943dfc
Show file tree

Hide file tree

Showing 26 changed files with 1,291 additions and 375 deletions.
diff --git a/src/components/atoms/TagNavigatorListItem.tsx b/src/components/atoms/TagNavigatorListItem.tsx
@@ -20,7 +20,8 @@ const TagItem = styled.li<BaseTheme & TagStyleProps>`
   border-radius: 4px;
   white-space: nowrap;
   position: relative;
-  ${({ theme, color }) => tagBackgroundColor({ theme, color })};
+  ${({ theme, color }) =>
+    tagBackgroundColor({ theme, color: color as string })};
   height: 24px;
   max-width: 140px;
   font-size: 14px;
@@ -37,7 +38,9 @@ const TagItemAnchor = styled.button<BaseTheme & TagStyleProps>`
   ${textOverflow};
   filter: invert(
     ${({ theme, color }) =>
-      isColorBright(color || theme.secondaryBackgroundColor) ? 100 : 0}%
+      isColorBright((color as string) || theme.secondaryBackgroundColor)
+        ? 100
+        : 0}%
   );
 `
 
@@ -50,7 +53,9 @@ const TagRemoveButton = styled.button<BaseTheme & TagStyleProps>`
   color: #fff;
   filter: invert(
     ${({ theme, color }) =>
-      isColorBright(color || theme.secondaryBackgroundColor) ? 100 : 0}%
+      isColorBright((color as string) || theme.secondaryBackgroundColor)
+        ? 100
+        : 0}%
   );
   width: 24px;
   height: 24px;

diff --git a/src/components/molecules/NoteItem.tsx b/src/components/molecules/NoteItem.tsx
@@ -105,7 +105,9 @@ const TagItemAnchor = styled.button<BaseTheme & TagStyleProps>`
   color: #fff;
   filter: invert(
     ${({ theme, color }) =>
-      isColorBright(color || theme.secondaryBackgroundColor) ? 100 : 0}%
+      isColorBright((color as string) || theme.secondaryBackgroundColor)
+        ? 100
+        : 0}%
   );
 `
 

diff --git a/src/components/v2/atoms/Button.tsx b/src/components/v2/atoms/Button.tsx
@@ -6,12 +6,13 @@ import React, {
 } from 'react'
 import cc from 'classcat'
 import styled from '../../../lib/v2/styled'
-import Icon from '@mdi/react'
+import Icon, { IconSize } from './Icon'
 
 export interface ButtonProps {
-  variant?: 'primary' | 'secondary' | 'danger'
+  variant?: 'primary' | 'secondary' | 'danger' | 'icon'
   size?: 'sm' | 'md' | 'lg'
   iconPath?: string
+  iconSize?: IconSize
   type?: 'button' | 'submit'
   className?: string
   disabled?: boolean
@@ -45,6 +46,7 @@ const Button = React.forwardRef<
       size = 'md',
       type = 'button',
       iconPath,
+      iconSize,
       disabled,
       className,
       tabIndex,
@@ -72,8 +74,8 @@ const Button = React.forwardRef<
         type={type}
         className={cc([
           className,
-          `button--variant-${variant}`,
-          size && `button--size-${size}`,
+          `button__variant__${variant}`,
+          size && `button__size__${size}`,
         ])}
         id={id}
         disabled={disabled}
@@ -95,7 +97,9 @@ const Button = React.forwardRef<
         onDrop={onDrop}
         ref={ref}
       >
-        {iconPath != null && <Icon className='button__icon' path={iconPath} />}
+        {iconPath != null && (
+          <Icon className='button__icon' size={iconSize} path={iconPath} />
+        )}
         {children != null && <div className='button__label'>{children}</div>}
       </StyledButton>
     )
@@ -107,9 +111,8 @@ export default Button
 const StyledButton = styled.div`
   padding: 0 10px;
   border-radius: 2px;
-  cursor: pointer;
   font-size: ${({ theme }) => theme.sizes.fonts.sm}px;
-  height: 36px;
+  height: 32px;
   outline: none;
   border-radius: 4px;
   border-color: transparent;
@@ -138,7 +141,7 @@ const StyledButton = styled.div`
     opacity: 0.5;
   }
 
-  &.button--variant-primary {
+  &.button__variant__primary {
     background-color: ${({ theme }) => theme.colors.variants.primary.base};
     color: ${({ theme }) => theme.colors.variants.primary.text};
 
@@ -150,7 +153,7 @@ const StyledButton = styled.div`
     }
   }
 
-  &.button--variant-secondary {
+  &.button__variant__secondary {
     background-color: ${({ theme }) => theme.colors.variants.secondary.base};
     color: ${({ theme }) => theme.colors.variants.secondary.text};
 
@@ -163,7 +166,7 @@ const StyledButton = styled.div`
     }
   }
 
-  &.button--variant-danger {
+  &.button__variant__danger {
     background-color: ${({ theme }) => theme.colors.variants.danger.base};
     color: ${({ theme }) => theme.colors.variants.danger.text};
     &:hover:not(:disabled),
@@ -174,13 +177,26 @@ const StyledButton = styled.div`
     }
   }
 
-  &.button--size-lg {
-    height: 44px;
+  &.button__variant__icon {
+    background: none;
+    border: 1px solid transparent;
+    color: ${({ theme }) => theme.colors.text.subtle};
+    padding: 0 3px !important;
+    &:hover:not(:disabled),
+    &:active:not(:disabled),
+    &:focus:not(:disabled),
+    &.active:not(:disabled) {
+      color: ${({ theme }) => theme.colors.text.main};
+    }
+  }
+
+  &.button__size__lg {
+    height: 40px;
     padding: 0 14px;
   }
 
-  &.button--size-sm {
-    height: 28px;
+  &.button__size__sm {
+    height: 24px;
     padding: 0 6px;
   }
 

diff --git a/src/components/v2/atoms/Icon.tsx b/src/components/v2/atoms/Icon.tsx
@@ -1,11 +1,13 @@
 import React from 'react'
 import { Icon as MdiIcon } from '@mdi/react'
+import cc from 'classcat'
+
+export type IconSize = 16 | 22
 
 interface IconProps {
   path: string
   color?: string
-  size?: 20
-  style?: React.CSSProperties
+  size?: IconSize
   className?: string
   spin?: boolean
 }
@@ -14,7 +16,6 @@ const Icon = ({
   path,
   color = 'currentColor',
   size,
-  style,
   className,
   spin,
 }: IconProps) => (
@@ -30,10 +31,9 @@ const Icon = ({
             width: `${size}px`,
             height: `${size}px`,
           }),
-      ...style,
     }}
     color={color}
-    className={className}
+    className={cc(['icon', className])}
     spin={spin}
   />
 )

diff --git a/src/components/v2/atoms/PromiseWrapper.tsx b/src/components/v2/atoms/PromiseWrapper.tsx
@@ -1,5 +1,7 @@
 import React, { useCallback, useState } from 'react'
 import { useEffectOnce } from 'react-use'
+import styled from '../../../lib/v2/styled'
+import Spinner from './Spinner'
 
 interface PromiseWrapper<T extends Record<string, any>, P> {
   promise: () => Promise<T>
@@ -43,7 +45,11 @@ const PromiseWrapper = <
   }, [fetching, setFetching, setError, call])
 
   if (fetching) {
-    return <div>fetching</div>
+    return (
+      <Container>
+        <Spinner />
+      </Container>
+    )
   }
 
   if (error != null || props == null) {
@@ -55,3 +61,12 @@ const PromiseWrapper = <
 }
 
 export default PromiseWrapper
+
+const Container = styled.div`
+  display: block;
+  width: 100%;
+  height: auto;
+  padding: ${({ theme }) => theme.sizes.spaces.sm}px
+    ${({ theme }) => theme.sizes.spaces.md}px;
+  text-align: center;
+`
diff --git a/src/components/v2/atoms/Spinner.tsx b/src/components/v2/atoms/Spinner.tsx
@@ -0,0 +1,25 @@
+import { keyframes } from 'styled-components'
+import styled from '../../../lib/v2/styled'
+
+const rotate = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`
+
+const Spinner = styled.div`
+  border-style: solid;
+  border-color: ${({ theme }) => theme.colors.variants.primary.base};
+  border-right-color: transparent;
+  border-width: 2px;
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  border-radius: 50%;
+  animation: ${rotate} 0.75s linear infinite;
+`
+
+export default Spinner
diff --git a/src/components/v2/organisms/GlobalStyle.tsx b/src/components/v2/organisms/GlobalStyle.tsx
@@ -25,6 +25,9 @@ button {
   }
 }
 
+.icon {
+  transition: 100ms color;
+}
     
 /* total width */
 scrollbar-width: 8px;
@@ -35,12 +38,12 @@ scrollbar-width: 8px;
 
 /* background of the scrollbar except button or resizer */
 ::-webkit-scrollbar-track {
-  background-color: ${theme.colors.variants.secondary.darker};
+  background-color: ${theme.colors.background.gradients.first};
 }
 
 /* scrollbar itself */
 ::-webkit-scrollbar-thumb {
-  background-color: ${theme.colors.text.subtle};
+  background-color: ${theme.colors.background.gradients.second};
 }
 
 /* set button(top and bottom of the scrollbar) */
@@ -75,8 +78,11 @@ export default createGlobalStyle<BaseTheme>`
       outline: none;
     }
   }
-  
-    
+
+  .icon {
+    transition: 100ms color;
+  }
+
   /* total width */
   scrollbar-width: 8px;
   ::-webkit-scrollbar {
@@ -86,12 +92,14 @@ export default createGlobalStyle<BaseTheme>`
 
   /* background of the scrollbar except button or resizer */
   ::-webkit-scrollbar-track {
-    background-color: ${({ theme }) => theme.colors.variants.secondary.darker};
+    background-color: ${({ theme }) =>
+      theme.colors.background.gradients.first}};
   }
 
   /* scrollbar itself */
   ::-webkit-scrollbar-thumb {
-    background-color: ${({ theme }) => theme.colors.text.subtle};
+    background-color: ${({ theme }) =>
+      theme.colors.background.gradients.second};
   }
 
   /* set button(top and bottom of the scrollbar) */