From 0a234cebacb4a3a3b39186b03ac4d597347d5161 Mon Sep 17 00:00:00 2001
From: undefined-box <stefanotamponi.dev@gmail.com>
Date: Sat, 1 Apr 2023 00:22:57 +0200
Subject: [PATCH] feat: add hint on main toolbar (issue #60/#62) feat:
 highlight selection on color settings to improve UX fix: vertical aligns
 toolbar on desktop devices fix: color palette on "Color Settings" menu will
 not overflow fix: center icons on main toolbar

---
 global.css | 18 +++++++++++++-----
 index.html | 24 ++++++++++++------------
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/global.css b/global.css
index a15dab0..52c04ce 100644
--- a/global.css
+++ b/global.css
@@ -57,7 +57,7 @@ body {
 #color-settings-popup .color-palette {
   display: grid;
   grid-template-rows: repeat(2, 1fr);
-  grid-template-columns: repeat(10, 43px);
+  grid-template-columns: repeat(10, 10%);
 }
 
 #color-settings-popup .button-grp {
@@ -91,6 +91,10 @@ body {
   cursor: pointer;
 }
 
+#color-settings-popup .button-grp button:hover {
+  background-color: grey;
+}
+
 .color-palette .item {
   padding: 15px;
 }
@@ -148,6 +152,7 @@ body {
 #close {
   background-color: #262327;
   color: white;
+  cursor: pointer;
   margin: 15px auto 5px auto;
   padding: 5px 10px 5px 10px;
   font-size: 18px;
@@ -191,7 +196,9 @@ body {
 }
 
 #toolbar .item {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   float: left;
   padding: 15px;
   border: 1px solid #fff;
@@ -200,13 +207,14 @@ body {
   width: 32px;
   font-family: Arial, FontAwesome;
   font-size: 24px;
+  text-align: center;
 }
 
 #palette {
   position: fixed;
-  top: 25%;
+  top: 50%;
   right: 0%;
-  /* transform: translateY(-50%); */
+  transform: translateY(-50%);
   padding: 0px;
   color: white;
   display: grid;
@@ -291,7 +299,7 @@ path {
   #palette {
     position: fixed;
     top: 0%;
-    /* transform: translateY(0%); */
+    transform: translateY(0%);
     min-width: 100%;
     color: white;
     display: grid;
diff --git a/index.html b/index.html
index 9024dae..e0f1472 100644
--- a/index.html
+++ b/index.html
@@ -56,18 +56,18 @@ <h3>Select the Dimensions Of the grid</h3>
     </div>
     <canvas id="canvas"></canvas>
     <div id="toolbar">
-      <span class="item" onclick="board.setmode(0)" style="background-color: grey;"><i class="fas fa-pencil-alt"></i></span>
-      <span class="item" onclick="board.setmode(1)"><i class="fas fa-eraser"></i></span>
-      <span class="item" onclick="board.setmode(2)"><i class="fas fa-fill"></i></span>
-      <span class="item" onclick="board.setmode(3)"><i class="fas fa-slash"></i></span>
-      <span class="item" onclick="board.setmode(4)"><i class="far fa-circle"></i></span>
-      <span class="item" onclick="board.setmode(5)"><i class="far fa-circle" style="transform: rotateX(45deg);"></i></span>
-      <span class="item" onclick="board.addFrame()"><i class="fas fa-plus"></i></span>
-      <span class="item" onclick="board.undo()"><i class="fas fa-undo"></i></span>
-      <span class="item" onclick="board.redo()"><i class="fas fa-redo"></i></span>
-      <span class="item" onclick="board.clear()"><i class="fas fa-trash"></i></span>
-      <span class="item" onclick="board.addImage()"><i class="fa fa-upload"></i></span>
-      <span class="item" onclick="Frames.open()"><i class="fas fa-eye"></i></span>
+      <span class="item" title="Pencil" onclick="board.setmode(0)" style="background-color: grey;"><i class="fas fa-pencil-alt"></i></span>
+      <span class="item" title="Eraser" onclick="board.setmode(1)"><i class="fas fa-eraser"></i></span>
+      <span class="item" title="Paint" onclick="board.setmode(2)"><i class="fas fa-fill"></i></span>
+      <span class="item" title="Line" onclick="board.setmode(3)"><i class="fas fa-slash"></i></span>
+      <span class="item" title="Circle" onclick="board.setmode(4)"><i class="far fa-circle"></i></span>
+      <span class="item" title="Ellipse" onclick="board.setmode(5)"><i class="far fa-circle" style="transform: rotateX(45deg);"></i></span>
+      <span class="item" title="Add Frame" onclick="board.addFrame()"><i class="fas fa-plus"></i></span>
+      <span class="item" title="Undo" onclick="board.undo()"><i class="fas fa-undo"></i></span>
+      <span class="item" title="Redo" onclick="board.redo()"><i class="fas fa-redo"></i></span>
+      <span class="item" title="Delete" onclick="board.clear()"><i class="fas fa-trash"></i></span>
+      <span class="item" title="Upload" onclick="board.addImage()"><i class="fa fa-upload"></i></span>
+      <span class="item" title="View Frames" onclick="Frames.open()"><i class="fas fa-eye"></i></span>
     </div>
     <div id="palette"></div>
     <div id="color-settings-popup" style="display: none;">