From 2ad1e01641386e2fb8fb234ccebf3e642d675c31 Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Wed, 29 Jul 2020 12:23:13 -0400
Subject: [PATCH] SizeInput: update style to match spec

---
 src/components/SizeInput/SizeInput.css | 51 +++++++++++++++-----------
 src/components/SizeInput/SizeInput.tsx |  2 +-
 2 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/components/SizeInput/SizeInput.css b/src/components/SizeInput/SizeInput.css
index 7060532..15946c8 100644
--- a/src/components/SizeInput/SizeInput.css
+++ b/src/components/SizeInput/SizeInput.css
@@ -1,56 +1,63 @@
 .size-bar {
   position: relative;
   display: flex;
-  align-items: center;
   flex: 2;
-  margin: 4px;
-  padding: 8px 16px;
-  border: 1px solid black;
-  border-radius: 24px;
-  background-color: white;
-  font-family: sans-serif;
-  font-size: 13.333px;
-  height: 17px;
+  align-items: center;
+  height: 48px;
+  margin: 0 4px;
+  padding: 0 24px;
+  color: white;
+  border-radius: 8px;
+  background-color: #494650;
+  font-family: "Manrope", sans-serif;
+  font-size: 16px;
 }
 
 .size-bar:focus-within {
   outline: none;
-  border: 1px solid violet;
-  border-radius: 24px;
 }
 
 .size-bar input {
   flex: 1;
-  margin-left: 16px;
   border: none;
+  margin: 0 0 0 12px;
   -webkit-appearance: none;  /* Override default CSS styles */
   appearance: none;
   height: 1px; /* Specified height */
-  background: black; /* Grey background */
   outline: none; /* Remove outline */
-  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
 }
 
 .size-bar input::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
   appearance: none;
-  width: 12px; /* Set a specific slider handle width */
-  height: 12px; /* Slider handle height */
-  background: black; /* Green background */
+  width: 14px; /* Set a specific slider handle width */
+  height: 14px; /* Slider handle height */
+  border-radius: 50%;
+  background: white; /* Green background */
   cursor: pointer; /* Cursor on hover */
+  transition: height 0.1s, width 0.1s;
 }
 
 .size-bar input::-moz-range-thumb {
-  width: 12px; /* Set a specific slider handle width */
-  height: 12px; /* Slider handle height */
+  width: 14px; /* Set a specific slider handle width */
+  height: 14px; /* Slider handle height */
   background: black; /* Green background */
   cursor: pointer; /* Cursor on hover */
+  transition: height 0.1s, width 0.1s;
 }
 
-.size-bar input:focus {
+.size-bar input:focus::-moz-range-thumb {
   outline: none;
+  width: 20px; /* Set a specific slider handle width */
+  height: 20px; /* Slider handle height */
+  transition: height 0.1s, width 0.1s;
+  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2);
 }
 
-.size-bar input::placeholder {
-  color: black;
+.size-bar input:focus::-webkit-slider-thumb {
+  outline: none;
+  width: 20px; /* Set a specific slider handle width */
+  height: 20px; /* Slider handle height */
+  transition: height 0.1s, width 0.1s;
+  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2);
 }
diff --git a/src/components/SizeInput/SizeInput.tsx b/src/components/SizeInput/SizeInput.tsx
index 4a7bf38..26472e7 100644
--- a/src/components/SizeInput/SizeInput.tsx
+++ b/src/components/SizeInput/SizeInput.tsx
@@ -20,7 +20,7 @@ const SizeInput: React.FC<SizeInputProps> = () => {
 
   return (
     <div className="size-bar">
-      <label htmlFor="size-input">{`Size: ${size}px`}</label>
+      <label htmlFor="size-input">{`${size}px`}</label>
       <input
         id="size-input"
         value={size}