style(ui): web ui refinement (#879)

* style(ui): web ui refinement

web ui refinement

* style(ui): shadow update

shadow update

packages/ui/src/components/AppContent/index.module.scss

@@ -69,5 +69,7 @@ body {
     min-height: 640px;
     position: relative;
     padding: _.unit(6);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-3);
   }
 }

packages/ui/src/components/Button/IconButton.module.scss

@@ -0,0 +1,30 @@
+@use '@/scss/underscore' as _;
+
+.iconButton {
+  border: none;
+  outline: none;
+  background: none;
+  border-color: none;
+  border-radius: 6px;
+  transition: background 0.2s ease-in-out;
+  padding: _.unit(1);
+  @include _.flex-column;
+  cursor: pointer;
+
+  > svg {
+    color: var(--color-icon);
+  }
+}
+
+
+:global(body.desktop) {
+  .iconButton {
+    &:active {
+      background: var(--color-pressed);
+    }
+
+    &:hover:not(:active) {
+      background: var(--color-hover);
+    }
+  }
+}

packages/ui/src/components/Button/IconButton.tsx

@@ -0,0 +1,16 @@
+import classNames from 'classnames';
+import React, { HTMLProps, forwardRef, Ref } from 'react';
+
+import * as styles from './IconButton.module.scss';
+
+export type Props = Omit<HTMLProps<HTMLButtonElement>, 'type'>;
+
+const IconButton = ({ children, className, ...rest }: Props, ref: Ref<HTMLButtonElement>) => {
+  return (
+    <button ref={ref} type="button" className={classNames(styles.iconButton, className)} {...rest}>
+      {children}
+    </button>
+  );
+};
+
+export default forwardRef<HTMLButtonElement, Props>(IconButton);

packages/ui/src/components/ConfirmModal/AcModal.tsx

@@ -5,6 +5,7 @@ import ReactModal from 'react-modal';
 
 import CloseIcon from '@/assets/icons/close-icon.svg';
 import Button from '@/components/Button';
+import IconButton from '@/components/Button/IconButton';
 
 import * as modalStyles from '../../scss/modal.module.scss';
 import * as styles from './Acmodal.module.scss';
@@ -32,7 +33,9 @@ const AcModal = ({
       <div className={styles.container}>
         <div className={styles.header}>
           {t('description.reminder')}
-          <CloseIcon onClick={onClose} />
+          <IconButton onClick={onClose}>
+            <CloseIcon />
+          </IconButton>
         </div>
         <div className={styles.content}>{children}</div>
         <div className={styles.footer}>

packages/ui/src/components/ConfirmModal/Acmodal.module.scss

@@ -15,8 +15,8 @@
 
 .container {
   background: var(--color-dialogue);
-  border-radius: var(--radius);
   border: _.border(var(--color-divider));
+  border-radius: 16px;
   padding: _.unit(6);
 }
 
@@ -27,8 +27,7 @@
   justify-content: space-between;
   margin-bottom: _.unit(4);
 
-  > svg {
-    color: var(--color-icon);
+  svg {
     width: 24px;
     height: 24px;
   }
@@ -49,6 +48,6 @@
   }
 
   > button:first-child {
-    margin-right: _.unit(4);
+    margin-right: _.unit(3);
   }
 }

packages/ui/src/components/Drawer/index.module.scss

@@ -13,7 +13,7 @@
   align-items: center;
   margin-bottom: _.unit(4);
 
-  > svg {
+  svg {
     color: var(--color-icon);
     width: 20px;
     height: 20px;

packages/ui/src/components/Drawer/index.tsx

@@ -5,6 +5,7 @@ import ReactModal from 'react-modal';
 import CloseIcon from '@/assets/icons/close-icon.svg';
 
 import * as modalStyles from '../../scss/modal.module.scss';
+import IconButton from '../Button/IconButton';
 import * as styles from './index.module.scss';
 
 type Props = {
@@ -28,7 +29,9 @@ const Drawer = ({ className, isOpen = false, children, onClose }: Props) => {
     >
       <div className={styles.container}>
         <div className={styles.header}>
-          <CloseIcon onClick={onClose} />
+          <IconButton onClick={onClose}>
+            <CloseIcon />
+          </IconButton>
         </div>
         {children}
       </div>

packages/ui/src/containers/SocialSignIn/PrimarySocialSignIn.module.scss

@@ -9,9 +9,10 @@
 }
 
 .expandIcon {
-  color: var(--color-icon);
-  width: 20px;
-  height: 20px;
+  > svg {
+    width: 20px;
+    height: 20px;
+  }
 
   &.expanded {
     transform: rotate(180deg);

packages/ui/src/containers/SocialSignIn/PrimarySocialSignIn.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import React, { useState, useMemo } from 'react';
 
 import ExpandIcon from '@/assets/icons/expand-icon.svg';
+import IconButton from '@/components/Button/IconButton';
 import SocialLinkButton from '@/components/Button/SocialLinkButton';
 import useSocial from '@/hooks/use-social';
 
@@ -42,12 +43,14 @@ const PrimarySocialSignIn = ({ className, isPopup = false, onSocialSignInCallbac
         />
       ))}
       {!fullDisplay && (
-        <ExpandIcon
+        <IconButton
           className={classNames(styles.expandIcon, showAll && styles.expanded)}
           onClick={() => {
             setShowAll(!showAll);
           }}
-        />
+        >
+          <ExpandIcon />
+        </IconButton>
       )}
     </div>
   );

packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn.module.scss

@@ -13,15 +13,6 @@
   }
 }
 
-.moreButton {
-  border-radius: 50%;
-  @include _.flex-column;
-
-  > svg {
-    color: var(--color-icon);
-  }
-}
-
 :global(body.mobile) {
   .moreButton {
     > svg {

packages/ui/src/containers/SocialSignIn/SecondarySocialSignIn.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import React, { useMemo, useState, useRef } from 'react';
 
 import MoreSocialIcon from '@/assets/icons/more-social-icon.svg';
+import IconButton from '@/components/Button/IconButton';
 import SocialIconButton from '@/components/Button/SocialIconButton';
 import usePlatform from '@/hooks/use-platform';
 import useSocial from '@/hooks/use-social';
@@ -20,7 +21,7 @@ const SecondarySocialSignIn = ({ className }: Props) => {
   const { socialConnectors, invokeSocialSignIn } = useSocial();
   const isOverSize = socialConnectors.length > defaultSize;
   const [showModal, setShowModal] = useState(false);
-  const moreButtonRef = useRef<HTMLElement>(null);
+  const moreButtonRef = useRef<HTMLButtonElement>(null);
   const { isMobile } = usePlatform();
 
   const displayConnectors = useMemo(() => {
@@ -45,7 +46,7 @@ const SecondarySocialSignIn = ({ className }: Props) => {
           />
         ))}
         {isOverSize && (
-          <span
+          <IconButton
             ref={moreButtonRef}
             className={styles.moreButton}
             onClick={() => {
@@ -53,7 +54,7 @@ const SecondarySocialSignIn = ({ className }: Props) => {
             }}
           >
             <MoreSocialIcon />
-          </span>
+          </IconButton>
         )}
       </div>
       {isOverSize && isMobile && (

packages/ui/src/pages/SignIn/index.module.scss

@@ -52,6 +52,10 @@
     margin-bottom: _.unit(12);
   }
 
+  .placeHolder {
+    flex: 0;
+  }
+
   .divider {
     margin-bottom: _.unit(4);
   }

packages/ui/src/scss/_desktop.scss

@@ -35,7 +35,7 @@ $font-family: -apple-system,
 }
 
 @mixin colors-dark-theme {
-  --color-base: #25272b;
+  --color-base: #191c1d;
   --color-surface: #2a2c32;
   --color-text: #f7f8f8;
   --color-text-disabled: #5c5f60;
@@ -65,7 +65,8 @@ $font-family: -apple-system,
   --color-toast: #34353f;
   --color-overlay: rgba(0, 0, 0, 30%);
   // shadows
-  --shadow-2: 0 2px 12px rgba(0, 0, 0, 12%);
+  --shadow-2: 0 4px 12px rgba(0, 0, 0, 12%);
+  --shadow-3: 0 4px 16px rgba(0, 0, 0, 20%);
 }
 
 @mixin fonts {

packages/ui/src/scss/_mobile.scss

@@ -48,7 +48,7 @@ $font-family: -apple-system,
   --color-toast: #34353f;
   --color-overlay: rgba(0, 0, 0, 30%);
   // shadows
-  --shadow-2: 0 2px 12px rgba(0, 0, 0, 12%);
+  --shadow-2: 0 4px 12px rgba(0, 0, 0, 12%);
 }
 
 @mixin fonts {