From bcebc070a67a10be650ac82ee20750586bff3686 Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Thu, 3 Oct 2019 07:41:57 +0300
Subject: [PATCH] Collection Add Sketch and Share buttons

---
 client/modules/User/components/Collection.jsx | 21 +++++++--------
 client/styles/abstracts/_placeholders.scss    | 27 +++++++++++++++++++
 client/styles/abstracts/_variables.scss       | 11 ++++++++
 client/styles/components/_collection.scss     | 27 ++++++++++++++-----
 4 files changed, 68 insertions(+), 18 deletions(-)

diff --git a/client/modules/User/components/Collection.jsx b/client/modules/User/components/Collection.jsx
index 5b6eb890..acb55611 100644
--- a/client/modules/User/components/Collection.jsx
+++ b/client/modules/User/components/Collection.jsx
@@ -36,7 +36,7 @@ const ShareURL = ({ value }) => {
             <br />
             <CopyableInput value={value} />
           </React.Fragment> :
-          <button onClick={() => setShowURL(true)}>Share collection</button>
+          <button className="collection-share__button" onClick={() => setShowURL(true)}>Share collection</button>
       }
     </div>
   );
@@ -352,7 +352,7 @@ class Collection extends React.Component {
               }
             </h2>
 
-            <p className="collection-metadata__user">{items.length} sketch{items.length === 1 ? '' : 'es'} collected by {owner.username}</p>
+            <p className="collection-metadata__user">By {owner.username}</p>
 
             <p className="collection-metadata__description">
               {
@@ -365,12 +365,20 @@ class Collection extends React.Component {
                   description
               }
             </p>
+
+            <p className="collection-metadata__user">{items.length} sketch{items.length === 1 ? '' : 'es'}</p>
           </div>
 
           <div className="collection-metadata__column--right">
             <p className="collection-metadata__share">
               <ShareURL value={`${baseURL}${id}`} />
             </p>
+            {
+              this.isOwner() &&
+              <button className="collection-metadata__add-button" onClick={this.showAddSketches}>
+                Add more sketches
+              </button>
+            }
           </div>
         </div>
       </div>
@@ -450,15 +458,6 @@ class Collection extends React.Component {
                     />))}
                 </tbody>
               </table>
-
-              {
-                this.isOwner() &&
-                <p className="collection-add-button">
-                  <button onClick={this.showAddSketches}>
-                    Add more sketches
-                  </button>
-                </p>
-              }
             </div>
           }
           {
diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss
index 23b03f0e..67f4c208 100644
--- a/client/styles/abstracts/_placeholders.scss
+++ b/client/styles/abstracts/_placeholders.scss
@@ -102,6 +102,33 @@
 	}
 }
 
+%primary-button {
+	@include themify() {
+		background-color: getThemifyVariable('primary-button-background-color');
+		color: getThemifyVariable('primary-button-color');
+		cursor: pointer;
+		border: 2px solid getThemifyVariable('primary-button-border-color');
+		border-radius: 2px;
+		padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem;
+		&:enabled:hover {
+			border-color: getThemifyVariable('primary-button-background-hover-color');
+			background-color: getThemifyVariable('primary-button-background-hover-color');
+			color: getThemifyVariable('primary-button-hover-color');
+			& g {
+				fill: getThemifyVariable('primary-button-hover-color');
+			}
+		}
+		&:enabled:active {
+			border-color: getThemifyVariable('primary-button-background-active-color');
+			background-color: getThemifyVariable('primary-button-background-active-color');
+			color: getThemifyVariable('primary-button-active-color');
+			& g {
+				fill: getThemifyVariable('primary-button-active-color');
+			}
+		}
+	}
+}
+
 %preferences-button {
 	@extend %toolbar-button;
 	@include themify() {
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index 52566c31..56a57d1a 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -76,6 +76,9 @@ $themes: (
     codefold-icon-open: url(../images/triangle-arrow-down.svg),
     codefold-icon-closed: url(../images/triangle-arrow-right.svg),
 
+    primary-button-color: #fff,
+    primary-button-background-color: $p5js-pink,
+
     form-title-color: rgba(51, 51, 51, 0.87),
     form-secondary-title-color: $middleGray,
     form-input-text-color: $dark,
@@ -141,6 +144,10 @@ $themes: (
     table-row-stripe-color: #3f3f3f,
     codefold-icon-open: url(../images/triangle-arrow-down-white.svg),
     codefold-icon-closed: url(../images/triangle-arrow-right-white.svg),
+
+    primary-button-color: #fff,
+    primary-button-background-color: $p5js-pink,
+
     form-title-color: $white,
     form-secondary-title-color: #b5b5b5,
     form-border-color: #b5b5b5,
@@ -203,6 +210,10 @@ $themes: (
     table-row-stripe-color: #3f3f3f,
     codefold-icon-open: url(../images/triangle-arrow-down-white.svg),
     codefold-icon-closed: url(../images/triangle-arrow-right-white.svg),
+
+    primary-button-color: #fff,
+    primary-button-background-color: $p5js-pink,
+
     form-title-color: $white,
     form-secondary-title-color: #b5b5b5,
     form-border-color: #b5b5b5,
diff --git a/client/styles/components/_collection.scss b/client/styles/components/_collection.scss
index 05950e27..1343e8ef 100644
--- a/client/styles/components/_collection.scss
+++ b/client/styles/components/_collection.scss
@@ -23,6 +23,14 @@
 
 .collection-metadata__column--right {
   align-self: flex-end;
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.collection-metadata__column--right > * {
+  margin-top: #{10 / $base-font-size}rem;
 }
 
 .collection-metadata__name {
@@ -44,13 +52,13 @@
 }
 
 .collection-metadata__user {
-  padding-top: #{12 / $base-font-size}rem;
+  padding-top: #{8 / $base-font-size}rem;
   padding-left: #{8 / $base-font-size}rem;
   font-size: 14px;
 }
 
 .collection-metadata__description {
-  padding-top: #{24 / $base-font-size}rem;
+  padding-top: #{8 / $base-font-size}rem;
   text-align: left;
   font-size: 14px;
 }
@@ -76,13 +84,13 @@
   overflow: scroll;
 }
 
-.collection-add-button {
-  padding: #{24 / $base-font-size}rem;
-  text-align: center;
-}
-
 .collection-share {
   text-align: right;
+  // padding: #{10 / $base-font-size}rem #{30 / $base-font-size}rem;
+}
+
+.collection-share__button {
+  @extend %button;
 }
 
 .collection-share__label {
@@ -93,3 +101,8 @@
 .collection-share .copyable-input {
   padding-bottom: 0;
 }
+
+.collection-metadata__add-button {
+  @extend %primary-button;
+  flex-grow: 0;
+}