From 574f37854414c99f3d4d9e945bb80264d6dcce70 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Sun, 12 Feb 2017 21:11:50 +1300
Subject: [PATCH] Heavy-bordered buttons

---
 src/js/components/FollowButton.js |   2 +-
 src/js/views/Album.js             |   4 +-
 src/js/views/Artist.js            |   2 +-
 src/js/views/Playlist.js          |  16 ++--
 src/js/views/User.js              |   2 +-
 src/scss/components/_header.scss  |   6 ++
 src/scss/components/_modal.scss   |   3 +
 src/scss/global/_forms.scss       | 144 ++++++++++++++++--------------
 src/scss/global/_variables.scss   |  15 +++-
 src/scss/views/_artist.scss       |   2 +-
 10 files changed, 110 insertions(+), 86 deletions(-)

diff --git a/src/js/components/FollowButton.js b/src/js/components/FollowButton.js
index 39b96977..3ff47285 100755
--- a/src/js/components/FollowButton.js
+++ b/src/js/components/FollowButton.js
@@ -35,7 +35,7 @@ class FollowButton extends React.Component{
 		if (this.props.className) className += ' '+this.props.className
 
 		if( this.props.is_following === true ){
-			return <button className={className} onClick={ () => this.remove() }>{ this.props.removeText }</button>
+			return <button className={className+' destructive'} onClick={ () => this.remove() }>{ this.props.removeText }</button>
 		}else{
 			return <button className={className} onClick={ () => this.add() }>{ this.props.addText }</button>
 		}
diff --git a/src/js/views/Album.js b/src/js/views/Album.js
index dee0f772..1af58527 100755
--- a/src/js/views/Album.js
+++ b/src/js/views/Album.js
@@ -118,8 +118,8 @@ class Album extends React.Component{
 				</div>
 
 				<div className="actions">
-					<button className="rounded primary" onClick={e => this.play()}>Play</button>
-					{ helpers.uriSource(this.props.params.uri) == 'spotify' ? <FollowButton className="outline rounded" uri={this.props.params.uri} addText="Add to library" removeText="Remove from library" is_following={this.props.album.is_following} /> : null }
+					<button className="primary" onClick={e => this.play()}>Play</button>
+					{ helpers.uriSource(this.props.params.uri) == 'spotify' ? <FollowButton className="secondary" uri={this.props.params.uri} addText="Add to library" removeText="Remove from library" is_following={this.props.album.is_following} /> : null }
 				</div>
 
 				<section className="list-wrapper">
diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js
index 522f836e..e2e4f9b7 100755
--- a/src/js/views/Artist.js
+++ b/src/js/views/Artist.js
@@ -195,7 +195,7 @@ class Artist extends React.Component{
 					<div className="liner">
 						<Thumbnail image={image} circle />
 						<h1>{ this.props.artist.name }</h1>
-						{ scheme == 'spotify' ? <div className="actions"><button className="primary rounded" onClick={e => this.props.pusherActions.startRadio([this.props.artist.uri])}>Start radio</button><FollowButton className="outline rounded white" uri={this.props.params.uri} removeText="Unfollow" addText="Follow" is_following={this.props.artist.is_following} /></div> : null}
+						{ scheme == 'spotify' ? <div className="actions"><button className="primary" onClick={e => this.props.pusherActions.startRadio([this.props.artist.uri])}>Start radio</button><FollowButton className="white" uri={this.props.params.uri} removeText="Unfollow" addText="Follow" is_following={this.props.artist.is_following} /></div> : null}
 						{ this.renderSubViewMenu() }
 					</div>
 				</div>
diff --git a/src/js/views/Playlist.js b/src/js/views/Playlist.js
index e55f9670..8a48e7b3 100755
--- a/src/js/views/Playlist.js
+++ b/src/js/views/Playlist.js
@@ -95,9 +95,9 @@ class Playlist extends React.Component{
 			case 'm3u':
 				return (
 					<div className="actions">
-						<button className="rounded primary" onClick={ e => this.play() }>Play</button>
-						<button className="rounded outline" onClick={ e => this.props.uiActions.openModal('edit_playlist', { uri: this.props.playlist.uri, name: this.props.playlist.name }) }>Edit</button>
-						<ConfirmationButton className="rounded destructive" content="Delete" confirmingContent="Are you sure?" onConfirm={ e => this.delete() } />
+						<button className="primary" onClick={ e => this.play() }>Play</button>
+						<button className="secondary" onClick={ e => this.props.uiActions.openModal('edit_playlist', { uri: this.props.playlist.uri, name: this.props.playlist.name }) }>Edit</button>
+						<ConfirmationButton className="destructive" content="Delete" confirmingContent="Are you sure?" onConfirm={ e => this.delete() } />
 					</div>
 				)
 
@@ -105,16 +105,16 @@ class Playlist extends React.Component{
 				if( this.props.playlist.can_edit ){
 					return (
 						<div className="actions">
-							<button className="rounded primary" onClick={ e => this.play() }>Play</button>
-							<button className="outline rounded" onClick={ e => this.props.uiActions.openModal('edit_playlist', { uri: this.props.playlist.uri, name: this.props.playlist.name, is_public: this.props.playlist.public }) }>Edit</button>
-							<ConfirmationButton className="rounded destructive" content="Delete" confirmingContent="Are you sure?" onConfirm={ e => this.unfollow() } />
+							<button className="primary" onClick={ e => this.play() }>Play</button>
+							<button className="secondary" onClick={ e => this.props.uiActions.openModal('edit_playlist', { uri: this.props.playlist.uri, name: this.props.playlist.name, is_public: this.props.playlist.public }) }>Edit</button>
+							<ConfirmationButton className="destructive" content="Delete" confirmingContent="Are you sure?" onConfirm={ e => this.unfollow() } />
 						</div>
 					)
 				}
 				return (
 					<div className="actions">
-						<button className="rounded primary" onClick={ e => this.play() }>Play</button>
-						<FollowButton className="rounded outline" uri={this.props.playlist.uri} addText="Add to library" removeText="Remove from library" is_following={this.props.playlist.is_following} />
+						<button className="primary" onClick={ e => this.play() }>Play</button>
+						<FollowButton uri={this.props.playlist.uri} addText="Add to library" removeText="Remove from library" is_following={this.props.playlist.is_following} />
 					</div>
 				)
 
diff --git a/src/js/views/User.js b/src/js/views/User.js
index f71e0ce5..81204c03 100755
--- a/src/js/views/User.js
+++ b/src/js/views/User.js
@@ -71,7 +71,7 @@ class User extends React.Component{
 					</ul>
 
 					<div className="actions">
-						<FollowButton className="rounded outline" uri={this.props.params.uri} addText="Follow" removeText="Unfollow" />
+						<FollowButton className="secondary" uri={this.props.params.uri} addText="Follow" removeText="Unfollow" />
 					</div>
 				</div>
 				<div className="main">
diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss
index 7441d9ad..9be01dba 100755
--- a/src/scss/components/_header.scss
+++ b/src/scss/components/_header.scss
@@ -37,6 +37,12 @@ main {
 				line-height: 24px;
 				text-transform: uppercase;
 				min-width: 0;
+				border: 0;
+				color: #000000;
+
+				&:active {
+					background: rgba(0,0,0,0.15);
+				}
 			}
 		}
 	}
diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss
index 4b136c45..e2d3f254 100755
--- a/src/scss/components/_modal.scss
+++ b/src/scss/components/_modal.scss
@@ -141,6 +141,9 @@
 					top: 5px;
 					right: 0;
 					padding: 14px;
+					margin: 0;
+					min-width: 0;
+					color: #FFFFFF;
 				}
 				input[type="text"]{
 					font-size: 14px;
diff --git a/src/scss/global/_forms.scss b/src/scss/global/_forms.scss
index f6f66311..edfbe7cc 100755
--- a/src/scss/global/_forms.scss
+++ b/src/scss/global/_forms.scss
@@ -35,15 +35,22 @@ button,
 input[type="button"],
 input[type="submit"] {
 	@include animate();
-	padding: 10px 20px;
+	padding: 6px 10px;
+	min-width: 150px;
 	border: 0;
 	margin: 0 10px 20px 0;
 	margin-right: 20px;
 	text-align: center;
-	min-width: 140px;
-	border-radius: 20px;
-	color: #000000;
-	background: $light_grey;
+	border: 2px solid $mid_grey;
+	color: $mid_grey;
+	background: transparent;
+	text-transform: uppercase;
+	font-size: 12px;
+	font-weight: 800;
+
+	&.wide {
+		min-width: 200px;
+	}
 
 	@include responsive( $bp_medium ){
 		min-width: none;
@@ -51,76 +58,56 @@ input[type="submit"] {
 
 	&:hover{
 		cursor: pointer;
-		background: darken( $light_grey, 6%);
+		border-color: darken( $mid_grey, 10%);
 	}
 
-	&.outline {
+	&:active {
+		@include noanimate();
+		background: $mid_grey;
 		color: #FFFFFF;
-		padding: 9px 19px;
-		border: 1px solid $darkest_grey;
-		background: transparent;
-		color: $darkest_grey;
-
-		&.white {
-			border-color: #FFFFFF;
-			color: #FFFFFF;
-			background: rgba(0,0,0,0.2);
-
-			&:hover {
-				background: rgba(0,0,0,0.4);
-				border-color: #FFFFFF;
-			}
-		}
+		border-color: $mid_grey;
+	}
 
+	&.primary {
+		border-color: $turquoise;
+		color: $turquoise;
 		&:hover {
+			color: darken( $turquoise, 10% );
+			border-color: darken( $turquoise, 10% );
+		}
+		&:active {
+			color: #FFFFFF;
+			background: $turquoise;
 			border-color: $turquoise;
 		}
 	}
 
-	&.primary {
-		background: $turquoise;
-		color: #FFFFFF;
-		&:hover {
-			background: darken( $turquoise, 6% );
-		}
-	}
-
 	&.secondary {
-		background: #000000;
-		color: #FFFFFF;
+		color: #000000;
+		border-color: #000000;
 		&:hover {
-			background: lighten( #000000, 20% );
+			color: lighten( #000000, 40% );
+			border-color: lighten( #000000, 40% );
 		}
-	}
-
-	&.tertiary {
-		background: $mid_grey;
-		color: #FFFFFF;
-		&:hover {
-			background: darken( $mid_grey, 6% );
-		}
-	}
-
-	&.discrete {
-		background: transparent;
-		color: #FFFFFF;
-
-		&[disabled],
-		&[disabled="disabled"] {
-			background: transparent !important;
-		}
-
-		&:hover {
-			color: $turquoise;
+		&:active {
+			color: #FFFFFF;
+			background: #000000;
+			border-color: #000000;
 		}
 	}
 
 	&.confirming,
 	&.destructive {
-		background: $red;
-		color: #FFFFFF;
+		border-color: $red;
+		color: $red;
 		&:hover {
-			background: darken( $red, 6% );
+			color: darken( $red, 6% );
+			border-color: darken( $red, 6% );
+		}
+		&:active {
+			color: #FFFFFF;
+			background: $red;
+			border-color: $red;
 		}
 	}
 
@@ -130,28 +117,49 @@ input[type="submit"] {
 			@include animate_timeout(2s);
 			content: '';
 			position: absolute;
-			top: 0;
 			left: 0;
 			bottom: 0;
 			width: 0;
-			background: rgba(255,255,255,0.15);
+			height: 3px;
+			background: $red;
 		}
 	}
 
-	&.wide {
-		display: inline-block;
-		min-width: 200px;
-		text-align: center;
-		padding-left: 30px;
-		padding-right: 30px;
+	&.white {
+		color: #FFFFFF;
+		border-color: #FFFFFF;
+		&:hover {
+			color: rgba(255,255,255,0.8);
+			border-color: rgba(255,255,255,0.8);
+		}
+		&:active {
+			color: #000000;
+			background: #FFFFFF;
+			border-color: #FFFFFF;
+		}
+	}
+
+	&.discrete {
+		border: transparent;
+
+		&[disabled],
+		&[disabled="disabled"] {
+			border-color: $light_grey !important;
+		}
 	}
 
 	&[disabled],
 	&[disabled="disabled"]{
-		background: none !important;
-		color: $mid_grey !important;
+		opacity: 0.5;
 		cursor: not-allowed !important;
-		border-color: $mid_grey !important;
+
+		&,
+		&:hover,
+		&:active {
+			color: $mid_grey;
+			border-color: $mid_grey;
+			background: transparent;
+		}
 	}
 }
 
diff --git a/src/scss/global/_variables.scss b/src/scss/global/_variables.scss
index 6107d22b..2cbb55d4 100755
--- a/src/scss/global/_variables.scss
+++ b/src/scss/global/_variables.scss
@@ -38,13 +38,20 @@ $bp_shallow: 650px;
 		    transition: all $duration $easing; 
 }
 
-@keyframes fill_from_left {
-    from {	width: 0%; }
-    to {	width: 100%; }
+@mixin noanimate(){
+	-webkit-transition: none !important;
+	   -moz-transition: none !important;
+	     -o-transition: none !important;
+	        transition: none !important;
+}
+
+@keyframes shrink_from_right {
+    from {	width: 100%; }
+    to {	width: 0%; }
 }
 
 @mixin animate_timeout( $duration: 0.2s ){
-    animation-name: fill_from_left;
+    animation-name: shrink_from_right;
     animation-duration: $duration;
     animation-timing-function: linear;
 }
diff --git a/src/scss/views/_artist.scss b/src/scss/views/_artist.scss
index 7fc4e294..24b1dbc7 100755
--- a/src/scss/views/_artist.scss
+++ b/src/scss/views/_artist.scss
@@ -38,7 +38,7 @@
 			}
 
 			.actions {
-				padding-bottom: 20px;
+				padding-bottom: 5px;
 
 				button {
 					margin-right: 20px;