From 7f0cba6b4dd5810d32ebee02d157310415804a65 Mon Sep 17 00:00:00 2001
From: Christoph Anderson <lupusapps@gmail.com>
Date: Mon, 8 May 2023 22:01:49 +0200
Subject: [PATCH] - Fixed byte representation - Added a darker background for
 the theme "dark" - Added stripes back to the tables - Moved css files in
 src/css - Removed the Themeselector as it now implemented in PreferencesView

---
 src/App.jsx                           |  8 ++---
 src/DirectoryItems.jsx                |  5 +++-
 src/EstimateResults.jsx               | 21 +++++++------
 src/Preferences.jsx                   | 41 -------------------------
 src/PreferencesView.jsx               | 43 +++++++++++++++++++++++++++
 src/SnapshotsTable.jsx                |  5 +++-
 src/SourcesTable.jsx                  | 19 +++++++-----
 src/TaskDetails.jsx                   |  5 +++-
 src/TaskLogs.jsx                      |  6 ++--
 src/ThemeSelector.tsx                 | 29 ------------------
 src/contexts/UIPreferencesContext.tsx | 13 ++++++--
 src/{ => css}/App.css                 | 19 +++++-------
 src/{ => css}/Theme.css               |  9 +++---
 src/uiutil.jsx                        | 19 +++++++-----
 14 files changed, 119 insertions(+), 123 deletions(-)
 delete mode 100644 src/Preferences.jsx
 create mode 100644 src/PreferencesView.jsx
 delete mode 100644 src/ThemeSelector.tsx
 rename src/{ => css}/App.css (94%)
 rename src/{ => css}/Theme.css (90%)

diff --git a/src/App.jsx b/src/App.jsx
index 6e9ee7f..31e64ef 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,6 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
-import './Theme.css';
-import './App.css';
+import './css/Theme.css';
+import './css/App.css';
 import axios from 'axios';
 import { React, Component } from 'react';
 import { Navbar, Nav, Container } from 'react-bootstrap';
@@ -15,7 +15,7 @@ import { TaskDetails } from './TaskDetails';
 import { TasksTable } from './TasksTable';
 import { NewSnapshot } from './NewSnapshot';
 import { PolicyEditorPage } from './PolicyEditorPage';
-import { Preferences } from './Preferences';
+import { PreferencesView } from './PreferencesView';
 import { AppContext } from './contexts/AppContext';
 import { UIPreferenceProvider } from './contexts/UIPreferencesContext';
 
@@ -129,7 +129,7 @@ export default class App extends Component {
                 <Route path="/tasks/:tid" component={TaskDetails} />
                 <Route path="/tasks" component={TasksTable} />
                 <Route path="/repo" component={RepoStatus} />
-                <Route path="/preferences" component={Preferences} />
+                <Route path="/preferences" component={PreferencesView} />
                 <Route exact path="/">
                   <Redirect to="/repo" />
                 </Route>
diff --git a/src/DirectoryItems.jsx b/src/DirectoryItems.jsx
index 6653cd4..5159e32 100644
--- a/src/DirectoryItems.jsx
+++ b/src/DirectoryItems.jsx
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Link } from "react-router-dom";
 import MyTable from './Table';
 import { objectLink, rfc3339TimestampForDisplay, sizeWithFailures } from './uiutil';
+import { UIPreferencesContext } from './contexts/UIPreferencesContext';
 
 function objectName(name, typeID) {
     if (typeID === "d") {
@@ -33,6 +34,7 @@ function directoryLinkOrDownload(x) {
 
 export class DirectoryItems extends Component {
     render() {
+        const { bytesStringBase2 } = this.context;
         const columns = [{
             id: "name",
             Header: 'Name',
@@ -49,7 +51,7 @@ export class DirectoryItems extends Component {
             accessor: x => sizeInfo(x),
             Header: "Size",
             width: 100,
-            Cell: x => sizeWithFailures(x.cell.value, x.row.original.summ),
+            Cell: x => sizeWithFailures(x.cell.value, x.row.original.summ, bytesStringBase2),
         }, {
             id: "files",
             accessor: "summ.files",
@@ -65,3 +67,4 @@ export class DirectoryItems extends Component {
         return <MyTable data={this.props.items} columns={columns} />;
     }
 }
+DirectoryItems.contextType = UIPreferencesContext
\ No newline at end of file
diff --git a/src/EstimateResults.jsx b/src/EstimateResults.jsx
index 24d5fee..de128d3 100644
--- a/src/EstimateResults.jsx
+++ b/src/EstimateResults.jsx
@@ -8,6 +8,7 @@ import Spinner from 'react-bootstrap/esm/Spinner';
 import Form from 'react-bootstrap/Form';
 import { TaskLogs } from './TaskLogs';
 import { cancelTask, redirect, sizeDisplayName } from './uiutil';
+import { UIPreferencesContext } from './contexts/UIPreferencesContext';
 
 export class EstimateResults extends Component {
     constructor() {
@@ -87,6 +88,7 @@ export class EstimateResults extends Component {
 
     render() {
         const { task, isLoading, error } = this.state;
+        const { bytesStringBase2 } = this.context
         if (error) {
             return <p>{error.message}</p>;
         }
@@ -97,20 +99,21 @@ export class EstimateResults extends Component {
 
         return <>
             {task.counters && <Form.Text className="estimateResults">
-                {this.taskStatusDescription(task)} Bytes: <b>{sizeDisplayName(task.counters["Bytes"]?.value)}</b> (<b>{sizeDisplayName(task.counters["Excluded Bytes"]?.value)}</b> excluded)
+                {this.taskStatusDescription(task)} Bytes: <b>{sizeDisplayName(task.counters["Bytes"]?.value, bytesStringBase2)}</b> (<b>{sizeDisplayName(task.counters["Excluded Bytes"]?.value, bytesStringBase2)}</b> excluded)
                 Files: <b>{task.counters["Files"]?.value}</b> (<b>{task.counters["Excluded Files"]?.value}</b> excluded)
                 Directories: <b>{task.counters["Directories"]?.value}</b> (<b>{task.counters["Excluded Directories"]?.value}</b> excluded)
                 Errors: <b>{task.counters["Errors"]?.value}</b> (<b>{task.counters["Ignored Errors"]?.value}</b> ignored)
-                </Form.Text>
+            </Form.Text>
             }
-                    {task.status === "RUNNING" && <>
-                            &nbsp;<Button size="sm" variant="light" onClick={() => cancelTask(task.id)} ><FontAwesomeIcon icon={faStopCircle} color="red" /> Cancel </Button>
-                        </>}
-                    {this.state.showLog ? <>
-                        <Button size="sm" variant="light" onClick={() => this.setState({ showLog: false })}><FontAwesomeIcon icon={faChevronCircleUp} /> Hide Log</Button>
-                        <TaskLogs taskID={this.taskID(this.props)} />
-                    </> : <Button size="sm" variant="light" onClick={() => this.setState({ showLog: true })}><FontAwesomeIcon icon={faChevronCircleDown} /> Show Log</Button>}
+            {task.status === "RUNNING" && <>
+                &nbsp;<Button size="sm" variant="light" onClick={() => cancelTask(task.id)} ><FontAwesomeIcon icon={faStopCircle} color="red" /> Cancel </Button>
+            </>}
+            {this.state.showLog ? <>
+                <Button size="sm" variant="light" onClick={() => this.setState({ showLog: false })}><FontAwesomeIcon icon={faChevronCircleUp} /> Hide Log</Button>
+                <TaskLogs taskID={this.taskID(this.props)} />
+            </> : <Button size="sm" variant="light" onClick={() => this.setState({ showLog: true })}><FontAwesomeIcon icon={faChevronCircleDown} /> Show Log</Button>}
         </>
             ;
     }
 }
+EstimateResults.contextType = UIPreferencesContext
\ No newline at end of file
diff --git a/src/Preferences.jsx b/src/Preferences.jsx
deleted file mode 100644
index 348ac31..0000000
--- a/src/Preferences.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Component } from 'react';
-import { ThemeSelector } from './ThemeSelector';
-import { UIPreferencesContext } from './contexts/UIPreferencesContext';
-
-export class Preferences extends Component {
-    static contextType = UIPreferencesContext;
-    constructor() {
-        super();
-        this.state = {
-            status: {},
-            error: null,
-        };
-    }
-
-    render() {
-        const { pageSize, bytesStringBase2 } = this.context;
-        return <>
-            <form>
-                <div className='form-group'>
-                    <label className='label-description' id='themeLabel'>Theme</label>
-                    <ThemeSelector />
-                    <small htmlFor='themeLabel' id='themeHelp' className='form-text text-muted'>The current active theme</small>
-                </div>
-                <br />
-                <div className='form-group'>
-                    <label className='label-description'>Bytes to the base of 2</label>
-                    <input className='form-control form-control-sm' id='bytesBaseInput'
-                        type='text' value={bytesStringBase2} disabled={true} />
-                    <small htmlFor='bytesBaseInput' id='bytesHelp' className='form-text text-muted'>Represents bytes to the base of 2</small>
-                </div>
-                <br />
-                <div className='form-group'>
-                    <label className='label-description'>Page size</label>
-                    <input className='form-control form-control-sm' id='pageSizeInput'
-                        type='text' placeholder='Page size' value={pageSize} disabled={true} />
-                    <small hmtlFor="pageSizeInput" id='pageSizeHelp' className='form-text text-muted'>The number of items shown in tables</small>
-                </div>
-            </form>
-        </>
-    }
-}
\ No newline at end of file
diff --git a/src/PreferencesView.jsx b/src/PreferencesView.jsx
new file mode 100644
index 0000000..282585c
--- /dev/null
+++ b/src/PreferencesView.jsx
@@ -0,0 +1,43 @@
+import { Component } from 'react';
+import { UIPreferencesContext } from './contexts/UIPreferencesContext';
+
+export class PreferencesView extends Component {
+    constructor() {
+        super();
+    }
+
+    render() {
+        const { pageSize, theme, bytesStringBase2, setByteStringBase, setTheme } = this.context;
+        return <>
+            <form>
+                <div className='form-group'>
+                    <label className='label-description' id='themeLabel'>Theme</label>
+                    <select className="select_theme, form-select form-select-sm" value={theme} onChange={e => setTheme(e.target.value)}>
+                        <option value="light">light</option>
+                        <option value="dark">dark</option>
+                        <option value="pastel">pastel</option>
+                        <option value="ocean">ocean</option>
+                    </select>
+                    <small hmtlfor='themeLabel' id='themeHelp' className='form-text text-muted'>The current active theme</small>
+                </div>
+                <br />
+                <div className='form-group'>
+                    <label className='label-description'>Byte representation</label>
+                    <select className="form-select form-select-sm" id='bytesBaseInput' value={bytesStringBase2} onChange={e => setByteStringBase(e.target.value)}>
+                        <option value="true">Base-2 (KiB, MiB, GiB, TiB)</option>
+                        <option value="false">Base-10 (KB, MB, GB, TB)</option>
+                    </select>
+                    <small hmtlfor='bytesBaseInput' id='bytesHelp' className='form-text text-muted'>Specifies the representation of bytes</small>
+                </div>
+                <br />
+                <div className='form-group'>
+                    <label className='label-description'>Page size</label>
+                    <input className='form-control form-control-sm' id='pageSizeInput'
+                        type='text' placeholder='Page size' value={pageSize} disabled={true} />
+                    <small hmtlfor="pageSizeInput" id='pageSizeHelp' className='form-text text-muted'>Specifies the pagination size in tables</small>
+                </div>
+            </form>
+        </>
+    }
+}
+PreferencesView.contextType = UIPreferencesContext
diff --git a/src/SnapshotsTable.jsx b/src/SnapshotsTable.jsx
index d4a4ea9..9d89317 100644
--- a/src/SnapshotsTable.jsx
+++ b/src/SnapshotsTable.jsx
@@ -13,6 +13,7 @@ import { faSync, faThumbtack } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Modal from 'react-bootstrap/Modal';
 import { faFileAlt } from '@fortawesome/free-regular-svg-icons';
+import { UIPreferencesContext } from './contexts/UIPreferencesContext';
 
 function pillVariant(tag) {
     if (tag.startsWith("latest-")) {
@@ -314,6 +315,7 @@ export class SnapshotsTable extends Component {
 
     render() {
         let { snapshots, unfilteredCount, uniqueCount, isLoading, error } = this.state;
+        const { bytesStringBase2 } = this.context
         if (error) {
             return <p>{error.message}</p>;
         }
@@ -362,7 +364,7 @@ export class SnapshotsTable extends Component {
             Header: 'Size',
             accessor: 'summary.size',
             width: 100,
-            Cell: x => sizeWithFailures(x.cell.value, x.row.original.summary),
+            Cell: x => sizeWithFailures(x.cell.value, x.row.original.summary, bytesStringBase2),
         }, {
             Header: 'Files',
             accessor: 'summary.files',
@@ -502,3 +504,4 @@ export class SnapshotsTable extends Component {
         </>;
     }
 }
+SnapshotsTable.contextType = UIPreferencesContext
diff --git a/src/SourcesTable.jsx b/src/SourcesTable.jsx
index 02a4479..cacf096 100644
--- a/src/SourcesTable.jsx
+++ b/src/SourcesTable.jsx
@@ -13,6 +13,7 @@ import { Link } from 'react-router-dom';
 import { handleChange } from './forms';
 import MyTable from './Table';
 import { CLIEquivalent, compare, errorAlert, ownerName, policyEditorURL, redirect, sizeDisplayName, sizeWithFailures, sourceQueryStringParams } from './uiutil';
+import { UIPreferencesContext } from './contexts/UIPreferencesContext';
 
 const localSnapshots = "Local Snapshots"
 const allSnapshots = "All Snapshots"
@@ -88,7 +89,7 @@ export class SourcesTable extends Component {
         });
     }
 
-    statusCell(x, parent) {
+    statusCell(x, parent, bytesStringBase2) {
         switch (x.cell.value) {
             case "IDLE":
             case "PAUSED":
@@ -96,7 +97,7 @@ export class SourcesTable extends Component {
                     <Button data-testid="edit-policy" as={Link} to={policyEditorURL(x.row.original.source)} variant="primary" size="sm">Policy</Button>
                     <Button data-testid="snapshot-now" variant="success" size="sm" onClick={() => {
                         parent.startSnapshot(x.row.original.source);
-                        }}>Snapshot Now
+                    }}>Snapshot Now
                     </Button>
                 </>;
 
@@ -111,15 +112,15 @@ export class SourcesTable extends Component {
                 let title = "";
                 let totals = "";
                 if (u) {
-                    title = " hashed " + u.hashedFiles + " files (" + sizeDisplayName(u.hashedBytes) + ")\n" +
-                        " cached " + u.cachedFiles + " files (" + sizeDisplayName(u.cachedBytes) + ")\n" +
+                    title = " hashed " + u.hashedFiles + " files (" + sizeDisplayName(u.hashedBytes, bytesStringBase2) + ")\n" +
+                        " cached " + u.cachedFiles + " files (" + sizeDisplayName(u.cachedBytes, bytesStringBase2) + ")\n" +
                         " dir " + u.directory;
 
                     const totalBytes = u.hashedBytes + u.cachedBytes;
 
-                    totals = sizeDisplayName(totalBytes);
+                    totals = sizeDisplayName(totalBytes, bytesStringBase2);
                     if (u.estimatedBytes) {
-                        totals += "/" + sizeDisplayName(u.estimatedBytes);
+                        totals += "/" + sizeDisplayName(u.estimatedBytes, bytesStringBase2);
 
                         const percent = Math.round(totalBytes * 1000.0 / u.estimatedBytes) / 10.0;
                         if (percent <= 100) {
@@ -178,6 +179,7 @@ export class SourcesTable extends Component {
 
     render() {
         let { sources, isLoading, error } = this.state;
+        const { bytesStringBase2 } = this.context
         if (error) {
             return <p>{error.message}</p>;
         }
@@ -234,7 +236,7 @@ export class SourcesTable extends Component {
             accessor: x => x.lastSnapshot ? x.lastSnapshot.stats.totalSize : 0,
             Cell: x => sizeWithFailures(
                 x.cell.value,
-                x.row.original.lastSnapshot && x.row.original.lastSnapshot.rootEntry ? x.row.original.lastSnapshot.rootEntry.summ : null),
+                x.row.original.lastSnapshot && x.row.original.lastSnapshot.rootEntry ? x.row.original.lastSnapshot.rootEntry.summ : null, bytesStringBase2),
         }, {
             id: 'lastSnapshotTime',
             Header: 'Last Snapshot',
@@ -252,7 +254,7 @@ export class SourcesTable extends Component {
             Header: '',
             width: 300,
             accessor: x => x.status,
-            Cell: x => this.statusCell(x, this),
+            Cell: x => this.statusCell(x, this, bytesStringBase2),
         }]
 
         return <>
@@ -290,3 +292,4 @@ export class SourcesTable extends Component {
         </>;
     }
 }
+SourcesTable.contextType = UIPreferencesContext
\ No newline at end of file
diff --git a/src/TaskDetails.jsx b/src/TaskDetails.jsx
index 7eef578..3c458c3 100644
--- a/src/TaskDetails.jsx
+++ b/src/TaskDetails.jsx
@@ -12,6 +12,7 @@ import Table from 'react-bootstrap/Table';
 import Spinner from 'react-bootstrap/Spinner';
 import { TaskLogs } from './TaskLogs';
 import { cancelTask, formatDuration, GoBackButton, redirect, sizeDisplayName } from './uiutil';
+import { UIPreferencesContext } from './contexts/UIPreferencesContext';
 
 export class TaskDetails extends Component {
     constructor() {
@@ -157,6 +158,7 @@ export class TaskDetails extends Component {
 
     render() {
         const { task, isLoading, error } = this.state;
+        const { bytesStringBase2 } = this.context
         if (error) {
             return <p>{error.message}</p>;
         }
@@ -192,7 +194,7 @@ export class TaskDetails extends Component {
                             </tr>
                         </thead>
                         <tbody>
-                            {this.sortedBadges(task.counters)}
+                            {this.sortedBadges(task.counters, bytesStringBase2)}
                         </tbody>
                     </Table>
                 </Col>
@@ -221,3 +223,4 @@ export class TaskDetails extends Component {
             ;
     }
 }
+TaskDetails.contextType = UIPreferencesContext
\ No newline at end of file
diff --git a/src/TaskLogs.jsx b/src/TaskLogs.jsx
index 38e5209..d2c43f4 100644
--- a/src/TaskLogs.jsx
+++ b/src/TaskLogs.jsx
@@ -82,7 +82,7 @@ export class TaskLogs extends Component {
 
     formatLogParams(entry) {
         // if there are any properties other than `msg, ts, level, mod` output them as JSON.
-        let {msg, ts, level, mod, ...parametersOnly} = entry;
+        let { msg, ts, level, mod, ...parametersOnly } = entry;
 
         const p = JSON.stringify(parametersOnly);
         if (p !== "{}") {
@@ -111,11 +111,11 @@ export class TaskLogs extends Component {
         if (logs) {
             return <div className="logs-table"><Table size="sm" bordered hover>
                 <tbody>
-                    {logs.map((v,ndx) => <tr key={ndx + '-' + v.ts} className={'loglevel-' + v.level}>
+                    {logs.map((v, ndx) => <tr key={ndx + '-' + v.ts} className={'loglevel-' + v.level}>
                         <td className="elide" title={this.fullLogTime(v.ts)}>{this.formatLogTime(v.ts)} {v.msg} {this.formatLogParams(v)}</td></tr>)}
                 </tbody>
             </Table>
-            <div ref={this.messagesEndRef} />
+                <div ref={this.messagesEndRef} />
             </div>;
         }
 
diff --git a/src/ThemeSelector.tsx b/src/ThemeSelector.tsx
deleted file mode 100644
index e6eb0b6..0000000
--- a/src/ThemeSelector.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import Select from 'react-select'
-import { useContext } from 'react';
-import { UIPreferencesContext } from './contexts/UIPreferencesContext';
-
-export function ThemeSelector() {
-    const { theme, setTheme } = useContext(UIPreferencesContext);
-    
-    //Contains all supported themes
-    const themes = [
-        { value: 'light', label: 'light' },
-        { value: 'dark', label: 'dark' },
-        { value: 'pastel', label: 'pastel' },
-        { value: 'ocean', label: 'ocean' }
-    ]
-
-    //Finds the current selected theme within supported themes
-    const currentTheme = themes.find(o => o.value === theme);
-
-    /**
-     * Handles the theme selection by the user
-     * @param event 
-     */
-    const handleTheme = (event: any) => {
-        var selectedTheme = event.value;
-        setTheme(selectedTheme)
-      };
-    
-   return <Select options={themes} value={currentTheme} className="select_theme" onChange={handleTheme}/> 
-}
\ No newline at end of file
diff --git a/src/contexts/UIPreferencesContext.tsx b/src/contexts/UIPreferencesContext.tsx
index 6a91506..94cf1f4 100644
--- a/src/contexts/UIPreferencesContext.tsx
+++ b/src/contexts/UIPreferencesContext.tsx
@@ -4,7 +4,7 @@ import axios from 'axios';
 export const PAGE_SIZES = [10, 20, 30, 40, 50, 100];
 export const UIPreferencesContext = React.createContext<UIPreferences>({} as UIPreferences);
 
-const DEFAULT_PREFERENCES = { pageSize: PAGE_SIZES[0], theme: getDefaultTheme() } as SerializedUIPreferences;
+const DEFAULT_PREFERENCES = { pageSize: PAGE_SIZES[0], bytesStringBase2: false, theme: getDefaultTheme() } as SerializedUIPreferences;
 const PREFERENCES_URL = '/api/v1/ui-preferences';
 
 export type Theme = "light" | "dark" | "pastel" | "ocean";
@@ -13,12 +13,15 @@ export type PageSize = 10 | 20 | 30 | 40 | 50 | 100;
 export interface UIPreferences {
     get pageSize(): PageSize
     get theme(): Theme
+    get bytesStringBase2(): boolean
     setTheme: (theme: Theme) => void
     setPageSize: (pageSize: number) => void
+    setByteStringBase: (bytesStringBase2: String) => void
 }
 
 interface SerializedUIPreferences {
     pageSize?: number
+    bytesStringBase2?: boolean
     theme: Theme | undefined
 }
 
@@ -78,7 +81,6 @@ export function UIPreferenceProvider(props: UIPreferenceProviderProps) {
         if (!preferences) {
             return;
         }
-
         axios.put(PREFERENCES_URL, preferences).then(result => { }).catch(err => console.error(err));
     }, [preferences]);
 
@@ -107,7 +109,12 @@ export function UIPreferenceProvider(props: UIPreferenceProviderProps) {
         return { ...oldPreferences, pageSize };
     });
 
-    const providedValue = { ...preferences, setTheme, setPageSize } as UIPreferences;
+    const setByteStringBase = (input: String) => setPreferences(oldPreferences => {
+        var bytesStringBase2 = input === "true";
+        return { ...oldPreferences, bytesStringBase2 };
+    });
+
+    const providedValue = { ...preferences, setTheme, setPageSize, setByteStringBase} as UIPreferences;
 
     return <UIPreferencesContext.Provider value={providedValue}>
         {props.children}
diff --git a/src/App.css b/src/css/App.css
similarity index 94%
rename from src/App.css
rename to src/css/App.css
index 88a750e..9a3e0fd 100644
--- a/src/App.css
+++ b/src/css/App.css
@@ -97,15 +97,12 @@ body {
   filter: brightness(80%);
 }
 
-.table {
+.table-striped>tbody>tr:nth-of-type(odd)>* {
   color: var(--text-color-body);
+  background-color: var(--color-stripe);
 }
 
-.table table-sm table-striped table-bordered table-hover {
-  color: var(--text-color-body);
-}
-
-.table-striped>tbody>tr:nth-of-type(odd)>* {
+.table-striped>tbody>tr:nth-of-type(even)>* {
   color: var(--text-color-body);
 }
 
@@ -139,7 +136,7 @@ body {
 }
 
 .label-help {
-  padding-top: 4px;
+  padding-top: 1rem;
   padding-bottom: 8px;
   font-size: 90%;
 }
@@ -194,7 +191,7 @@ body {
 }
 
 .error {
-  color: var(--color_red);
+  color: var(--color-error);
 }
 
 .normal {
@@ -256,12 +253,12 @@ div.tab-body {
   font-size: 11px;
   overflow: auto;
   max-height: 400px;
-  border: 1px solid #888;
+  border: 1px solid #aaa;
 }
 
-.loglevel-0 { } /* debug */
+.loglevel-0 { color: var(--text-color)} /* debug */
 .loglevel-1 { font-weight: bold;} /* info */
-.loglevel-2 { color: rgb(169, 112, 5); font-weight: bold;} /* warning */
+.loglevel-2 { color: var(--color-warning); font-weight: bold;} /* warning */
 .loglevel-3 { color: var(--color-error); font-weight: bold; } /* error */
 
 .counter-badge {
diff --git a/src/Theme.css b/src/css/Theme.css
similarity index 90%
rename from src/Theme.css
rename to src/css/Theme.css
index d644143..ffb1266 100644
--- a/src/Theme.css
+++ b/src/css/Theme.css
@@ -17,17 +17,18 @@
 }
 
 .dark {
-  --background-color: #343c43;
+  --background-color: #222222;
   --color-primary: #1162b1;
   --color-secondary: #0d9aab;
   --color-warning: #b30996;
   --color-success: #00B4D8;
   --color-submit: #00B4D8;
+  --color-stripe: #323232;
 
-  --text-color: #ffffff;
+  --text-color: #f4f4f4;
   --text-color-selector: #000000;
-  --text-color-body: #ffffff;
-  --text-color-nav: #ffffff;
+  --text-color-body: #f4f4f4;
+  --text-color-nav: #f4f4f4;
   
   --color-error: #b31f04;
   --color-danger: #b31f04;
diff --git a/src/uiutil.jsx b/src/uiutil.jsx
index 573e76d..14708ef 100644
--- a/src/uiutil.jsx
+++ b/src/uiutil.jsx
@@ -11,8 +11,8 @@ import { Link } from 'react-router-dom';
 
 // locale to use for number formatting (undefined would use default locale, but we stick to EN for now)
 const locale = "en-US"
-
 const base10UnitPrefixes = ["", "K", "M", "G", "T"];
+const base2UnitPrefixes = ["", "Ki", "Mi", "Gi", "Ti"];
 
 function formatNumber(f) {
     return (Math.round(f * 10) / 10.0) + '';
@@ -29,13 +29,13 @@ function toDecimalUnitString(f, thousand, prefixes, suffix) {
     return formatNumber(f) + ' ' + prefixes[prefixes.length - 1] + suffix;
 }
 
-export function sizeWithFailures(size, summ) {
+export function sizeWithFailures(size, summ, bytesStringBase2) {
     if (size === undefined) {
         return "";
     }
 
     if (!summ || !summ.errors || !summ.numFailed) {
-        return <span>{sizeDisplayName(size)}</span>
+        return <span>{sizeDisplayName(size, bytesStringBase2)}</span>
     }
 
     let caption = "Encountered " + summ.numFailed + " errors:\n\n";
@@ -48,16 +48,19 @@ export function sizeWithFailures(size, summ) {
     caption += summ.errors.map(x => prefix + x.path + ": " + x.error).join("\n");
 
     return <span>
-        {sizeDisplayName(size)}&nbsp;
+        {sizeDisplayName(size, bytesStringBase2)}&nbsp;
         <FontAwesomeIcon color="red" icon={faExclamationTriangle} title={caption} />
     </span>;
 }
 
-export function sizeDisplayName(s) {
-    if (s === undefined) {
+export function sizeDisplayName(size, bytesStringBase2) {
+    if (size === undefined) {
         return "";
     }
-    return toDecimalUnitString(s, 1000, base10UnitPrefixes, "B");
+    if (bytesStringBase2) {
+        return toDecimalUnitString(size, 1024, base2UnitPrefixes, "B");
+    }
+    return toDecimalUnitString(size, 1000, base10UnitPrefixes, "B");
 }
 
 export function intervalDisplayName(v) {
@@ -222,7 +225,7 @@ export function formatMagnitudesUsingMultipleUnits(magnitudes, abbreviateUnits =
             minimumFractionDigits: fractionDigits,
             maximumFractionDigits: fractionDigits,
             roundingMode: "trunc",
-        })}${fractionDigits ? (abbreviateUnits ? "s" : " seconds") : units.seconds }`);
+        })}${fractionDigits ? (abbreviateUnits ? "s" : " seconds") : units.seconds}`);
     }
 
     return parts.join(" ");