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 (
- {
- showURL ?
-
- Everyone can access the collection with this link
-
-
- :
-
+
+ { showURL &&
+
+
+
}
);
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;