diff --git a/source/Options/Options.tsx b/source/Options/Options.tsx index 1ed01b1..3b7fcd1 100644 --- a/source/Options/Options.tsx +++ b/source/Options/Options.tsx @@ -2,6 +2,12 @@ import * as React from 'react'; import {useEffect, useState} from 'react'; import {getStorage, setStorage} from '../utils/storage'; +const GitHubIcon: React.FC = () => ( + + + +); + const Options: React.FC = () => { const [username, setUsername] = useState(''); const [enableLogging, setEnableLogging] = useState(false); @@ -77,6 +83,18 @@ const Options: React.FC = () => { {saved && Settings saved} + + ); }; diff --git a/source/Options/styles.scss b/source/Options/styles.scss index 3c457c5..3348be2 100644 --- a/source/Options/styles.scss +++ b/source/Options/styles.scss @@ -4,38 +4,45 @@ body { color: variables.$black; - background-color: variables.$greyWhite; + background: linear-gradient(180deg, variables.$greyWhite 0%, #eef2f7 100%); min-height: 100vh; display: flex; justify-content: center; - padding: 40px 20px; + padding: 50px 20px; + font-family: variables.$fontFamily; } .options { width: 100%; - max-width: 500px; + max-width: 480px; &__header { - margin-bottom: 30px; + margin-bottom: 32px; text-align: center; h1 { - font-size: 24px; - font-weight: 700; - margin-bottom: 8px; + 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; } } &__card { - background: white; - border-radius: 12px; - padding: 24px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + background: variables.$cardBg; + border-radius: variables.$radiusLg; + padding: 28px; + box-shadow: variables.$shadowLg; + border: 1px solid variables.$border; } &__section { @@ -48,110 +55,165 @@ body { &__label { display: block; - font-size: 14px; - font-weight: 600; - margin-bottom: 8px; + font-size: 13px; + font-weight: variables.$semibold; + margin-bottom: 10px; color: variables.$black; + text-transform: uppercase; + letter-spacing: 0.5px; } &__input { width: 100%; - padding: 12px 14px; - font-size: 14px; - background-color: white; + padding: 14px 16px; + font-size: 15px; + background-color: variables.$white; color: variables.$black; - border: 1px solid #e0e0e0; - border-radius: 8px; - transition: border-color 0.2s, box-shadow 0.2s; + border: 2px solid variables.$border; + border-radius: variables.$radiusMd; + transition: all 0.2s ease; box-sizing: border-box; + &:hover { + border-color: #cbd5e1; + } + &:focus { outline: none; - border-color: #4a90d9; - box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.15); + border-color: variables.$primary; + box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15); } &::placeholder { - color: #a0a0a0; + color: #94a3b8; } } &__checkbox-wrapper { display: flex; align-items: flex-start; - gap: 12px; - padding: 14px; - background: #f8f9fa; - border-radius: 8px; + gap: 14px; + padding: 16px; + background: variables.$greyWhite; + border-radius: variables.$radiusMd; cursor: pointer; - transition: background 0.2s; + transition: all 0.2s ease; + border: 2px solid transparent; &:hover { - background: #f0f1f3; + background: #eef2f7; + border-color: variables.$border; } } &__checkbox { - width: 18px; - height: 18px; + width: 20px; + height: 20px; margin-top: 2px; cursor: pointer; - accent-color: #4a90d9; + accent-color: variables.$primary; } &__checkbox-text { font-size: 14px; line-height: 1.5; - color: #444; + color: variables.$skyBlue; + font-weight: variables.$medium; } &__actions { display: flex; align-items: center; gap: 16px; - margin-top: 24px; + margin-top: 28px; padding-top: 24px; - border-top: 1px solid #eee; + border-top: 1px solid variables.$border; } &__button { - padding: 12px 24px; + padding: 14px 28px; font-size: 14px; - font-weight: 600; + font-weight: variables.$semibold; border: none; - border-radius: 8px; + border-radius: variables.$radiusMd; cursor: pointer; - transition: opacity 0.2s, transform 0.1s; + transition: all 0.2s ease; &:hover { - opacity: 0.9; + transform: translateY(-2px); + box-shadow: variables.$shadowMd; } &:active { - transform: scale(0.98); + transform: translateY(0); } &--primary { - background: #4a90d9; - color: white; + background: linear-gradient(135deg, variables.$primary 0%, variables.$primaryDark 100%); + color: variables.$white; } } &__status { font-size: 14px; - color: #2d8a2d; - font-weight: 500; + color: variables.$success; + font-weight: variables.$semibold; display: flex; align-items: center; - gap: 6px; + gap: 8px; &::before { content: ""; display: inline-block; width: 8px; height: 8px; - background: #2d8a2d; + background: variables.$success; border-radius: 50%; + animation: pulse 1s ease-in-out; + } + } + + &__footer { + margin-top: 24px; + text-align: center; + } + + &__github-link { + 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; + + &: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/Popup/Popup.tsx b/source/Popup/Popup.tsx index 289dd6d..e323d22 100644 --- a/source/Popup/Popup.tsx +++ b/source/Popup/Popup.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import {useEffect, useState} from 'react'; import browser, {Tabs} from 'webextension-polyfill'; +import {getStorage} from '../utils/storage'; function openWebPage(url: string): Promise { return browser.tabs.create({url}); @@ -14,6 +15,7 @@ interface TabInfo { const Popup: React.FC = () => { const [tabInfo, setTabInfo] = useState(null); + const [username, setUsername] = useState(''); useEffect(() => { browser.tabs.query({active: true, currentWindow: true}).then((tabs) => { @@ -26,6 +28,10 @@ const Popup: React.FC = () => { }); } }); + + getStorage(['username']).then(({username: storedUsername}) => { + setUsername(storedUsername); + }); }, []); const handleReloadTab = async (): Promise => { @@ -44,6 +50,7 @@ const Popup: React.FC = () => {

Web Extension Starter

+ {username &&

Hello, {username}!

}
{tabInfo && ( diff --git a/source/Popup/styles.scss b/source/Popup/styles.scss index ce62084..6b4701e 100644 --- a/source/Popup/styles.scss +++ b/source/Popup/styles.scss @@ -4,8 +4,9 @@ body { color: variables.$black; - background-color: variables.$greyWhite; + background: linear-gradient(180deg, variables.$greyWhite 0%, #eef2f7 100%); width: 100%; + font-family: variables.$fontFamily; } .popup { @@ -14,68 +15,81 @@ body { &__header { text-align: center; - margin-bottom: 16px; + margin-bottom: 20px; padding-bottom: 16px; - border-bottom: 1px solid #eee; + border-bottom: 1px solid variables.$border; } &__title { - font-size: 16px; - font-weight: 700; - letter-spacing: 0.5px; + font-size: 18px; + font-weight: variables.$bold; + letter-spacing: -0.3px; color: variables.$black; + background: linear-gradient(135deg, variables.$primary 0%, #8b5cf6 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + &__greeting { + font-size: 13px; + color: variables.$skyBlue; + margin-top: 6px; + font-weight: variables.$medium; } &__card { - background: white; - border-radius: 10px; - padding: 16px; - margin-bottom: 12px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); + background: variables.$cardBg; + border-radius: variables.$radiusLg; + padding: 18px; + margin-bottom: 14px; + box-shadow: variables.$shadowMd; + border: 1px solid variables.$border; } &__card-header { display: flex; align-items: center; justify-content: space-between; - margin-bottom: 12px; + margin-bottom: 14px; } &__card-title { - font-size: 12px; - font-weight: 600; + font-size: 11px; + font-weight: variables.$bold; text-transform: uppercase; - letter-spacing: 0.5px; + letter-spacing: 0.8px; color: variables.$skyBlue; } &__tab-content { display: flex; align-items: center; - gap: 12px; - margin-bottom: 14px; + gap: 14px; + margin-bottom: 16px; } &__favicon { - width: 40px; - height: 40px; - border-radius: 8px; + width: 44px; + height: 44px; + border-radius: variables.$radiusMd; flex-shrink: 0; - background: #f0f0f0; + background: variables.$greyWhite; object-fit: cover; + border: 1px solid variables.$border; } &__favicon-placeholder { - width: 40px; - height: 40px; - border-radius: 8px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + width: 44px; + height: 44px; + border-radius: variables.$radiusMd; + background: linear-gradient(135deg, variables.$primary 0%, #8b5cf6 100%); display: flex; align-items: center; justify-content: center; - color: white; + color: variables.$white; font-size: 18px; - font-weight: 700; + font-weight: variables.$bold; flex-shrink: 0; } @@ -86,12 +100,13 @@ body { &__tab-title { font-size: 14px; - font-weight: 600; + font-weight: variables.$semibold; color: variables.$black; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + line-height: 1.3; } &__tab-url { @@ -104,71 +119,80 @@ body { &__btn { width: 100%; - padding: 10px 14px; + padding: 11px 16px; font-size: 13px; - font-weight: 500; + font-weight: variables.$semibold; border: none; - border-radius: 8px; + border-radius: variables.$radiusMd; cursor: pointer; - transition: all 0.15s ease; + transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; + gap: 8px; &:hover { - transform: translateY(-1px); + transform: translateY(-2px); + box-shadow: variables.$shadowMd; } &:active { transform: translateY(0); } + &--primary { + background: linear-gradient(135deg, variables.$primary 0%, variables.$primaryDark 100%); + color: variables.$white; + } + &--secondary { - background: #f0f1f3; - color: #444; + background: variables.$greyWhite; + color: variables.$black; + border: 1px solid variables.$border; &:hover { - background: #e4e5e7; + background: #eef2f7; } } } &__footer { display: flex; - gap: 8px; - margin-top: 4px; + gap: 10px; } &__footer-btn { flex: 1; - padding: 12px; - font-size: 13px; - font-weight: 600; + padding: 12px 10px; + font-size: 12px; + font-weight: variables.$semibold; border: none; - border-radius: 8px; + border-radius: variables.$radiusMd; cursor: pointer; - transition: all 0.15s ease; + transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; + gap: 6px; &:hover { - transform: translateY(-1px); + transform: translateY(-2px); + box-shadow: variables.$shadowMd; } &--settings { - background: #4a90d9; - color: white; + background: linear-gradient(135deg, variables.$primary 0%, #8b5cf6 100%); + color: variables.$white; } &--github { - background: #24292e; - color: white; + background: linear-gradient(135deg, #24292e 0%, #1a1a1a 100%); + color: variables.$white; } &--support { - background: #ff813f; - color: white; + background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%); + color: variables.$white; } } } diff --git a/source/styles/_fonts.scss b/source/styles/_fonts.scss index 52ca8dc..68300b9 100644 --- a/source/styles/_fonts.scss +++ b/source/styles/_fonts.scss @@ -1 +1 @@ -@import url("https://fonts.googleapis.com/css?family=Nunito:400,600"); +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); diff --git a/source/styles/_variables.scss b/source/styles/_variables.scss index 6a8d43d..e7bc8e0 100644 --- a/source/styles/_variables.scss +++ b/source/styles/_variables.scss @@ -1,10 +1,17 @@ // colors -$black: #0d0d0d; -$greyWhite: #f3f3f3; -$skyBlue: #8892b0; +$black: #1a1a2e; +$greyWhite: #f8f9fc; +$skyBlue: #64748b; +$primary: #6366f1; +$primaryDark: #4f46e5; +$success: #10b981; +$danger: #ef4444; +$white: #ffffff; +$border: #e2e8f0; +$cardBg: #ffffff; // fonts -$nunito: "Nunito", sans-serif; +$fontFamily: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; // font weights $thin: 100; @@ -17,6 +24,16 @@ $bold: 700; $exbold: 800; $exblack: 900; +// border radius +$radiusSm: 6px; +$radiusMd: 10px; +$radiusLg: 14px; + +// shadows +$shadowSm: 0 1px 2px rgba(0, 0, 0, 0.05); +$shadowMd: 0 4px 6px -1px rgba(0, 0, 0, 0.1); +$shadowLg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); + // other variables .d-none { display: none !important;