From 7ecc3de10aef1743f32aa7070a5a87996285d89b Mon Sep 17 00:00:00 2001
From: Robin Davies <rerdavies@gmail.com>
Date: Thu, 19 Sep 2024 11:18:08 -0400
Subject: [PATCH] PiPedal client theme matches web app theme.

---
 react/src/AndroidHost.tsx      |  9 +++++++++
 react/src/App.tsx              | 22 ++++++++++++++++++++
 react/src/AppThemed.tsx        | 10 +++++----
 react/src/DarkMode.tsx         | 37 +++++++++++++++++++++++++++-------
 react/src/PiPedalModel.tsx     |  7 ++++++-
 react/src/SettingsDialog.tsx   | 26 +++++++++++++++---------
 react/src/WifiConfigDialog.tsx |  3 ++-
 7 files changed, 91 insertions(+), 23 deletions(-)

diff --git a/react/src/AndroidHost.tsx b/react/src/AndroidHost.tsx
index bd93f1a..f62c931 100644
--- a/react/src/AndroidHost.tsx
+++ b/react/src/AndroidHost.tsx
@@ -29,6 +29,8 @@ export interface  AndroidHostInterface {
     chooseNewDevice() : void;
     setDisconnected(isDisconnected: boolean): void;
     launchExternalUrl(url:string): boolean;
+    setThemePreference(theme: number): void;
+    getThemePreference(): number;
 };
 
 export class FakeAndroidHost implements AndroidHostInterface
@@ -51,4 +53,11 @@ export class FakeAndroidHost implements AndroidHostInterface
     {
         return false;
     }
+    private theme = 1;
+    setThemePreference(theme: number): void{
+        this.theme = theme;
+    }
+    getThemePreference(): number {
+        return this.theme;
+    }
 }
diff --git a/react/src/App.tsx b/react/src/App.tsx
index 29746d1..dc0bb9d 100644
--- a/react/src/App.tsx
+++ b/react/src/App.tsx
@@ -56,6 +56,17 @@ const theme = createTheme(
         {
             components: {
                 MuiButton: {
+                    styleOverrides: {
+                        containedPrimary: {
+                            borderRadius: '9999px',
+                            paddingLeft: "14px", paddingRight: "16px"
+                        },
+                        containedSecondary: {
+                            borderRadius: '9999px',
+                            paddingLeft: "14px", paddingRight: "16px"
+                        }
+
+                    },
                     variants: [
                         {
                             props: { variant: 'dialogPrimary' },
@@ -89,6 +100,17 @@ const theme = createTheme(
         {
             components: {
                 MuiButton: {
+                    styleOverrides: {
+                        containedPrimary: {
+                            borderRadius: '9999px',
+                            paddingLeft: "14px", paddingRight: "16px"
+                        },
+                        containedSecondary: {
+                            borderRadius: '9999px',
+                            paddingLeft: "14px", paddingRight: "16px"
+                        }
+
+                    },
                     variants: [
                         {
                             props: { variant: 'dialogPrimary' },
diff --git a/react/src/AppThemed.tsx b/react/src/AppThemed.tsx
index acf2d61..9537c06 100644
--- a/react/src/AppThemed.tsx
+++ b/react/src/AppThemed.tsx
@@ -163,7 +163,6 @@ const appStyles = (theme: Theme) => createStyles({
     loadingBox: {
         position: "relative",
         top: "20%",
-        width: "240px",
         color: isDarkMode() ? theme.palette.text.secondary : "#888",
         marginLeft: "auto",
         marginRight: "auto",
@@ -525,9 +524,12 @@ const AppThemed = withStyles(appStyles)(class extends ResizeResponsiveComponent<
         return undefined;
     }
     promptForUpdateHandler(newValue: boolean) {
-        if (this.state.updateDialogOpen !== newValue)
+        if (this.model_.enableAutoUpdate)
         {
-            this.setState({updateDialogOpen: newValue});
+            if (this.state.updateDialogOpen !== newValue)
+            {
+                this.setState({updateDialogOpen: newValue});
+            }
         }
     }
     componentDidMount() {
@@ -959,7 +961,7 @@ const AppThemed = withStyles(appStyles)(class extends ResizeResponsiveComponent<
                             </p>
                         </div>
                         <div style={{ paddingTop: 50, paddingLeft: 36, textAlign: "left" }}>
-                            <Button variant='contained' color="primary" component='button'
+                            <Button variant='contained' color="primary" 
                                 onClick={() => this.handleReload()} >
                                 Reload
                             </Button>
diff --git a/react/src/DarkMode.tsx b/react/src/DarkMode.tsx
index 1c64522..f99496a 100644
--- a/react/src/DarkMode.tsx
+++ b/react/src/DarkMode.tsx
@@ -17,6 +17,8 @@
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
+import { AndroidHostInterface } from "./AndroidHost";
+
 export enum ColorTheme {
     Light,
     Dark,
@@ -26,16 +28,20 @@ export enum ColorTheme {
 
 
 export function getColorScheme(): ColorTheme {
-    const androidHosted = !!((window as any).AndroidHost);
-
+    let androidHost = (window as any).AndroidHost as AndroidHostInterface;
+    if (androidHost) {
+        switch (androidHost.getThemePreference() as number)
+        {
+            case 0: return ColorTheme.Light;
+            case 1: return ColorTheme.Dark;
+            default:
+            case 2: return ColorTheme.System;
+        }
+    }
     switch (localStorage.getItem('colorScheme')) {
         case null:
         default:
-            if (androidHosted) {
-                return ColorTheme.System;
-            } else {
-                return ColorTheme.Light;
-            }
+            return ColorTheme.Light;
         case "Light":
             return ColorTheme.Light;
         case "Dark":
@@ -45,6 +51,23 @@ export function getColorScheme(): ColorTheme {
     }
 }
 export function setColorScheme(value: ColorTheme): void {
+    let androidHost = (window as any).AndroidHost as AndroidHostInterface;
+    if (androidHost) {
+        switch (value) {
+            case ColorTheme.Light:
+                androidHost.setThemePreference(0);
+                break;
+            case ColorTheme.Dark:
+                androidHost.setThemePreference(1);
+                break;
+            default:
+            case ColorTheme.System:
+                androidHost.setThemePreference(2);
+                break;
+
+        }
+    }
+
     var storageValue;
     switch (value) {
         default:
diff --git a/react/src/PiPedalModel.tsx b/react/src/PiPedalModel.tsx
index 680b5fc..46d9cfa 100644
--- a/react/src/PiPedalModel.tsx
+++ b/react/src/PiPedalModel.tsx
@@ -687,6 +687,10 @@ export class PiPedalModel //implements PiPedalModel
     private lastCanUpdateNow: boolean = false;
     private updatePromptForUpdate() {
         this.clearPromptForUpdateTimer();
+        if (!this.enableAutoUpdate)
+        {
+            return;
+        }
 
         let stateEnabled = true; // must be present to accept alerts.  this.state.get() === State.Ready;
         let timeEnabled = false;
@@ -909,7 +913,7 @@ export class PiPedalModel //implements PiPedalModel
     maxFileUploadSize: number = 512 * 1024 * 1024;
     maxPresetUploadSize: number = 1024 * 1024;
     debug: boolean = false;
-
+    enableAutoUpdate: boolean = false;
 
     requestConfig(): Promise<boolean> {
         const myRequest = new Request(this.varRequest('config.json'));
@@ -920,6 +924,7 @@ export class PiPedalModel //implements PiPedalModel
                 }
             )
             .then(data => {
+                this.enableAutoUpdate = !!data.enable_auto_update;
                 if (data.max_upload_size) {
                     this.maxPresetUploadSize = data.max_upload_size;
                 }
diff --git a/react/src/SettingsDialog.tsx b/react/src/SettingsDialog.tsx
index 43500c0..f983fdf 100644
--- a/react/src/SettingsDialog.tsx
+++ b/react/src/SettingsDialog.tsx
@@ -688,7 +688,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
                                     <SelectHoverBackground selected={false} showHover={true} />
                                     <div style={{ width: "100%" }}>
                                         <Typography className={classes.primaryItem} display="block" variant="body2" color="textPrimary" noWrap>
-                                            Wi-Fi auto hotspot</Typography>
+                                            Wi-Fi auto-hotspot</Typography>
                                         <Typography display="block" variant="caption" noWrap color="textSecondary">
                                             {this.state.wifiConfigSettings.getSummaryText()}
                                         </Typography>
@@ -779,15 +779,21 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
                                         </div>
                                     </ButtonBase>
 
-                                    <ButtonBase
-                                        className={classes.setting}
-                                        onClick={() => { this.handleCheckForUpdates(); }}  >
-                                        <SelectHoverBackground selected={false} showHover={true} />
-                                        <div style={{ width: "100%" }}>
-                                            <Typography className={classes.primaryItem} display="block" variant="body2" color="textPrimary" noWrap>
-                                                Check for updates...</Typography>
-                                        </div>
-                                    </ButtonBase>
+                                    {
+                                        this.model.enableAutoUpdate && (
+                                            <ButtonBase
+                                                className={classes.setting}
+                                                onClick={() => { this.handleCheckForUpdates(); }}  >
+                                                <SelectHoverBackground selected={false} showHover={true} />
+                                                <div style={{ width: "100%" }}>
+                                                    <Typography className={classes.primaryItem} display="block" variant="body2" color="textPrimary" noWrap>
+                                                        Check for updates...</Typography>
+                                                </div>
+                                            </ButtonBase>
+
+                                        )
+                                    }
+
 
 
 
diff --git a/react/src/WifiConfigDialog.tsx b/react/src/WifiConfigDialog.tsx
index 5d1f6d6..2051b62 100644
--- a/react/src/WifiConfigDialog.tsx
+++ b/react/src/WifiConfigDialog.tsx
@@ -338,7 +338,7 @@ const WifiConfigDialog = withStyles(styles, { withTheme: true })(
                     fullScreen={this.state.fullScreen}
                 >
                     {(this.state.fullScreen || !this.state.compactHeight) && (
-                        <DialogTitle>Wi-fi Hotspot</DialogTitle>
+                        <DialogTitle>Wi-fi Auto-Hotspot</DialogTitle>
                     )}
                     <DialogContent>
                         <div style={
@@ -514,6 +514,7 @@ const WifiConfigDialog = withStyles(styles, { withTheme: true })(
                                     onChange={(event, value) => { if (value) { this.setState({ countryCode: value.id }) } }}
                                     options={this.getCountryCodeOptions()}
                                     renderInput={(params) => (<TextField {...params} variant="standard" label="Regulatory Domain" />)}
+                                    disabled={!enabled}
                                 />
                                 {/*
                                     <Select variant="standard" label="Regulatory Domain" id="countryCodeSelect"