From 72fa5db993d99ced2e3d96fca52decc3191cc6b6 Mon Sep 17 00:00:00 2001 From: "Abhijith Vijayan [FLUXON]" Date: Sat, 3 Jan 2026 19:38:23 +0530 Subject: [PATCH] feat: use css modules --- source/Options/Options.module.scss | 124 ++++++++++ source/Options/Options.tsx | 88 +++---- source/Options/index.tsx | 3 +- source/Options/styles.scss | 219 ------------------ source/Popup/Popup.module.scss | 44 ++++ source/Popup/Popup.tsx | 114 ++++----- .../FooterActions/FooterActions.module.scss | 10 + .../FooterActions/FooterActions.tsx | 51 ++++ .../components/TabInfo/TabInfo.module.scss | 56 +++++ source/Popup/components/TabInfo/TabInfo.tsx | 42 ++++ source/Popup/index.tsx | 4 +- source/Popup/styles.scss | 198 ---------------- source/components/Button/Button.module.scss | 74 ++++++ source/components/Button/Button.tsx | 38 +++ source/components/Card/Card.module.scss | 29 +++ source/components/Card/Card.tsx | 36 +++ .../components/Checkbox/Checkbox.module.scss | 33 +++ source/components/Checkbox/Checkbox.tsx | 38 +++ source/components/Input/Input.module.scss | 41 ++++ source/components/Input/Input.tsx | 24 ++ source/components/icons/GitHubIcon.tsx | 12 + source/components/icons/HeartIcon.tsx | 12 + source/components/icons/SettingsIcon.tsx | 20 ++ source/globals.d.ts | 5 +- 24 files changed, 768 insertions(+), 547 deletions(-) create mode 100644 source/Options/Options.module.scss delete mode 100644 source/Options/styles.scss create mode 100644 source/Popup/Popup.module.scss create mode 100644 source/Popup/components/FooterActions/FooterActions.module.scss create mode 100644 source/Popup/components/FooterActions/FooterActions.tsx create mode 100644 source/Popup/components/TabInfo/TabInfo.module.scss create mode 100644 source/Popup/components/TabInfo/TabInfo.tsx delete mode 100644 source/Popup/styles.scss create mode 100644 source/components/Button/Button.module.scss create mode 100644 source/components/Button/Button.tsx create mode 100644 source/components/Card/Card.module.scss create mode 100644 source/components/Card/Card.tsx create mode 100644 source/components/Checkbox/Checkbox.module.scss create mode 100644 source/components/Checkbox/Checkbox.tsx create mode 100644 source/components/Input/Input.module.scss create mode 100644 source/components/Input/Input.tsx create mode 100644 source/components/icons/GitHubIcon.tsx create mode 100644 source/components/icons/HeartIcon.tsx create mode 100644 source/components/icons/SettingsIcon.tsx diff --git a/source/Options/Options.module.scss b/source/Options/Options.module.scss new file mode 100644 index 0000000..9e9d115 --- /dev/null +++ b/source/Options/Options.module.scss @@ -0,0 +1,124 @@ +@use "../styles/fonts"; +@use "../styles/reset"; +@use "../styles/variables"; + +:global(body) { + color: variables.$black; + background: linear-gradient(180deg, variables.$greyWhite 0%, #eef2f7 100%); + min-height: 100vh; + display: flex; + justify-content: center; + padding: 50px 20px; + font-family: variables.$fontFamily; +} + +.options { + width: 100%; + max-width: 480px; +} + +.header { + margin-bottom: 32px; + text-align: center; + + h1 { + font-size: 26px; + font-weight: variables.$bold; + margin-bottom: 10px; + background: linear-gradient(135deg, variables.$primary 0%, #8b5cf6 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + p { + color: variables.$skyBlue; + font-size: 14px; + font-weight: variables.$medium; + } +} + +.form { + background: variables.$cardBg; + border-radius: variables.$radiusLg; + padding: 28px; + box-shadow: variables.$shadowLg; + border: 1px solid variables.$border; +} + +.section { + margin-bottom: 24px; +} + +.actions { + display: flex; + align-items: center; + gap: 16px; + margin-top: 28px; + padding-top: 24px; + border-top: 1px solid variables.$border; +} + +.status { + font-size: 14px; + color: variables.$success; + font-weight: variables.$semibold; + display: flex; + align-items: center; + gap: 8px; + + &::before { + content: ""; + display: inline-block; + width: 8px; + height: 8px; + background: variables.$success; + border-radius: 50%; + animation: pulse 1s ease-in-out; + } +} + +.footer { + margin-top: 24px; + text-align: center; +} + +.githubLink { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 10px 20px; + font-size: 14px; + font-weight: variables.$medium; + color: variables.$skyBlue; + background: variables.$cardBg; + border: 1px solid variables.$border; + border-radius: variables.$radiusMd; + transition: all 0.2s ease; + text-decoration: none; + + &:hover { + color: variables.$black; + border-color: #cbd5e1; + box-shadow: variables.$shadowSm; + transform: translateY(-1px); + } + + svg { + flex-shrink: 0; + } +} + +@keyframes pulse { + 0% { + transform: scale(0); + opacity: 0; + } + 50% { + transform: scale(1.2); + } + 100% { + transform: scale(1); + opacity: 1; + } +} diff --git a/source/Options/Options.tsx b/source/Options/Options.tsx index 3b7fcd1..da9c951 100644 --- a/source/Options/Options.tsx +++ b/source/Options/Options.tsx @@ -1,20 +1,20 @@ -import * as React from 'react'; -import {useEffect, useState} from 'react'; -import {getStorage, setStorage} from '../utils/storage'; +import * as React from "react"; +import { useEffect, useState } from "react"; +import type { FC } from "react"; +import { getStorage, setStorage } from "../utils/storage"; +import { Button } from "../components/Button/Button"; +import { Input } from "../components/Input/Input"; +import { Checkbox } from "../components/Checkbox/Checkbox"; +import { GitHubIcon } from "../components/icons/GitHubIcon"; +import styles from "./Options.module.scss"; -const GitHubIcon: React.FC = () => ( - - - -); - -const Options: React.FC = () => { - const [username, setUsername] = useState(''); +const Options: FC = () => { + const [username, setUsername] = useState(""); const [enableLogging, setEnableLogging] = useState(false); const [saved, setSaved] = useState(false); useEffect(() => { - getStorage(['username', 'enableLogging']).then((result) => { + getStorage(["username", "enableLogging"]).then((result) => { setUsername(result.username); setEnableLogging(result.enableLogging); }); @@ -22,76 +22,58 @@ const Options: React.FC = () => { const handleSave = async (e: React.FormEvent): Promise => { e.preventDefault(); - await setStorage({username, enableLogging}); + await setStorage({ username, enableLogging }); setSaved(true); setTimeout(() => setSaved(false), 2000); }; return ( -
-
+
+

Extension Settings

Configure your extension preferences

-
-
- - +
+ setUsername(e.target.value)} />
-
- +
+ setEnableLogging(e.target.checked)} + />
-
- - {saved && Settings saved} + + {saved && Settings saved}
-