Merge branch 'feature/sketch-collections' of https://github.com/andrewn/p5.js-web-editor into feature/sketch-collections

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>
   );

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');

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;