table action buttons UI

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

@@ -16,7 +16,7 @@
 
         <section class="table">
             <header>
-                <div class="col"> Select </div>
+                <div class="col">  <input type="checkbox"> Select </div>
                 <div class="col"> Name </div>
                 <div class="col"> Primary Disctrict &amp; State </div>
                 <div class="col"> Type </div>
@@ -53,28 +53,29 @@
 
         <section class="page-settings">
             <div class="input-holder side-label">
-                <input type="number" value="10">
+                <input type="tel" value="10">
                 <label> Show </label>
             </div>
 
-            <div class="pagination">
+            <div class="pagination">                
                 <button>
-                    &lt;&lt;
+                    <img src="assets/chevron-left-double.svg" alt="">
                 </button>
                 <button>
-                    &lt;
-                </button>
+                    <img src="assets/chevron-left.svg" alt="">
+                 </button>
                 <div class="input-holder side-label">
-                    <input type="text" value="1">
+                    <input type="tel" value="1">
+                    <label> Page </label>
                 </div>
                 <div class="text">
                     of 20
-                </div>
-                <button>
-                    &gt;
-                </button>
-                <button>
-                    &gt;&gt;
+                </div>                
+                <button class="right">
+                    <img src="assets/chevron-left.svg" alt="">
+                 </button>
+                 <button class="right">
+                    <img src="assets/chevron-left-double.svg" alt="">
                 </button>
             </div>
         </section>

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

@@ -43,6 +43,10 @@
             width: calc(100% / 7);
             font-size: 14px;
 
+            input {
+                margin-right: 5px;
+            }
+
             p, a, &>div {
                 display: block;
                 white-space: nowrap;
@@ -95,4 +99,60 @@
             }
         }
     }
+}
+
+.page-settings {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+
+    .input-holder {
+        input {
+            width: 70px;
+        }
+    }
+
+    .pagination {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        button {
+            background-color: transparent;
+            border: none;
+            cursor: pointer;
+            border-radius: var(--common-border-radius);
+            background-color: transparent;
+            border: 2px solid transparent;
+
+            &:hover {
+                border-color: var(--input-border);
+                background-color: var(--input-background);
+            }
+
+            img {
+                vertical-align: middle;
+                width: 24px;
+                height: 24px;
+                object-fit: contain;
+            }
+
+            &.right {
+                img {
+                    transform: rotate(180deg);
+                }
+            }
+        }
+
+        .text {
+            font-size: 15px;
+            margin-right: 10px;
+            color: var(--secondary-text);
+        }
+
+        .input-holder {
+            margin: 0 10px;
+        }
+    }
 }

src/assets/chevron-left-double.svg

@@ -0,0 +1 @@
+<svg width="21px" height="21px" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#8b8b8b" stroke-linecap="round" stroke-linejoin="round" transform="translate(5 6)"><path d="m8.5 8.5-4-4 4-4"/><path d="m4.5 8.5-4-4 4-4"/></g></svg>

src/assets/chevron-left.svg

@@ -0,0 +1 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.707 5.293a1 1 0 0 1 0 1.414L9.414 12l5.293 5.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0z" fill="#8b8b8b"/></svg>