Fix bugs and apply the Button to navbar

NIAEFEUP · Nov 1, 2024 · cdf283c · cdf283c
1 parent eec3139
commit cdf283c
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 90 deletions.
diff --git a/content-scripts/components/HeaderAuthentication.tsx b/content-scripts/components/HeaderAuthentication.tsx
@@ -3,6 +3,7 @@ import jsx from "texsaur";
 import { AuthSession } from "../types";
 import { togglePopover } from "../modules/utilities/popover";
 import Icon from "./Icon";
+import Button from "./Button";
 
 interface Props {
     auth: AuthSession | null;
@@ -12,15 +13,12 @@ const Authentication = ({ auth }: Props) => {
     if (auth)
         return (
             <div id="se-auth">
-                <button
-                    id="se-auth-notifications-button"
-                    className={`se-button se-icon-button ${
-                        auth.hasNotifications ? "se-badge" : ""
-                    }`}
+                <Button
+                    icon="ri-notification-line"
+                    radius="full"
                     onclick={() => togglePopover("se-auth-notifications-menu")}
-                >
-                    <Icon name="ri-notification-line" />
-                </button>
+                    className={auth.hasNotifications ? "se-badge" : ""}
+                />
                 <div id="se-auth-notifications-menu">
                     <input
                         type="radio"
@@ -102,13 +100,11 @@ const Authentication = ({ auth }: Props) => {
 
     return (
         <div id="se-auth">
-            <button
-                className="se-buttonn"
-                id="se-auth-button"
+            <Button
+                title="Iniciar Sessão"
+                radius="sm"
                 onclick={() => togglePopover("se-auth-form")}
-            >
-                Iniciar Sessão
-            </button>
+            />
             <form
                 id="se-auth-form"
                 action="vld_validacao.validacao"
@@ -141,10 +137,9 @@ const Authentication = ({ auth }: Props) => {
                     placeholder="Palavra-passe"
                     autoComplete="current-password"
                 />
-                <button className="se-button se-primary-button" type="submit">
-                    Iniciar Sessão
-                </button>
+                <Button title="Iniciar Sessão" color="primary" radius="sm" />
                 <span className="se-separator">ou</span>
+                {/* What to do here? It is an <a> not a button. Should the button has an href? */}
                 <a
                     href="vld_validacao.federate_login?p_redirect=web_page.Inicial"
                     id="se-auth-federate"

diff --git a/content-scripts/components/HeaderLinks.tsx b/content-scripts/components/HeaderLinks.tsx
@@ -10,7 +10,7 @@ const HeaderLinks = ({ links }: Props) => {
         <nav id="se-header-links">
             {Object.entries(links).map(([key, value]) => (
                 <div className="se-header-link" key={key}>
-                    <button>{key}</button>
+                    <span>{key}</span>
                     <div className="se-header-link-popover">
                         {Object.entries(value).map(([label, url]) => (
                             <a href={url} key={label}>

diff --git a/content-scripts/modules/layout.ts b/content-scripts/modules/layout.ts
@@ -159,7 +159,6 @@ const loadNotifications = async (): Promise<void> => {
                     li.append(
                         Button({
                             icon: "ri-check-line",
-                            className: "se-notification-button",
                             onclick: markAsRead,
                         }),
                     );

diff --git 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
@@ -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
@@ -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;