Angle picker inputs

Author: odeadglaz

src/components/AnglePicker/index.css

@@ -22,7 +22,7 @@
 .ap .aph {
     width: 6px;
     height: 6px;
-    background-color: #3cad77;
+    background-color: #4374AD;
     display: inline-block;
     border-radius: 50%;
     position: absolute;

src/components/GradientPickerPopover/index.css

@@ -32,10 +32,36 @@
     padding: 10px 0 0 10px;
     border-top: 1px solid rgb(238, 238, 238);
     display: flex;
+    justify-content: space-around;
+    align-items: center;
     flex-wrap: wrap;
     position: relative;
 }
 
+.gpw .popover .angle-inputs {
+    border-radius: 4px;
+    background: #f2f2f2;
+    display: flex;
+    flex: 1;
+    margin: 0 20px;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.gpw .popover .angle-inputs input {
+    border: none;
+    text-align: center;
+    width: 48px;
+    color: #0C0C09;
+    background: inherit;
+}
+
+.gpw .popover .angle-inputs span {
+    padding: 5px;
+    cursor: pointer;
+    user-select: none;
+}
+
 .gpw .overlay {
     position: fixed;
     top: 0;

src/components/GradientPickerPopover/index.js

@@ -35,7 +35,12 @@ const GradientPickerPopover = ({
 						<GradientPicker {...gradientPickerProps} palette={palette} flatStyle/>
 						{ showAnglePicker && (
 							<div className="angle-holder">
-								<AnglePicker angle={angle} setAngle={setAngle} size={36}/>
+								<AnglePicker angle={angle} setAngle={setAngle} size={32}/>
+								<div className="angle-inputs">
+									<span onClick={() => setAngle(angle - 1)}>&#8722;</span>
+									<input value={`${angle}°`} disabled/>
+									<span onClick={() => setAngle(angle + 1)}>&#43;</span>
+								</div>
 							</div>
 						)}
 					</div>