From d40e92f703ea1e2f54af07ff713a8329f36d2635 Mon Sep 17 00:00:00 2001 From: zouhir Date: Sun, 4 May 2025 17:53:53 +0200 Subject: [PATCH 01/10] feat: Setup tailwindcss and use it in Button component. --- .prettierrc | 6 +- index.html | 8 +- package.json | 5 +- src/assets/App.css | 2 +- src/assets/index.css | 12 +- src/components/Elements/Button/Button.tsx | 11 +- vite.config.mjs | 2 + yarn.lock | 258 +++++++++++++++++++++- 8 files changed, 281 insertions(+), 23 deletions(-) diff --git a/.prettierrc b/.prettierrc index e5ae567e..c824aee2 100644 --- a/.prettierrc +++ b/.prettierrc @@ -4,5 +4,7 @@ "tabWidth": 2, "semi": false, "singleQuote": true, - "jsxBracketSameLine": true -} \ No newline at end of file + "jsxBracketSameLine": true, + "plugins": ["prettier-plugin-tailwindcss"], + "tailwindStylesheet": "./src/assets/index.css" +} diff --git a/index.html b/index.html index f3b4686d..7c9f97ec 100644 --- a/index.html +++ b/index.html @@ -7,19 +7,19 @@ + <% if (isWebBuild) { %> - Hackertab - + Hackertab + <% } else { %> - New Tab + New Tab <%}%>
- diff --git a/package.json b/package.json index 4fd1fde1..4f9758c4 100644 --- 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 index 82e9e262..834fe568 100644 --- 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 index 08389240..d9e491d8 100644 --- a/src/assets/index.css +++ b/src/assets/index.css @@ -1,4 +1,5 @@ -@import 'variables.css'; +@import 'tailwindcss'; +@import './variables.css'; body { margin: 0; @@ -19,3 +20,12 @@ code { width: 100vw; display: flex; } + +@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); +} diff --git a/src/components/Elements/Button/Button.tsx b/src/components/Elements/Button/Button.tsx index 1fc82658..0f1a8140 100644 --- a/src/components/Elements/Button/Button.tsx +++ b/src/components/Elements/Button/Button.tsx @@ -1,4 +1,3 @@ -import clsx from 'clsx' import React from 'react' import { Spinner } from '../Spinner' import './Button.css' @@ -26,14 +25,8 @@ export const Button = ({ isLoading = false, }: ButtonProps) => { return ( - @@ -60,7 +60,7 @@ export const UserInfo = () => { Connected with {providerName}
-
From 47e4235c4bb4d2dbdab718128932909c8a50e31a Mon Sep 17 00:00:00 2001 From: zouhir Date: Thu, 22 May 2025 21:25:45 +0200 Subject: [PATCH 03/10] feat: Replace button by Button component. --- src/assets/App.css | 86 +++---------------- src/assets/index.css | 27 +++--- src/components/DropDownMenu.tsx | 13 ++- src/components/Elements/Button/Button.tsx | 26 +++--- .../Elements/Button/CircleButton.tsx | 22 +++-- src/components/Elements/Card/Card.tsx | 7 +- .../CardWithActions/CardItemWithActions.tsx | 23 +++-- src/components/Elements/ChipsSet/ChipsSet.tsx | 34 +++++--- src/components/Elements/ChipsSet/chipset.css | 6 +- .../Elements/Modal/ConfirmModal.tsx | 8 +- src/components/Elements/Modal/Modal.tsx | 8 +- src/components/Elements/Steps/Steps.tsx | 36 ++++---- src/components/Layout/DNDLayout/DNDLayout.tsx | 9 +- src/features/auth/components/AuthModal.tsx | 8 +- .../onboarding/components/steps/HelloTab.tsx | 14 +-- .../components/steps/LanguagesTab.tsx | 10 +-- .../components/steps/SourcesTab.tsx | 15 ++-- .../settings/components/AddSearchEngine.tsx | 2 +- .../BookmarkSettings/BookmarkSettings.tsx | 4 +- .../GeneralSettings/DNDSettings.tsx | 2 +- .../settings/components/RssSetting.tsx | 6 +- .../components/UserSettings/DeleteAccount.tsx | 2 +- .../components/UserSettings/UserInfo.tsx | 4 +- .../shareModal/components/ShareModal.tsx | 10 +-- 24 files changed, 172 insertions(+), 210 deletions(-) diff --git a/src/assets/App.css b/src/assets/App.css index 834fe568..604c77f4 100644 --- a/src/assets/App.css +++ b/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; diff --git a/src/assets/index.css b/src/assets/index.css index 64d84d14..c16663a0 100644 --- a/src/assets/index.css +++ b/src/assets/index.css @@ -25,13 +25,12 @@ 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); @@ -39,17 +38,17 @@ code { --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); diff --git a/src/components/DropDownMenu.tsx b/src/components/DropDownMenu.tsx index 70e55a26..5eb347cf 100644 --- a/src/components/DropDownMenu.tsx +++ b/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 ( <> - + {data && data.map((tag) => { diff --git a/src/components/Elements/Button/Button.tsx b/src/components/Elements/Button/Button.tsx index 7b5d0587..5f26b9ec 100644 --- a/src/components/Elements/Button/Button.tsx +++ b/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) => 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 ( + {}} variant="text"> + + {icon} {titleComponent || label}{' '} diff --git a/src/components/Elements/CardWithActions/CardItemWithActions.tsx b/src/components/Elements/CardWithActions/CardItemWithActions.tsx index ca674a2f..ac2825e5 100644 --- a/src/components/Elements/CardWithActions/CardItemWithActions.tsx +++ b/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} -
+
{source === 'ai' && ( - + )} - - +
) diff --git a/src/components/Elements/ChipsSet/ChipsSet.tsx b/src/components/Elements/ChipsSet/ChipsSet.tsx index b215c8e5..9f68ae64 100644 --- a/src/components/Elements/ChipsSet/ChipsSet.tsx +++ b/src/components/Elements/ChipsSet/ChipsSet.tsx @@ -2,6 +2,7 @@ import clsx from 'clsx' import { useState } from 'react' import { IoIosClose } from 'react-icons/io' import { Option } from 'src/types' +import { Button } from '../Button' import './chipset.css' type ChipProps = { option: Option @@ -12,17 +13,28 @@ type ChipProps = { const Chip = ({ option, onSelect, onRemove, active = false }: ChipProps) => { return ( -
- - {option.removeable && onRemove && ( - - )} -
+ + ) + }> + {option.label} + ) } type ChangeAction = { diff --git a/src/components/Elements/ChipsSet/chipset.css b/src/components/Elements/ChipsSet/chipset.css index 04b0f690..ed863fa7 100644 --- a/src/components/Elements/ChipsSet/chipset.css +++ b/src/components/Elements/ChipsSet/chipset.css @@ -37,13 +37,13 @@ filter: brightness(95%); } -.chip .chipIcon { +.chipIcon { margin: 0; padding: 0; line-height: 14px; } -.chip .chipIcon > img, -.chip .chipIcon > svg { +.chipIcon > img, +.chipIcon > svg { background-color: white; color: black; padding: 2px; diff --git a/src/components/Elements/Modal/ConfirmModal.tsx b/src/components/Elements/Modal/ConfirmModal.tsx index a1e70b00..a6eab276 100644 --- a/src/components/Elements/Modal/ConfirmModal.tsx +++ b/src/components/Elements/Modal/ConfirmModal.tsx @@ -29,12 +29,8 @@ export const ConfirmModal = ({

{description}

- - + +
diff --git a/src/components/Elements/Modal/Modal.tsx b/src/components/Elements/Modal/Modal.tsx index 46515014..f97dbf66 100644 --- a/src/components/Elements/Modal/Modal.tsx +++ b/src/components/Elements/Modal/Modal.tsx @@ -1,6 +1,7 @@ import clsx from 'clsx' import { VscClose } from 'react-icons/vsc' import ReactModal from 'react-modal' +import { CircleButton } from '../Button' type ModalProps = { showModal: boolean onClose: () => void @@ -34,12 +35,9 @@ export const Modal = ({ showModal, className, header, onClose, children }: Modal {header.icon} {header.title} - + {children} diff --git a/src/components/Elements/Steps/Steps.tsx b/src/components/Elements/Steps/Steps.tsx index 7814cdfb..5c3d541f 100644 --- a/src/components/Elements/Steps/Steps.tsx +++ b/src/components/Elements/Steps/Steps.tsx @@ -1,4 +1,5 @@ import { createElement, useState } from 'react' +import { CircleButton } from '../Button' import './steps.css' type StepStatus = { @@ -68,8 +69,7 @@ export const Steps = ({ } } - const onStepClicked = (e: React.MouseEvent, index: number) => { - e.preventDefault() + const onStepClicked = (index: number) => { setCurrentStep(index) } @@ -93,34 +93,36 @@ export const Steps = ({ return (
  • {stepsStatuses[index] === 'completed' || stepsStatuses[index] === 'current' ? ( - + ) : ( - + )}
    • ) })} -
    {renderStep()}
    +
    {renderStep()}
    ) } diff --git a/src/components/Layout/DNDLayout/DNDLayout.tsx b/src/components/Layout/DNDLayout/DNDLayout.tsx index 333ce7e8..43ce3e3e 100644 --- a/src/components/Layout/DNDLayout/DNDLayout.tsx +++ b/src/components/Layout/DNDLayout/DNDLayout.tsx @@ -1,6 +1,6 @@ import { useLayoutEffect, useRef } from 'react' import { BsChevronDown } from 'react-icons/bs' -import { SearchBarWithLogo } from 'src/components/Elements' +import { Button, SearchBarWithLogo } from 'src/components/Elements' import './DNDLayout.css' export const DNDLayout = () => { @@ -23,10 +23,13 @@ export const DNDLayout = () => { - + ) } diff --git a/src/features/auth/components/AuthModal.tsx b/src/features/auth/components/AuthModal.tsx index be527d4d..4dce60c3 100644 --- a/src/features/auth/components/AuthModal.tsx +++ b/src/features/auth/components/AuthModal.tsx @@ -95,15 +95,13 @@ export const AuthModal = ({ showAuth }: AuthModalProps) => { isLoading={getOauthLink.isLoading && getOauthLink.data?.['provider'] === 'github.com'} onClick={() => { signIn(githubAuthProvider) - }} - size="medium"> + }}> Connect with Github @@ -111,7 +109,7 @@ export const AuthModal = ({ showAuth }: AuthModalProps) => {

    {authError.message}

    {authError.retry && ( - )} diff --git a/src/features/onboarding/components/steps/HelloTab.tsx b/src/features/onboarding/components/steps/HelloTab.tsx index b97b8f9e..84640f7d 100644 --- a/src/features/onboarding/components/steps/HelloTab.tsx +++ b/src/features/onboarding/components/steps/HelloTab.tsx @@ -5,7 +5,7 @@ import { BsArrowRight, BsFillGearFill } from 'react-icons/bs' import { FaDatabase, FaPaintBrush, FaRobot, FaServer } from 'react-icons/fa' import { RiDeviceFill } from 'react-icons/ri' import { TbDots } from 'react-icons/tb' -import { StepProps } from 'src/components/Elements' +import { Button, StepProps } from 'src/components/Elements' import { Occupation } from '../../types' const OCCUPATIONS: Occupation[] = [ @@ -107,11 +107,13 @@ export const HelloTab = ({ ) })}
    -
    - - +
    + +
    ) diff --git a/src/features/onboarding/components/steps/LanguagesTab.tsx b/src/features/onboarding/components/steps/LanguagesTab.tsx index c9e947c4..621e8a25 100644 --- a/src/features/onboarding/components/steps/LanguagesTab.tsx +++ b/src/features/onboarding/components/steps/LanguagesTab.tsx @@ -1,4 +1,4 @@ -import { ChipsSet, StepProps } from 'src/components/Elements' +import { Button, ChipsSet, StepProps } from 'src/components/Elements' import { useRemoteConfigStore } from 'src/features/remoteConfig' import { Occupation } from '../../types' @@ -35,11 +35,11 @@ export const LanguagesTab = ({ }} /> -
    - - + +
    ) diff --git a/src/features/onboarding/components/steps/SourcesTab.tsx b/src/features/onboarding/components/steps/SourcesTab.tsx index ddd860ba..b32a9b4c 100644 --- a/src/features/onboarding/components/steps/SourcesTab.tsx +++ b/src/features/onboarding/components/steps/SourcesTab.tsx @@ -1,5 +1,5 @@ import { BsArrowRight } from 'react-icons/bs' -import { ChipsSet, StepProps } from 'src/components/Elements' +import { Button, ChipsSet, StepProps } from 'src/components/Elements' import { SUPPORTED_CARDS } from '../../../../config/supportedCards' import { Occupation } from '../../types' @@ -33,11 +33,14 @@ export const SourcesTab = ({ }} /> -
    - - +
    + +
    ) diff --git a/src/features/settings/components/AddSearchEngine.tsx b/src/features/settings/components/AddSearchEngine.tsx index f20c3aa7..dfda34f3 100644 --- a/src/features/settings/components/AddSearchEngine.tsx +++ b/src/features/settings/components/AddSearchEngine.tsx @@ -48,7 +48,7 @@ export const AddSearchEngine = () => { placeholder="https://chatgpt.com?q=" />
    -
    diff --git a/src/features/settings/components/BookmarkSettings/BookmarkSettings.tsx b/src/features/settings/components/BookmarkSettings/BookmarkSettings.tsx index b27d8ce6..f2b8d125 100644 --- a/src/features/settings/components/BookmarkSettings/BookmarkSettings.tsx +++ b/src/features/settings/components/BookmarkSettings/BookmarkSettings.tsx @@ -54,9 +54,9 @@ export const BookmarkItem = ({ item, appendRef = false }: BookmarkItemProps) => )}
    - +
    ) diff --git a/src/features/settings/components/GeneralSettings/DNDSettings.tsx b/src/features/settings/components/GeneralSettings/DNDSettings.tsx index 1ac8a1b5..9bf34365 100644 --- a/src/features/settings/components/GeneralSettings/DNDSettings.tsx +++ b/src/features/settings/components/GeneralSettings/DNDSettings.tsx @@ -102,7 +102,7 @@ export const DNDSettings = () => { /> - diff --git a/src/features/settings/components/RssSetting.tsx b/src/features/settings/components/RssSetting.tsx index daefce43..f1c183ec 100644 --- a/src/features/settings/components/RssSetting.tsx +++ b/src/features/settings/components/RssSetting.tsx @@ -79,11 +79,7 @@ export const RssSetting = () => { ) : (
    -
    diff --git a/src/features/settings/components/UserSettings/DeleteAccount.tsx b/src/features/settings/components/UserSettings/DeleteAccount.tsx index 40ffc908..7f9b9719 100644 --- a/src/features/settings/components/UserSettings/DeleteAccount.tsx +++ b/src/features/settings/components/UserSettings/DeleteAccount.tsx @@ -48,7 +48,7 @@ export const DeleteAccount = () => { /> @@ -60,7 +60,7 @@ export const UserInfo = () => { Connected with {providerName}
    -
    diff --git a/src/features/shareModal/components/ShareModal.tsx b/src/features/shareModal/components/ShareModal.tsx index 103e5bd1..af12e277 100644 --- a/src/features/shareModal/components/ShareModal.tsx +++ b/src/features/shareModal/components/ShareModal.tsx @@ -17,7 +17,7 @@ import { WhatsappShareButton, } from 'react-share' import toast from 'react-simple-toasts' -import { Button } from 'src/components/Elements' +import { Button, CircleButton } from 'src/components/Elements' import { twitterHandle } from 'src/config' import { trackLinkCopy, trackLinkShare } from 'src/lib/analytics' import { ShareModalData } from '../types' @@ -82,12 +82,12 @@ export const ShareModal = ({ showModal, closeModal, shareData }: ShareModalProps overlayClassName="Overlay">

    Share

    - +
    @@ -124,7 +124,7 @@ export const ShareModal = ({ showModal, closeModal, shareData }: ShareModalProps aria-label="Copy url to clipboard" startIcon={} onClick={onCopyClicked} - size="small"> + size="sm"> Copy
    From 338f97994821bde1a5cfa563022d3ac80b0434e6 Mon Sep 17 00:00:00 2001 From: zouhir Date: Mon, 2 Jun 2025 14:34:24 +0200 Subject: [PATCH 04/10] feat: Create a dedicated hackertab theme colors. --- src/assets/index.css | 34 ++++--------------- src/components/Elements/Button/Button.tsx | 11 +++--- .../Elements/Button/CircleButton.tsx | 10 +++--- 3 files changed, 15 insertions(+), 40 deletions(-) diff --git a/src/assets/index.css b/src/assets/index.css index c16663a0..e4b3589f 100644 --- a/src/assets/index.css +++ b/src/assets/index.css @@ -25,37 +25,15 @@ code { @custom-variant dark (&:where(.dark, .dark *)); @theme { - --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(0.42 0.0431 250.1); + --color-ht-100: oklch(0.9 0.0221 250.23); + --color-ht-200: oklch(0.83 0.0314 249.73); + --color-ht-300: oklch(0.453 0.0179 251.34); } @layer base { @variant dark { - --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); - --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-ht-100: oklch(0.2421 0.0129 258.37); + --color-ht-200: oklch(0.2245 0.0115 254.07); + --color-ht-300: oklch(1 0 0); } } diff --git a/src/components/Elements/Button/Button.tsx b/src/components/Elements/Button/Button.tsx index 5f26b9ec..5a9a8aed 100644 --- a/src/components/Elements/Button/Button.tsx +++ b/src/components/Elements/Button/Button.tsx @@ -9,13 +9,12 @@ const sizes = { } const types = { - primary: 'bg-primary text-on-primary ', - secondary: - 'bg-secondary text-on-secondary hover:bg-secondary-hover hover:text-on-secondary-hover', + primary: 'bg-blue-500 text-white hover:bg-blue-600', + secondary: 'bg-ht-100 text-ht-300 hover:bg-ht-200', danger: 'bg-danger text-on-danger ', - success: 'bg-success text-on-success ', - warning: 'bg-warning text-on-warning ', - text: 'bg-transparent text-on-background', + success: 'bg-green-500 text-white hover:bg-green-600', + warning: 'bg-yellow-400 text-white hover:bg-yellow-500', + text: 'bg-transparent text-ht-300', } interface ButtonProps { diff --git a/src/components/Elements/Button/CircleButton.tsx b/src/components/Elements/Button/CircleButton.tsx index a109b69d..5d6c315c 100644 --- a/src/components/Elements/Button/CircleButton.tsx +++ b/src/components/Elements/Button/CircleButton.tsx @@ -8,12 +8,10 @@ const sizes = { } const variants = { - 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', + primary: 'bg-blue-500 text-white hover:bg-blue-600', + secondary: 'bg-ht-100 text-ht-300 hover:bg-ht-200', + outlined: 'bg-ht-100 text-ht-300 hover:bg-ht-100', + text: 'bg-transparent ttext-ht-300', darkfocus: 'bg-blue-900 text-yellow-400 hover:opacity-80', } From 7d40b587e715219512142ef413822c0694308f50 Mon Sep 17 00:00:00 2001 From: zouhir Date: Tue, 3 Jun 2025 17:50:37 +0200 Subject: [PATCH 05/10] feat: Rename ht-300 color to ht-900 . --- src/assets/index.css | 4 ++-- src/components/Elements/Button/Button.tsx | 4 ++-- src/components/Elements/Button/CircleButton.tsx | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/assets/index.css b/src/assets/index.css index e4b3589f..e4cd9904 100644 --- a/src/assets/index.css +++ b/src/assets/index.css @@ -27,13 +27,13 @@ code { @theme { --color-ht-100: oklch(0.9 0.0221 250.23); --color-ht-200: oklch(0.83 0.0314 249.73); - --color-ht-300: oklch(0.453 0.0179 251.34); + --color-ht-900: oklch(0.453 0.0179 251.34); } @layer base { @variant dark { --color-ht-100: oklch(0.2421 0.0129 258.37); --color-ht-200: oklch(0.2245 0.0115 254.07); - --color-ht-300: oklch(1 0 0); + --color-ht-900: oklch(1 0 0); } } diff --git a/src/components/Elements/Button/Button.tsx b/src/components/Elements/Button/Button.tsx index 5a9a8aed..37c9a254 100644 --- a/src/components/Elements/Button/Button.tsx +++ b/src/components/Elements/Button/Button.tsx @@ -10,11 +10,11 @@ const sizes = { const types = { primary: 'bg-blue-500 text-white hover:bg-blue-600', - secondary: 'bg-ht-100 text-ht-300 hover:bg-ht-200', + secondary: 'bg-ht-100 text-ht-900 hover:bg-ht-200', danger: 'bg-danger text-on-danger ', success: 'bg-green-500 text-white hover:bg-green-600', warning: 'bg-yellow-400 text-white hover:bg-yellow-500', - text: 'bg-transparent text-ht-300', + text: 'bg-transparent text-ht-900', } interface ButtonProps { diff --git a/src/components/Elements/Button/CircleButton.tsx b/src/components/Elements/Button/CircleButton.tsx index 5d6c315c..3a65a5c4 100644 --- a/src/components/Elements/Button/CircleButton.tsx +++ b/src/components/Elements/Button/CircleButton.tsx @@ -9,9 +9,9 @@ const sizes = { const variants = { primary: 'bg-blue-500 text-white hover:bg-blue-600', - secondary: 'bg-ht-100 text-ht-300 hover:bg-ht-200', - outlined: 'bg-ht-100 text-ht-300 hover:bg-ht-100', - text: 'bg-transparent ttext-ht-300', + secondary: 'bg-ht-100 text-ht-900 hover:bg-ht-200', + outlined: 'bg-ht-100 text-ht-900 hover:bg-ht-100', + text: 'bg-transparent ttext-ht-900', darkfocus: 'bg-blue-900 text-yellow-400 hover:opacity-80', } From f01d4f35189dfca2221e7b78096fe706f51f9a59 Mon Sep 17 00:00:00 2001 From: zouhir Date: Tue, 3 Jun 2025 18:00:47 +0200 Subject: [PATCH 06/10] feat: Revert css changes. --- src/assets/App.css | 73 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) diff --git a/src/assets/App.css b/src/assets/App.css index 604c77f4..7eb3819d 100644 --- a/src/assets/App.css +++ b/src/assets/App.css @@ -286,6 +286,23 @@ 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; } @@ -340,9 +357,31 @@ 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); } @media (hover: hover) { @@ -661,6 +700,21 @@ 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 **/ @@ -1394,6 +1448,25 @@ 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; From 6991e0ee954488cd1953af6192c11de9dfbeb5ba Mon Sep 17 00:00:00 2001 From: zouhir Date: Sat, 14 Jun 2025 02:12:57 +0200 Subject: [PATCH 07/10] feat: Use tailwind in header. --- src/assets/index.css | 2 +- .../Elements/SearchBar/SearchBar.tsx | 10 +++--- src/components/Elements/UserTags/UserTags.tsx | 14 +++++--- src/components/Layout/Header.tsx | 32 +++++++++++-------- 4 files changed, 34 insertions(+), 24 deletions(-) diff --git a/src/assets/index.css b/src/assets/index.css index e4cd9904..e27e76f6 100644 --- a/src/assets/index.css +++ b/src/assets/index.css @@ -27,7 +27,7 @@ code { @theme { --color-ht-100: oklch(0.9 0.0221 250.23); --color-ht-200: oklch(0.83 0.0314 249.73); - --color-ht-900: oklch(0.453 0.0179 251.34); + --color-ht-900: oklch(0.3455 0.0507 251.49); } @layer base { diff --git a/src/components/Elements/SearchBar/SearchBar.tsx b/src/components/Elements/SearchBar/SearchBar.tsx index f493dbea..a03a4526 100644 --- a/src/components/Elements/SearchBar/SearchBar.tsx +++ b/src/components/Elements/SearchBar/SearchBar.tsx @@ -28,12 +28,14 @@ export const SearchBar = () => { }, []) return ( -
    + {usedSearchEngine?.default === false ? ( - + ) : ( )} @@ -41,7 +43,7 @@ export const SearchBar = () => { ref={keywordsInputRef} type="text" name="keyword" - className="searchBarInput" + className="box-border w-full text-ht-900 focus:outline-none" placeholder={`Ask ${usedSearchEngine.label}`} /> diff --git a/src/components/Elements/UserTags/UserTags.tsx b/src/components/Elements/UserTags/UserTags.tsx index c07bccb7..ac10698b 100644 --- a/src/components/Elements/UserTags/UserTags.tsx +++ b/src/components/Elements/UserTags/UserTags.tsx @@ -6,15 +6,19 @@ export const UserTags = () => { const { userSelectedTags } = useUserPreferences() return ( -
    +
    {userSelectedTags.map((tag, index) => ( - + {tag.value} ))} - - - +
    + + + +
    ) } diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx index d3d32b5f..b40d39ab 100644 --- a/src/components/Layout/Header.tsx +++ b/src/components/Layout/Header.tsx @@ -56,20 +56,20 @@ export const Header = () => { return ( <> -
    - - - +
    + + + {' '} - + -
    +
    {isDNDModeActive() && ( - @@ -86,7 +86,7 @@ export const Header = () => { { if (isConnected) { navigate('/settings/general') @@ -96,15 +96,19 @@ export const Header = () => { }}> {isConnected ? ( <> - -
    - - {user?.streak || 1} - + +
    +
    + {' '} + {user?.streak || 1} +
    ) : ( - + )}
    From 8fe185e66d8e38d1a2efc570ad6164f2b5178f3f Mon Sep 17 00:00:00 2001 From: zouhir Date: Tue, 17 Jun 2025 23:12:10 +0200 Subject: [PATCH 08/10] feat: Use tailwind dimens instead of hardcoded px. --- .../Elements/Button/CircleButton.tsx | 2 +- .../Elements/SearchBar/SearchBar.tsx | 6 ++--- src/components/Elements/UserTags/UserTags.tsx | 15 ++++++------ src/components/Layout/Header.tsx | 23 +++++++++---------- 4 files changed, 23 insertions(+), 23 deletions(-) diff --git a/src/components/Elements/Button/CircleButton.tsx b/src/components/Elements/Button/CircleButton.tsx index 3a65a5c4..7b5e134e 100644 --- a/src/components/Elements/Button/CircleButton.tsx +++ b/src/components/Elements/Button/CircleButton.tsx @@ -12,7 +12,7 @@ const variants = { secondary: 'bg-ht-100 text-ht-900 hover:bg-ht-200', outlined: 'bg-ht-100 text-ht-900 hover:bg-ht-100', text: 'bg-transparent ttext-ht-900', - darkfocus: 'bg-blue-900 text-yellow-400 hover:opacity-80', + darkfocus: 'bg-blue-900 text-yellow-400 hover:opacity-80 dark:bg-ht-100 dark:hover:bg-ht-200', } type CircleButtonProps = { diff --git a/src/components/Elements/SearchBar/SearchBar.tsx b/src/components/Elements/SearchBar/SearchBar.tsx index a03a4526..9f3f2398 100644 --- a/src/components/Elements/SearchBar/SearchBar.tsx +++ b/src/components/Elements/SearchBar/SearchBar.tsx @@ -29,13 +29,13 @@ export const SearchBar = () => { return (
    {usedSearchEngine?.default === false ? ( - + ) : ( )} diff --git a/src/components/Elements/UserTags/UserTags.tsx b/src/components/Elements/UserTags/UserTags.tsx index ac10698b..6a710622 100644 --- a/src/components/Elements/UserTags/UserTags.tsx +++ b/src/components/Elements/UserTags/UserTags.tsx @@ -6,19 +6,20 @@ export const UserTags = () => { const { userSelectedTags } = useUserPreferences() return ( -
    +
    {userSelectedTags.map((tag, index) => ( + className="rounded-2xl bg-ht-900 px-2 py-0.5 text-base font-medium text-white dark:bg-ht-200"> {tag.value} ))} -
    - - - -
    + + +
    ) } diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx index b40d39ab..bf0f787f 100644 --- a/src/components/Layout/Header.tsx +++ b/src/components/Layout/Header.tsx @@ -56,18 +56,18 @@ export const Header = () => { return ( <> -
    - - +
    + + {' '} - + -
    +
    {isDNDModeActive() && (
    ) : ( - + )}
    diff --git a/src/features/adv/components/AdvBanner.css b/src/features/adv/components/AdvBanner.css index 8f404742..6d2ef862 100644 --- a/src/features/adv/components/AdvBanner.css +++ b/src/features/adv/components/AdvBanner.css @@ -3,7 +3,8 @@ padding: initial; } #banneradv { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, + font-family: + -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif; } #banneradv { @@ -58,7 +59,7 @@ right: 0; } -.hidden { +#banneradv .hidden { width: 0; height: 0; display: none; From 13691c884b192f4b5626d06ec3682119a8ba155b Mon Sep 17 00:00:00 2001 From: zouhir Date: Mon, 30 Jun 2025 13:40:06 +0200 Subject: [PATCH 10/10] fix: Card items display. --- src/assets/App.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/assets/App.css b/src/assets/App.css index 7eb3819d..5a027429 100644 --- a/src/assets/App.css +++ b/src/assets/App.css @@ -524,14 +524,15 @@ a { .rowItemIcon { position: relative; - top: 1px; + margin-right: 2px; + display: inline-block; } .rowTitleIcon { position: relative; - top: 3px; - margin-right: 6px; + margin-right: 2px; color: #99a2ac; + display: inline-block; } .backToHome {