components + homepage

1 files changed, 40 insertions, 32 deletions

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>