From ed3bb0dc180e9fd70311936fa1a60fc10b69f5ad Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Tue, 20 Jun 2023 17:03:59 -0400
Subject: SharingManager UI

---
 src/client/util/SharingManager.tsx | 29 +++++++++++++++++------------
 1 file changed, 17 insertions(+), 12 deletions(-)

(limited to 'src/client/util/SharingManager.tsx')

diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 8b829158e..3a3d393a0 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -587,6 +587,7 @@ export class SharingManager extends React.Component<{}> {
             return !permissions ? null : (
                 <div key={groupKey} className={'container'}>
                     <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' }} />
@@ -639,9 +640,11 @@ export class SharingManager extends React.Component<{}> {
                                         }),
                                     }}
                                 />
-                                <select className="permissions-select" onChange={this.handlePermissionsChange} value={this.permissions}>
-                                    {this.sharingOptions(true)}
-                                </select>
+                                <div className='permissions-select'>
+                                    <select className={`permissions-dropdown-${this.permissions}`} onChange={this.handlePermissionsChange} value={this.permissions}>
+                                        {this.sharingOptions(true)}
+                                    </select>
+                                </div>
                                 <button ref={this.shareDocumentButtonRef} className="share-button" onClick={this.share}>
                                     Share
                                 </button>
@@ -666,20 +669,22 @@ export class SharingManager extends React.Component<{}> {
                     <div className="main-container">
                         <div className={'individual-container'}>
                             <div className="user-sort" onClick={action(() => (this.individualSort = this.individualSort === 'ascending' ? 'descending' : this.individualSort === 'descending' ? 'none' : 'ascending'))}>
-                                Individuals{' '}
-                                {this.individualSort === 'ascending' ? (
-                                    <FontAwesomeIcon icon={'caret-up'} size={'xs'} />
-                                ) : this.individualSort === 'descending' ? (
-                                    <FontAwesomeIcon icon={'caret-down'} size={'xs'} />
-                                ) : (
-                                    <FontAwesomeIcon icon={'caret-right'} size={'xs'} />
-                                )}
+                                <div className='title-individual'>
+                                    Individuals &nbsp;
+                                    {this.individualSort === 'ascending' ? (
+                                        <FontAwesomeIcon icon={'caret-up'} size={'xs'} />
+                                    ) : this.individualSort === 'descending' ? (
+                                        <FontAwesomeIcon icon={'caret-down'} size={'xs'} />
+                                    ) : (
+                                        <FontAwesomeIcon icon={'caret-right'} size={'xs'} />
+                                    )}
+                                </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="container">
+                                <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' }} />
-- 
cgit v1.2.3-70-g09d2