From 88692cab54430b213fa313f1990193575aa39e84 Mon Sep 17 00:00:00 2001
From: Dakshina Scott <dakshina.scott@gmail.com>
Date: Thu, 16 Nov 2017 10:17:40 +0000
Subject: [PATCH] #10 uses svg for cross mark

---
 public/cross.svg            |   1 +
 public/pattern.png          | Bin 0 -> 2111 bytes
 public/solid-brush.png      | Bin 0 -> 196 bytes
 public/spray.png            | Bin 0 -> 4308 bytes
 src/views/partials/draw.hbs |  14 +++++++-------
 5 files changed, 8 insertions(+), 7 deletions(-)
 create mode 100644 public/cross.svg
 create mode 100644 public/pattern.png
 create mode 100644 public/solid-brush.png
 create mode 100644 public/spray.png

diff --git a/public/cross.svg b/public/cross.svg
new file mode 100644
index 0000000..8a69429
--- /dev/null
+++ b/public/cross.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 3.752l-4.423-3.752-7.771 9.039-7.647-9.008-4.159 4.278c2.285 2.885 5.284 5.903 8.362 8.708l-8.165 9.447 1.343 1.487c1.978-1.335 5.981-4.373 10.205-7.958 4.304 3.67 8.306 6.663 10.229 8.006l1.449-1.278-8.254-9.724c3.287-2.973 6.584-6.354 8.831-9.245z"/></svg>
\ No newline at end of file
diff --git a/public/pattern.png b/public/pattern.png
new file mode 100644
index 0000000000000000000000000000000000000000..f29e3054b337e9bf3798b94fbdf4813c97b2fc88
GIT binary patch
literal 2111
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

literal 0
HcmV?d00001

diff --git a/public/solid-brush.png b/public/solid-brush.png
new file mode 100644
index 0000000000000000000000000000000000000000..4820d83eb8a05c2583d6b4c764d9123ae6dfc598
GIT binary patch
literal 196
zcmeAS@N?(olHy`uVBq!ia0vp^S|H591|*LjJ{b+9I14-?iy0WWg+Z8+Vb&Z8pdfpR
zr>`sfLvDT{9&x_i|3ra8vY8<fCC>S|xv6<2KrRD=b5UwyNotBhd1gt5g1e`0K#E=}
zJ5b!p)5S3);_%yZj=T&CJPaF||Ice@uk(&#wY|FKKrUw>E^twv-z9@F_}Qe2Hjwe2
Lu6{1-oD!M<5M49G

literal 0
HcmV?d00001

diff --git a/public/spray.png b/public/spray.png
new file mode 100644
index 0000000000000000000000000000000000000000..74b25a7dfbb2b7c683f3161c9bf27dd492344fc9
GIT binary patch
literal 4308
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

literal 0
HcmV?d00001

diff --git a/src/views/partials/draw.hbs b/src/views/partials/draw.hbs
index f03973b..a82b5a8 100644
--- a/src/views/partials/draw.hbs
+++ b/src/views/partials/draw.hbs
@@ -2,15 +2,15 @@
 
 <div style="display: inline-block; margin-left: 10px">
     <button id="drawing-mode" class="btn btn-info bn bg-transparent w3 h3 pointer"><img src="/padlock-locked.png"></button><br>
-  <button id="clear-canvas" class="btn btn-info bn bg-transparent w3 h3 pointer"><img src="/x-icon.png"></button><br>
+    <button id="clear-canvas" class="btn btn-info bn bg-transparent w3 h3 pointer">
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 3.752l-4.423-3.752-7.771 9.039-7.647-9.008-4.159 4.278c2.285 2.885 5.284 5.903 8.362 8.708l-8.165 9.447 1.343 1.487c1.978-1.335 5.981-4.373 10.205-7.958 4.304 3.67 8.306 6.663 10.229 8.006l1.449-1.278-8.254-9.724c3.287-2.973 6.584-6.354 8.831-9.245z"/></svg>
+        Clear
+    </button><br>
 
   <div id="drawing-mode-options">
-      <input type="radio" name="brush-options" value="Pencil" id="brush-options__pencil">
-      <label for="brush-options__pencil">Pencil</label>
-      <input type="radio" name="brush-options" value="Spray" id="brush-options__spray">
-      <label for="brush-options__spray">Spray</label>
-      <input type="radio" name="brush-options" value="Pattern" id="brush-options__pattern">
-      <label for="brush-options__pattern">Pattern</label>
+      <label for="brush-options__pencil"><input class="h2 hidden" type="radio" name="brush-options" value="Pencil" id="brush-options__pencil"><img src="/solid-brush.png">Pencil</label>
+      <label for="brush-options__spray"><input class="h2 hidden" type="radio" name="brush-options" value="Spray" id="brush-options__spray"><img src="/spray.png">Spray</label>
+      <label for="brush-options__pattern"><input class="h2 hidden" type="radio" name="brush-options" value="Pattern" id="brush-options__pattern"><img src="pattern.png">Pattern</label>
       <br>
 
     <label for="drawing-line-width">Line width:</label>