Table UI changes

src/app/dashboard/table/table.component.html

@@ -70,7 +70,7 @@
 
         <section class="page-settings">
             <div class="input-holder side-label">
-                <input type="tel" value="10">
+                <input type="number" value="10">
                 <label> Show </label>
             </div>
 
@@ -82,7 +82,7 @@
                     <img src="assets/chevron-left.svg" alt="">
                 </button>
                 <div class="input-holder side-label">
-                    <input type="tel" value="1">
+                    <input type="number" value="1">
                     <label> Page </label>
                 </div>
                 <div class="text">

src/app/dashboard/table/table.component.scss

@@ -84,6 +84,7 @@
     height: 70vh;
     overflow: auto;
     line-height: 1.8;
+    letter-spacing: 0.5px;
 
     header, .row {
         display: flex;
@@ -107,6 +108,10 @@
                 width: 100%;
             }
 
+            a {
+                color: var(--primary);
+            }
+
             &:nth-child(1) {
                 width: 70px;
             }
@@ -140,20 +145,21 @@
         background-color: white;
         border-radius: var(--common-border-radius);
         cursor: pointer;
-        transition: background-color 0.3s, color 0.3s;
+        transition: border-color 0.3s, box-shadow 0.3s;
         height: 100px;
+        border: 2px solid transparent;
+        box-shadow: none;
 
         &:nth-child(even) {
             background-color: var(--input-background);
         }
 
         &:hover {
-            background-color: var(--primary);
-            color: white;
-
-            a {
-                color: var(--secondary);
-            }
+            position: relative;
+            color: var(--primary-text);
+            font-weight: 500;
+            border-color: var(--primary);
+            box-shadow: 0 5px 5px -3px #0003, 0 8px 10px 1px #00000024, 0 3px 14px 2px #0000001f;
         }
     }
 }