From 07acfa35237c612f5c31fea20880de0b087d1cc3 Mon Sep 17 00:00:00 2001
From: Mickael Kerjean <mickael@kerjean.me>
Date: Wed, 16 Nov 2022 23:04:48 +1100
Subject: [PATCH] improve (share): CSS for shared link box

---
 client/pages/filespage/share.js   |  4 ++--
 client/pages/filespage/share.scss | 16 ++++++++++------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/client/pages/filespage/share.js b/client/pages/filespage/share.js
index 599cb66f..0e482a93 100644
--- a/client/pages/filespage/share.js
+++ b/client/pages/filespage/share.js
@@ -1,6 +1,6 @@
 import React, { createRef } from "react";
 
-import { NgIf, Icon } from "../../components/";
+import { NgIf, Icon, Input } from "../../components/";
 import { Share } from "../../model/";
 import {
     randomString, notify, absoluteToRelative, copyToClipboard, filetype,
@@ -343,7 +343,7 @@ const SuperCheckbox = (props) => {
                 {props.label}
             </label>
             <NgIf cond={_is_expended && props.inputType !== undefined}>
-                <input
+                <Input
                     type={props.inputType}
                     placeholder={props.placeholder}
                     value={props.value || ""}
diff --git a/client/pages/filespage/share.scss b/client/pages/filespage/share.scss
index cffcd1a6..8104da42 100644
--- a/client/pages/filespage/share.scss
+++ b/client/pages/filespage/share.scss
@@ -26,8 +26,9 @@
                 padding: 15px 0;
                 width: 100%;
                 border-radius: 3px;
+                color: rgba(0, 0, 0, 0.3);
+                text-shadow: 0px 0px 1px var(--color);
                 background: var(--bg-color);
-                color: var(--emphasis);
                 &.active{
                     background: var(--primary);
                 }
@@ -83,7 +84,6 @@
             width: 100%;
             font-size: 0.9em;
             background: var(--bg-color);
-            color: var(--emphasis);
             box-sizing: border-box;
             padding: 4px 5px;
             border-radius: 3px;
@@ -91,6 +91,7 @@
             border-bottom-right-radius: 0;
             border: 2px solid var(--primary);
             border-right: none;
+            color: var(--dark);
         }
         > div {
             border-radius: 5px;
@@ -126,10 +127,13 @@
         width: calc(100% - 10px);
         box-sizing: border-box;
         margin-bottom: 5px;
-        border: 1px solid var(--light);
-        border-radius: 2px;
+        border: none;
+        border-radius: 3px;
         font-size: 0.9em;
-        padding: 2px 5px;
-        color: var(--emphasis-secondary);
+        padding: 3px 5px;
+        color: var(--color);
+
+        background: var(--bg-color);
+        border-bottom: 0;
     }
 }