From 884c28f52bf350d0db36033f7c4e60dbc01f15c1 Mon Sep 17 00:00:00 2001
From: Ramesh Kumar <r.kumar@redkarma.eu>
Date: Thu, 20 Aug 2020 16:55:15 +0530
Subject: [PATCH] TMSS-298: Updated pagination button styles
---
.../tmss_webapp/src/components/ViewTable.js | 11 ++++++-----
.../tmss_webapp/src/layout/sass/_viewtable.scss | 17 +++++++++++++++++
2 files changed, 23 insertions(+), 5 deletions(-)
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js b/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js
index ccb960b14a9..3fbebefc8bc 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js
+++ b/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>
</>
)
}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_viewtable.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_viewtable.scss
index 1ff00e3767b..d0fbd873bc2 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_viewtable.scss
+++ b/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;
+}
+
--
GitLab