feat: Update the theme colors and use them in Button and CircleButton…

… components.
medyo · zouhir96 · May 4, 2025 · May 12, 2025 · May 22, 2025 · Jun 2, 2025
commit aa18aac581e7a4365f3f334567e3840b7bf8fca0
diff --git a/src/assets/index.css b/src/assets/index.css
@@ -3,8 +3,9 @@
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
+    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -24,8 +25,38 @@ code {
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
-  --color-btn-background-color: var(--button-background-color);
-  --color-btn-hover-background-color: var(--button-hover-background-color);
-  --color-btn-text-color: var(--button-text-color);
-  --color-btn-hover-text-color: var(--button-hover-text-color);
+  --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-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);
+}
+
+@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-on-primary: oklch(1 0 0);
+    --color-on-secondary: oklch(1 0 0);
+    --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);
+  }
 }
diff --git a/src/components/Elements/Button/Button.tsx b/src/components/Elements/Button/Button.tsx
@@ -1,32 +1,51 @@
+import clsx from 'clsx'
 import React from 'react'
 import { Spinner } from '../Spinner'
-import './Button.css'
+
 const sizes = {
-  small: 'small',
-  medium: 'medium',
-  large: 'large',
+  small: 'py-1 px-2 text-xs',
+  medium: 'py-3 px-4 text-base',
+  large: 'py-4 px-8 text-xl',
 }
-type ButtonProps = {
+
+const types = {
+  primary: 'bg-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 ',
+}
+
+interface ButtonProps {
   children: React.ReactNode
   onClick: () => void
   className?: string
+  type?: keyof typeof types
   size?: keyof typeof sizes
   startIcon?: React.ReactNode
   endIcon?: React.ReactNode
   isLoading?: boolean
 }
 export const Button = ({
-  size = 'medium',
   onClick,
+  type = 'secondary',
   className,
+  size = 'medium',
   startIcon,
   endIcon,
   children,
   isLoading = false,
 }: ButtonProps) => {
   return (
-    <button 
-  className="gap-2 px-4 bg-btn-background-color py-2 rounded-full hover:bg-btn-hover-background-color text-btn-text-color hover:text-btn-hover-text-color cursor-pointer justify-center items-center"
+    <button
+      className={clsx(
+        'inline-flex items-center justify-center gap-2 rounded-full text-center',
+        types[type],
+        sizes[size],
+        className,
+        isLoading ? 'pointer-events-none cursor-not-allowed' : 'cursor-pointer'
+      )}
       onClick={onClick}
       disabled={isLoading}>
       {isLoading ? <Spinner size="small" /> : startIcon}

diff --git a/src/components/Elements/Button/CircleButton.tsx b/src/components/Elements/Button/CircleButton.tsx
@@ -2,14 +2,15 @@ import clsx from 'clsx'
 import { Spinner } from '../Spinner'
 
 const sizes = {
-  small: 'small',
-  medium: 'medium',
-  large: 'large',
+  small: 'size-[30px]',
+  medium: 'size-[40px]',
+  large: 'size-[50px]',
 }
 
 const variants = {
-  primary: 'primary',
-  darkfocus: 'dark-focus',
+  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',
 }
 
 type CircleButtonProps = {
@@ -33,11 +34,11 @@ export const CircleButton = ({
     <button
       disabled={isLoading}
       className={clsx(
-        'circle-button',
+        'inline-flex items-center justify-center rounded-full text-center',
         sizes[size],
         variants[variant],
         className,
-        isLoading && 'disabled'
+        isLoading ? 'pointer-events-none cursor-not-allowed' : 'cursor-pointer'
       )}
       onClick={onClick}>
       {isLoading ? <Spinner size="small" /> : children}

diff --git a/src/features/settings/components/GeneralSettings/generalSettings.css b/src/features/settings/components/GeneralSettings/generalSettings.css
@@ -16,22 +16,6 @@
   border-bottom: 1px solid var(--card-content-divider);
 }
 
-.settingContent button {
-  display: flex;
-  align-items: center;
-  column-gap: 8px;
-  background-color: none;
-  border: none;
-  border-radius: 50px;
-  padding: 6px 12px;
-  font-size: 14px;
-  font-weight: bold;
-  cursor: pointer;
-  transition: opacity 0.2s linear;
-}
-.settingContent button:hover {
-  opacity: 0.9;
-}
 .rssButton {
   background-color: #ee802f;
   color: white;

diff --git a/src/features/settings/components/UserSettings/DeleteAccount.tsx b/src/features/settings/components/UserSettings/DeleteAccount.tsx
@@ -49,6 +49,7 @@ export const DeleteAccount = () => {
 
         <Button
           size="small"
+          type="danger"
           onClick={() => setConfirmDelete(true)}
           isLoading={deleteAccountMutation.isLoading}>
           Delete account

diff --git a/src/features/settings/components/UserSettings/UserInfo.tsx b/src/features/settings/components/UserSettings/UserInfo.tsx
@@ -27,7 +27,7 @@ export const UserInfo = () => {
               Create a free account on <b>Hackertab</b> to sync, save bookmarks, and earn rewards.
             </div>
             <div className="actions">
-              <Button className="logoutBtn" onClick={() => openAuthModal()} size="small">
+              <Button onClick={() => openAuthModal()} size="small">
                 Connect
               </Button>
             </div>
@@ -60,7 +60,7 @@ export const UserInfo = () => {
             Connected with <span className="capitalize">{providerName}</span>
           </div>
           <div className="actions">
-            <Button className="logoutBtn" onClick={() => setShowLogout(true)} size="small">
+            <Button onClick={() => setShowLogout(true)} size="small">
               Logout
             </Button>
           </div>