improved UX

z1shivam · Oct 31, 2023 · e940afe · e940afe
1 parent 21a8312
commit e940afe
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -43,26 +43,28 @@
                     class="bottomBarButton"
                     data-clipboard-target="#hslBtn"
                     id="hsl"
+                    title="copy HSL value"
                 >
-                    <p id="hslBtn">RGB (231, 345,221)</p>
+                    <p id="hslBtn">HSL (231, 345,221)</p>
                 </button>
                 <button
                     class="bottomBarButton"
                     data-clipboard-target="#rgbBtn"
                     id="rgb"
+                    title="copy RGB value"
                 >
                     <p id="rgbBtn">RGB (231, 345,221)</p>
                 </button>
             </div>
             <div class="colorGrid" id="colorGrid">
-                <div class="colorBlock"></div>
-                <div class="colorBlock"></div>
-                <div class="colorBlock"></div>
-                <div class="colorBlock"></div>
-                <div class="colorBlock"></div>
-                <div class="colorBlock"></div>
-                <div class="colorBlock"></div>
-                <div class="colorBlock"></div>
+                <div class="colorBlock" title="Load this colour"></div>
+                <div class="colorBlock" title="Load this colour"></div>
+                <div class="colorBlock" title="Load this colour"></div>
+                <div class="colorBlock" title="Load this colour"></div>
+                <div class="colorBlock" title="Load this colour"></div>
+                <div class="colorBlock" title="Load this colour"></div>
+                <div class="colorBlock" title="Load this colour"></div>
+                <div class="colorBlock" title="Load this colour"></div>
             </div>
         </div>
     </body>

diff --git a/style.css b/style.css
@@ -49,6 +49,7 @@
     margin: 3px;
     border-radius: 5px;
     border: 2px solid rgb(252, 188, 220);
+    cursor: pointer;
 }
 
 .sideButton:hover{
@@ -103,6 +104,10 @@ ul li{
     cursor: pointer;
 }
 
+ul li:hover{
+    transform: scale(0.96);
+}
+
 .colCode{
     font-size: 20px;
     font-family: 'sometype mono', monospace;
@@ -139,6 +144,7 @@ ul li{
     border-radius: 5px;
     width: 100%;
     font-family: 'sometype mono', monospace;
+    cursor: pointer;
 }
 .bottomBarButton:hover{
     background-color: #860057;
@@ -165,3 +171,7 @@ ul li{
     justify-content: center;
     align-items: center;
 }
+
+.colorBlock:hover{
+    transform: scale(0.98);
+}