From ccd82fe17dae56b2a3eaf0999d07687edb878c39 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Fri, 14 Jul 2023 10:42:51 -0400
Subject: override nested -> upgrade nested and a few small ui things

---
 src/client/views/PropertiesView.tsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

(limited to 'src/client/views/PropertiesView.tsx')

diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 2e10bf346..d88d86e1a 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -490,23 +490,20 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
         return (
             <div>
-                <br />
+                <div>
+                    <br></br> Individual Users with Access to this Document
+                </div>
                 <div className="propertiesView-sharingTable">{<div> {individualTableEntries}</div>}</div>
                 {groupTableEntries.length > 0 ? (
                     <div>
                         <div>
-                            {' '}
-                            <br></br> Groups with Access to this Document{' '}
+                            <br></br> Groups with Access to this Document
                         </div>
                         <div className="propertiesView-sharingTable">{<div> {groupTableEntries}</div>}</div>
                     </div>
                 ) : null}
-                Guest
+                <br></br> Guest
                 <div>{this.colorACLDropDown('Guest', true, publicPermission!, true)}</div>
-                <div>
-                    {' '}
-                    <br></br> Individual Users with Access to this Document{' '}
-                </div>
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From 31368b599dee83ccd2538f33b760ae25f19073cc Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Thu, 20 Jul 2023 16:42:50 -0400
Subject: components + homepage

---
 src/client/util/GroupManager.scss    |  66 ++++++++++++++-------
 src/client/util/GroupManager.tsx     | 112 +++++++++++++++++++----------------
 src/client/util/GroupMemberView.scss |  33 ++++++++---
 src/client/util/GroupMemberView.tsx  |  47 +++++++++++----
 src/client/util/SharingManager.scss  | 109 +++++++++++++++++-----------------
 src/client/util/SharingManager.tsx   |  72 ++++++++++++----------
 src/client/views/DashboardView.tsx   |   2 +-
 src/client/views/PropertiesView.scss |  44 +++++---------
 src/client/views/PropertiesView.tsx  |  59 +++++++++---------
 src/client/views/topbar/TopBar.tsx   |  18 +++---
 10 files changed, 312 insertions(+), 250 deletions(-)

(limited to 'src/client/views/PropertiesView.tsx')

diff --git a/src/client/util/GroupManager.scss b/src/client/util/GroupManager.scss
index 253ed5d2a..673af16ee 100644
--- a/src/client/util/GroupManager.scss
+++ b/src/client/util/GroupManager.scss
@@ -7,33 +7,48 @@
         .group-create {
             display: flex;
             flex-direction: column;
-            height: 90%;
+            overflow: visible;
+            height: 100%;
+            width: 98.5%;
+            padding: 5px;
             justify-content: space-between;
             margin-left: 5px;
 
-            input {
-                border-radius: 5px;
-                padding: 8px;
-                min-width: 100%;
-                border: 1px solid hsl(0, 0%, 80%);
-                outline: none;
-                height: 30;
-
-                &:focus {
-                    border: 2.5px solid #2684FF;
-                }
-            }
-
             p {
                 font-size: 20px;
                 text-align: left;
-                color: black;
             }
+        }
 
-            button {
-                align-self: flex-end;
+        .group-input {
+
+            input {
+                padding: 8px;
+                width: 100%;
+                outline: none;
+                border: none;
+                min-width: 100%;
+                border: 2px solid;
+                border-radius: 4px;
+                border-color: inherit;
+                background: white;
+                color: black;
+                height: 30;
             }
         }
+
+        .select-users {
+            margin-right: 3;
+            max-height: 30;
+            width: 100%;
+            display: inline-flex;
+            flex-direction: row;
+            border: 2px solid;
+            border-radius: 4px;
+            border-color: inherit;
+            background: white;
+            color: black;
+        }
     }
 
 
@@ -55,11 +70,14 @@
 .group-interface {
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+    padding: 10px;
 
     .overlay {
         transform: translate(-10px, -10px);
         width: 400px;
         height: 320px;
+        overflow: hidden;
     }
 
     .delete-button {
@@ -81,7 +99,6 @@
             font-size: 20px;
             text-align: left;
             margin-right: 15px;
-            color: black;
         }
     }
 
@@ -94,18 +111,24 @@
             margin-left: 5;
             width: 50px;
             cursor: pointer;
+            display: flex;
+            flex-direction: row;
+        }
+
+        .style-divider {
+            width: 100%;
+            height: 1px;
         }
 
         .group-body {
             justify-content: space-between;
-            height: 220;
-            background-color: #e8e8e8;
+            height: 225;
 
             padding-right: 1em;
             justify-content: space-around;
             text-align: left;
 
-            overflow-y: auto;
+            overflow-y: hidden;
             width: 100%;
 
             .group-row {
@@ -117,7 +140,6 @@
                 .group-name {
                     max-width: 65%;
                     margin: 0 10;
-                    color: black;
                 }
 
                 .group-info {
diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index da947aba6..5802d5ee0 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -15,6 +15,7 @@ import { SharingManager, User } from './SharingManager';
 import { listSpec } from '../../fields/Schema';
 import { DateField } from '../../fields/DateField';
 import { Id } from '../../fields/FieldSymbols';
+import { Button, IconButton, Size } from 'browndash-components';
 
 /**
  * Interface for options for the react-select component
@@ -280,47 +281,59 @@ export class GroupManager extends React.Component<{}> {
      */
     private get groupCreationModal() {
         const contents = (
-            <div className="group-create">
+            <div className="group-create" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
                 <div className="group-heading" style={{ marginBottom: 0 }}>
                     <p>
                         <b>New Group</b>
                     </p>
-                    <div
-                        className={'close-button'}
-                        onClick={action(() => {
-                            this.createGroupModalOpen = false;
-                            TaskCompletionBox.taskCompleted = false;
-                        })}>
-                        <FontAwesomeIcon icon={'times'} color={'black'} size={'lg'} />
+                    <div className="close-button">
+                        <Button
+                            icon={<FontAwesomeIcon icon={'times'} size={'lg'} />}
+                            onClick={action(() => {
+                                this.createGroupModalOpen = false;
+                                TaskCompletionBox.taskCompleted = false;
+                            })}
+                            color={StrCast(Doc.UserDoc().userColor)}
+                        />
                     </div>
                 </div>
-                <input className="group-input" ref={this.inputRef} onKeyDown={this.handleKeyDown} autoFocus type="text" placeholder="Group name" onChange={action(() => (this.buttonColour = this.inputRef.current?.value ? 'black' : '#979797'))} />
-                <Select
-                    isMulti
-                    options={this.options}
-                    onChange={this.handleChange}
-                    placeholder={'Select users'}
-                    value={this.selectedUsers}
-                    closeMenuOnSelect={false}
-                    styles={{
-                        dropdownIndicator: (base, state) => ({
-                            ...base,
-                            transition: '0.5s all ease',
-                            transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : undefined,
-                        }),
-                        multiValue: base => ({
-                            ...base,
-                            maxWidth: '50%',
-
-                            '&:hover': {
-                                maxWidth: 'unset',
-                            },
-                        }),
-                    }}
-                />
-                <button ref={this.createGroupButtonRef} onClick={this.createGroup} style={{ background: this.buttonColour }} disabled={this.buttonColour === '#979797'}>
-                    Create
-                </button>
+                <div className="group-input" style={{border: StrCast(Doc.UserDoc().userColor)}} >
+                    <input ref={this.inputRef} onKeyDown={this.handleKeyDown} autoFocus type="text" placeholder="Group name" onChange={action(() => (this.buttonColour = this.inputRef.current?.value ? 'black' : '#979797'))} />
+                </div>
+                <div style={{border: StrCast(Doc.UserDoc().userColor)}}>
+                    <Select
+                        className="select-users"
+                        isMulti
+                        options={this.options}
+                        onChange={this.handleChange}
+                        placeholder={'Select users'}
+                        value={this.selectedUsers}
+                        closeMenuOnSelect={false}
+                        styles={{
+                            control: () => ({
+                                display: 'inline-flex',
+                                width: '100%',
+                            }),
+                            indicatorSeparator: () => ({
+                                display: 'inline-flex',
+                                visibility: 'hidden',
+                            }),
+                            indicatorsContainer: () => ({
+                                display: 'inline-flex',
+                                textDecorationColor: 'black',
+                            }),
+                            valueContainer: () => ({
+                                display: 'inline-flex',
+                                fontStyle: StrCast(Doc.UserDoc().userColor),
+                                color: StrCast(Doc.UserDoc().userColor),
+                                width: '100%',
+                            }),
+                        }}
+                    />
+                </div>
+                <div className={"create-button"}>
+                    <Button text={"Create"} type={"tertiary"} color={StrCast(Doc.UserDoc().userColor)} onClick={this.createGroup} />
+                </div>
             </div>
         );
 
@@ -353,37 +366,34 @@ export class GroupManager extends React.Component<{}> {
         const groups = this.groupSort === 'ascending' ? this.allGroups.sort(sortGroups) : this.groupSort === 'descending' ? this.allGroups.sort(sortGroups).reverse() : this.allGroups;
 
         return (
-            <div className="group-interface">
+            <div className="group-interface" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
                 {this.groupCreationModal}
                 {this.currentGroup ? <GroupMemberView group={this.currentGroup} onCloseButtonClick={action(() => (this.currentGroup = undefined))} /> : null}
                 <div className="group-heading">
                     <p>
                         <b>Manage Groups</b>
                     </p>
-                    <button onClick={action(() => (this.createGroupModalOpen = true))}>
-                        <FontAwesomeIcon icon={'plus'} size={'sm'} /> Create Group
-                    </button>
-                    <div className={'close-button'} onClick={this.close}>
-                        <FontAwesomeIcon icon={'times'} color={'black'} size={'lg'} />
+                    <Button icon={<FontAwesomeIcon icon={'plus'}/>} iconPlacement={'left'} text={"Create Group"} type={"tertiary"} color={StrCast(Doc.UserDoc().userColor)} onClick={action(() => (this.createGroupModalOpen = true))} />
+                    <div className={'close-button'} >
+                        <Button
+                            icon={<FontAwesomeIcon icon={'times'} size={'lg'} />}
+                            onClick={this.close}
+                            color={StrCast(Doc.UserDoc().userColor)}
+                        />
                     </div>
                 </div>
                 <div className="main-container">
                     <div className="sort-groups" onClick={action(() => (this.groupSort = this.groupSort === 'ascending' ? 'descending' : this.groupSort === 'descending' ? 'none' : 'ascending'))}>
-                        Name{' '}
-                        {this.groupSort === 'ascending' ? (
-                            <FontAwesomeIcon icon={'caret-up'} size={'xs'} />
-                        ) : this.groupSort === 'descending' ? (
-                            <FontAwesomeIcon icon={'caret-down'} size={'xs'} />
-                        ) : (
-                            <FontAwesomeIcon icon={'caret-right'} size={'xs'} />
-                        )}
+                        Name
+                        <IconButton icon={<FontAwesomeIcon icon={this.groupSort === 'ascending' ? 'caret-up' : this.groupSort === 'descending' ? 'caret-down' : 'caret-right'}/>} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} />
                     </div>
-                    <div className="group-body">
+                    <div className={'style-divider'} style={{background: StrCast(Doc.UserDoc().userColor)}}/>
+                    <div className="group-body" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
                         {groups.map(group => (
                             <div className="group-row" key={StrCast(group.title || group.groupName)}>
                                 <div className="group-name">{StrCast(group.title || group.groupName)}</div>
                                 <div className="group-info" onClick={action(() => (this.currentGroup = group))}>
-                                    <FontAwesomeIcon icon={'info-circle'} color={'#e8e8e8'} size={'sm'} style={{ backgroundColor: '#1e89d7', borderRadius: '100%', border: '1px solid #1e89d7' }} />
+                                    <IconButton icon={<FontAwesomeIcon icon={'info-circle'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={action(() => (this.currentGroup = group))} />
                                 </div>
                             </div>
                         ))}
diff --git a/src/client/util/GroupMemberView.scss b/src/client/util/GroupMemberView.scss
index 2eb164988..d50569b26 100644
--- a/src/client/util/GroupMemberView.scss
+++ b/src/client/util/GroupMemberView.scss
@@ -1,6 +1,9 @@
 .editing-interface {
     width: 100%;
     height: 100%;
+    padding: 10px;
+    float: right;
+    overflow: visible;
 
     hr {
         margin-top: 20;
@@ -10,7 +13,6 @@
         outline: none;
         border-radius: 5px;
         border: 0px;
-        color: #fcfbf7;
         text-transform: none;
         letter-spacing: 2px;
         font-size: 75%;
@@ -37,8 +39,6 @@
             text-align: center;
             border: none;
             outline: none;
-            color: black;
-            margin-top: -5;
             height: 20;
             text-overflow: ellipsis;
             background: none;
@@ -61,21 +61,36 @@
             margin-bottom: 25;
 
             .add-member-dropdown {
-                width: 65%;
-                margin: 0 5;
+                margin-right: 3;
+                max-height: 30;
+                width: 250px;
+                display: inline-flex;
+                flex-direction: row;
+                border: 2px solid;
+                border-radius: 4px;
+                border-color: inherit;
+                background: white;
+                color: black;
+            }
 
-                input {
-                    height: 30;
-                }
+            .delete-button {
+                align-self: center;
+                background: inherit;
             }
         }
     }
 
+    .style-divider {
+        width: 98%;
+        height: 1px;
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+
     .editing-contents {
         overflow-y: auto;
         height: 62%;
         width: 100%;
-        color: black;
         margin-top: -15px;
 
         .editing-row {
diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx
index b7f89794d..f2050dc61 100644
--- a/src/client/util/GroupMemberView.tsx
+++ b/src/client/util/GroupMemberView.tsx
@@ -8,6 +8,7 @@ import { StrCast } from "../../fields/Types";
 import { MainViewModal } from "../views/MainViewModal";
 import { GroupManager, UserOptions } from "./GroupManager";
 import "./GroupMemberView.scss";
+import { Button, IconButton, Size } from "browndash-components";
 
 interface GroupMemberViewProps {
     group: Doc;
@@ -28,7 +29,7 @@ export class GroupMemberView extends React.Component<GroupMemberViewProps> {
         const hasEditAccess = GroupManager.Instance.hasEditAccess(this.props.group);
 
         return (!this.props.group ? null :
-            <div className="editing-interface">
+            <div className="editing-interface" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
                 <div className="editing-header">
                     <input
                         className="group-title"
@@ -38,28 +39,48 @@ export class GroupMemberView extends React.Component<GroupMemberViewProps> {
                         disabled={!hasEditAccess}
                     >
                     </input>
-                    <div className={"memberView-closeButton"} onClick={action(this.props.onCloseButtonClick)}>
-                        <FontAwesomeIcon icon={"times"} color={"black"} size={"lg"} />
+                    <div className={"memberView-closeButton"} >
+                        <Button
+                            icon={<FontAwesomeIcon icon={'times'} size={'lg'} />}
+                            onClick={action(this.props.onCloseButtonClick)}
+                            color={StrCast(Doc.UserDoc().userColor)}
+                        />
                     </div>
                     {GroupManager.Instance.hasEditAccess(this.props.group) ?
                         <div className="group-buttons">
-                            <div className="add-member-dropdown">
-                                <Select
+                            <div style={{border: StrCast(Doc.UserDoc().userColor)}} >
+                                <Select 
+                                    className="add-member-dropdown"
                                     isSearchable={true}
                                     options={options}
                                     onChange={selectedOption => GroupManager.Instance.addMemberToGroup(this.props.group, (selectedOption as UserOptions).value)}
                                     placeholder={"Add members"}
                                     value={null}
                                     styles={{
-                                        dropdownIndicator: (base, state) => ({
-                                            ...base,
-                                            transition: '0.5s all ease',
-                                            transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : undefined
-                                        })
+                                        control: () => ({
+                                            display: 'inline-flex',
+                                            width: '100%',
+                                        }),
+                                        indicatorSeparator: () => ({
+                                            display: 'inline-flex',
+                                            visibility: 'hidden',
+                                        }),
+                                        indicatorsContainer: () => ({
+                                            display: 'inline-flex',
+                                            textDecorationColor: 'black',
+                                        }),
+                                        valueContainer: () => ({
+                                            display: 'inline-flex',
+                                            fontStyle: StrCast(Doc.UserDoc().userColor),
+                                            color: StrCast(Doc.UserDoc().userColor),
+                                            width: '100%',
+                                        }),
                                     }}
                                 />
                             </div>
-                            <button onClick={() => GroupManager.Instance.deleteGroup(this.props.group)}>Delete group</button>
+                            <div className={"delete-button"}>
+                                <Button text={"Delete Group"} type={"tertiary"} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.deleteGroup(this.props.group)} />
+                            </div>
                         </div> :
                         null}
                     <div
@@ -69,7 +90,7 @@ export class GroupMemberView extends React.Component<GroupMemberViewProps> {
                         Emails {this.memberSort === "ascending" ? "↑" : this.memberSort === "descending" ? "↓" : ""} {/* → */}
                     </div>
                 </div>
-                <hr />
+                <div className={'style-divider'} style={{background: StrCast(Doc.UserDoc().userColor)}}/>
                 <div className="editing-contents"
                     style={{ height: hasEditAccess ? "62%" : "85%" }}
                 >
@@ -83,7 +104,7 @@ export class GroupMemberView extends React.Component<GroupMemberViewProps> {
                             </div>
                             {hasEditAccess ?
                                 <div className={"remove-button"} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)}>
-                                    <FontAwesomeIcon icon={"trash-alt"} size={"sm"} />
+                                    <IconButton icon={<FontAwesomeIcon icon={'trash-alt'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)} />
                                 </div>
                                 : null}
                         </div>
diff --git a/src/client/util/SharingManager.scss b/src/client/util/SharingManager.scss
index b11e694ff..c9f86f0e1 100644
--- a/src/client/util/SharingManager.scss
+++ b/src/client/util/SharingManager.scss
@@ -2,10 +2,6 @@
     width: 600px;
     // height: 360px;
 
-    .overlay {
-        transform: translate(-20px, -20px);
-    }
-
     .select {
         text-align: justify;
         text-align-last: end
@@ -33,12 +29,7 @@
         }
 
         .share-copy-link {
-            display: inline;
             border-radius: 4px;
-            border: solid gray 1px;
-            font-size: x-small;
-            background: #E8E8E8;
-            color: black;
             margin-top: -15px;
             margin-bottom: 15px;
             width: fit-content;
@@ -50,13 +41,22 @@
                 display: flex;
                 margin-bottom: 20px;
                 align-items: center;
-                height: 36;
+                max-height: 28;
 
                 .user-search {
+                    max-height: 30;
                     width: 90%;
+                    display: inline-flex;
+                    flex-direction: row;
+                    border: 2px solid;
+                    border-radius: 4px;
+                    border-color: inherit;
+                    background: white;
+                    color: black;
 
                     input {
-                        height: 30;
+                        height: 20px;
+                        width: 100px;
                     }
                 }
 
@@ -68,14 +68,12 @@
                     text-align-last: end;
                     font-size: 13px;
                     min-width: 90px;
-                    height: 36;
+                    height: 28;
                     margin-left: 2px;
                 }
 
                 .share-button {
-                    height: 36;
                     margin-left: 3%;
-                    background-color: black;
                 }
             }
 
@@ -131,6 +129,7 @@
                 display: flex;
                 top:0;
                 flex-direction: column;
+                border-radius: 4px;
 
                 .user-sort {
                     text-align: left;
@@ -147,11 +146,12 @@
                 .groups-list,
                 .users-list {
                     font-style: italic;
-                    background: #e8e8e8;
-                    border: 2px solid gray;
+                    border: 2px solid;
                     padding-left: 10px;
                     padding-right: 10px;
                     width: 97%;
+                    border-bottom-left-radius: 4px;
+                    border-bottom-right-radius: 4px;
                     overflow-y: scroll;
                     overflow-x: hidden;
                     text-align: left;
@@ -160,7 +160,6 @@
                     align-items: center;
                     text-align: center;
                     justify-content: center;
-                    color: black;
                     height: 250px;
                     margin: 0 2;
 
@@ -175,7 +174,6 @@
             outline: none;
             border-radius: 5px;
             border: 0px;
-            color: #fcfbf7;
             text-transform: none;
             letter-spacing: 2px;
             font-size: 75%;
@@ -194,11 +192,10 @@
         font-size: 20px;
         text-align: left;
         margin: 0 0 20px 0;
-        color: black;
     }
 
     .hr-substitute {
-        border: solid black 0.5px;
+        border: solid 0.5px;
         margin-top: 20px;
     }
 
@@ -223,11 +220,12 @@
         height: 25px;
         padding-left: 2;
         width: 97%;
+        border-radius: 4px;
         margin-top: 10px;
         margin-left: -8px;
         font-size: 14;
         margin-bottom: -4;
-        border: 2px solid gray;
+        border: 2px solid;
         border-bottom: none;
         align-items: center;
         display: flex;
@@ -237,11 +235,12 @@
         height: 25px;
         padding-left: 2;
         width: 97%;
+        border-radius: 4px;
         margin-top: 10px;
-        margin-left: -.5px;
+        margin-left: -8px;
         font-size: 14;
         margin-bottom: -4;
-        border: 2px solid gray;
+        border: 2px solid;
         border-bottom: none;
         align-items: center;
         display: flex;
@@ -264,7 +263,7 @@
         font-weight: normal;
 
         padding: 3px;
-        border-bottom: 0.5px solid grey;
+        border-bottom: 0.5px solid;
 
         .group-info {
             cursor: pointer;
@@ -368,35 +367,35 @@
         margin-top: 20px;
     }
 
-    .link-container {
-        display: flex;
-        flex-direction: row;
-        margin-bottom: 10px;
-        margin-left: auto;
-        margin-right: auto;
-
-        .link-box,
-        .copy {
-            padding: 10px;
-            border-radius: 10px;
-            padding: 10px;
-            border: solid black 1px;
-        }
-
-        .link-box {
-            background: white;
-            color: blue;
-            text-decoration: underline;
-        }
-
-        .copy {
-            margin-left: 20px;
-            cursor: alias;
-            border-radius: 50%;
-            width: 42px;
-            height: 42px;
-            transition: 1.5s all ease;
-            padding-top: 12px;
-        }
-    }
+    // .link-container {
+    //     display: flex;
+    //     flex-direction: row;
+    //     margin-bottom: 10px;
+    //     margin-left: auto;
+    //     margin-right: auto;
+
+    //     .link-box,
+    //     .copy {
+    //         padding: 10px;
+    //         border-radius: 10px;
+    //         padding: 10px;
+    //         border: solid black 1px;
+    //     }
+
+    //     .link-box {
+    //         background: white;
+    //         color: blue;
+    //         text-decoration: underline;
+    //     }
+
+    //     .copy {
+    //         margin-left: 20px;
+    //         cursor: alias;
+    //         border-radius: 50%;
+    //         width: 42px;
+    //         height: 42px;
+    //         transition: 1.5s all ease;
+    //         padding-top: 12px;
+    //     }
+    // }
 }
\ No newline at end of file
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index abec58a26..795df9c08 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Colors } from 'browndash-components';
+import { Button, IconButton, Size } from 'browndash-components';
 import { concat, intersection } from 'lodash';
 import { action, computed, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -525,13 +525,11 @@ export class SharingManager extends React.Component<{}> {
             const permissions = uniform ? StrCast(targetDoc?.[groupKey]) : '-multiple-';
 
             return !permissions ? null : (
-                <div key={groupKey} className={'container'}>
+                <div key={groupKey} className={'container'} style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
                     <div className={'padding'}>{StrCast(group.title)}</div>
                     &nbsp;
                     {group instanceof Doc ? (
-                        <div className="group-info" onClick={action(() => (GroupManager.Instance.currentGroup = group))}>
-                            <FontAwesomeIcon icon={'info-circle'} color={'#e8e8e8'} size={'sm'} style={{ backgroundColor: '#1e89d7', borderRadius: '100%', border: '1px solid #1e89d7' }} />
-                        </div>
+                        <IconButton icon={<FontAwesomeIcon icon={'info-circle'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={action(() => (GroupManager.Instance.currentGroup = group))} />
                     ) : null}
                     <div className={'edit-actions'}>
                         {admin || this.myDocAcls ? (
@@ -557,28 +555,26 @@ export class SharingManager extends React.Component<{}> {
                         color: StrCast(Doc.UserDoc().userColor)
                     }}
                 >
-                    <p className="share-title">
+                    <p className="share-title" style={{color: StrCast(Doc.UserDoc().userColor)}}>
                         <div className="share-info" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/features/collaboration/', '_blank')}>
                             <FontAwesomeIcon icon={'question-circle'} size={'sm'} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/features/collaboration/', '_blank')} />
                         </div>
-                        <b>Share </b>
+                        <b >Share </b>
                         {this.focusOn(docs.length < 2 ? StrCast(targetDoc?.title, 'this document') : '-multiple-')}
                     </p>
-                    <button
-                        className="share-copy-link"
-                        style={{ background: this._buttonDown ? Colors.LIGHT_BLUE : undefined }}
-                        onPointerDown={action(e => (this._buttonDown = true))}
-                        onPointerUp={action(e => (this._buttonDown = false))}
-                        onClick={this.copyURL}>
-                        <FontAwesomeIcon title="Copy Public URL" icon="copy" size="sm" />
-                        &nbsp; Copy Public URL
-                    </button>
-                    <div className="close-button" onClick={this.close}>
-                        <FontAwesomeIcon icon="times" color="black" size="lg" />
+                    <div className="share-copy-link">
+                        <Button type={"tertiary"} color={StrCast(Doc.UserDoc().userColor)} icon={<FontAwesomeIcon icon={"copy"} size="sm" />} iconPlacement={"left"} text={"Copy Guest URL"} />
+                    </div>
+                    <div className="close-button">
+                        <Button
+                            icon={<FontAwesomeIcon icon={'times'} size={'lg'} />}
+                            onClick={this.close}
+                            color={StrCast(Doc.UserDoc().userColor)}
+                        />
                     </div>
                     {admin ? (
                         <div className="share-container">
-                            <div className="share-setup">
+                            <div className="share-setup" style={{border: StrCast(Doc.UserDoc().userColor)}}>
                                 <Select
                                     className="user-search"
                                     placeholder="Enter user or group name..."
@@ -590,9 +586,24 @@ export class SharingManager extends React.Component<{}> {
                                     onChange={this.handleUsersChange}
                                     value={this.selectedUsers}
                                     styles={{
+                                        control: () => ({
+                                            display: 'inline-flex',
+                                            width: '100%',
+                                        }),
                                         indicatorSeparator: () => ({
+                                            display: 'inline-flex',
                                             visibility: 'hidden',
                                         }),
+                                        indicatorsContainer: () => ({
+                                            display: 'inline-flex',
+                                            textDecorationColor: 'black',
+                                        }),
+                                        valueContainer: () => ({
+                                            display: 'inline-flex',
+                                            fontStyle: StrCast(Doc.UserDoc().userColor),
+                                            color: StrCast(Doc.UserDoc().userColor),
+                                            width: '100%',
+                                        }),
                                     }}
                                 />
                                 <div className="permissions-select">
@@ -600,9 +611,9 @@ export class SharingManager extends React.Component<{}> {
                                         {this.sharingOptions(true)}
                                     </select>
                                 </div>
-                                <button ref={this.shareDocumentButtonRef} className="share-button" onClick={this.share}>
-                                    Share
-                                </button>
+                                <div className='share-button'>
+                                    <Button text={"SHARE"} type={"tertiary"} color={StrCast(Doc.UserDoc().userColor)} onClick={this.share} />
+                                </div>
                             </div>
                             <div className="sort-checkboxes">
                                 <input type="checkbox" onChange={action(() => (this.showUserOptions = !this.showUserOptions))} /> <label style={{ marginRight: 10 }}>Individuals</label>
@@ -627,25 +638,22 @@ export class SharingManager extends React.Component<{}> {
                             </div>
                         </div>
                     )}
-                    <div className="main-container">
+                    <div className="main-container" style={{color: StrCast(Doc.UserDoc().userColor), border: StrCast(Doc.UserDoc().userColor)}}>
                         <div className={'individual-container'}>
                             <div className="user-sort" onClick={action(() => (this.individualSort = this.individualSort === 'ascending' ? 'descending' : this.individualSort === 'descending' ? 'none' : 'ascending'))}>
                                 <div className="title-individual">
-                                    Individuals &nbsp;
-                                    <FontAwesomeIcon icon={this.individualSort === 'ascending' ? 'caret-up' : this.individualSort === 'descending' ? 'caret-down' : 'caret-right'} size="xs" />
+                                    Individuals
+                                    <IconButton icon={<FontAwesomeIcon icon={this.individualSort === 'ascending' ? 'caret-up' : this.individualSort === 'descending' ? 'caret-down' : 'caret-right'}/>} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} />
                                 </div>
                             </div>
                             <div className="users-list">{userListContents}</div>
                         </div>
                         <div className={'group-container'}>
                             <div className="user-sort" onClick={action(() => (this.groupSort = this.groupSort === 'ascending' ? 'descending' : this.groupSort === 'descending' ? 'none' : 'ascending'))}>
-                                <div className="title-group">
-                                    Groups &nbsp;
-                                    <div className="group-info" onClick={action(() => GroupManager.Instance?.open())}>
-                                        <FontAwesomeIcon icon={'info-circle'} color={'#e8e8e8'} size={'sm'} style={{ backgroundColor: '#1e89d7', borderRadius: '100%', border: '1px solid #1e89d7' }} />
-                                    </div>
-                                    &nbsp;
-                                    <FontAwesomeIcon icon={this.groupSort === 'ascending' ? 'caret-up' : this.groupSort === 'descending' ? 'caret-down' : 'caret-right'} size="xs" />
+                                <div className="title-group" >
+                                    Groups
+                                    <IconButton icon={<FontAwesomeIcon icon={'info-circle'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={action(() => (GroupManager.Instance.open()))} />
+                                    <IconButton icon={<FontAwesomeIcon icon={this.groupSort === 'ascending' ? 'caret-up' : this.groupSort === 'descending' ? 'caret-down' : 'caret-right'}/>} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} />
                                 </div>
                             </div>
                             <div className={'groups-list'}>{groupListContents}</div>
diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx
index 1a5781df0..ae55c8ebf 100644
--- a/src/client/views/DashboardView.tsx
+++ b/src/client/views/DashboardView.tsx
@@ -199,7 +199,7 @@ export class DashboardView extends React.Component {
                                 <div 
                                     className="dashboard-container" 
                                     key={dashboard[Id]} 
-                                    style={{ background: this.isUnviewedSharedDashboard(dashboard) && this.selectedDashboardGroup === DashboardGroup.SharedDashboards ? 'green' : shared ? 'blue' : '' }}
+                                    style={{ background: this.isUnviewedSharedDashboard(dashboard) && this.selectedDashboardGroup === DashboardGroup.SharedDashboards ? '#6CB982' : shared ? variant : '' }}
                                     onContextMenu={e => this.onContextMenu(dashboard, e)} 
                                     onClick={e => this.clickDashboard(e, dashboard)}>
                                     <img
diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss
index 060b506e3..b79486167 100644
--- a/src/client/views/PropertiesView.scss
+++ b/src/client/views/PropertiesView.scss
@@ -42,16 +42,6 @@
                     padding: 0;
                     margin-top: -5;
                 }
-
-                .propertiesView-acls-checkbox {
-                    margin-top: -15px;
-                    margin-bottom: -10px;
-
-                    .propertiesView-acls-checkbox-text {
-                        display: inline;
-                        font-size: 9px;
-                    }
-                }
             }
 
             .change-buttons {
@@ -68,14 +58,19 @@
             }
     }
 
+    .propertiesView-acls-checkbox {
+        float: right;
+        margin-left: 50px;
+    }
+
     .propertiesView-shareDropDown{
         margin-right: 10px;
         min-width: 65px;
         
         & .propertiesView-shareDropDownNone{
-            height: 16px;
             padding: 0px;
             padding-left: 3px;
+            padding-right: 3px;
             background: grey;
             color: rgb(71, 71, 71);
             border-radius: 6px;
@@ -83,18 +78,18 @@
         }
         & .propertiesView-shareDropDownEdit,
         .propertiesView-shareDropDownAdmin{
-            height: 16px;
             padding: 0px;
             padding-left: 3px;
+            padding-right: 3px;
             background: rgb(254, 254, 199);
             color: rgb(75, 75, 5);
             border-radius: 6px;
             border: 1px solid rgb(75, 75, 5);
         }
         & .propertiesView-shareDropDownAugment{
-            height: 16px;
             padding: 0px;
             padding-left: 3px;
+            padding-right: 3px;
             background: rgb(208, 255, 208);
             color:rgb(19, 80, 19);
             border-radius: 6px;
@@ -102,18 +97,18 @@
 
         }
         & .propertiesView-shareDropDownView{
-            height: 16px;
             padding: 0px;
             padding-left: 3px;
+            padding-right: 3px;
             background: rgb(213, 213, 255);
             color: rgb(25, 25, 101);
             border-radius: 6px;
             border: 1px solid rgb(25, 25, 101);
         }
         & .propertiesView-shareDropDownNot-Shared{
-            height: 16px;
             padding: 0px;
             padding-left: 3px;
+            padding-right: 3px;
             background: rgb(255, 207, 207);
             color: rgb(138, 47, 47);
             border-radius: 6px;
@@ -177,19 +172,7 @@
     }
 
     .expansion-button {
-        margin-left: -15px;
-        margin-right: 20px;
-
-        .expansion-button-icon {
-            width: 11px;
-            height: 11px;
-            color: black;
-
-            &:hover {
-                color: rgb(131, 131, 131);
-                cursor: pointer;
-            }
-        }
+        margin-right: 10px;
     }
 
     .propertiesView-sharingTable {
@@ -238,6 +221,11 @@
         }
     }
 
+    .propertiesView-permissions-select {
+        background: inherit;
+        border: none;
+    }
+
     .propertiesView-field {
         display: flex;
         font-size: 7px;
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index a4b3899eb..27b9c3c7a 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -3,7 +3,7 @@ import { IconLookup } from '@fortawesome/fontawesome-svg-core';
 import { faAnchor, faArrowRight, faWindowMaximize } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Checkbox, Tooltip } from '@material-ui/core';
-import { Button, Colors, EditableText, NumberInput, Size, Slider, Type } from 'browndash-components';
+import { Button, Colors, EditableText, IconButton, NumberInput, Size, Slider, Type } from 'browndash-components';
 import { concat } from 'lodash';
 import { Lambda, action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
@@ -367,17 +367,18 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
      */
     @computed get expansionIcon() {
         return (
-            <Tooltip title={<div className="dash-tooltip">Show more permissions</div>}>
-                <div
-                    className="expansion-button"
-                    onPointerDown={() => {
+            <div className="expansion-button" >
+                <IconButton 
+                    icon={<FontAwesomeIcon icon={'ellipsis-h'} />} 
+                    size={Size.XSMALL} 
+                    color={StrCast(Doc.UserDoc().userColor)} 
+                    onClick={action(() => {
                         if (this.selectedDocumentView || this.selectedDoc) {
                             SharingManager.Instance.open(this.selectedDocumentView?.props.Document === this.selectedDoc ? this.selectedDocumentView : undefined, this.selectedDoc);
                         }
-                    }}>
-                    <FontAwesomeIcon className="expansion-button-icon" icon="ellipsis-h" color="black" size="sm" />
-                </div>
-            </Tooltip>
+                    })} 
+                />
+            </div>
         );
     }
 
@@ -417,7 +418,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             <div>
                 <div className={'propertiesView-shareDropDown'}>
                     <div className={`propertiesView-shareDropDown${permission}`}>
-                        <div className="propertiesView-shareDropDown">{admin && permission !== 'Owner' ? this.getPermissionsSelect(name, permission, showGuestOptions) : concat(shareImage, ' ', permission)}</div>
+                        <div >{admin && permission !== 'Owner' ? this.getPermissionsSelect(name, permission, showGuestOptions) : concat(shareImage, ' ', permission)}</div>
                     </div>
                 </div>
             </div>
@@ -449,6 +450,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         const target = docs[0];
 
         const showAdmin = GetEffectiveAcl(target) == AclAdmin;
+        console.log(GetEffectiveAcl(target), Doc.GetProto(target)[`acl-${normalizeEmail(Doc.CurrentUserEmail)}`])
         const individualTableEntries = [];
         const usersAdded: string[] = []; // all shared users being added - organized by denormalized email
 
@@ -512,25 +514,29 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             }
         });
 
-        // public permission
-        const publicPermission = StrCast((this.layoutDocAcls ? target : Doc.GetProto(target))['acl-Guest']);
+        // guest permission
+        const guestPermission = StrCast((this.layoutDocAcls ? target : Doc.GetProto(target))['acl-Guest']);
 
         return (
             <div>
                 <div>
-                    <br></br> Individual Users with Access to this Document
+                    <br></br> Individuals with Access to this Document
+                </div>
+                <div className="propertiesView-sharingTable" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
+                    {<div> {individualTableEntries}</div>}
                 </div>
-                <div className="propertiesView-sharingTable">{<div> {individualTableEntries}</div>}</div>
                 {groupTableEntries.length > 0 ? (
                     <div>
                         <div>
                             <br></br> Groups with Access to this Document
                         </div>
-                        <div className="propertiesView-sharingTable">{<div> {groupTableEntries}</div>}</div>
+                        <div className="propertiesView-sharingTable" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
+                            {<div> {groupTableEntries}</div>}
+                        </div>
                     </div>
                 ) : null}
                 <br></br> Guest
-                <div>{this.colorACLDropDown('Guest', true, publicPermission!, true)}</div>
+                <div>{this.colorACLDropDown('Guest', showAdmin, guestPermission!, true)}</div>
             </div>
         );
     }
@@ -1142,26 +1148,17 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         return <PropertiesSection
             title="Sharing & Permissions"
             content={<>
-            <div className="propertiesView-buttonContainer">
-                {!Doc.noviceMode ? (
-                        <div className="propertiesView-buttonContainer">
-                        <div className="propertiesView-acls-checkbox">
-                            <div className="propertiesView-acls-checkbox-text"> Show / Contol Layout Permissions </div>
-                            <Checkbox color="primary" onChange={action(() => (this.layoutDocAcls = !this.layoutDocAcls))} checked={this.layoutDocAcls} />
-                        </div>
-                        {/* <Tooltip title={<><div className="dash-tooltip">{"Re-distribute sharing settings"}</div></>}>
-                                    <button onPointerDown={() => SharingManager.Instance.distributeOverCollection(this.selectedDoc!)}>
-                                        <FontAwesomeIcon icon="redo-alt" color="white" size="1x" />
-                                    </button>
-                                </Tooltip> */}
-                        </div>
-                    ) : null}
+            {/* <div className="propertiesView-buttonContainer"> */}
+                    <div className="propertiesView-acls-checkbox">
+                        Layout Permissions
+                        <Checkbox color="primary" onChange={action(() => (this.layoutDocAcls = !this.layoutDocAcls))} checked={this.layoutDocAcls} />
+                    </div>
                     {/* <Tooltip title={<><div className="dash-tooltip">{"Re-distribute sharing settings"}</div></>}>
                         <button onPointerDown={() => SharingManager.Instance.distributeOverCollection(this.selectedDoc!)}>
                             <FontAwesomeIcon icon="redo-alt"  size="1x" />
                         </button>
                     </Tooltip> */}
-                </div>
+                {/* </div> */}
                 {this.sharingTable}
             </>}
             isOpen={this.openSharing}
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 79f41fe9d..ec4252eb8 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -134,14 +134,16 @@ export class TopBar extends React.Component {
     @computed get topbarRight() {
         return (
             <div className="topbar-right">
-                <Button
-                    text={GetEffectiveAcl(Doc.ActiveDashboard) === AclAdmin ? 'Share' : 'View Original'}
-                    type={Type.TERT}
-                    color={this.variantColor}
-                    onClick={() => {
-                        SharingManager.Instance.open(undefined, Doc.ActiveDashboard);
-                    }}
-                />
+                {Doc.ActiveDashboard ? 
+                    <Button
+                        text={GetEffectiveAcl(Doc.ActiveDashboard) === AclAdmin ? 'Share' : 'View Original'}
+                        type={Type.TERT}
+                        color={this.variantColor}
+                        onClick={() => {
+                            SharingManager.Instance.open(undefined, Doc.ActiveDashboard);
+                        }}
+                    />
+                : null }
                 <IconButton tooltip={"Issue Reporter ⌘I"} size={Size.SMALL} color={this.color} onClick={ReportManager.Instance.open} icon={<FaBug />} />
                 <IconButton tooltip={"Documentation ⌘D"} size={Size.SMALL} color={this.color} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')} icon={<FontAwesomeIcon icon="question-circle" />} />
                 <IconButton tooltip={"Settings ⌘⇧S"} size={Size.SMALL} color={this.color} onClick={SettingsManager.Instance.open} icon={<FontAwesomeIcon icon="cog" />} />
-- 
cgit v1.2.3-70-g09d2

