Feature/popup option details

popup/components/controls/SwitchControl.js

@@ -1,10 +1,18 @@
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import { styled } from "@stitches/react";
 import { useEffect, useState } from "react";
+import { RiQuestionLine } from "@remixicon/react";
+import { Tooltip } from "react-tooltip";
 
 import { getStorage, setStorage } from "../../utilities/chromeStorage";
 
-function SwitchControl({ label, storageKey, defaultState = false }) {
+function SwitchControl({
+    label,
+    storageKey,
+    defaultState = false,
+    tooltipContent,
+    tooltipId,
+}) {
     const [localState, setLocalState] = useState(defaultState);
 
     useEffect(() => {
@@ -26,6 +34,17 @@ function SwitchControl({ label, storageKey, defaultState = false }) {
         <div className="flex items-center justify-between w-full">
             <label htmlFor={storageKey} className="text-[15px] font-bold">
                 {label}
+                {tooltipContent && (
+                    <span className="question-icon">
+                        <RiQuestionLine data-tooltip-id={tooltipId} />
+                        <Tooltip
+                            className="tooltip"
+                            id={tooltipId}
+                            content={tooltipContent}
+                            place="top"
+                        />
+                    </span>
+                )}
             </label>
             <StyledSwitch
                 onCheckedChange={async (checked) => {

popup/components/sections/Features.js

@@ -3,7 +3,22 @@ import SwitchControl from "../controls/SwitchControl";
 
 const Layout = () => (
     <Section title="Funcionalidades">
-        <SwitchControl label="Relembrar utilizador" storageKey="autoLogin" />
+        <SwitchControl
+            label="Relembrar utilizador"
+            storageKey="autoLogin"
+            tooltipContent={
+                <>
+                    Relogin automático quando a sessão for perdida.
+                    <br />
+                    Depois de ativada a opção, é necessário repetir o login.
+                    <br />
+                    Atenção, esta opção apenas funciona com login por
+                    <br />
+                    credenciais e não como autenticação federada.
+                </>
+            }
+            tooltipId="autoLogin-tooltip"
+        />
     </Section>
 );
 

popup/components/sections/Layout.js

@@ -3,9 +3,40 @@ import SwitchControl from "../controls/SwitchControl";
 
 const Layout = () => (
     <Section title="Aspetos Visuais">
-        <SwitchControl label="Ativar barra de navegação" storageKey="navbar" />
-        <SwitchControl label="Esconder atalhos" storageKey="shortcuts" />
-        <SwitchControl label="Mudar fonte de letra" storageKey="font" />
+        <SwitchControl
+            label="Ativar barra de navegação"
+            storageKey="navbar"
+            tooltipContent={
+                <>
+                    Ativar navegação superior e esconder
+                    <br />
+                    barra de navegação da esquerda.
+                </>
+            }
+            tooltipId="navbar-tooltip"
+        />
+        <SwitchControl
+            label="Esconder atalhos"
+            storageKey="shortcuts"
+            tooltipContent={
+                <>
+                    Esconder a opção dos atalhos <br />
+                    da barra lateral direita.
+                </>
+            }
+            tooltipId="shortcuts-tooltip"
+        />
+        <SwitchControl
+            label="Mudar fonte de letra"
+            storageKey="font"
+            tooltipContent={
+                <>
+                    Alterar a fonte do <br />
+                    texto para Roboto.
+                </>
+            }
+            tooltipId="font-tooltip"
+        />
     </Section>
 );
 

popup/package.json

@@ -17,6 +17,7 @@
         "@radix-ui/react-slider": "^0.1.3",
         "@radix-ui/react-switch": "^0.1.4",
         "@radix-ui/react-toggle": "^0.1.3",
+        "@remixicon/react": "^4.4.0",
         "@stitches/react": "^1.2.6",
         "@uiw/react-codemirror": "^4.19.6",
         "lodash.debounce": "^4.0.8",
@@ -25,7 +26,8 @@
         "next": "12.0.7",
         "react": "17.0.2",
         "react-dom": "17.0.2",
-        "react-hot-toast": "^2.4.1"
+        "react-hot-toast": "^2.4.1",
+        "react-tooltip": "^5.28.0"
     },
     "devDependencies": {
         "autoprefixer": "^10.4.1",

popup/styles/globals.css

@@ -44,3 +44,11 @@ textarea,
 select {
     font: inherit;
 }
+
+.question-icon {
+    display: inline-block;
+    transform: scale(0.8);
+    margin-right: 4px;
+    vertical-align: top;
+    color: grey;
+}

popup/yarn.lock

@@ -194,6 +194,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/core@npm:^1.6.0":
+  version: 1.6.8
+  resolution: "@floating-ui/core@npm:1.6.8"
+  dependencies:
+    "@floating-ui/utils": "npm:^0.2.8"
+  checksum: 10c0/d6985462aeccae7b55a2d3f40571551c8c42bf820ae0a477fc40ef462e33edc4f3f5b7f11b100de77c9b58ecb581670c5c3f46d0af82b5e30aa185c735257eb9
+  languageName: node
+  linkType: hard
+
+"@floating-ui/dom@npm:^1.6.1":
+  version: 1.6.12
+  resolution: "@floating-ui/dom@npm:1.6.12"
+  dependencies:
+    "@floating-ui/core": "npm:^1.6.0"
+    "@floating-ui/utils": "npm:^0.2.8"
+  checksum: 10c0/c67b39862175b175c6ac299ea970f17a22c7482cfdf3b1bc79313407bf0880188b022b878953fa69d3ce166ff2bd9ae57c86043e5dd800c262b470d877591b7d
+  languageName: node
+  linkType: hard
+
+"@floating-ui/utils@npm:^0.2.8":
+  version: 0.2.8
+  resolution: "@floating-ui/utils@npm:0.2.8"
+  checksum: 10c0/a8cee5f17406c900e1c3ef63e3ca89b35e7a2ed645418459a73627b93b7377477fc888081011c6cd177cac45ec2b92a6cab018c14ea140519465498dddd2d3f9
+  languageName: node
+  linkType: hard
+
 "@hapi/accept@npm:5.0.2":
   version: 5.0.2
   resolution: "@hapi/accept@npm:5.0.2"
@@ -787,6 +813,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@remixicon/react@npm:^4.4.0":
+  version: 4.5.0
+  resolution: "@remixicon/react@npm:4.5.0"
+  peerDependencies:
+    react: ">=18.2.0"
+  checksum: 10c0/90b8821862dbd3e22a91b848b43e631aa62dc8ed24381d755d07a66f994e8af46ee90842aa70c8cc86e7fe7d20a148f7e4d6ed7e5c73c1eb35ca102244788fd1
+  languageName: node
+  linkType: hard
+
 "@stitches/react@npm:^1.2.6":
   version: 1.2.8
   resolution: "@stitches/react@npm:1.2.8"
@@ -1337,6 +1372,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"classnames@npm:^2.3.0":
+  version: 2.5.1
+  resolution: "classnames@npm:2.5.1"
+  checksum: 10c0/afff4f77e62cea2d79c39962980bf316bacb0d7c49e13a21adaadb9221e1c6b9d3cdb829d8bb1b23c406f4e740507f37e1dcf506f7e3b7113d17c5bab787aa69
+  languageName: node
+  linkType: hard
+
 "clean-stack@npm:^2.0.0":
   version: 2.2.0
   resolution: "clean-stack@npm:2.2.0"
@@ -2844,6 +2886,7 @@ __metadata:
     "@radix-ui/react-slider": "npm:^0.1.3"
     "@radix-ui/react-switch": "npm:^0.1.4"
     "@radix-ui/react-toggle": "npm:^0.1.3"
+    "@remixicon/react": "npm:^4.4.0"
     "@stitches/react": "npm:^1.2.6"
     "@uiw/react-codemirror": "npm:^4.19.6"
     autoprefixer: "npm:^10.4.1"
@@ -2855,6 +2898,7 @@ __metadata:
     react: "npm:17.0.2"
     react-dom: "npm:17.0.2"
     react-hot-toast: "npm:^2.4.1"
+    react-tooltip: "npm:^5.28.0"
     tailwindcss: "npm:^3.0.12"
   languageName: unknown
   linkType: soft
@@ -3382,6 +3426,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-tooltip@npm:^5.28.0":
+  version: 5.28.0
+  resolution: "react-tooltip@npm:5.28.0"
+  dependencies:
+    "@floating-ui/dom": "npm:^1.6.1"
+    classnames: "npm:^2.3.0"
+  peerDependencies:
+    react: ">=16.14.0"
+    react-dom: ">=16.14.0"
+  checksum: 10c0/817909584adf4d84d70768e41c7fdf66bf9affd980499742a2da54378e5c8be53a0867bf72bdfb441fa4aa35c79847585990b6e31c91e6647e789ba68e9b08a2
+  languageName: node
+  linkType: hard
+
 "react@npm:17.0.2":
   version: 17.0.2
   resolution: "react@npm:17.0.2"