From eade6b8539f0a4b9dd92f0f01f97f9d4cbe9ea6c Mon Sep 17 00:00:00 2001
From: dblythy <daniel-blyth@live.com.au>
Date: Sat, 17 Sep 2022 22:26:03 +1000
Subject: [PATCH 1/2] fix: ui tidyup

---
 .../BrowserFilter/BrowserFilter.scss          |   4 +-
 src/components/BrowserMenu/BrowserMenu.scss   |   3 +-
 .../ColumnsConfiguration.react.js             |   2 +-
 src/components/Modal/Modal.react.js           |  20 ++--
 src/components/Modal/Modal.scss               |   2 +-
 .../PermissionsDialog/PermissionsDialog.scss  | 100 +++++++++---------
 .../ProtectedFieldsDialog.scss                |   2 +-
 src/components/Sidebar/FooterMenu.react.js    |  65 ------------
 src/components/Sidebar/Sidebar.react.js       |   8 +-
 src/components/Sidebar/Sidebar.scss           |  18 ++--
 src/components/Toolbar/Toolbar.scss           |   2 +-
 src/dashboard/Data/Browser/Browser.scss       |   2 +-
 .../Data/Browser/BrowserTable.react.js        |   2 +-
 src/icons/logout.svg                          |   7 ++
 14 files changed, 89 insertions(+), 148 deletions(-)
 delete mode 100644 src/components/Sidebar/FooterMenu.react.js
 create mode 100644 src/icons/logout.svg

diff --git a/src/components/BrowserFilter/BrowserFilter.scss b/src/components/BrowserFilter/BrowserFilter.scss
index 5585ba7d28..25bab6bf8e 100644
--- a/src/components/BrowserFilter/BrowserFilter.scss
+++ b/src/components/BrowserFilter/BrowserFilter.scss
@@ -22,7 +22,7 @@
   &:hover svg {
     fill: white;
   }
-  
+
   &.disabled {
     cursor: not-allowed;
     color: #66637A;
@@ -98,7 +98,7 @@
   padding: 11px 0;
   text-align: center;
 
-  > a {
+  > button {
     margin-right: 10px;
 
     &:last-child {
diff --git a/src/components/BrowserMenu/BrowserMenu.scss b/src/components/BrowserMenu/BrowserMenu.scss
index 4c357e980d..9c73ca3341 100644
--- a/src/components/BrowserMenu/BrowserMenu.scss
+++ b/src/components/BrowserMenu/BrowserMenu.scss
@@ -90,11 +90,10 @@
 }
 
 .item {
-  padding: 6px 14px;
+  padding: 4px 14px;
   white-space: nowrap;
   cursor: pointer;
   color: white;
-  height: 26px;
 
   &:hover {
     background: $blue;
diff --git a/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js b/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js
index fdc088bea0..59a789a1a6 100644
--- a/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js
+++ b/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js
@@ -137,7 +137,7 @@ export default class ColumnsConfiguration extends React.Component {
                   onClick={this.showAll.bind(this)} />
                 <Button
                   color='white'
-                  value='Autosort'
+                  value='Auto-sort'
                   onClick={this.autoSort.bind(this)} />
               </div>
             </div>
diff --git a/src/components/Modal/Modal.react.js b/src/components/Modal/Modal.react.js
index 5bea30db9d..9a267b6203 100644
--- a/src/components/Modal/Modal.react.js
+++ b/src/components/Modal/Modal.react.js
@@ -55,26 +55,24 @@ let Modal = (({
 
   let footer = customFooter || (
     <div style={{textAlign: buttonsInCenter ? 'center' : 'right'}} className={styles.footer}>
-      {showCancel ? <Button
+      {showCancel && <Button
         value={cancelText}
         onClick={onCancel}
-        disabled={!canCancel} /> : null}
-      <Button
+        disabled={!canCancel} /> }
+      { showContinue && <Button
         primary={true}
-        value={confirmText}
+        value={continueText}
         color={buttonColors[type]}
         disabled={!!disabled}
-        onClick={onConfirm}
-        progress={progress} />
-      {
-      showContinue === true ?
+        onClick={onContinue}
+        progress={progress} /> }
       <Button
         primary={true}
-        value={continueText}
+        value={confirmText}
         color={buttonColors[type]}
         disabled={!!disabled}
-        onClick={onContinue}
-        progress={progress} />: null}
+        onClick={onConfirm}
+        progress={progress} />
     </div>
   );
 
diff --git a/src/components/Modal/Modal.scss b/src/components/Modal/Modal.scss
index e49cbd1b97..171c32e4cf 100644
--- a/src/components/Modal/Modal.scss
+++ b/src/components/Modal/Modal.scss
@@ -43,7 +43,7 @@
   position: absolute;
   font-size: 14px;
   color: white;
-  top: 49px;
+  top: 52px;
   left: 28px;
 }
 
diff --git a/src/components/PermissionsDialog/PermissionsDialog.scss b/src/components/PermissionsDialog/PermissionsDialog.scss
index bebaee7ef4..9bfd2837a1 100644
--- a/src/components/PermissionsDialog/PermissionsDialog.scss
+++ b/src/components/PermissionsDialog/PermissionsDialog.scss
@@ -12,18 +12,18 @@
  $writeColWidth: 92px;
  $addFieldColWidth: 118px;
  $deleteColWidth: 44px;
- 
+
  $sumReadColsWidth: calc(3 * #{$colWidth});
  $sumWriteColsWidth: calc(3 * #{$writeColWidth});
- 
+
  $permissionsDialogWidth: calc(#{$labelWidth} + (2 * #{$colWidth}) + #{$deleteColWidth});
  $permissionsDialogMaxWidth: calc(#{$labelWidth} + #{$sumReadColsWidth} + #{$sumWriteColsWidth} + #{$addFieldColWidth} + #{$deleteColWidth});
- 
+
  $simplePointerWriteWidth: calc( #{$colWidth} + #{$addFieldColWidth});
  $pointerWriteWidth: calc( #{$sumWriteColsWidth} + #{$addFieldColWidth});
- 
+
  $clpDialogWidth: calc(#{$permissionsDialogWidth} + #{$addFieldColWidth});
- 
+
  .dialog {
    @include modalAnimation();
    position: absolute;
@@ -35,10 +35,10 @@
    overflow: hidden;
    transition: width 0.3s 0.15s ease-out;
  }
- 
+
  .clp{
    width: $clpDialogWidth;
-   
+
    .level{
      width: $clpDialogWidth;
    }
@@ -47,13 +47,13 @@
      width: $addFieldColWidth;
    }
  }
- 
+
  .clp.advanced{
    .fourth {
      width: $colWidth;
    }
  }
- 
+
  .header {
    height: 50px;
    background: $blue;
@@ -62,23 +62,23 @@
    line-height: 50px;
    font-size: 16px;
    text-align: center;
- 
+
    .settings {
      position: absolute;
      top: 15px;
      right: 15px;
      cursor: pointer;
- 
+
      svg {
        fill: #0E69A1;
        vertical-align: top;
      }
- 
+
      &:hover svg {
        fill: #094367;
      }
    }
- 
+
    .arrow {
      position: absolute;
      @include arrow('up', 12px, 6px, #0E69A1);
@@ -86,8 +86,8 @@
      right: 19px;
    }
  }
- 
- 
+
+
  .level {
    height: 50px;
    width: $permissionsDialogWidth; //   width: 658px;
@@ -95,14 +95,14 @@
    position: relative;
    color: white;
    transition: width 0.3s 0.15s ease-out;
- 
+
    > div {
      margin: 0;
      position: absolute;
      top: 10px;
      right: 10px;
    }
- 
+
    > span {
      display: inline-block;
      font-size: 12;
@@ -111,13 +111,13 @@
      padding-left: 20px;
    }
  }
- 
+
  .tableWrap {
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
  }
- 
+
  .second, .third, .fourth {
    width: $colWidth;
  }
@@ -130,18 +130,18 @@
  .nineth {
    width: $deleteColWidth;
  }
- 
+
  .table {
    position: relative;
    min-height:300px;
- 
+
    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      pointer-events: none;
      background: rgba(0,0,40,0.03);
- 
+
      &.second {
        left: $labelWidth;
      }
@@ -156,31 +156,31 @@
      }
    }
  }
- 
+
  .footer {
    position: relative;
    height: 51px;
    border-top: 1px solid #e3e3ea;
- 
+
    .details {
      font-size: 12px;
      padding-left: 20px;
- 
+
      a {
        color: $blue;
      }
    }
- 
+
    .actions {
      float: right;
      padding: 10px 15px;
- 
-     a {
+
+     button {
        margin-left: 10px;
      }
    }
  }
- 
+
  .headers {
    overflow: hidden;
    transition: height .3s cubic-bezier(0.645,0.045,0.355,1) .5s;
@@ -190,7 +190,7 @@
    text-align: center;
    color: white;
    font-size: 12px;
- 
+
    div {
      float: left;
      border-left: 1px solid white;
@@ -199,32 +199,32 @@
      vertical-align: top;
    }
  }
- 
+
  .readHeader {
    width: $sumReadColsWidth;
  }
- 
+
  .writeHeader {
    width: $sumWriteColsWidth;
  }
- 
+
  .addHeader {
    width: $addFieldColWidth;
    border-right: 1px solid white;
  }
- 
+
  .advanced {
    width: $permissionsDialogMaxWidth;
- 
+
    .level {
      width: $permissionsDialogMaxWidth;
    }
- 
+
    .headers {
      height: 20px;
    }
  }
- 
+
  .row {
   display: flex;
   min-height: 50px;
@@ -238,14 +238,14 @@
      background: rgba(14, 105, 161, 0.03);
    }
  }
- 
+
  .row.public {
    background: rgba(22, 156, 238, 0.18);
    border-bottom: 1px solid #0E69A1;
    color: $blue;
  }
- 
-  
+
+
  .label {
   display: inline-flex;
   width: $labelWidth;
@@ -259,26 +259,26 @@
    flex-direction: column;
    align-self: center;
    text-align: center;
- 
+
    > svg {
      fill: $blue;
      vertical-align: middle;
      align-self: center;
    }
  }
- 
+
  .pointerRead {
    display: inline-block;
    width: $sumReadColsWidth;
    padding: 5px 10px;
  }
- 
+
  .pointerWrite {
    width: $simplePointerWriteWidth;
    padding: 0px 10px;
    display: inline-block;
  }
- 
+
  .checkboxWrap {
    position: relative;
    vertical-align: top;
@@ -289,7 +289,7 @@
    border-radius: 5px;
    background: white;
  }
- 
+
  .entry {
    height: 30px;
    width: 290px;
@@ -301,12 +301,12 @@
    margin: 10px 0 0 20px;
    vertical-align: top;
  }
- 
+
  .error {
    border-color: $red;
    color: $red;
  }
- 
+
  .delete {
    display: inline-block;
    vertical-align: top;
@@ -318,18 +318,18 @@
    button {
      @include buttonReset;
    }
- 
+
    svg {
      vertical-align: top;
      cursor: pointer;
      fill: #C1C7CD;
- 
+
      &:hover {
        fill: $red;
      }
    }
  }
- 
+
  .pillHolder{
    max-width: 100px;
    position: relative;
diff --git a/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.scss b/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.scss
index 9750f8e5ac..32ad443596 100644
--- a/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.scss
+++ b/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.scss
@@ -110,7 +110,7 @@ $permissionsDialogWidth: calc(
     float: right;
     padding: 10px 15px;
 
-    a {
+    button {
       margin-left: 10px;
     }
   }
diff --git a/src/components/Sidebar/FooterMenu.react.js b/src/components/Sidebar/FooterMenu.react.js
deleted file mode 100644
index de471f5ce7..0000000000
--- a/src/components/Sidebar/FooterMenu.react.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
- * Copyright (c) 2016-present, Parse, LLC
- * All rights reserved.
- *
- * This source code is licensed under the license found in the LICENSE file in
- * the root directory of this source tree.
- */
-import Icon     from 'components/Icon/Icon.react';
-import Popover  from 'components/Popover/Popover.react';
-import Position from 'lib/Position';
-import React    from 'react';
-import styles   from 'components/Sidebar/Sidebar.scss';
-
-let mountPath = window.PARSE_DASHBOARD_PATH;
-
-export default class FooterMenu extends React.Component {
-  constructor() {
-    super();
-
-    this.state = {
-      show: false,
-      position: null,
-    };
-    this.moreRef = React.createRef();
-  }
-
-  toggle() {
-    let pos = Position.inWindow(this.moreRef.current);
-    pos.x += 95;
-    this.setState({
-      show: true,
-      position: pos
-    });
-  }
-
-  render() {
-    if (this.props.isCollapsed) {
-      return (
-        <div className={styles.more}>
-          <Icon height={24} width={24} name='ellipses' />
-        </div>
-      );
-    }
-
-    let content = null;
-    if (this.state.show) {
-      content = (
-        <Popover
-          fixed={true}
-          position={this.state.position}
-          onExternalClick={() => this.setState({ show: false })}>
-          <div className={styles.popup}>
-            <a href={`${mountPath}logout`}>➡️ Log out</a>
-          </div>
-        </Popover>
-      );
-    }
-    return (
-      <a onClick={this.toggle.bind(this)} ref={this.moreRef} className={styles.more}>
-        <Icon height={24} width={24} name='ellipses' />
-        {content}
-      </a>
-    );
-  }
-}
diff --git a/src/components/Sidebar/Sidebar.react.js b/src/components/Sidebar/Sidebar.react.js
index cc51068214..a051a2e89d 100644
--- a/src/components/Sidebar/Sidebar.react.js
+++ b/src/components/Sidebar/Sidebar.react.js
@@ -8,7 +8,6 @@
 import AppsManager    from 'lib/AppsManager';
 import AppsMenu       from 'components/Sidebar/AppsMenu.react';
 import AppName        from 'components/Sidebar/AppName.react';
-import FooterMenu     from 'components/Sidebar/FooterMenu.react';
 import isInsidePopover from 'lib/isInsidePopover';
 import Pin            from 'components/Sidebar/Pin.react';
 import React, { useEffect, useState, useContext } from 'react';
@@ -17,6 +16,8 @@ import SidebarSection from 'components/Sidebar/SidebarSection.react';
 import SidebarSubItem from 'components/Sidebar/SidebarSubItem.react';
 import styles         from 'components/Sidebar/Sidebar.scss';
 import { CurrentApp } from 'context/currentApp';
+import Icon     from 'components/Icon/Icon.react';
+let mountPath = window.PARSE_DASHBOARD_PATH;
 
 const Sidebar = ({
   prefix,
@@ -179,7 +180,10 @@ const Sidebar = ({
       <SidebarHeader isCollapsed={!appsMenuOpen && collapsed} />
       {sidebarContent}
       <div className={styles.footer}>
-        <FooterMenu isCollapsed={!appsMenuOpen && collapsed} />
+        <a href={`${mountPath}logout`} className={styles.more}>
+        <Icon height={24} width={24} name='logout' />
+        Logout
+      </a>
       </div>
     </div>
   );
diff --git a/src/components/Sidebar/Sidebar.scss b/src/components/Sidebar/Sidebar.scss
index 6281bcaaf2..ea515b2af2 100644
--- a/src/components/Sidebar/Sidebar.scss
+++ b/src/components/Sidebar/Sidebar.scss
@@ -53,8 +53,6 @@ $footerHeight: 36px;
   @include DosisFont;
   position: absolute;
   background: #05283c;
-  height: $footerHeight;
-  line-height: 18px;
   padding: 9px 0;
   text-align: center;
   bottom: 0;
@@ -65,12 +63,11 @@ $footerHeight: 36px;
     color: white;
     text-decoration: none;
     border-right: 1px solid #385261;
-    height: 18px;
-    line-height: 18px;
     font-size: 13px;
     padding: 0 12px;
     vertical-align: top;
 
+
     &:first-child {
       padding-left: 0;
     }
@@ -79,10 +76,6 @@ $footerHeight: 36px;
       border: none;
     }
   }
-
-  svg {
-    margin-top: -2px;
-  }
 }
 
 .header {
@@ -319,6 +312,8 @@ a.subitem {
   width: 75px;
   height: 100%;
   font-size: 10px;
+  display: flex;
+  align-items: center;
   float: left;
   margin-left: 6px;
   white-space: nowrap;
@@ -327,20 +322,23 @@ a.subitem {
   > *:first-child {
     position: absolute;
     letter-spacing: 2px;
-    line-height: 10px;
+    line-height: 12px;
     text-transform: uppercase;
   }
 
   > *:first-child {
-    top: 10px;
     transition: all 0.4s 0.16s cubic-bezier(0.77, 0, 0.175, 1);
   }
 }
 
 .more {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   svg {
     fill: #0C5582;
     transition: fill 0.2s ease-in;
+    margin-right: 4px;
   }
 
   &:hover {
diff --git a/src/components/Toolbar/Toolbar.scss b/src/components/Toolbar/Toolbar.scss
index 847333f017..d56f51068a 100644
--- a/src/components/Toolbar/Toolbar.scss
+++ b/src/components/Toolbar/Toolbar.scss
@@ -83,5 +83,5 @@ body:global(.expanded) {
 .actions {
   position: absolute;
   right: 14px;
-  top: 0;
+  top: 4px;
 }
diff --git a/src/dashboard/Data/Browser/Browser.scss b/src/dashboard/Data/Browser/Browser.scss
index 970c84cf60..93ecb0232f 100644
--- a/src/dashboard/Data/Browser/Browser.scss
+++ b/src/dashboard/Data/Browser/Browser.scss
@@ -53,7 +53,7 @@ body:global(.expanded) {
   color: #ffffff;
   cursor: pointer;
   height: 14px;
-  padding: 0 8px;
+  padding: 0 12px;
 
   svg {
     vertical-align: middle;
diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
index eb48eaef0f..1dd8f8af48 100644
--- a/src/dashboard/Data/Browser/BrowserTable.react.js
+++ b/src/dashboard/Data/Browser/BrowserTable.react.js
@@ -217,7 +217,7 @@ export default class BrowserTable extends React.Component {
                 this.props.onSaveNewRow();
                 this.props.setEditing(false);
               }}
-              additionalStyles={{ fontSize: '12px', height: '20px', lineHeight: '20px', margin: '5px', padding: '0'}}
+              additionalStyles={{ fontSize: '12px', height: '20px', lineHeight: '20px', margin: '5px', marginRight: '0px', padding: '0'}}
             />
             <Button
               value="Cancel"
diff --git a/src/icons/logout.svg b/src/icons/logout.svg
new file mode 100644
index 0000000000..0a9ebd8879
--- /dev/null
+++ b/src/icons/logout.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 34 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.8248,0,0,0.8248,-2.79521,-4.64161)">
+        <path d="M9,42C8.2,42 7.5,41.7 6.9,41.1C6.3,40.5 6,39.8 6,39L6,9C6,8.2 6.3,7.5 6.9,6.9C7.5,6.3 8.2,6 9,6L23.55,6L23.55,9L9,9L9,39L23.55,39L23.55,42L9,42ZM33.3,32.75L31.15,30.6L36.25,25.5L18.75,25.5L18.75,22.5L36.15,22.5L31.05,17.4L33.2,15.25L42,24.05L33.3,32.75Z" style="fill-rule:nonzero;"/>
+    </g>
+</svg>

From 1e7efba3e4c582b47966bbf15b7a975c16897016 Mon Sep 17 00:00:00 2001
From: dblythy <daniel-blyth@live.com.au>
Date: Sat, 17 Sep 2022 22:35:37 +1000
Subject: [PATCH 2/2] add current user

---
 src/components/Sidebar/Sidebar.react.js       | 10 +++++++---
 src/components/Sidebar/SidebarHeader.react.js | 10 ++--------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/Sidebar/Sidebar.react.js b/src/components/Sidebar/Sidebar.react.js
index a051a2e89d..80764af925 100644
--- a/src/components/Sidebar/Sidebar.react.js
+++ b/src/components/Sidebar/Sidebar.react.js
@@ -36,6 +36,10 @@ const Sidebar = ({
   const [ appsMenuOpen, setAppsMenuOpen ] = useState(false);
   const [ collapsed, setCollapsed ] = useState(false);
   const [ fixed, setFixed ] = useState(true);
+  const [dashboardUser, setDashboardUser] = useState('');
+  fetch(mountPath).then(response => {
+    setDashboardUser(response.headers.get('username'))
+  })
   let currentWidth = window.innerWidth;
 
   const windowResizeHandler = () => {
@@ -177,14 +181,14 @@ const Sidebar = ({
           : undefined
       }
     >
-      <SidebarHeader isCollapsed={!appsMenuOpen && collapsed} />
+      <SidebarHeader isCollapsed={!appsMenuOpen && collapsed} dashboardUser={dashboardUser} />
       {sidebarContent}
-      <div className={styles.footer}>
+      {dashboardUser && <div className={styles.footer}>
         <a href={`${mountPath}logout`} className={styles.more}>
         <Icon height={24} width={24} name='logout' />
         Logout
       </a>
-      </div>
+      </div> }
     </div>
   );
 }
diff --git a/src/components/Sidebar/SidebarHeader.react.js b/src/components/Sidebar/SidebarHeader.react.js
index bab045fe4f..03c3b82b2d 100644
--- a/src/components/Sidebar/SidebarHeader.react.js
+++ b/src/components/Sidebar/SidebarHeader.react.js
@@ -17,14 +17,8 @@ export default class SidebarHeader extends React.Component {
     super();
     this.state = { };
   }
-  componentWillMount() {
-    let mountPath = window.PARSE_DASHBOARD_PATH;
-    fetch(mountPath).then(response => {
-      this.setState({ dashboardUser: response.headers.get('username') });
-    });
-  }
   render() {
-    const { isCollapsed = false } = this.props;
+    const { isCollapsed = false, dashboardUser } = this.props;
     const headerContent = isCollapsed
       ? (
         <div className={styles.logo}>
@@ -41,7 +35,7 @@ export default class SidebarHeader extends React.Component {
               <div>
                 Parse Dashboard {version}
                 <div>
-                  {this.state.dashboardUser}
+                  {dashboardUser}
                 </div>
               </div>
             </div>