From 001a30f14050a8682ab7bccbd1b5499e289deb4c Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Tue, 10 Dec 2019 18:34:37 -0500
Subject: [PATCH] potentional option for collection sharing

---
 client/modules/User/components/Collection.jsx | 17 +++++++++--------
 client/styles/abstracts/_placeholders.scss    |  4 ++++
 client/styles/components/_collection.scss     | 14 +++++++++++---
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/client/modules/User/components/Collection.jsx b/client/modules/User/components/Collection.jsx
index 59130704..7dc16bd2 100644
--- a/client/modules/User/components/Collection.jsx
+++ b/client/modules/User/components/Collection.jsx
@@ -20,6 +20,7 @@ import Overlay from '../../App/components/Overlay';
 import SketchList from '../../IDE/components/AddToCollectionSketchList';
 import CopyableInput from '../../IDE/components/CopyableInput';
 import { SketchSearchbar } from '../../IDE/components/Searchbar';
+import dropdownArrow from '../../../images/down-arrow.svg';
 
 const arrowUp = require('../../../images/sort-arrow-up.svg');
 const arrowDown = require('../../../images/sort-arrow-down.svg');
@@ -30,14 +31,14 @@ const ShareURL = ({ value }) => {
 
   return (
     <div className="collection-share">
-      {
-        showURL ?
-          <React.Fragment>
-            <span className="collection-share__label">Everyone can access the collection with this link</span>
-            <br />
-            <CopyableInput value={value} />
-          </React.Fragment> :
-          <button className="collection-share__button" onClick={() => setShowURL(true)}>Share</button>
+      <button className="collection-share__button" onClick={() => setShowURL(!showURL)}>
+        <span>Share</span>
+        <InlineSVG className="collection-share__arrow" src={dropdownArrow} />
+      </button>
+      { showURL &&
+        <div className="collection__share-dropdown">
+          <CopyableInput value={value} label="Link to Collection" />
+        </div>
       }
     </div>
   );
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index 23b03f0e..1b1eb377 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -83,6 +83,10 @@
 		border: 2px solid getThemifyVariable('button-border-color');
 		border-radius: 2px;
 		padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem;
+		& g {
+			fill: getThemifyVariable('button-color');
+			opacity: 1;
+		}
 		&:enabled:hover {
 			border-color: getThemifyVariable('button-background-hover-color');
 			background-color: getThemifyVariable('button-background-hover-color');
diff --git a/client/styles/components/_collection.scss b/client/styles/components/_collection.scss
index c0df5141..ea6a10f9 100644
--- a/client/styles/components/_collection.scss
+++ b/client/styles/components/_collection.scss
@@ -84,21 +84,29 @@
 
 .collection-share {
   text-align: right;
+  position: relative;
 }
 
 .collection-share__button {
   @extend %button;
+  display: flex;
+  align-items: center;
 }
 
-.collection-share__label {
-  display: block;
-  text-align: left;
+.collection-share__arrow {
+  margin-left: #{5 / $base-font-size}rem;
 }
 
 .collection-share .copyable-input {
   padding-bottom: 0;
 }
 
+.collection__share-dropdown {
+  @extend %dropdown-open-right;
+  padding: #{20 / $base-font-size}rem;
+  width: #{350 / $base-font-size}rem;
+}
+
 .collection-metadata__add-button {
   @extend %button;
   flex-grow: 0;