From 8b453efb35d480f3e7b3e74f2bcca8643d6de669 Mon Sep 17 00:00:00 2001
From: lupusA <lupusapps@gmail.com>
Date: Sun, 17 Dec 2023 09:02:29 +0100
Subject: [PATCH] Finishes the feature to scale and increase the UI

---
 src/contexts/UIPreferencesContext.tsx | 18 ++++--------------
 src/css/App.css                       |  7 ++++---
 src/pages/Preferences.jsx             | 16 +++-------------
 3 files changed, 11 insertions(+), 30 deletions(-)

diff --git a/src/contexts/UIPreferencesContext.tsx b/src/contexts/UIPreferencesContext.tsx
index 1ffad6e..6354e62 100644
--- a/src/contexts/UIPreferencesContext.tsx
+++ b/src/contexts/UIPreferencesContext.tsx
@@ -9,20 +9,18 @@ const PREFERENCES_URL = '/api/v1/ui-preferences';
 
 export type Theme = "light" | "dark" | "pastel" | "ocean";
 export type PageSize = 10 | 20 | 30 | 40 | 50 | 100;
-export type fontSize = "fs-6" | "fs-5" | "fs-4" | "fs-3";
+export type fontSize = "fs-6" | "fs-5" | "fs-4";
 
 export interface UIPreferences {
     get pageSize(): PageSize
     get theme(): Theme
     get bytesStringBase2(): boolean
     get defaultSnapshotViewAll(): boolean
-    get preferWebDav(): boolean
     get fontSize(): fontSize
     setTheme: (theme: Theme) => void
     setPageSize: (pageSize: number) => void
     setByteStringBase: (bytesStringBase2: String) => void
     setDefaultSnapshotViewAll: (defaultSnapshotView: boolean) => void
-    setPreferWebDav: (preferWebDav: String) => void
     setFontSize: (size: String) => void
 }
 
@@ -31,7 +29,6 @@ interface SerializedUIPreferences {
     bytesStringBase2?: boolean
     defaultSnapshotView?: boolean
     theme: Theme
-    preferWebDav?: boolean
     fontSize: fontSize
 }
 
@@ -77,7 +74,7 @@ export function UIPreferenceProvider(props: UIPreferenceProviderProps) {
     const setTheme = useCallback((theme: Theme) => setPreferences(oldPreferences => {
         syncTheme(theme, oldPreferences.theme);
         return { ...oldPreferences, theme };
-    }),[]);
+    }), []);
 
     const setPageSize = (pageSize: PageSize) => setPreferences(oldPreferences => {
         return { ...oldPreferences, pageSize };
@@ -92,15 +89,10 @@ export function UIPreferenceProvider(props: UIPreferenceProviderProps) {
         return { ...oldPreferences, input };
     });
 
-    const setPreferWebDav = (input: String) => setPreferences(oldPreferences => {
-        var preferWebDav = input === "true";
-        return { ...oldPreferences, preferWebDav };
-    });
-
     const setFontSize = useCallback((fontSize: fontSize) => setPreferences(oldPreferences => {
         syncFontSize(fontSize, oldPreferences.fontSize);
         return { ...oldPreferences, fontSize };
-    }),[]);
+    }), []);
 
     useEffect(() => {
         axios.get(PREFERENCES_URL).then(result => {
@@ -153,9 +145,7 @@ export function UIPreferenceProvider(props: UIPreferenceProviderProps) {
         }
     }
 
-
-
-    const providedValue = { ...preferences, setTheme, setPageSize, setByteStringBase, setDefaultSnapshotViewAll, setPreferWebDav, setFontSize } as UIPreferences;
+    const providedValue = { ...preferences, setTheme, setPageSize, setByteStringBase, setDefaultSnapshotViewAll, setFontSize } as UIPreferences;
 
     return <UIPreferencesContext.Provider value={providedValue}>
         {props.children}
diff --git a/src/css/App.css b/src/css/App.css
index d9eadbb..d75bd89 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -240,8 +240,9 @@ body {
 }
 
 .providerIcon {
-  width: 120px;
-  height: 110px;
+  min-width: 120px;
+  max-width: 240px;
+  min-height: 110px;
   margin: 10px;
   vertical-align: middle;
 }
@@ -320,7 +321,7 @@ div.tab-body {
 
 .logs-table {
   font-family: monospace;
-  font-size: 11px;
+  font-size: 70%;
   overflow: auto;
   max-height: 400px;
   border: 1px solid #aaa;
diff --git a/src/pages/Preferences.jsx b/src/pages/Preferences.jsx
index fce0bac..f831d6c 100644
--- a/src/pages/Preferences.jsx
+++ b/src/pages/Preferences.jsx
@@ -6,7 +6,7 @@ import { UIPreferencesContext } from '../contexts/UIPreferencesContext';
  */
 export class Preferences extends Component {
     render() {
-        const { pageSize, theme, bytesStringBase2, preferWebDav, fontSize, setByteStringBase, setTheme, setPreferWebDav, setFontSize} = this.context;
+        const { pageSize, theme, bytesStringBase2, fontSize, setByteStringBase, setTheme, setFontSize} = this.context;
         return <>
             <form>
                 <div className='form-group'>
@@ -30,23 +30,13 @@ export class Preferences extends Component {
                 </div>
                 <br />
                 <div className='form-group'>
-                    <label className='label-description'>Preferred filesystem for mounts</label>
-                    <select className="form-select form-select-sm" title='Select filesystem type for mounts' id='mountOptionInput' value={preferWebDav} onChange={e => setPreferWebDav(e.target.value)}>
-                        <option value="false">Fuse</option>
-                        <option value="true">WebDav</option>
-                    </select>
-                    <small hmtlfor="mountOptionInput" id='mountOptionHelp' className='form-text text-muted'>Specifies the filesystem that KopiaUI uses to mount snapshots</small>
-                </div>
-                <br />
-                <div className='form-group'>
-                    <label className='label-description'>Appereance</label>
+                    <label className='label-description'>Appearance</label>
                     <select className="form-select form-select-sm" title='Select font size' id='fontSizeInput' value={fontSize} onChange={e => setFontSize(e.target.value)}>
                         <option value="fs-6">small</option>
                         <option value="fs-5">medium</option>
                         <option value="fs-4">large</option>
-                        <option value="fs-3">larger</option>
                     </select>
-                    <small hmtlfor="fontSizeInput" id='fontSizeHelp' className='form-text text-muted'>Specifies the font size</small>
+                    <small hmtlfor="fontSizeInput" id='fontSizeHelp' className='form-text text-muted'>Specifies the appearance of the user interface</small>
                 </div>
                 <br />
                 <div className='form-group'>