SharingManager added documentation + clearer copy url button

2 files changed, 24 insertions, 2 deletions

diff --git a/src/client/util/SharingManager.scss b/src/client/util/SharingManager.scss
index 86de5ac44..6dd38ef30 100644
--- a/src/client/util/SharingManager.scss
+++ b/src/client/util/SharingManager.scss
@@ -28,6 +28,18 @@
             gap: 5px;
         }
 
+        .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;
+        }
+
         .share-container {
 
             .share-setup {
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 7593cc025..b557dd5d6 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -649,11 +649,21 @@ export class SharingManager extends React.Component<{}> {
                 {GroupManager.Instance?.currentGroup ? <GroupMemberView group={GroupManager.Instance.currentGroup} onCloseButtonClick={action(() => (GroupManager.Instance.currentGroup = undefined))} /> : null}
                 <div className="sharing-contents">
                     <p className="share-title">
+                        <IconButton size={Size.SMALL} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/properties/sharing-and-permissions/', '_blank')} icon={<FontAwesomeIcon icon="question-circle" />} />
                         <b>Share </b>
                         {this.focusOn(docs.length < 2 ? StrCast(targetDoc?.title, 'this document') : '-multiple-')}
-                        {/* <FontAwesomeIcon title={"Copy Public URL"} icon={'copy'} size={'sm'} onClick={this.copyURL}/> */}
-                        <IconButton size={Size.SMALL} tooltip="Copy Public URL" onClick={this.copyURL} icon={<FontAwesomeIcon icon="copy" />} />
+                        {/* <button className="share-copy-link" onClick={this.copyURL}>
+                            <FontAwesomeIcon title={"Copy Public URL"} icon={'copy'} size={'sm'} onClick={this.copyURL}/>
+                            &nbsp;
+                            Copy Public URL
+                        </button> */}
+                        {/* <IconButton size={Size.SMALL} tooltip="Copy Public URL" onClick={this.copyURL} icon={<FontAwesomeIcon icon="copy" />} /> */}
                     </p>
+                    <button className="share-copy-link" onClick={this.copyURL}>
+                        <FontAwesomeIcon title={"Copy Public URL"} icon={'copy'} size={'sm'} onClick={this.copyURL}/>
+                        &nbsp;
+                        Copy Public URL
+                    </button>
                     <div className={'close-button'} onClick={this.close}>
                         <FontAwesomeIcon icon={'times'} color={'black'} size={'lg'} />
                     </div>