From 2b5526ab7c38ae964b7dfe9acbe97f0e6e2ea118 Mon Sep 17 00:00:00 2001
From: Ravinou <dev@r4ven.fr>
Date: Sat, 11 Nov 2023 11:05:32 +0100
Subject: [PATCH] feat: add a LAN badge next to the quicksettings button

---
 .../Repo/QuickCommands/QuickCommands.js       |  6 ++++--
 .../QuickCommands/QuickCommands.module.css    | 20 ++++++++++++++++++-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/Components/Repo/QuickCommands/QuickCommands.js b/Components/Repo/QuickCommands/QuickCommands.js
index 8685d80..c76a3a7 100644
--- a/Components/Repo/QuickCommands/QuickCommands.js
+++ b/Components/Repo/QuickCommands/QuickCommands.js
@@ -50,11 +50,13 @@ export default function QuickCommands(props) {
                 <div className={classes.copyValid}>Copied !</div>
             ) : (
                 <div className={classes.tooltip}>
-                    ssh://{wizardEnv.UNIX_USER}@
-                    {FQDN}:{SSH_SERVER_PORT}/./
+                    ssh://{wizardEnv.UNIX_USER}@{FQDN}:{SSH_SERVER_PORT}/./
                     {props.repositoryName}
                 </div>
             )}
+
+            {props.lanCommand && <div className={classes.lanBadge}>LAN</div>}
+
             <div className={classes.icons}>
                 <button onClick={handleCopy} className={classes.copyButton}>
                     <IconCopy color='#65748b' stroke={1.25} />
diff --git a/Components/Repo/QuickCommands/QuickCommands.module.css b/Components/Repo/QuickCommands/QuickCommands.module.css
index 8dfbed6..13ce01f 100644
--- a/Components/Repo/QuickCommands/QuickCommands.module.css
+++ b/Components/Repo/QuickCommands/QuickCommands.module.css
@@ -7,7 +7,7 @@
 
 .icons {
     position: relative;
-    bottom: 14px;
+    bottom: 13px;
 }
 
 .quickSetting {
@@ -16,6 +16,15 @@
     opacity: 1;
 }
 
+.lanBadge {
+    border-radius: 5px;
+    border: 1px solid #6d4aff;
+    color: #6d4aff;
+    font-size: 0.9em;
+    padding: 2px 5px;
+    margin-right: 8px;
+}
+
 .tooltip {
     visibility: hidden;
     opacity: 0;
@@ -91,6 +100,15 @@
     opacity: 0;
 }
 
+.container:hover .lanBadge {
+    visibility: hidden;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+}
+
 @media all and (max-width: 1000px) {
     .container {
         display: none;