From 8dc9eb446542fb4385c906bbe5877a160836a55e Mon Sep 17 00:00:00 2001
From: Clemens Bastian <8781699+amacado@users.noreply.github.com>
Date: Mon, 17 Jan 2022 18:48:33 +0100
Subject: [PATCH] ui enhancements for color picker and report abuse (#972,
 #943) (#1024)

---
 docs/assets/css/style.css | 24 ++++++++++--------------
 docs/index.html           | 18 +++++++++---------
 2 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css
index 0bbdebb0..37f6cb7b 100644
--- a/docs/assets/css/style.css
+++ b/docs/assets/css/style.css
@@ -327,37 +327,33 @@ header {
   font-size: 1rem;
   background-color: var(--primaryColor);
   border-radius: 0.2em;
-  border: 2px solid var(--grey);
+  border: 1px solid var(--grey);
   transform: translate(0, -30%);
-  padding: 0.5em;
-  padding-top: 0;
+  padding: 1em;
   margin-left: 1em;
   font-weight: normal;
   z-index: 1;
   display: none;
-}
-
-.colorPickerMenuCloseBtn {
-  color: red;
-  font-weight: bold;
-  margin-top: 0;
-  margin-right: 0.25em;
-  display: flex;
-  flex-direction: row-reverse;
+  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
+  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
 }
 
 .colorPickerMenuCloseBtn > span:hover {
   cursor: pointer;
 }
 
-.colorPickerResetBtn {
+.colorPickerBtn {
   margin: auto;
   margin-top: 0.5em;
-  display: block;
   width: min-content;
   background-color: var(--primaryColor);
   border-radius: 1em;
   border: 1px solid var(--grey);
+  display: inline-block;
+}
+
+.colorPickerBtn:hover {
+  background-color: var(--grey);
 }
 
 .checkerboardInput {
diff --git a/docs/index.html b/docs/index.html
index ae02774d..29cf0d6d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -67,16 +67,16 @@
             <span>
               <img src="./assets/img/color_wheel.png" class='colorPicker' ng-click="toggleColorPickerMenu('fontColorPickerMenu')">
               <span class='colorPickerMenu' id='fontColorPickerMenu'>
-                <div class='colorPickerMenuCloseBtn'><span ng-click="toggleColorPickerMenu('fontColorPickerMenu')">X</span></div>
                 <div>
                   <input type='color' value='#60be86' ng-model="fontBackground">
                   Background Color 
                 </div>
                 <div>
-                  <input type='checkbox' class='checkerboardInput' ng-model="fontDisplayCheckerboard">
-                  <label for='checkboardInput' >Checkerboard</label>
+                  <input type='checkbox' id='checkboardInputFont' class='checkerboardInput' ng-model="fontDisplayCheckerboard">
+                  <label for='checkboardInputFont' >Checkerboard</label>
                 </div>
-                <button class='colorPickerResetBtn' ng-click="fontBackground = DEFAULT_BACKGROUND">Reset</button>
+                <button class='colorPickerBtn' ng-click="toggleColorPickerMenu('fontColorPickerMenu')">Close</button>
+                <button class='colorPickerBtn' ng-click="fontBackground = DEFAULT_BACKGROUND; fontDisplayCheckerboard=0; toggleColorPickerMenu('fontColorPickerMenu')">Reset</button>
               </span>
             </span>
           </h4>
@@ -121,16 +121,16 @@
             <span>
               <img src="./assets/img/color_wheel.png" class='colorPicker' ng-click="toggleColorPickerMenu('svgColorPickerMenu')">
               <span class='colorPickerMenu' id='svgColorPickerMenu'>
-                <div class='colorPickerMenuCloseBtn'><span ng-click="toggleColorPickerMenu('svgColorPickerMenu')">X</span></div>
                 <div>
                   <input type='color' value='#60be86' ng-model="svgBackground">
                   Background Color 
                 </div>
                 <div>
-                  <input type='checkbox' class='checkerboardInput' ng-model="svgDisplayCheckerboard">
-                  <label for='checkboardInput' >Checkerboard</label>
+                  <input type='checkbox' id='checkboardInputSvg' class='checkerboardInput' ng-model="svgDisplayCheckerboard">
+                  <label for='checkboardInputSvg' >Checkerboard</label>
                 </div>
-                <button class='colorPickerResetBtn' ng-click="svgBackground = DEFAULT_BACKGROUND">Reset</button>
+                <button class='colorPickerBtn' ng-click="toggleColorPickerMenu('svgColorPickerMenu')">Close</button>
+                <button class='colorPickerBtn' ng-click="svgBackground = DEFAULT_BACKGROUND; svgDisplayCheckerboard=0; toggleColorPickerMenu('svgColorPickerMenu')">Reset</button>
               </span>
             </span>
           </h4>
@@ -186,7 +186,7 @@
       </p>
 
       <h3>Contact</h3>
-      <h5>If you have any legal concerns regarding copyrights, please reach out to us at <b><a>info@devicon.dev</a></b>. Any code/logo contributions should be made through our GitHub repository listed above.</h5>
+      <h5>If you have any legal concerns regarding copyrights or want to report an abuse, please reach out to us at <b><a href="mailto:info@devicon.dev">info@devicon.dev</a></b>. Any code/logo contributions should be made through our GitHub repository listed above.</h5>
 
       <footer>
         Originally created by <a href="https://github.com/konpa">Konpa</a> (under <a href="https://github.com/devicons/devicon/blob/master/LICENSE">MIT License</a>) and <br />