From 46eb6b46ec360cfb293c6257d95a5c95b76c05bd Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Thu, 29 Apr 2021 00:32:25 -0700
Subject: [PATCH] Design tweaks to frontend components

---
 .../flip-horizontal.svg                       | 12 +++++------
 .../24x24-bounds-16x16-icon/flip-vertical.svg | 12 +++++------
 .../src/components/widgets/NumberInput.vue    | 21 ++++++++++++++-----
 .../src/components/widgets/RadioPicker.vue    |  3 ++-
 .../web/src/components/widgets/ShelfItem.vue  |  3 ++-
 5 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/client/web/assets/svg/24x24-bounds-16x16-icon/flip-horizontal.svg b/client/web/assets/svg/24x24-bounds-16x16-icon/flip-horizontal.svg
index 1076881df..d921b23f7 100644
--- a/client/web/assets/svg/24x24-bounds-16x16-icon/flip-horizontal.svg
+++ b/client/web/assets/svg/24x24-bounds-16x16-icon/flip-horizontal.svg
@@ -1,8 +1,8 @@
 <svg viewBox="0 0 24 24">
-	<path d="M20,8.62v6.76l-4-2v-2.76L20,8.62 M21,7l-6,3v4l6,3V7L21,7z" />
-	<polygon points="10,14 4,17 4,7 10,10" />
-	<rect x="12" y="17" width="1" height="2" />
-	<rect x="12" y="13" width="1" height="2" />
-	<rect x="12" y="9" width="1" height="2" />
-	<rect x="12" y="5" width="1" height="2" />
+	<path d="M19.8,8.6v6.8l-4.7-2v-2.8L19.8,8.6 M21,7l-7,3v4l7,3V7L21,7z" />
+	<polygon points="9,14 3,17 3,7 9,10" />
+	<rect x="11" y="17" width="1" height="2" />
+	<rect x="11" y="13" width="1" height="2" />
+	<rect x="11" y="9" width="1" height="2" />
+	<rect x="11" y="5" width="1" height="2" />
 </svg>
diff --git a/client/web/assets/svg/24x24-bounds-16x16-icon/flip-vertical.svg b/client/web/assets/svg/24x24-bounds-16x16-icon/flip-vertical.svg
index b7904c652..76aa10db6 100644
--- a/client/web/assets/svg/24x24-bounds-16x16-icon/flip-vertical.svg
+++ b/client/web/assets/svg/24x24-bounds-16x16-icon/flip-vertical.svg
@@ -1,8 +1,8 @@
 <svg viewBox="0 0 24 24">
-	<path d="M13.38,16l2,4H8.62l2-4H13.38 M14,15h-4l-3,6h10L14,15L14,15z" />
-	<polygon points="10,10 7,4 17,4 14,10" />
-	<rect x="5" y="12" width="2" height="1" />
-	<rect x="9" y="12" width="2" height="1" />
-	<rect x="13" y="12" width="2" height="1" />
-	<rect x="17" y="12" width="2" height="1" />
+	<path d="M13.4,15.2l2,4.7H8.6l2-4.7H13.4 M14,14h-4l-3,7h10L14,14L14,14z" />
+	<polygon points="10,9 7,3 17,3 14,9" />
+	<rect x="5" y="11" width="2" height="1" />
+	<rect x="9" y="11" width="2" height="1" />
+	<rect x="13" y="11" width="2" height="1" />
+	<rect x="17" y="11" width="2" height="1" />
 </svg>
diff --git a/client/web/src/components/widgets/NumberInput.vue b/client/web/src/components/widgets/NumberInput.vue
index 9c31fbbb8..676c9a42c 100644
--- a/client/web/src/components/widgets/NumberInput.vue
+++ b/client/web/src/components/widgets/NumberInput.vue
@@ -9,11 +9,11 @@
 <style lang="scss">
 .number-input {
 	width: 64px;
-	height: 22px;
+	height: 24px;
 	position: relative;
-	border: 1px solid #888;
 	border-radius: 2px;
 	background: #111;
+	overflow: hidden;
 
 	input {
 		width: calc(100% - 8px);
@@ -42,15 +42,25 @@
 		top: 0;
 		outline: none;
 		border: none;
-		background: #333;
+		background: none;
+		padding: 9px 0;
 
 		&:hover {
 			background: #666;
+
+			&.right::before {
+				border-color: transparent transparent transparent #fff;
+			}
+
+			&.left::after {
+				border-color: transparent #fff transparent transparent;
+			}
 		}
 
 		&.right {
 			right: 0;
-			padding: 8px 6px 8px 7px;
+			padding-left: 7px;
+			padding-right: 6px;
 
 			&::before {
 				content: "";
@@ -65,7 +75,8 @@
 
 		&.left {
 			left: 0;
-			padding: 8px 7px 8px 6px;
+			padding-left: 6px;
+			padding-right: 7px;
 
 			&::after {
 				content: "";
diff --git a/client/web/src/components/widgets/RadioPicker.vue b/client/web/src/components/widgets/RadioPicker.vue
index 414932571..0a08e47a3 100644
--- a/client/web/src/components/widgets/RadioPicker.vue
+++ b/client/web/src/components/widgets/RadioPicker.vue
@@ -9,7 +9,7 @@
 	font-size: 0;
 
 	button {
-		fill: #fff;
+		fill: #ddd;
 		border-radius: 0;
 		margin: 0;
 
@@ -31,6 +31,7 @@
 
 		&.active {
 			background: #3194d6;
+			fill: #fff;
 		}
 
 		& + .icon-button {
diff --git a/client/web/src/components/widgets/ShelfItem.vue b/client/web/src/components/widgets/ShelfItem.vue
index 7b3f883a2..13fd81da2 100644
--- a/client/web/src/components/widgets/ShelfItem.vue
+++ b/client/web/src/components/widgets/ShelfItem.vue
@@ -7,7 +7,8 @@
 <style lang="scss">
 .shelf-item {
 	padding: 4px;
-	border-radius: 4px;
+	border-radius: 2px;
+	font-size: 0;
 
 	&:hover {
 		background: #666;