Update pagination and action buttons style

wil92 · Jan 14, 2022 · d6822a9 · d6822a9
1 parent 903941d
commit d6822a9
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 3 deletions.
diff --git a/src/App.css b/src/App.css
@@ -115,6 +115,11 @@ th {
     text-transform: uppercase;
 }
 
+.ButtonAction {
+    padding: 5px 10px;
+    margin: 2px;
+}
+
 .CloseButton {
     position: absolute;
     top: 0;
@@ -142,3 +147,38 @@ label {
 h3 {
     margin-block-start: 0;
 }
+
+.page {
+    display: inline-block;
+    padding: 4px 9px;
+    margin-right: 4px;
+    border-radius: 3px;
+    border: solid 1px #c0c0c0;
+    background: #e9e9e9;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 3px rgba(0, 0, 0, .1);
+    font-size: 14px;
+    font-weight: bold;
+    text-decoration: none;
+    color: #717171;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
+}
+
+.page.dark {
+    border: solid 1px #32373b;
+    background: #3e4347;
+    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1), 0 1px 3px rgba(0, 0, 0, .1);
+    color: #feffff;
+    text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
+}
+
+.page.dark:hover, .page.dark.gradient:hover {
+    background: #3d4f5d;
+    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#547085), to(#3d4f5d));
+    background: -moz-linear-gradient(0% 0% 270deg, #547085, #3d4f5d);
+}
+
+.page.dark.active {
+    border: none;
+    background: #2f3237;
+    box-shadow: inset 0 0 8px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .1);
+}
diff --git a/src/App.js b/src/App.js
@@ -570,11 +570,14 @@ class App extends Component {
                 <th onDoubleClick={() => this.copyToClipboard(op.jumps)}>{op.jumps}</th>
                 <th onDoubleClick={() => this.copyToClipboard(op.securityStatus)}>{op.securityStatus}</th>
                 <th className="thinline">
-                  <button onClick={() => this.saveElement(op)}
+                  <button className="Button ButtonAction"
+                          onClick={() => this.saveElement(op)}
                           title={savedElem.has(this.elementHash(op)) ? 'unsave' : 'save'}>
                     {savedElem.has(this.elementHash(op)) ? '-' : '+'}
                   </button>
-                  <button onClick={() => this.deleteOpportunity(op.id)} title="remove">x</button>
+                  <button className="Button ButtonAction"
+                          onClick={() => this.deleteOpportunity(op.id)} title="remove">x
+                  </button>
                 </th>
               </tr>
             ))}
@@ -583,7 +586,7 @@ class App extends Component {
 
           <div>
             {this.state.pages.map((p, index) => (
-              <button className={p === this.state.pagination.page ? 'currentPage' : undefined} key={index}
+              <button className={p === this.state.pagination.page ? 'page dark active' : 'page dark'} key={index}
                       onClick={() => this.changePage(p)}>
                 {p}
               </button>