From 2fa1eb2cbbb5fab53a7ae277251159d51071f4bf Mon Sep 17 00:00:00 2001
From: Mickael Kerjean <mickael@kerjean.me>
Date: Fri, 21 Apr 2023 07:45:22 +1000
Subject: [PATCH] feature (ux): incremental ux improvement

---
 client/components/breadcrumb.scss   | 23 ++++++++++++++++-------
 client/pages/filespage/submenu.js   |  3 +--
 client/pages/filespage/submenu.scss |  2 +-
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/client/components/breadcrumb.scss b/client/components/breadcrumb.scss
index 79f2a4d4..deee6a1b 100644
--- a/client/components/breadcrumb.scss
+++ b/client/components/breadcrumb.scss
@@ -3,10 +3,11 @@
     z-index: 5;
     .breadcrumb{
         background: white;
-        border-bottom: 2px solid rgba(100, 100, 100, 0.1);
+        border-bottom: 2px solid rgba(100, 100, 100, 0.05);
+        transition: 1s ease border-bottom;
         margin: 0 0 0px 0;
         z-index: 1000;
-        padding: 5px 0;
+        padding: 3px 0;
 
         .ul{
             list-style-type: none;
@@ -20,6 +21,9 @@
             }
         }
     }
+    &:hover .breadcrumb {
+        border-bottom: 2px solid rgba(100, 100, 100, 0.1);
+    }
     .component_logout{
         float: right;
         display: inline-block;
@@ -38,7 +42,7 @@
 
     .component_path-element{
         display: inline-block;
-        .label{color: var(--color);padding: 2px 5px;}
+        .label{color: rgba(0,0,0,0.75); padding: 4px 5px;}
         a.label{
             position: relative;
             color: rgba(0,0,0,0.5);
@@ -50,7 +54,7 @@
                 font-size: 0.8em;
                 opacity: 0;
                 transform: translateY(5px);
-                border-radius: 2px;
+                border-radius: 3px;
                 white-space: nowrap;
                 padding: 3px 10px!important;
                 margin: 23px 0px 5px 0px;
@@ -62,7 +66,7 @@
             font-size: 18px;
             display: inline-block;
 
-            a{border-radius: 2px; letter-spacing: -0.5px;}
+            a{border-radius: 3px; letter-spacing: -0.5px;}
             &.highlight a{
                 background: var(--emphasis-primary);
                 border: 2px solid var(--primary);
@@ -86,6 +90,10 @@ body.touch-no{
         }
     }
 }
+body.dark-mode.touch-no {
+    .component_path-element-wrapper a.label:hover { background: rgba(255, 255, 255, 0.05); }
+}
+
 
 // mobile user have a scrollable breadcrumb
 body.touch-yes{
@@ -165,8 +173,9 @@ body.touch-yes{
         .breadcrumb{
             background: rgba(0,0,0,0.07);
         }
-        .component_path-element a.label{
-            color: #f1f1f1;
+        .component_path-element {
+            .label{ color: #f1f1f1; opacity: 0.7; }
+            a.label { opacity: 1; }
         }
     }
 }
diff --git a/client/pages/filespage/submenu.js b/client/pages/filespage/submenu.js
index 76d17ff5..93fdbb85 100644
--- a/client/pages/filespage/submenu.js
+++ b/client/pages/filespage/submenu.js
@@ -9,7 +9,6 @@ import {
 import { debounce, prompt } from "../../helpers/";
 import { t } from "../../locales/";
 import "./submenu.scss";
-
 class SubmenuComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -121,7 +120,7 @@ class SubmenuComponent extends React.Component {
 
     render() {
         return (
-            <div className={"component_submenu" + (this.props.selected.length > 0 ? " sticky" : "")}>
+            <div className={"component_submenu" + (this.props.selected.length > 0 || this.state.search_input_visible ? " sticky" : "")}>
                 <Container>
                     <div className={"menubar no-select"+(this.state.search_input_visible ? " search_focus" : "")}>
                         <NgIf
diff --git a/client/pages/filespage/submenu.scss b/client/pages/filespage/submenu.scss
index 64d62f2a..b41408f7 100644
--- a/client/pages/filespage/submenu.scss
+++ b/client/pages/filespage/submenu.scss
@@ -109,5 +109,5 @@
 }
 
 .dark-mode .component_submenu {
-    input#search { color: var(--light); }
+    input#search { color: rgba(255, 255, 255, 0.8); }
 }