Adding Modal Component and Login View

components/ui/Button/Button.module.css

@@ -20,3 +20,7 @@
 .loading {
   @apply bg-accents-1 text-accents-3 border-accents-2 cursor-not-allowed;
 }
+
+.slim {
+  @apply py-2 transform-none normal-case;
+}

components/ui/Button/Button.tsx

@@ -13,7 +13,7 @@ import { LoadingDots } from '@components/ui'
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   href?: string
   className?: string
-  variant?: 'filled' | 'outlined' | 'flat' | 'none'
+  variant?: 'flat' | 'slim'
   active?: boolean
   type?: 'submit' | 'reset' | 'button'
   Component?: string | JSXElementConstructor<any>
@@ -24,7 +24,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
   const {
     className,
-    variant = 'filled',
+    variant = 'flat',
     children,
     active,
     onClick,
@@ -50,6 +50,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
   const rootClassName = cn(
     s.root,
     {
+      [s.slim]: variant === 'slim',
       [s.loading]: loading,
     },
     className
@@ -57,16 +58,16 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
 
   return (
     <Component
-      className={rootClassName}
       aria-pressed={active}
       data-variant={variant}
       ref={mergeRefs([ref, buttonRef])}
       {...buttonProps}
+      data-active={isPressed ? '' : undefined}
+      className={rootClassName}
       style={{
         width,
         ...style,
       }}
-      data-active={isPressed ? '' : undefined}
     >
       {children}
       {loading && (