ui enhancements for color picker and report abuse (devicons#972, devi…

…cons#943) (devicons#1024)
GCHQDeveloper926 · Jan 17, 2022 · 4de33c0 · 4de33c0
1 parent 92f53f1
commit 4de33c0
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 23 deletions.
diff --git 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
@@ -67,16 +67,16 @@ <h4>
             <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 @@ <h4>
             <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 @@ <h5>If you prefer a local install, you can download all the files on the GitHub
       </p>
 
       <h3>Contact</h3>
-      <h5>If you have any legal concerns regarding copyrights, please reach out to us at <b><a>[email protected]</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:[email protected]">[email protected]</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 />