TMSS-298: Updated pagination button styles

SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js

@@ -214,11 +214,13 @@ function Table({ columns, data, defaultheader, optionalheader }) {
           })}
         </tbody>
       </table>
+      
+      </div>
       <div className="pagination" style={{marginTop:"10px"}}>
-        <button onClick={() => gotoPage(0)} disabled={!canPreviousPage} style={{marginLeft:"3px",backgroundColor:"#c8c8c8"}}>
+        <button onClick={() => gotoPage(0)} disabled={!canPreviousPage} title="Go to first page">
           {'<<'}
         </button>{' '}
-        <button onClick={() => previousPage()} disabled={!canPreviousPage} style={{marginLeft:"3px",backgroundColor:"#c8c8c8"}}>
+        <button onClick={() => previousPage()} disabled={!canPreviousPage} title="Go to previous page">
           {'<'}
         </button>{' '}
         <span style={{marginLeft:"5px"}}>
@@ -227,10 +229,10 @@ function Table({ columns, data, defaultheader, optionalheader }) {
             {pageIndex + 1} of {pageOptions.length}
           </strong>{' '}
         </span>
-        <button onClick={() => nextPage()} disabled={!canNextPage} style={{marginLeft:"5px",backgroundColor:"#c8c8c8"}}>
+        <button onClick={() => nextPage()} disabled={!canNextPage} title="Go to next page">
           {'>'}
         </button>{' '}
-        <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage} style={{marginLeft:"3px",backgroundColor:"#c8c8c8"}}>
+        <button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage} title="Go to last page">
           {'>>'}
         </button>{' '}
         <select 
@@ -247,7 +249,6 @@ function Table({ columns, data, defaultheader, optionalheader }) {
           ))}
         </select>
       </div>
-      </div>
     </>
   )
 }

SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_viewtable.scss

@@ -51,3 +51,20 @@
   width: 175px;
 }
  
+.pagination button {
+  margin-left: 3px;
+  background-color: #005b9f;
+  border: 1px solid #005b9f;
+  border-radius: 4px;
+  color: white;
+  font-weight: 900;
+}
+
+.pagination button:disabled {
+  margin-left: 3px;
+  background-color: #c8c9c9;
+  border: 1px solid #c8c9c9;
+  border-radius: 4px;
+  color: white;
+}
+