From 20b5288ff48f8433b47ba96524ccd8a2f8bde081 Mon Sep 17 00:00:00 2001 From: thePeras Date: Tue, 29 Oct 2024 08:31:15 +0000 Subject: [PATCH 1/3] Button reference and initial ui --- content-scripts/components/Button.tsx | 26 +- content-scripts/pages/components_page.tsx | 52 +- css/components.css | 66 + css/simpler.css | 11 +- manifest.js | 2 + manifest/base.json | 2 + popup/yarn.lock | 7043 ++++++++------------- 7 files changed, 2897 insertions(+), 4305 deletions(-) create mode 100644 css/components.css diff --git a/content-scripts/components/Button.tsx b/content-scripts/components/Button.tsx index 74701ef..f7a4489 100644 --- a/content-scripts/components/Button.tsx +++ b/content-scripts/components/Button.tsx @@ -2,10 +2,19 @@ import jsx from "texsaur"; import Icon from "./Icon"; +type ButtonVariant = "solid" | "outline"; +type ButtonColor = "primary"; +type Radius = "full" | "sm" | "md" | "lg"; +type Size = "sm" | "md" | "lg"; + interface ButtonProps { title?: string; icon?: string; id?: string; + variant?: ButtonVariant; + color?: ButtonColor; + radius?: Radius; + size?: Size; className?: string; onclick?: (e: Event) => void; } @@ -14,15 +23,22 @@ const Button: JSX.Component = ({ title, icon, id, + variant, + color, + radius, + size, className, onclick, }) => { + let finalClassName = "se-button"; + if (variant) finalClassName += " " + variant; + if (color) finalClassName += " " + color; + if (radius) finalClassName += " rounded-" + radius; + if (size) finalClassName += " " + size; + if (className) finalClassName += " " + className; + return ( - diff --git a/content-scripts/pages/components_page.tsx b/content-scripts/pages/components_page.tsx index c79edd4..6a53fca 100644 --- a/content-scripts/pages/components_page.tsx +++ b/content-scripts/pages/components_page.tsx @@ -76,7 +76,7 @@ export function createComponentsPage() { description="Our button abstraction that can be used to create buttons with icons and text." code={` + className={auth.hasNotifications ? "se-badge" : ""} + />
{ return (
- + />
{ placeholder="Palavra-passe" autoComplete="current-password" /> - + + {key}
{Object.entries(value).map(([label, url]) => ( diff --git a/content-scripts/modules/layout.ts b/content-scripts/modules/layout.ts index de21a86..23ce833 100644 --- a/content-scripts/modules/layout.ts +++ b/content-scripts/modules/layout.ts @@ -159,7 +159,6 @@ const loadNotifications = async (): Promise => { li.append( Button({ icon: "ri-check-line", - className: "se-notification-button", onclick: markAsRead, }), ); diff --git a/css/components.css b/css/components.css index 4f934ba..773c48b 100644 --- a/css/components.css +++ b/css/components.css @@ -1,5 +1,10 @@ /* Button */ .se-button { + /* Reset Sigarra Styles */ + background-image: none; + box-shadow: none; + /* Ending Reseting Sigarra Styles */ + background-color: #f4f4f4; padding: 0.5rem 1rem; text-decoration: none !important; @@ -26,6 +31,7 @@ justify-content: center; &:hover { + background-image: none; opacity: 0.9; scale: 0.95; } diff --git a/css/expandableCard.css b/css/expandableCard.css index c6eda1c..a386005 100644 --- a/css/expandableCard.css +++ b/css/expandableCard.css @@ -10,6 +10,7 @@ border: none !important; padding: none !important; margin: none !important; + box-shadow: none !important; } .se-card-expand-button:hover { diff --git a/css/simpler.css b/css/simpler.css index 71aa018..7e0f125 100644 --- a/css/simpler.css +++ b/css/simpler.css @@ -65,59 +65,6 @@ body:is(body) { "left main right" 1fr / auto 1fr auto; } -/* -.se-button { - display: flex; - flex-direction: row; - gap: 0.5em; - align-items: center; - justify-content: center; - background-color: white !important; - color: black !important; - padding: 0.5em 1em !important; - border-radius: 8px !important; - border: none; - text-decoration: none !important; - transition: - background-color 0.2s, - color 0.2s; -} - -.se-button:is(:hover, :focus):not(:disabled) { - background-color: #f0f0f0 !important; - color: black !important; -} - -.se-button:active:not(:disabled) { - background-color: #e0e0e0 !important; - color: black !important; -} - -.se-button:disabled { - background-color: #f0f0f0 !important; - color: #b0b0b0 !important; -} -*/ -.se-icon-button { - border-radius: 50% !important; - padding: 0.5em !important; -} - -.se-primary-button { - background-color: rgb(140, 45, 25) !important; - color: white !important; -} - -.se-primary-button:is(:hover, :focus):not(:disabled) { - background-color: rgb(165, 45, 25) !important; - color: white !important; -} - -.se-primary-button:active:not(:disabled) { - background-color: rgb(190, 45, 25) !important; - color: white !important; -} - .se-loading-indicator { display: none; flex-direction: column; @@ -145,6 +92,7 @@ body:is(body) { } } +/* TODO: A lot of style related to the navbar, move out from here */ #se-auth-federate { background-color: #4a9cd4 !important; color: white !important; @@ -221,18 +169,11 @@ body:is(body) { padding-inline: 1em; } -.se-header-link > button { +.se-header-link > span { font-size: 1.25em; font-weight: 500; - color: white !important; - padding: 0 !important; - border: none !important; - background: none !important; -} - -.se-header-link > button:hover { - color: #f0f0f0 !important; - background: none !important; + cursor: default; + color: white; } .se-header-link-popover { @@ -291,8 +232,7 @@ body:is(body) { font-size: 0.8em; } -#se-auth-close-button, -#se-auth-button { +#se-auth-close-button { grid-area: 1 / 1; } @@ -409,6 +349,7 @@ body:is(body) { border: none; background: none; padding: 0 !important; + box-shadow: none; } #se-auth-profile-button img { @@ -481,12 +422,6 @@ body:is(body) { font-size: 0.8em; } -.se-notification-button { - grid-area: button; - background: none !important; - border: none !important; -} - #se-auth-new-notifications, #se-auth-read-notifications { display: none;