Added alert transfer tools. Removed stash and alert add-tiles in favor of more prominent heading buttons.

assets/components/users/user.vue

@@ -14,11 +14,13 @@
 			<div class="section-header">
 				<h3 class="section-heading">Stashes</h3>
 
-				<Icon
-					icon="plus3"
-					class="header-add"
+				<button
+					v-if="isMe"
+					class="button button-secondary header-add"
 					@click="showAddStash = true"
-				/>
+				>
+					<Icon icon="plus3" />Add stash
+				</button>
 			</div>
 
 			<ul class="section-body stashes nolist">
@@ -35,6 +37,7 @@
 					/>
 				</li>
 
+				<!--
 				<li
 					v-if="isMe"
 					class="stashes-stash stashes-add"
@@ -42,6 +45,7 @@
 				>
 					<Icon icon="plus2" />
 				</li>
+				-->
 			</ul>
 
 			<AddStash
@@ -54,11 +58,13 @@
 			<div class="section-header">
 				<h3 class="section-heading">Alerts</h3>
 
-				<Icon
-					icon="plus3"
-					class="header-add"
+				<button
+					v-if="isMe"
+					class="button button-secondary header-add"
 					@click="showAddAlert = true"
-				/>
+				>
+					<Icon icon="plus3" />Set alert
+				</button>
 			</div>
 
 			<ul class="section-body alerts nolist">
@@ -74,12 +80,14 @@
 					/>
 				</li>
 
+				<!--
 				<li
 					class="alerts-add"
 					@click="showAddAlert = true"
 				>
 					<Icon icon="plus2" />
 				</li>
+				-->
 			</ul>
 
 			<AddAlert
@@ -186,7 +194,7 @@ export default {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	margin: 0 0 1rem 0;
+	margin: 0 1rem 1rem 0;
 }
 
 .section-body {
@@ -201,14 +209,6 @@ export default {
 }
 
 .header-add {
-	height: auto;
-	padding: .5rem 1rem;
-	fill: var(--shadow);
-
-	&:hover {
-		fill: var(--primary);
-		cursor: pointer;
-	}
 }
 
 .stashes-stash {

assets/css/_inputs.scss

@@ -26,6 +26,8 @@
 }
 
 .button {
+	display: inline-flex;
+	align-items: center;
 	border: none;
 	background: none;
 	padding: .5rem;
@@ -49,6 +51,11 @@
 		background: var(--shadow-weak);
 		cursor: default;
 	}
+
+	.icon {
+		fill: var(--text-light);
+		margin-right: .5rem;
+	}
 }
 
 .button-secondary {
@@ -57,12 +64,21 @@
 	&:hover:not(:disabled) {
 		color: var(--text-light);
 		background: var(--primary);
+
+		.icon {
+			fill: var(--text-light);
+		}
 	}
 
 	&:disabled {
 		color: var(--shadow-strong);
 		cursor: default;
 	}
+
+	.icon {
+		fill: var(--primary);
+		margin-right: .5rem;
+	}
 }
 
 .album-toggle {