From 7aba0a9b1b1a3e7d72e24118ecbb05b98165d3b9 Mon Sep 17 00:00:00 2001
From: Melissa Zhang <mzhang19096@gmail.com>
Date: Wed, 23 Dec 2020 14:39:29 -0800
Subject: UI styling changes

---
 src/client/views/MainView.scss             |  1 -
 src/client/views/MainView.tsx              |  5 ++---
 src/client/views/collections/TreeView.scss | 27 +++++++++++++++------------
 src/client/views/collections/TreeView.tsx  |  7 ++++---
 src/client/views/search/SearchBox.scss     | 29 ++++++++---------------------
 src/client/views/search/SearchBox.tsx      |  2 +-
 6 files changed, 30 insertions(+), 41 deletions(-)

(limited to 'src')

diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 33bd7e77e..d6a455a22 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -369,7 +369,6 @@
     height: 55px;
     top: 50%;
     left: -10px;
-    border: 1px solid black;
     border-radius: 8px;
     position: relative;
     z-index: 41; // lm_maximised has a z-index of 40 and this needs to be above that
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index daa059a49..48cc6f36d 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -296,7 +296,6 @@ export class MainView extends React.Component {
     }
 
     @computed get flyout() {
-        console.log(this._sidebarContent.title);
         return !this._flyoutWidth ? <div className={`mainView-libraryFlyout-out`}>
             {this.docButtons}
         </div> :
@@ -387,8 +386,8 @@ export class MainView extends React.Component {
             {this.menuPanel}
             <div className={`mainView-innerContent${this.darkScheme ? "-dark" : ""}`}>
                 {this.flyout}
-                < div className="mainView-libraryHandle" style={{ display: !this._flyoutWidth ? "none" : undefined, }} onPointerDown={this.onFlyoutPointerDown} >
-                    <FontAwesomeIcon icon="chevron-left" color={this.darkScheme ? "white" : "black"} size="sm" />
+                <div className="mainView-libraryHandle" style={{ display: !this._flyoutWidth ? "none" : undefined, }} onPointerDown={this.onFlyoutPointerDown} >
+                    <FontAwesomeIcon icon="chevron-left" color={this.darkScheme ? "white" : "black"} style={{opacity: "50%"}} size="sm" />
                 </div>
 
                 {this.dockingContent}
diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index 45dec2661..3c1e16f6c 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -98,15 +98,20 @@
         width: unset;
     }
 
-    >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide, .styleProvider-treeView-lock-active, .styleProvider-treeView-hide-active {
+    .right-buttons-container {
+        display: flex;
+        align-items: center;
         margin-left: 0.25rem;
-        margin-right: 0.25rem; 
-    }
 
-    >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide {
-        display: none;
+        >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide, .styleProvider-treeView-lock-active, .styleProvider-treeView-hide-active {
+            margin-left: 0.25rem;
+            margin-right: 0.25rem; 
+        }
+    
+        >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide {
+            display: none;
+        }
     }
-
 }
 
 .treeView-header:hover {
@@ -114,10 +119,6 @@
         display: inherit;
     }
 
-    >svg {
-        display: inherit;
-    }
-
     .treeView-openRight {
         display: inline-block;
         height: 17px;
@@ -131,8 +132,10 @@
         }
     }
 
-    .styleProvider-treeView-lock, .styleProvider-treeView-hide {
-        display: inherit;
+    .right-buttons-container {
+        >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide {
+            display: inherit;
+        }
     }
 }
 
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 8d25cc295..bce0ba9e2 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -585,9 +585,10 @@ export class TreeView extends React.Component<TreeViewProps> {
                 }} >
                 {view}
             </div >
-            {/* hide and lock buttons */}
-            {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations)} 
-            {this.headerElements}
+            <div className={"right-buttons-container"}>
+                {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations)} {/* hide and lock buttons */}
+                {this.headerElements}
+            </div>
         </>;
     }
 
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 13d4a6d5a..76f9b66eb 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -30,42 +30,29 @@
             .searchBox-lozenge-user,
             .searchBox-lozenge-dashboard,
             .searchBox-lozenge {
-                background-color: #313131;
-                border-radius: 5px;
                 height: 18px;
                 padding: 4px;
-                box-shadow: lightgrey 0.15em 0.15em 0.1em;
-                margin: 2px;
-                margin-bottom: 4px;
-                border-top: dimgrey 1px solid;
-                border-left: dimgrey 1px solid;
+                margin-right: 5px;
                 display: flex;
+                align-items: center;
+                border: grey 1px solid;
                 .searchBox-logoff,
                 .searchBox-dashboards {
                     border-radius: 3px;
                     background: olivedrab;
                     color: white;
-                    position: relative;
                     display: none;
-                    margin-left: 3px;
-                    padding-left: 2px;
-                    padding-right: 2px;
-                    padding-bottom: 11px;
-                    cursor: default;
+                    margin-left: 5px;
+                    padding: 1px 2px 1px 2px;
+                    cursor: pointer;
                 }
                 .searchBox-logoff {
                     background: red;
                 }
 
                 .searchBox-dashSelect{
-                    background-color: black;
-                    color: white;
-                    font-size: 9;
-                    margin-right: 6;
-                    border-radius: 5px;
-                    position: relative;
-                    height: 15px;
-                    transform: translate(0,-3px);
+                    border: none;
+                    background-color: transparent;
 
                     &:hover {
                         cursor: pointer;
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index d3fee85a7..d10afdcf9 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -466,7 +466,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     }
 
     @computed get scopeButtons() {
-        return <div style={{ height: 25, paddingLeft: "4px", paddingRight: "4px", border: "1px solid gray", borderRadius: "0.3em", borderBottom: !this.open ? "1px solid" : "none", }}>
+        return <div style={{ height: 25, paddingLeft: "4px", paddingRight: "4px"}}>
             <form className="beta" style={{ justifyContent: "space-evenly", display: "flex" }}>
                 <div style={{ display: "contents" }}>
                     <div className="radio" style={{ margin: 0 }}>
-- 
cgit v1.2.3-70-g09d2