From 46ea39245ee4bd4e3dd9767d9f0f398901c7d675 Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Tue, 22 Oct 2024 18:32:20 +0200
Subject: [PATCH] Settings styling

---
 Website/modules/Settings.tsx | 50 ++++++++++++++++++------------------
 Website/styles/settings.css  | 27 ++++++++++++++++++-
 2 files changed, 51 insertions(+), 26 deletions(-)

diff --git a/Website/modules/Settings.tsx b/Website/modules/Settings.tsx
index 78130eb..4b35e29 100644
--- a/Website/modules/Settings.tsx
+++ b/Website/modules/Settings.tsx
@@ -154,38 +154,38 @@ export default function Settings({backendConnected, apiUri, settings, changeSett
                             </div>
                         </div>
 
-                        <div className="settings-section">
+                        <div className="settings-section" >
                         LIBRARY CONNECTORS
                             <div className="settings-section-content">
-                                <div className="section-item">
+                                <div className="section-item" connector-status={GetKomga() === undefined ? "Not Configured" : "Configured"}>
                                     <span className="settings-section-title">
-                                        <img src='../media/connector-icons/komga.svg' alt="Komga Logo" />
+                                        <img src='../media/connector-icons/komga.svg' alt="Komga Logo"/>
                                         Komga
                                     </span>
-                                    <label htmlFor="komgaUrl"></label>
+                                    <label htmlFor="komgaUrl">URL</label>
                                     <input placeholder={GetKomga() != undefined ? GetKomga()?.baseUrl : "URL"} id="komgaUrl" type="text" />
-                                    <label htmlFor="komgaUsername"></label>
+                                    <label htmlFor="komgaUsername">Username</label>
                                     <input placeholder={GetKomga() != undefined ? "***" : "Username"} id="komgaUsername" type="text" />
-                                    <label htmlFor="komgaPassword"></label>
+                                    <label htmlFor="komgaPassword">Password</label>
                                     <input placeholder={GetKomga() != undefined ? "***" : "Password"} id="komgaPassword" type="password" />
-                                    <div className="section-buttons-container">
+                                    <div className="section-actions">
                                         <span>Test</span>
                                         <span>Reset</span>
                                         <span>Apply</span>
                                     </div>
                                 </div>
-                                <div className="section-item">
+                                <div className="section-item" connector-status={GetKavita() === undefined ? "Not Configured" : "Configured"}>
                                     <span className="settings-section-title">
-                                        <img src='../media/connector-icons/kavita.png' alt="Kavita Logo" />
+                                        <img src='../media/connector-icons/kavita.png' alt="Kavita Logo"/>
                                         Kavita
                                     </span>
-                                    <label htmlFor="kavitaUrl"></label>
+                                    <label htmlFor="kavitaUrl">URL</label>
                                     <input placeholder={GetKavita() != undefined ? GetKavita()?.baseUrl : "URL"} id="kavitaUrl" type="text" />
-                                    <label htmlFor="kavitaUsername"></label>
+                                    <label htmlFor="kavitaUsername">Username</label>
                                     <input placeholder={GetKavita() != undefined ? "***" : "Username"} id="kavitaUsername" type="text" />
-                                    <label htmlFor="kavitaPassword"></label>
+                                    <label htmlFor="kavitaPassword">Password</label>
                                     <input placeholder={GetKavita() != undefined ? "***" : "Password"} id="kavitaPassword" type="password"/>
-                                    <div className="section-buttons-container">
+                                    <div className="section-actions">
                                         <span>Test</span>
                                         <span>Reset</span>
                                         <span>Apply</span>
@@ -197,40 +197,40 @@ export default function Settings({backendConnected, apiUri, settings, changeSett
                         <div className="settings-section">
                             NOTIFICATION CONNECTORS
                             <div className="settings-section-content">
-                                <div className="section-item">
+                                <div className="section-item" connector-status={GetGotify() === undefined ? "Not Configured" : "Configured"}>
                                     <span className="settings-section-title">
-                                        <img src='../media/connector-icons/gotify-logo.png' alt="Gotify Logo" />
+                                        <img src='../media/connector-icons/gotify-logo.png' alt="Gotify Logo"/>
                                         Gotify
                                     </span>
-                                    <label htmlFor="gotifyUrl"></label>
+                                    <label htmlFor="gotifyUrl">URL</label>
                                     <input placeholder={GetGotify() != undefined ? GetGotify()?.endpoint : "URL"} id="gotifyUrl" type="text" />
-                                    <label htmlFor="gotifyAppToken"></label>
+                                    <label htmlFor="gotifyAppToken">AppToken</label>
                                     <input placeholder={GetGotify() != undefined ? GetGotify()?.appToken : "AppToken"} id="gotifyAppToken" type="text" />
-                                    <div className="section-buttons-container">
+                                    <div className="section-actions">
                                         <span>Test</span>
                                         <span>Reset</span>
                                         <span>Apply</span>
                                     </div>
                                 </div>
-                                <div className="section-item">
+                                <div className="section-item" connector-status={GetLunasea() === undefined ? "Not Configured" : "Configured"}>
                                     <span className="settings-section-title">
-                                        <img src='../media/connector-icons/lunasea.png' alt="Lunasea Logo" />
+                                        <img src='../media/connector-icons/lunasea.png' alt="Lunasea Logo"/>
                                         LunaSea
                                     </span>
-                                    <label htmlFor="lunaseaWebhook"></label>
+                                    <label htmlFor="lunaseaWebhook">Webhook id</label>
                                     <input placeholder={GetLunasea() != undefined ? GetLunasea()?.id : "device/:id or user/:id"} id="lunaseaWebhook" type="text"/>
-                                    <div className="section-buttons-container">
+                                    <div className="section-actions">
                                         <span>Test</span>
                                         <span>Reset</span>
                                         <span>Apply</span>
                                     </div>
                                 </div>
-                                <div className="section-item">
+                                <div className="section-item" connector-status={GetNtfy() === undefined ? "Not Configured" : "Configured"}>
                                     <span className="settings-section-title">
                                         <img src='../media/connector-icons/ntfy.svg' alt="ntfy Logo"/>
                                         Ntfy
                                     </span>
-                                    <label htmlFor="ntfyEndpoint"></label>
+                                    <label htmlFor="ntfyEndpoint">URL</label>
                                     <input placeholder={GetNtfy() != undefined ? GetNtfy()?.endpoint : "URL"} id="ntfyEndpoint" type="text"/>
                                     <label htmlFor="ntfyUsername">Username</label>
                                     <input placeholder={GetNtfy() != undefined ? "***" : "Username"} id="ntfyUsername" type="text"/>
@@ -238,7 +238,7 @@ export default function Settings({backendConnected, apiUri, settings, changeSett
                                     <input placeholder={GetNtfy() != undefined ? "***" : "Password"} id="ntfyPassword" type="password"/>
                                     <label htmlFor="ntfyTopic">Topic</label>
                                     <input placeholder={GetNtfy() != undefined ? GetNtfy()?.topic : "Topic"} id="ntfyTopic" type="text"/>
-                                    <div className="section-buttons-container">
+                                    <div className="section-actions">
                                         <span>Test</span>
                                         <span>Reset</span>
                                         <span>Apply</span>
diff --git a/Website/styles/settings.css b/Website/styles/settings.css
index 5241e6a..f93ec13 100644
--- a/Website/styles/settings.css
+++ b/Website/styles/settings.css
@@ -36,6 +36,7 @@
 }
 
 .section-item {
+    position: relative;
     display: flex;
     flex-direction: column;
     width: 22%;
@@ -46,7 +47,15 @@
     border-width: 1px;
     border-color: lightgray;
     margin: 7px;
-    padding: 5px;
+    padding: 5px 5px 35px;
+}
+
+.section-item[connector-status="Not Configured"]{
+    border-color: var(--primary-color);
+}
+
+.section-item[connector-status="Configured"]{
+    border-color: green;
 }
 
 .section-item > .settings-section-title {
@@ -65,3 +74,19 @@
     border-radius: 5px;
 }
 
+.section-item .section-actions {
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    justify-content: space-around;
+    margin: 5px;
+    width: 100%;
+}
+
+.section-actions > span {
+    border: 1px solid lightgray;
+    padding: 3px 5px 2px;
+    width: 10ch;
+    text-align: center;
+    border-radius: 3px;
+}
\ No newline at end of file