css variables

tank-frontend/src/components/Button.css

@@ -1,14 +1,13 @@
 .Button {
-    border: solid 4px green;
-    padding: 8px;
+    border: solid var(--border-size-thin) var(--color-primary);
+    padding: var(--padding-normal);
 
-    color: green;
-    background: transparent;
+    color: var(--color-primary);
+    background: var(--color-background);
 }
 
 .Button:hover, .Button:active {
-    background-color: green;
-    color: black;
+    background-color: var(--color-primary);
+    color: var(--color-background);
     cursor: pointer;
 }
-

tank-frontend/src/components/Column.css

@@ -1,7 +1,5 @@
 .Column {
-    display: flex;
-    flex-direction: column;
     max-height: 100%;
     align-items: stretch;
-    gap: 8px;
+    gap: var(--padding-normal);
 }

tank-frontend/src/components/Column.tsx

@@ -6,7 +6,7 @@ export default function Column({children, className}: {
     children: ReactNode,
     className?: string
 }) {
-    return <div className={'Column ' + (className ?? '')}>
+    return <div className={'Column flex-column ' + (className ?? '')}>
         {children}
     </div>
 }

tank-frontend/src/components/DataTable.css

@@ -1,3 +1,3 @@
-.DataTable {
+.DataTable > table {
     table-layout: auto;
 }

tank-frontend/src/components/DataTable.tsx

@@ -39,14 +39,17 @@ function DataTableRow({rowData, columns}: {
     </tr>;
 }
 
-export default function DataTable<T>({data, columns}: {
+export default function DataTable<T>({data, columns, className}: {
     data: T[],
-    columns: DataTableColumnDefinition<any>[]
+    columns: DataTableColumnDefinition<any>[],
+    className?: string
 }) {
-    return <table className='DataTable'>
-        <TableHead columns={columns}/>
-        <tbody>
-        {data.map((element, index) => <DataTableRow key={index} rowData={element} columns={columns}/>)}
-        </tbody>
-    </table>
+    return <div className={'DataTable ' + (className ?? '')}>
+        <table>
+            <TableHead columns={columns}/>
+            <tbody>
+            {data.map((element, index) => <DataTableRow key={index} rowData={element} columns={columns}/>)}
+            </tbody>
+        </table>
+    </div>;
 }

tank-frontend/src/components/Row.css

@@ -1,7 +1,5 @@
 .Row {
-    display: flex;
-    flex-direction: row;
     max-width: 100%;
     align-items: stretch;
-    gap: 8px;
+    gap: var(--padding-normal);
 }

tank-frontend/src/components/Row.tsx

@@ -3,7 +3,7 @@ import {ReactNode} from "react";
 import './Row.css';
 
 export default function Row({children, className}: { children: ReactNode, className?: string }) {
-    return <div className={'Row ' + (className ?? '')}>
+    return <div className={'Row flex-row ' + (className ?? '')}>
         {children}
     </div>
 }

tank-frontend/src/components/TextInput.css

@@ -1,3 +1,3 @@
 .TextInput {
-    padding: 8px;
+    padding: var(--padding-normal);
 }