medyo · zouhir96 · May 4, 2025 · May 12, 2025
diff --git a/.prettierrc b/.prettierrc
@@ -4,5 +4,7 @@
   "tabWidth": 2,
   "semi": false,
   "singleQuote": true,
-  "jsxBracketSameLine": true
-}
+  "jsxBracketSameLine": true,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "./src/assets/index.css"
+}
diff --git a/index.html b/index.html
@@ -7,19 +7,19 @@
     <meta name="theme-color" content="#000000" />
     <link rel="apple-touch-icon" href="/logo192.png" />
     <link rel="preconnect" href="https://hackertab.dev" />
+    <link href="/src/styles.css" rel="stylesheet" />
     <script src="/startup.js"></script>
 
     <% if (isWebBuild) { %>
-      <title>Hackertab</title>
-      <link rel="manifest" href="/web_manifest.json" />
+    <title>Hackertab</title>
+    <link rel="manifest" href="/web_manifest.json" />
     <% } else { %>
-      <title>New Tab</title>
+    <title>New Tab</title>
     <%}%>
   </head>
   <body class="preload">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>
-
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "private": false,
   "dependencies": {
     "@amplitude/analytics-browser": "^1.5.5",
+    "@tailwindcss/vite": "^4.1.5",
     "@tanstack/query-async-storage-persister": "^5.8.3",
     "@tanstack/react-query": "^4.13.0",
     "@tanstack/react-query-persist-client": "^5.8.4",
@@ -33,6 +34,7 @@
     "react-spring-bottom-sheet": "^3.4.1",
     "react-toggle": "^4.1.1",
     "react-tooltip": "^4.2.21",
+    "tailwindcss": "^4.1.5",
     "timeago.js": "^4.0.2",
     "type-fest": "^1.2.0",
     "vite-plugin-ejs": "^1.6.4",
@@ -87,7 +89,8 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "prettier": "^2.7.1",
+    "prettier": "^3.5.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "terser": "^5.19.2",
     "typescript": "^5.1.6",
     "vite": "^6.2.4",

diff --git a/src/assets/App.css b/src/assets/App.css
@@ -1,4 +1,4 @@
-@import 'variables.css';
+@import './variables.css';
 
 html {
   background: var(--background-color);

diff --git a/src/assets/index.css b/src/assets/index.css
@@ -1,9 +1,11 @@
-@import 'variables.css';
+@import 'tailwindcss';
+@import './variables.css';
 
 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;
 }
@@ -19,3 +21,42 @@ code {
   width: 100vw;
   display: flex;
 }
+
+@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-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,25 +1,37 @@
 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,
@@ -28,11 +40,11 @@ export const Button = ({
   return (
     <button
       className={clsx(
-        'button',
-        isLoading && 'loading',
+        'inline-flex items-center justify-center gap-2 rounded-full text-center',
+        types[type],
         sizes[size],
         className,
-        isLoading && 'disabled'
+        isLoading ? 'pointer-events-none cursor-not-allowed' : 'cursor-pointer'
       )}
       onClick={onClick}
       disabled={isLoading}>

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>

diff --git a/vite.config.mjs b/vite.config.mjs
@@ -1,3 +1,4 @@
+import tailwindcss from '@tailwindcss/vite'
 import react from '@vitejs/plugin-react'
 import path from 'path'
 import { defineConfig, loadEnv } from 'vite'
@@ -28,6 +29,7 @@ export default defineConfig(({ mode }) => {
       react(),
       viteTsconfigPaths(),
       svgrPlugin(),
+      tailwindcss(),
     ],
     define: {
       'process.env': {},