feat: Replace button by Button component.

Author: zouhir96

src/assets/App.css

@@ -286,23 +286,6 @@ a {
   opacity: 1;
 }
 
-.blockHeaderDragButton {
-  align-items: center;
-  background: transparent;
-  border: none;
-  color: #96a2ae;
-  cursor: grab;
-  display: none;
-  font-size: 24px;
-  height: 100%;
-  justify-content: center;
-  left: 0;
-  padding: 0;
-  position: absolute;
-  top: 0;
-  width: 50px;
-}
-
 .blockHeader:hover .blockHeaderDragButton {
   display: flex;
 }
@@ -357,29 +340,9 @@ a {
 }
 
 .blockActionButton {
-  background-color: var(--card-action-button-background);
-  border-radius: 40px;
-  border: none;
-  box-shadow: 0 0 15px 2px var(--card-actions-background-shadow);
-  color: var(--card-action-button-color);
-  cursor: pointer;
-  display: block;
-  font-size: 18px;
-  height: 28px;
-  line-height: 12px;
-  opacity: 1;
-  padding: 0;
-  pointer-events: all;
-  text-align: center;
-  transition: opacity 0.3s ease, right 0.3s ease;
-  width: 28px;
-  margin-bottom: 6px;
-  margin-right: 6px;
-}
-
-.blockActionButton.active {
-  background-color: var(--card-active-action-button-background);
-  color: var(--card-active-action-button-color);
+  transition:
+    opacity 0.3s ease,
+    right 0.3s ease;
 }
 
 @media (hover: hover) {
@@ -556,7 +519,9 @@ a {
   flex-wrap: wrap;
   gap: 8px;
   order: 4;
-  transition: opacity 0.3s ease-out 0.1s, transform 0.3s ease-out 0.1s,
+  transition:
+    opacity 0.3s ease-out 0.1s,
+    transform 0.3s ease-out 0.1s,
     visibility 0.3s ease-out 0.1s;
   width: 100%;
 }
@@ -696,21 +661,6 @@ Github languages colors
   background-color: #045797;
 }
 
-.headerSelect {
-  background-color: transparent;
-  border: 0;
-  border-bottom: 2px solid var(--app-name-text-color);
-  color: inherit;
-  cursor: pointer;
-  font-weight: bold;
-  padding: 0;
-}
-
-.headerSelectIcon {
-  position: relative;
-  top: 2px;
-}
-
 /**
 Contextify
 **/
@@ -872,7 +822,10 @@ Producthunt item
 
 .searchBar {
   order: 3;
-  transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s ease-out;
+  transition:
+    opacity 0.3s ease-out,
+    transform 0.3s ease-out,
+    visibility 0.3s ease-out;
   width: 100%;
   display: flex;
   align-items: center;
@@ -1441,25 +1394,6 @@ Modal
   column-gap: 8px;
   align-items: center;
 }
-.modalCloseBtn {
-  align-items: center;
-  position: absolute;
-  background-color: transparent;
-  border-radius: 50%;
-  top: 0;
-  right: 0;
-  border: none;
-  color: var(--primary-text-color);
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  margin: 0;
-  padding: 0;
-  text-align: center;
-}
-.modalCloseBtn:hover {
-  opacity: 0.7;
-}
 .settingContent .form {
   display: flex;
   flex-direction: row;

src/assets/index.css

@@ -25,31 +25,30 @@ code {
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
-  --color-mint-500: oklch(0.72 0.11 178);
-  --color-bg-primary: oklch(0.53 0.1896 257.41);
-  --color-bg-secondary: oklch(0.9 0.0221 250.23);
-  --color-bg-secondary-hover: oklch(0.83 0.0314 249.73);
-  --color-bg-danger: oklch(0.67 0.2143 24.47);
-  --color-bg-success: oklch(0.73 0.2182 138.49);
-  --color-bg-warning: oklch(0.85 0.1452 85.83);
+  --color-primary: oklch(0.53 0.1896 257.41);
+  --color-secondary: oklch(0.9 0.0221 250.23);
+  --color-secondary-hover: oklch(0.83 0.0314 249.73);
+  --color-danger: oklch(0.67 0.2143 24.47);
+  --color-success: oklch(0.73 0.2182 138.49);
+  --color-warning: oklch(0.85 0.1452 85.83);
 
   --color-on-primary: oklch(1 0 0);
   --color-on-secondary: oklch(0.42 0.0431 250.1);
   --color-on-secondary-hover: oklch(0.42 0.0431 250.1);
   --color-on-danger: oklch(1 0 0);
   --color-on-success: oklch(1 0 0);
   --color-on-warning: oklch(1 0 0);
-  --color-on-background: oklch(1 0 0);
+  --color-on-background: oklch(0.42 0.0431 250.1);
 }
 
 @layer base {
   @variant dark {
-    --color-bg-primary: oklch(0.53 0.1896 257.41);
-    --color-bg-secondary: oklch(0.24 0.0129 258.37);
-    --color-bg-secondary-hover: oklch(0.22 0.0115 254.07);
-    --color-bg-danger: oklch(0.67 0.2143 24.47);
-    --color-bg-success: oklch(0.73 0.2182 138.49);
-    --color-bg-warning: oklch(0.85 0.1452 85.83);
+    --color-primary: oklch(0.53 0.1896 257.41);
+    --color-secondary: oklch(0.24 0.0129 258.37);
+    --color-secondary-hover: oklch(0.22 0.0115 254.07);
+    --color-danger: oklch(0.67 0.2143 24.47);
+    --color-success: oklch(0.73 0.2182 138.49);
+    --color-warning: oklch(0.85 0.1452 85.83);
 
     --color-on-primary: oklch(1 0 0);
     --color-on-secondary: oklch(1 0 0);

src/components/DropDownMenu.tsx

@@ -1,5 +1,6 @@
 import { Item, Menu, MenuId, animation, useContextMenu } from 'react-contexify'
 import { RiArrowDownSFill } from 'react-icons/ri'
+import { Button } from './Elements'
 
 type Option = {
   label: string
@@ -29,10 +30,14 @@ export const DropDownMenu = ({
 
   return (
     <>
-      <button onClick={displayMenu} className="headerSelect" data-target-id={tagId}>
-        {label}
-        <RiArrowDownSFill className="headerSelectIcon" />
-      </button>
+      <Button
+        type="text"
+        onClick={(e) => displayMenu(e)}
+        className="inline-flex items-center justify-center gap-2 text-center"
+        tagId={tagId}>
+        <span>{label}</span>
+        <RiArrowDownSFill />
+      </Button>
       <Menu id={tagId} animation={animation.fade}>
         {data &&
           data.map((tag) => {

src/components/Elements/Button/Button.tsx

@@ -3,39 +3,42 @@ import React from 'react'
 import { Spinner } from '../Spinner'
 
 const sizes = {
-  small: 'py-1 px-2 text-xs',
-  medium: 'py-3 px-4 text-base',
-  large: 'py-4 px-8 text-xl',
+  sm: 'py-1 px-2 text-xs',
+  md: 'py-3 px-4 text-base',
+  lg: 'py-4 px-8 text-xl',
 }
 
 const types = {
-  primary: 'bg-bg-primary text-on-primary ',
+  primary: 'bg-primary text-on-primary ',
   secondary:
-    'bg-bg-secondary text-on-secondary hover:bg-bg-secondary-hover hover:text-on-secondary-hover',
-  danger: 'bg-bg-danger text-on-danger ',
-  success: 'bg-bg-success text-on-success ',
-  warning: 'bg-bg-warning text-on-warning ',
+    'bg-secondary text-on-secondary hover:bg-secondary-hover hover:text-on-secondary-hover',
+  danger: 'bg-danger text-on-danger ',
+  success: 'bg-success text-on-success ',
+  warning: 'bg-warning text-on-warning ',
+  text: 'bg-transparent text-on-background',
 }
 
 interface ButtonProps {
   children: React.ReactNode
-  onClick: () => void
+  onClick: (e: React.MouseEvent<HTMLSpanElement>) => void
   className?: string
   type?: keyof typeof types
   size?: keyof typeof sizes
   startIcon?: React.ReactNode
   endIcon?: React.ReactNode
   isLoading?: boolean
+  tagId?: string
 }
 export const Button = ({
   onClick,
   type = 'secondary',
   className,
-  size = 'medium',
+  size = 'md',
   startIcon,
   endIcon,
   children,
   isLoading = false,
+  tagId,
 }: ButtonProps) => {
   return (
     <button
@@ -47,7 +50,8 @@ export const Button = ({
         isLoading ? 'pointer-events-none cursor-not-allowed' : 'cursor-pointer'
       )}
       onClick={onClick}
-      disabled={isLoading}>
+      disabled={isLoading}
+      data-target-id={tagId}>
       {isLoading ? <Spinner size="small" /> : startIcon}
       {children}
       {endIcon}

src/components/Elements/Button/CircleButton.tsx

@@ -2,15 +2,19 @@ import clsx from 'clsx'
 import { Spinner } from '../Spinner'
 
 const sizes = {
-  small: 'size-[30px]',
-  medium: 'size-[40px]',
-  large: 'size-[50px]',
+  sm: 'size-[30px]',
+  md: 'size-[40px]',
+  lg: 'size-[50px]',
 }
 
 const variants = {
-  primary:
-    'bg-bg-secondary text-on-secondary hover:bg-bg-secondary-hover hover:text-on-secondary-hover',
-  darkfocus: 'bg-[#1c2026] text-[#f0c73d] hover:opacity-80',
+  primary: 'bg-primary text-on-primary hover:bg-primary-hover hover:text-on-primary-hover',
+  secondary:
+    'bg-secondary text-on-secondary hover:bg-secondary-hover hover:text-on-secondary-hover',
+  outlined:
+    'bg-transparent text-on-secondary border-1 dark:border-2 border-secondary hover:bg-secondary-hover hover:text-on-secondary-hover',
+  text: 'bg-transparent text-on-secondary',
+  darkfocus: 'bg-blue-900 text-yellow-400 hover:opacity-80',
 }
 
 type CircleButtonProps = {
@@ -23,8 +27,8 @@ type CircleButtonProps = {
 }
 
 export const CircleButton = ({
-  size = 'medium',
-  variant = 'primary',
+  size = 'md',
+  variant = 'secondary',
   onClick,
   isLoading,
   className,
@@ -34,7 +38,7 @@ export const CircleButton = ({
     <button
       disabled={isLoading}
       className={clsx(
-        'inline-flex items-center justify-center rounded-full text-center',
+        'pointer-events-auto inline-flex cursor-pointer items-center justify-center rounded-full text-center',
         sizes[size],
         variants[variant],
         className,

src/components/Elements/Card/Card.tsx

@@ -8,6 +8,7 @@ import { useRemoteConfigStore } from 'src/features/remoteConfig'
 import { DesktopBreakpoint } from 'src/providers/DesktopBreakpoint'
 import { useUserPreferences } from 'src/stores/preferences'
 import { SupportedCardType } from 'src/types'
+import { CircleButton } from '../Button'
 
 type CardProps = {
   children: React.ReactNode
@@ -61,9 +62,9 @@ export const Card = ({
       <div className="blockHeader">
         <DesktopBreakpoint>
           <SortableKnob>
-            <button className="blockHeaderDragButton">
-              <MdOutlineDragIndicator />
-            </button>
+            <CircleButton onClick={() => {}} variant="text">
+              <MdOutlineDragIndicator size={24} />
+            </CircleButton>
           </SortableKnob>
         </DesktopBreakpoint>
         <span className="blockHeaderIcon">{icon}</span> {titleComponent || label}{' '}

src/components/Elements/CardWithActions/CardItemWithActions.tsx

@@ -8,6 +8,7 @@ import { Attributes, trackLinkBookmark, trackLinkUnBookmark } from 'src/lib/anal
 import { useBookmarks } from 'src/stores/bookmarks'
 import { useUserPreferences } from 'src/stores/preferences'
 import { BaseEntry } from 'src/types'
+import { CircleButton } from '../Button'
 
 type CardItemWithActionsProps = {
   item: BaseEntry
@@ -80,27 +81,31 @@ export const CardItemWithActions = ({
         shareData={shareModalData}
       />
       {cardItem}
-      <div className={`blockActions ${isBookmarked ? 'active' : ''} `}>
+      <div className={`flex items-end justify-end gap-1 ${isBookmarked ? 'active' : ''}`}>
         {source === 'ai' && (
-          <button
-            className={`blockActionButton `}
+          <CircleButton
+            size="sm"
+            className={`blockActionButton`}
             onClick={onReportClicked}
             aria-label="Report item">
             <MdBugReport />
-          </button>
+          </CircleButton>
         )}
-        <button
-          className={`blockActionButton `}
+        <CircleButton
+          size="sm"
+          className={`blockActionButton`}
           onClick={onShareModalClicked}
           aria-label="Open share modal">
           <BiShareAlt />
-        </button>
-        <button
+        </CircleButton>
+        <CircleButton
+          size="sm"
+          variant={isBookmarked ? 'darkfocus' : 'secondary'}
           className={`blockActionButton ${isBookmarked ? 'active' : ''}`}
           onClick={onBookmarkClick}
           aria-label="Bookmark item">
           {!isBookmarked ? <BiBookmarkPlus /> : <BiBookmarkMinus />}
-        </button>
+        </CircleButton>
       </div>
     </div>
   )