feat: add no animations setting back, text shadow/border option

src/components/modals/main/settings/sections/Appearance.jsx

@@ -55,6 +55,8 @@ export default function AppearanceSettings() {
       </Dropdown>
 
       <h3>{appearance.accessibility.title}</h3>
+      <Checkbox text='Widget Text Border' name='textBorder' category='other'/>
+      <Checkbox text='Animations' name='animations' category='other'/>
       <Slider title={appearance.accessibility.toast_duration} name='toastDisplayTime' default='2500' step='100' min='500' max='5000' toast={true} display={' ' + appearance.accessibility.milliseconds} />
     </>
   );

src/components/widgets/greeting/greeting.scss

@@ -3,4 +3,5 @@
   font-size: 1.6em;
   cursor: initial;
   user-select: none;
+  --shadow-shift: 0.2rem;
 }

src/components/widgets/quote/quote.scss

@@ -5,6 +5,7 @@
   text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   cursor: initial;
   user-select: none;
+	--shadow-shift: 0.125rem;
 }
 
 @media screen and (min-width: 600px) {
@@ -18,6 +19,7 @@
   font-size: 0.9em;
   letter-spacing: 0.5px;
   user-select: none;
+	--shadow-shift: 0.125rem;
 
   svg {
     margin-left: 10px;

src/components/widgets/time/clock.scss

@@ -5,6 +5,7 @@
   margin: 0;
   cursor: initial;
   user-select: none;
+  --shadow-shift: 0.4rem;
 }
 
 .ampm {

src/modules/default_settings.json

@@ -238,5 +238,9 @@
   {
     "name": "offlineMode",
     "value": false
+  },
+  {
+    "name": "animations",
+    "value": true
   }
 ]

src/modules/helpers/settings/index.js

@@ -57,6 +57,28 @@ export function loadSettings(hotreload) {
     });
   }
 
+  if (localStorage.getItem('animations') === 'false') { 
+    document.body.classList.add('no-animations');
+  } else {
+    document.body.classList.remove('no-animations');
+  }
+
+  if (localStorage.getItem('textBorder') === 'true') {
+    const elements = ['greeting', 'clock', 'quote', 'quoteauthor'];
+    elements.forEach((element) => {
+      try {
+        document.querySelector('.' + element).classList.add('textBorder')
+      } catch (e) {}
+    });
+  } else {
+    const elements = ['greeting', 'clock', 'quote', 'quoteauthor'];
+    elements.forEach((element) => {
+      try {
+        document.querySelector('.' + element).classList.remove('textBorder')
+      } catch (e) {}
+    });
+  }
+
   const css = localStorage.getItem('customcss');
   if (css) {
     document.head.insertAdjacentHTML('beforeend', '<style id="customcss">' + css + '</style>');

src/scss/_themes.scss

@@ -35,3 +35,9 @@ $modal-link-dark: map-get($modal, 'modal-link-dark');
   --photo-info: #{$photo-info-dark};
   --modal-link: #{$modal-link-dark};
 }
+
+.no-animations {
+  .ReactModal__Content, button, svg, input[type=text], .MuiSwitch-switchBase {
+    transition: none !important;
+  }
+}

src/scss/index.scss

@@ -34,6 +34,10 @@ body {
   text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
 }
 
+.textBorder {
+  filter: drop-shadow(var(--shadow-shift) var(--shadow-shift) 0 #111111CC);
+}
+
 ::placeholder {
   color: map-get($theme-colours, 'main');
   opacity: 1;