Extended zoom level to 50% to 150%, refactored CSS in order to bette…

…r accommodate new zoom levels

.gitignore

@@ -99,4 +99,6 @@ dist/
 mas/
 
 entitlements.mas.inherit.plist
-entitlements.mas.plist
+entitlements.mas.plist
+
+FilterLang.ts

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sleek",
   "productName": "sleek",
-  "version": "2.0.17-rc.1",
+  "version": "2.0.17-rc.2",
   "description": "todo.txt manager for Linux, Windows and MacOS, free and open-source (FOSS)",
   "synopsis": "todo.txt manager for Linux, Windows and MacOS, free and open-source (FOSS)",
   "keywords": [

src/renderer/App.scss

@@ -7,13 +7,20 @@ body {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
-  font-family: Helvetica, Arial, sans-serif;
   code {
     font-size: 0.9em;
     background-color: rgba(18, 18, 18, 0.15);
     border-radius: 0.25em;
     padding: 0.25em;
   }
+  label {
+    width: 100%;
+    a {
+      svg {
+        font-size: 1em!important;
+      }
+    }
+  }  
   #root {
     .flexContainer {
       min-width: 25em;
@@ -24,6 +31,9 @@ body {
         height: 2.5em;
         display: flex;
       }
+      .MuiButton-root {
+        min-width: auto;
+      }
       .flexItems {
         width: 100%;
         height: 100vh;
@@ -40,12 +50,6 @@ body {
       &.hideNavigation.disableAnimations {
         transition: none;
       }
-      &.darkTheme {
-        button.showNavigation {
-          background: Variables.$darker-grey;
-          color: Variables.$light-grey;
-        }
-      }
     }
     .disableAnimations {
       .flexContainer {
@@ -54,14 +58,6 @@ body {
     }
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5 {
-    font-weight: bold;
-  }
-
   *::-webkit-scrollbar {
     background-color: transparent;
     width: 0.8em;

src/renderer/App.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useRef } from 'react'
-import { ThemeProvider } from '@mui/material/styles'
+import { ThemeProvider, createTheme } from '@mui/material/styles'
 import IpcComponent from './IpcRenderer'
 import MatomoComponent from './Matomo'
 import CssBaseline from '@mui/material/CssBaseline'
@@ -21,6 +21,8 @@ import { i18n } from './Settings/LanguageSelector'
 import Settings from './Settings/Settings'
 import Prompt from './Prompt'
 import './App.scss'
+import './Buttons.scss'
+import './Form.scss'
 
 const { ipcRenderer, store } = window.api
 
@@ -42,6 +44,14 @@ const App = (): JSX.Element => {
   const [textFieldValue, setTextFieldValue] = useState<string>('')
   const [promptItem, setPromptItem] = useState<PromptItem | null>(null)
   const [triggerArchiving, setTriggerArchiving] = useState<boolean>(false)
+  const [theme, setTheme] = useState(
+  createTheme({
+    ...(settings?.shouldUseDarkColors ? darkTheme : lightTheme),
+      typography: {
+        fontSize: Math.round(14 * (settings.zoom / 100)),
+      },
+    })
+  );
   const searchFieldRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
@@ -69,6 +79,31 @@ const App = (): JSX.Element => {
     ipcRenderer.send('requestData')
   }, [])
 
+  useEffect(() => {
+    const adjustedFontSize = Math.round(14 * (settings.zoom / 100));
+    const updatedTheme = createTheme({
+      ...(settings?.shouldUseDarkColors ? darkTheme : lightTheme),
+      typography: {
+        fontFamily: 'Helvetica, Arial, sans-serif',
+        fontSize: adjustedFontSize,
+      },
+    });
+
+    setTheme(updatedTheme);
+
+    if (settings?.shouldUseDarkColors) {
+      document.body.classList.add('darkTheme');
+      document.body.classList.remove('lightTheme');
+    } else {
+      document.body.classList.add('lightTheme');
+      document.body.classList.remove('darkTheme');
+    }
+
+    return () => {
+      document.body.classList.remove('darkTheme', 'lightTheme');
+    };
+  }, [settings.shouldUseDarkColors, settings.zoom]);  
+
   return (
     <>
       <IpcComponent
@@ -85,10 +120,10 @@ const App = (): JSX.Element => {
       />
       {settings.matomo && <MatomoComponent settings={settings} />}
       <I18nextProvider i18n={i18n}>
-        <ThemeProvider theme={settings?.shouldUseDarkColors ? darkTheme : lightTheme}>
+        <ThemeProvider theme={theme}>
           <CssBaseline />
           <div
-            className={`flexContainer ${settings?.isNavigationOpen ? '' : 'hideNavigation'} ${settings?.shouldUseDarkColors ? 'darkTheme' : 'lightTheme'} ${settings.disableAnimations ? 'disableAnimations' : ''}`}
+            className={`flexContainer ${settings?.isNavigationOpen ? '' : 'hideNavigation'} ${settings.disableAnimations ? 'disableAnimations' : ''}`}
           >
             <NavigationComponent
               setDialogOpen={setDialogOpen}

src/renderer/Buttons.scss

@@ -0,0 +1,108 @@
+@use 'Variables.scss';
+
+.filter {
+	position: relative;
+	button {
+		height: auto;
+		padding: 0 0.5em;
+		height: 2em;
+		line-height: 2em;
+		svg {
+		  width: 1em;
+		  height: 1em;
+		}
+		.MuiChip-root {
+		  font-size: 1em;
+		  width: auto;
+		  height: 2em;
+		  border-radius: Variables.$radius 0 0 Variables.$radius;
+		  margin-left: -0.5em;
+		  margin-right: 0.5em;
+		  .MuiChip-label {
+		    font-size: 1em;
+		    padding: 0 0.5em;
+		    margin: 0;
+		  }
+		}
+		&.pomodoro,
+		&.priority {
+		  img {
+		  	width: 1.25em;
+		  	height: 1.25em;
+		  }
+		}
+		&:disabled {
+			color: Variables.$dark-grey;
+			background: Variables.$mid-grey;
+			filter: opacity(50%) grayscale(100%);
+		}
+	}
+  .overlay {
+    width: 100%;
+    height: 100%;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    border-radius: Variables.$radius;
+    position: absolute;
+    z-index: 5;
+    top: 0;
+    left: 0;
+    text-align: center;
+    background-color: rgba(255, 255, 255, 0.5);
+    cursor: pointer;
+    svg {
+      font-size: inherit;
+    }
+  }
+	.MuiBadge-badge {
+		min-width: 1.5em;
+		height: 1.5em;
+		padding: 0.25em;
+		z-index: 10;
+		font-weight: bold;
+		cursor: pointer;
+		svg {
+			margin-top: 0.15em;
+			font-size: inherit;
+		}		
+	}
+	&.excluded {
+      .overlay {
+        display: flex;
+        color: Variables.$darker-grey;
+      }
+    }
+}
+.MuiBadge-badge.MuiBadge-dot {
+	min-width: auto;
+	width: 0.6em;
+	height: 0.6em;
+	border-radius: 50%;
+}
+#Attributes [data-todotxt-attribute='pm'] {
+	button {
+		padding: 1.25em 1em;
+	}
+}
+.group [data-todotxt-attribute='priority'],
+#Attributes [data-todotxt-attribute='priority'] {
+	button {
+		max-width: 1.75em;
+		height: 1.75em;
+		font-size: 1.25em;
+		font-weight: bold;
+	}
+}
+
+.darkTheme {
+    .filter {
+      button:disabled {
+        color: Variables.$mid-grey;
+        background: Variables.$dark-grey;
+      }
+      .overlay {
+        background: rgba(0, 0, 0, 0.35);
+      }
+    }
+}

src/renderer/Coloring.scss

@@ -32,7 +32,6 @@
     }
   }
   .MuiBadge-badge {
-    border-radius: 1em;
     color: var(--color2);
     background: var(--color1);
   }
@@ -107,9 +106,9 @@
   --color1: rgb(221, 44, 0);
   --color2: white;
   button {
-    svg {
-      margin: 0 0.2em;
-    }
+    // svg {
+    //   margin: 0 0.2em;
+    // }
     &.Mui-disabled {
       color: white;
     }

src/renderer/Dialog/AutoSuggest.tsx

@@ -143,14 +143,14 @@ const AutoSuggestComponent: React.FC<AutoSuggestComponentProps> = ({
     <>
       <Autosuggest
         renderInputComponent={(inputProps) => (
-          <TextField {...inputProps} multiline className="input" />
+          <TextField {...inputProps} multiline />
         )}
         renderSuggestionsContainer={({ containerProps, children }) => (
           <div
             {...containerProps}
             style={{
-              width: textFieldRef.current?.offsetWidth
-                ? textFieldRef.current.offsetWidth + 28
+              width: textFieldRef.current?.clientWidth
+                ? textFieldRef.current.clientWidth + textFieldRef.current.offsetLeft * 2
                 : 'auto'
             }}
           >

src/renderer/Dialog/DatePicker.scss

@@ -1,20 +1,18 @@
 @use '../Variables.scss';
 
 .datePicker {
-  width: 11.5em;
+  width: 13em;
   .Mui-focusVisible {
     color: Variables.$blue;
   }
 }
 
 .MuiPickersLayout-root {
   button {
-    font-size: 1em;
-    border: none;
     border-radius: Variables.$radius;
     &.MuiPickersDay-today {
       border: inherit;
       background: Variables.$mid-grey;
     }
   }
-}
+}

src/renderer/Dialog/Dialog.scss

@@ -2,34 +2,38 @@
 
 #DialogComponent {
   .MuiDialog-paper {
-    max-width: 50em;
-    position: relative;
-  }
-  .MuiDialogContent-root {
-    display: flex;
-    gap: 0.625em;
-    flex-wrap: wrap;
-    .input {
-      width: 100%;
-      textarea {
-        font-size: 1.25em;
+    max-width: 60em;
+    .MuiDialogContent-root {
+      display: flex;
+      gap: 0.5em;
+      flex-wrap: wrap;
+      padding: 1.5em;
+      .MuiFormControl-root {
+        label[data-shrink=false] {
+          transform: translate(1em, 1em) scale(1);
+        }
+        label[data-shrink=true] {
+          transform: translate(0.5em, -0.5em) scale(0.75);
+        }
+      }
+      .react-autosuggest__container {
         width: 100%;
+        .MuiTextField-root {
+          width: 100%;
+          textarea {
+            font-size: 1.25em;
+          }
+        }
       }
     }
-    .react-autosuggest__container {
-      width: 100%;
-      flex-grow: 1;
-    }
   }
 }
-
 .MuiDialogActions-root {
+  padding: 0!important;
   button {
     width: 100%;
     background: none;
     border-radius: 0;
-    margin: 0 !important;
-    padding: 0.5em 1em;
     color: Variables.$blue;
     border-top: 1px solid Variables.$light-grey;
     border-right: 1px solid Variables.$light-grey;
@@ -38,3 +42,7 @@
     }
   }
 }
+.darkTheme #DialogComponent .MuiDialog-paper .MuiDialogActions-root button {
+  border-top: 1px solid Variables.$darker-grey;
+  border-right: 1px solid Variables.$darker-grey;
+}