...

client/src/styles.scss

@@ -1,4 +1,8 @@
 /* You can add global styles to this file, and also import other style files */
+/* Core Data Grid CSS */
+@import "ag-grid-community/styles/ag-grid.css";
+/* Quartz Theme Specific CSS */
+@import 'ag-grid-community/styles/ag-theme-quartz.css';
 html, body {
   height: 100vh;
   width: 100vw;
@@ -6,6 +10,7 @@ html, body {
   margin: 0;
   padding: 0;
   background-color: #e2e2e2;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
 }
 
 .flex {
@@ -22,7 +27,7 @@ html, body {
 }
 
 .icon-btn-sm {
-  box-shadow: 0 0 0 4px transparent,0 1px 2px #0c111d11;
+  // box-shadow: 0 0 0 4px transparent,0 1px 2px #0c111d11;
   border: 1px solid #d0d5dd;
   background-color: white;
   cursor: pointer;
@@ -32,9 +37,23 @@ html, body {
   background-size: 20px;
   background-position: center;
   background-repeat: no-repeat;
-  width: 26px;
-  height: 26px;
+  width: 38px;
+  height: 38px;
+  transition: box-shadow 0.1s ease-in-out;
 
+  &:hover {
+    // box-shadow: 0 0 0 4px transparent,0 1px 2px #0c111d11;
+    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+  }
+
+}
+
+.icon-btn-xs {
+  width: 28px;
+  height: 28px;
+  background-size: 20px;
 }
 
 .loading-spinner {
@@ -59,9 +78,15 @@ html, body {
   background-image: url("./assets/img/restore.svg");
 }
 
-/* Core Data Grid CSS */
-@import "ag-grid-community/styles/ag-grid.css";
-/* Quartz Theme Specific CSS */
-@import 'ag-grid-community/styles/ag-theme-quartz.css';
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+.ag-row {
+  transition: background-color 0.2s ease-in-out;
+}
+
+.ag-row .ag-cell {
+  display: flex;
+  // justify-content: center; /* align horizontal */
+  align-items: center;
+}
+
+
+