Change Admin UI to a Light version

src/Admin.css

@@ -1,3 +1,12 @@
+.App.Admin {
+  background-color: white;
+  color: black;
+}
+
+.App.Admin .container-fluid {
+  background-color: white;
+}
+
 #vom-results {
   display: grid;
   grid-template-columns: 2fr 1fr;
@@ -7,6 +16,7 @@
 
 #vom-admin-canvas {
   grid-area: vom-admin-canvas;
+  border: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 #vom-results-filters {
@@ -49,6 +59,19 @@
   padding-right: 1rem;
 }
 
-tr.data-focused {
-  background-color: dimgrey;
+.vom-table-results thead {
+  text-transform: capitalize;
+}
+
+.vom-table-results tr.main-row { 
+  border-top: 2px solid #a0a2a5;
+}
+
+.vom-table-results tr.data-focused {
+  background-color: #17a2b845 !important;
+}
+
+.vom-table-results tr.data-focused th,
+.vom-table-results tr.data-focused td {
+  border: 1px solid #a0a2a5;
 }

src/Admin.tsx

@@ -247,21 +247,21 @@ const ResultsTable: React.FunctionComponent<TableProps> = ({ data, focusPath, cl
         clearFocus();
       }} outline>clear focus</Button>
     </div>
-    <Table dark>
+    <Table bordered className="vom-table-results">
       <thead>
         <tr>
           <th>#</th>
           <th>age</th>
-          <th>g</th>
+          <th>G</th>
           <th>education</th>
           <th>birth place</th>
           <th>current place</th>
-          <th>non native</th>
+          <th>NN</th>
           <th colSpan={7}>map</th>
         </tr>
         <tr>
           <th colSpan={7}></th>
-          <th>accent name</th>
+          <th>name</th>
           <th>example</th>
           <th>associations</th>
           <th>C</th>
@@ -275,7 +275,11 @@ const ResultsTable: React.FunctionComponent<TableProps> = ({ data, focusPath, cl
           data.map(({ id, personalInformation, canvas }) => {
             return canvas.map(({ form }, i) => {
               return i === 0 ? (
-                <tr key={i} onClick={() => { focusPath(id); setFocused(id) }} className={id === focused ? 'data-focused' : ''}>
+                <tr 
+                  key={i}
+                  onClick={() => { focusPath(id); setFocused(id) }}
+                  className={`main-row ${id === focused ? 'data-focused' : ''}`}
+                >
                   <th rowSpan={canvas.length} scope="rowGroup">{id}</th>
                   <th rowSpan={canvas.length} scope="rowGroup">{VALUES.AGE[personalInformation.age]}</th>
                   <th rowSpan={canvas.length} scope="rowGroup">{personalInformation.gender[0]}</th>