Button reference and initial ui

NIAEFEUP · Oct 29, 2024 · 20b5288 · 20b5288
1 parent 4cced69
commit 20b5288
Show file tree

Hide file tree

Showing 7 changed files with 2,897 additions and 4,305 deletions.
diff --git 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<ButtonProps> = ({
     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 (
-        <button
-            id={id ? id : ""}
-            className={className ? className : ""}
-            onclick={onclick}
-        >
+        <button id={id ? id : ""} className={finalClassName} onclick={onclick}>
             {icon ? <Icon name={icon} /> : ""}
             {title ? <span>{title}</span> : ""}
         </button>

diff --git a/content-scripts/pages/components_page.tsx b/content-scripts/pages/components_page.tsx
@@ -76,18 +76,66 @@ export function createComponentsPage() {
                     description="Our button abstraction that can be used to create buttons with icons and text."
                     code={`
 <Button
-  name="my_button"
+  name="MY BUTTON"
   text="Click me"
   icon="ri-notification-line"
   onclick={() => alert("Button was clicked")}
 />
             `}
                 >
                     <Button
-                        title="my_button"
+                        title="MY BUTTON"
                         icon="ri-notification-line"
                         onclick={() => alert("Button was clicked")}
                     />
+                    <Button
+                        title="MY BUTTON"
+                        icon="ri-notification-line"
+                        color="primary"
+                        onclick={() => alert("Button was clicked")}
+                    />
+                    <Button
+                        title="MY BUTTON"
+                        icon="ri-notification-line"
+                        color="primary"
+                        size="sm"
+                        onclick={() => alert("Button was clicked")}
+                    />
+                    <Button
+                        title="MY BUTTON"
+                        icon="ri-notification-line"
+                        color="primary"
+                        size="md"
+                        onclick={() => alert("Button was clicked")}
+                    />
+                    <Button
+                        title="MY BUTTON"
+                        icon="ri-notification-line"
+                        color="primary"
+                        size="lg"
+                        onclick={() => alert("Button was clicked")}
+                    />
+                    <Button
+                        title="MY BUTTON"
+                        icon="ri-notification-line"
+                        color="primary"
+                        radius="sm"
+                        onclick={() => alert("Button was clicked")}
+                    />
+                    <Button
+                        title="MY BUTTON"
+                        icon="ri-notification-line"
+                        color="primary"
+                        radius="md"
+                        onclick={() => alert("Button was clicked")}
+                    />
+                    <Button
+                        title="MY BUTTON"
+                        icon="ri-notification-line"
+                        color="primary"
+                        radius="lg"
+                        onclick={() => alert("Button was clicked")}
+                    />
                 </Component>
 
                 {/* Table */}

diff --git a/css/components.css b/css/components.css
@@ -0,0 +1,66 @@
+/* Button */
+
+.se-button {
+    background-color: #f4f4f4;
+    padding: 0.5rem 1rem;
+    text-decoration: none !important;
+    cursor: pointer;
+    border: none;
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    font-weight: 400;
+    color: #333;
+
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+
+    /* Animation */
+    transition-timing-function: ease;
+    transition-duration: 0.25s;
+
+    outline: 1px solid transparent;
+    outline-offset: 1px;
+
+    &:hover {
+        background-color: #e6e6e6;
+    }
+
+    /* Rounded Borders */
+    &.rounded-sm {
+        border-radius: 8px;
+    }
+    &.rounded-md {
+        border-radius: 12px;
+    }
+    &.rounded-lg {
+        border-radius: 14px;
+    }
+
+    /* Sizes */
+    &.sm {
+        font-size: small;
+    }
+    &.md {
+        font-size: medium;
+    }
+    &.lg {
+        font-size: large;
+    }
+
+    /* Colors */
+    &.primary {
+        background-color: #8c2d19;
+        color: white;
+
+        &:hover {
+            background-color: #6f1e0e;
+        }
+
+        &:active {
+            background-color: #4f1309;
+        }
+    }
+
+    /* Variants */
+}
diff --git a/css/simpler.css b/css/simpler.css
@@ -65,6 +65,7 @@ body:is(body) {
         "left main right" 1fr / auto 1fr auto;
 }
 
+/*
 .se-button {
     display: flex;
     flex-direction: row;
@@ -96,7 +97,7 @@ body:is(body) {
     background-color: #f0f0f0 !important;
     color: #b0b0b0 !important;
 }
-
+*/
 .se-icon-button {
     border-radius: 50% !important;
     padding: 0.5em !important;
@@ -896,8 +897,7 @@ td.i {
 /* ----------------- INPUT ----------------- */
 
 input,
-select,
-button {
+select {
     border-radius: 8px !important;
     border-color: #cfcfcf !important;
     box-sizing: border-box;
@@ -909,11 +909,6 @@ button {
     transition: all 0.2s ease-in-out;
 }
 
-button:hover {
-    cursor: pointer;
-    background-color: #e8e8e8 !important;
-}
-
 select {
     appearance: none;
     /*background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");

diff --git a/manifest.js b/manifest.js
@@ -19,6 +19,7 @@ let manifest = {
             run_at: "document_start",
             matches: ["https://sigarra.up.pt/feup/*"],
             css: [
+                "css/components.css",
                 "css/simpler.css",
                 "css/custom.css",
                 "css/icons.css",
@@ -46,6 +47,7 @@ let manifest = {
     web_accessible_resources: [
         {
             resources: [
+                "css/components.css",
                 "css/main.css",
                 "css/custom.css",
                 "css/simpler.css",

diff --git a/manifest/base.json b/manifest/base.json
@@ -19,6 +19,7 @@
             "run_at": "document_start",
             "matches": ["https://sigarra.up.pt/feup/*"],
             "css": [
+                "css/components.css",
                 "css/simpler.css",
                 "css/custom.css",
                 "css/icons.css",
@@ -46,6 +47,7 @@
     "web_accessible_resources": [
         {
             "resources": [
+                "css/components.css",
                 "css/main.css",
                 "css/custom.css",
                 "css/simpler.css",