From 8d9ffb2f8a3c35d0b164100dc2abf6a403f408bb Mon Sep 17 00:00:00 2001
From: Jared Palmer <jared@palmer.net>
Date: Sun, 5 Jan 2020 12:21:28 -0800
Subject: [PATCH] Better styles

---
 src/index.tsx   | 83 +++++++++++++++++++++++++++++++++++++++++--------
 src/styles.scss | 15 +++++++--
 2 files changed, 82 insertions(+), 16 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 7133b751e..fb78f4782 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -817,7 +817,7 @@ function restore(
 type AppState = {
   draggingElement: ExcalidrawElement | null;
   resizingElement: ExcalidrawElement | null;
-  currentColorPicker: "Background" | null;
+  currentColorPicker: "Background" | "ShapeStroke" | "ShapeBackground" | null;
   elementType: string;
   exportBackground: boolean;
   currentItemStrokeColor: string;
@@ -1155,9 +1155,8 @@ class App extends React.Component<{}, AppState> {
           </div>
           <h4>Colors</h4>
           <div className="panelColumn">
+            <h5>Canvas Background</h5>
             <div>
-              <h5>Background</h5>
-
               <button
                 className="swatch"
                 style={{
@@ -1195,26 +1194,84 @@ class App extends React.Component<{}, AppState> {
                 }
               />
             </div>
-            <label>
+            <h5>Shape Stroke</h5>
+            <div>
+              <button
+                className="swatch"
+                style={{
+                  backgroundColor: this.state.currentItemStrokeColor
+                }}
+                onClick={() =>
+                  this.setState(s => ({
+                    currentColorPicker:
+                      s.currentColorPicker === "ShapeStroke"
+                        ? null
+                        : "ShapeStroke"
+                  }))
+                }
+              ></button>
+              {this.state.currentColorPicker === "ShapeStroke" ? (
+                <div className="popover">
+                  <div
+                    className="cover"
+                    onClick={() => this.setState({ currentColorPicker: null })}
+                  ></div>
+                  <SketchPicker
+                    color={this.state.currentItemStrokeColor}
+                    onChange={color => {
+                      this.setState({ currentItemStrokeColor: color.hex });
+                    }}
+                  />
+                </div>
+              ) : null}
               <input
-                type="color"
+                type="text"
+                className="swatch-input"
                 value={this.state.currentItemStrokeColor}
                 onChange={e => {
                   this.setState({ currentItemStrokeColor: e.target.value });
                 }}
               />
-              Shape Stroke
-            </label>
-            <label>
+            </div>
+            <h5>Shape Background</h5>
+            <div>
+              <button
+                className="swatch"
+                style={{
+                  backgroundColor: this.state.currentItemBackgroundColor
+                }}
+                onClick={() =>
+                  this.setState(s => ({
+                    currentColorPicker:
+                      s.currentColorPicker === "ShapeBackground"
+                        ? null
+                        : "ShapeBackground"
+                  }))
+                }
+              ></button>
+              {this.state.currentColorPicker === "ShapeBackground" ? (
+                <div className="popover">
+                  <div
+                    className="cover"
+                    onClick={() => this.setState({ currentColorPicker: null })}
+                  ></div>
+                  <SketchPicker
+                    color={this.state.currentItemBackgroundColor}
+                    onChange={color => {
+                      this.setState({ currentItemBackgroundColor: color.hex });
+                    }}
+                  />
+                </div>
+              ) : null}
               <input
-                type="color"
-                value={this.state.currentItemBackgroundColor}
+                type="text"
+                className="swatch-input"
+                value={this.state.currentItemStrokeColor}
                 onChange={e => {
-                  this.setState({ currentItemBackgroundColor: e.target.value });
+                  this.setState({ currentItemStrokeColor: e.target.value });
                 }}
               />
-              Shape Background
-            </label>
+            </div>
           </div>
           <h4>Canvas</h4>
           <div className="panelColumn">
diff --git a/src/styles.scss b/src/styles.scss
index 79018ef31..8642ff72b 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -43,8 +43,14 @@ body {
     flex-direction: column;
 
     h5 {
-      margin-top: 0px;
-      margin-bottom: 8px;
+      margin-top: 4px;
+      margin-bottom: 4px;
+      font-size: 12px;
+      color: #333;
+    }
+
+    h5:first-of-type {
+      margin-top: 0;
     }
   }
 }
@@ -155,12 +161,15 @@ button {
 .swatch {
   height: 24px;
   width: 24px;
+  display: inline;
   margin-right: 4px;
 }
 
 .swatch-input {
   font-size: 16px;
+  display: inline;
+  width: 100px;
   border-radius: 2px;
-  padding: 2px;
+  padding: 2px 4px;
   border: 1px solid #ddd;
 }