feat(button): remove button variant ACTION & add a separate parameter…

… for roundness
crowdparlay · Jan 27, 2024 · 6f5b695 · 6f5b695
1 parent 94e7526
commit 6f5b695
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 24 deletions.
diff --git a/src/shared/ui/button/index.module.scss b/src/shared/ui/button/index.module.scss
@@ -51,10 +51,9 @@
   }
 }
 
-.action {
+.clear {
   padding: 12px 25px 12px 20px;
   gap: 12px;
-  border-radius: 30px;
   color: var(--color-gray-lighter);
   background-color: transparent;
 
@@ -68,15 +67,14 @@
   }
 }
 
-.clear {
-  background: transparent;
-  color: var(--color-white);
-}
-
 .disabled {
   opacity: 0.5;
 }
 
 .fullWidth {
   width: 100%;
 }
+
+.round {
+  border-radius: 30px;
+}
diff --git a/src/shared/ui/button/index.tsx b/src/shared/ui/button/index.tsx
@@ -8,7 +8,6 @@ export enum ButtonVariant {
   SECONDARY = 'secondary',
   CLEAR = 'clear',
   INLINE = 'inline',
-  ACTION = 'action',
 }
 
 export enum ButtonShape {
@@ -22,6 +21,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: ButtonVariant;
   shape?: ButtonShape;
   center?: boolean;
+  round?: boolean;
 }
 
 export const Button = (props: ButtonProps) => {
@@ -30,6 +30,7 @@ export const Button = (props: ButtonProps) => {
     variant = ButtonVariant.PRIMARY,
     shape = ButtonShape.DEFAULT,
     center = true,
+    round = false,
     type,
     className,
     disabled,
@@ -41,6 +42,7 @@ export const Button = (props: ButtonProps) => {
     [cls[variant]]: true,
     [cls[shape]]: true,
     [cls.center]: center,
+    [cls.round]: round,
   };
 
   return (

diff --git a/src/widgets/header/index.module.scss b/src/widgets/header/index.module.scss
@@ -18,6 +18,7 @@
 .linksContainer {
   display: flex;
   gap: 35px;
+  margin-left: 30px;
 }
 
 .icon {
@@ -33,12 +34,6 @@
   padding: 0;
   justify-content: center;
   border-radius: 0;
-
-  &:hover {
-    background: var(--color-white);
-    color: var(--color-black);
-    opacity: 1;
-  }
 }
 
 .logo {
@@ -59,3 +54,9 @@
     }
   }
 }
+
+.authorization {
+  display: flex;
+  gap: 12px;
+  margin-right: 12px;
+}
diff --git a/src/widgets/header/index.tsx b/src/widgets/header/index.tsx
@@ -3,7 +3,7 @@ import {useUnit} from 'effector-react';
 import {User} from '~/shared/api/types';
 import {routes} from '~/shared/routes';
 import {$user} from '~/shared/session';
-import {Button, ButtonVariant, Input, Link, LinkVariant} from '~/shared/ui';
+import {Button, ButtonShape, ButtonVariant, Input, Link, LinkVariant} from '~/shared/ui';
 import ArrowIcon from '~/shared/ui/icon/assets/arrow.svg';
 
 import Avatar from './assets/avatar.png';
@@ -35,7 +35,7 @@ export const Header = (props: HeaderProps) => {
           className={cls.search}
         />
 
-        <div className={cls.linksContainer} style={{marginLeft: 40}}>
+        <div className={cls.linksContainer}>
           <Link variant={LinkVariant.NAVIGATION} to={routes.explore}>
             Explore
           </Link>
@@ -52,17 +52,25 @@ export const Header = (props: HeaderProps) => {
       </div>
 
       {forceUser ?? user ? (
-        <div className={cls.row} style={{alignItems: 'normal'}}>
-          <Button className={cls.button}>
+        <div className={cls.row}>
+          <Button
+            variant={ButtonVariant.CLEAR}
+            shape={ButtonShape.EQUILATERAL}
+            className={cls.button}
+          >
             <NotificationIcon />
           </Button>
           <img src={Avatar} alt="avatar" />
-          <Button className={cls.button}>
+          <Button
+            variant={ButtonVariant.CLEAR}
+            shape={ButtonShape.EQUILATERAL}
+            className={cls.button}
+          >
             <ArrowIcon />
           </Button>
         </div>
       ) : (
-        <div>
+        <div className={cls.authorization}>
           <Link to={routes.auth.signUp}>
             <Button variant={ButtonVariant.PRIMARY}>Sign up</Button>
           </Link>

diff --git a/src/widgets/post/index.tsx b/src/widgets/post/index.tsx
@@ -110,7 +110,8 @@ export const Post = memo((props: PostProps) => {
               <Button
                 onClick={() => onReplyClicked && onReplyClicked(id)}
                 className={classNames(cls.hover)}
-                variant={ButtonVariant.ACTION}
+                variant={ButtonVariant.CLEAR}
+                round={true}
               >
                 <ReplyIcon />
                 Reply
@@ -120,7 +121,8 @@ export const Post = memo((props: PostProps) => {
               <Button
                 onClick={() => onReportClicked && onReportClicked(id)}
                 className={classNames(cls.hover)}
-                variant={ButtonVariant.ACTION}
+                variant={ButtonVariant.CLEAR}
+                round={true}
               >
                 <ReportIcon />
                 Report
@@ -132,15 +134,17 @@ export const Post = memo((props: PostProps) => {
             <Button
               onClick={() => onLikeClicked && onLikeClicked(id)}
               className={classNames(cls.react, react === 'like' && cls.active)}
-              variant={ButtonVariant.ACTION}
+              variant={ButtonVariant.CLEAR}
+              round={true}
             >
               {react === 'like' ? <LikeFillIcon /> : <LikeOutlineIcon />}
               19
             </Button>
             <Button
               onClick={() => onDisLikeClicked && onDisLikeClicked(id)}
               className={classNames(cls.react, react === 'dislike' && cls.active)}
-              variant={ButtonVariant.ACTION}
+              variant={ButtonVariant.CLEAR}
+              round={true}
             >
               {react === 'dislike' ? (
                 <LikeFillIcon className={cls.dislike} />