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;