refactor(weather options): New tile-focused approach to options pages

Co-authored-by: David Ralph <me@davidcralph.co.uk>

src/components/Elements/MainModal/backend/TabNavbar.jsx

@@ -170,7 +170,10 @@ const TabNavbar = ({ modalClose }) => {
                 onClick={() => setSubSection('')}
                 className={clsx(
                   'text-xl capitalize tracking-normal transition-all duration-150 ease-in-out',
-                  { 'text-neutral-300 cursor-pointer hover:text-neutral-100': subSection !== '' },
+                  {
+                    'dark:text-neutral-300 text-neutral-600 cursor-pointer hover:text-black dark:hover:text-neutral-100':
+                      subSection !== '',
+                  },
                 )}
               >
                 {subTab}
@@ -218,8 +221,8 @@ const TabNavbar = ({ modalClose }) => {
                 setSelectedCollection(null);
               }}
               className={`${
-                activeTab === tab.id ? '' : 'hover:text-white/70'
-              } transition-all duration-800	ease-in-out flex flex-row gap-2 items-center relative rounded-sm px-3 py-1.5 text-sm text-white outline-sky-400 transition focus-visible:outline-2`}
+                activeTab === tab.id ? '' : 'dark:hover:text-white/70 hover:text-black/70'
+              } dark:text-white text-black transition-all duration-800	ease-in-out flex flex-row gap-2 items-center relative rounded-sm px-3 py-1.5 text-sm outline-sky-400 transition focus-visible:outline-2`}
               style={{
                 WebkitTapHighlightColor: 'transparent',
               }}
@@ -235,7 +238,7 @@ const TabNavbar = ({ modalClose }) => {
               {variables.getMessage(`modals.main.navbar.${tab.id}`)}
               {tab.id === 'addons' && (
                 <AnimatePresence>
-                  <div className="px-3 py-1 bg-[#424242] rounded-lg text-xs">
+                  <div className="px-3 py-1 dark:bg-[#424242] bg-neutral-300 rounded-lg text-xs">
                     <motion.span
                       key={installedItems.length}
                       initial={{ opacity: 0, y: -10 }}
@@ -248,7 +251,7 @@ const TabNavbar = ({ modalClose }) => {
                 </AnimatePresence>
               )}
               {tab.id === 'marketplace' && (
-                <span className="px-3 py-1 bg-rose-800 rounded-lg text-xs border border-rose-700">
+                <span className="px-3 py-1 bg-rose-800 rounded-lg text-xs border border-rose-700 text-white">
                   NEW
                 </span>
               )}

src/components/Form/Settings/Slider/Slider.jsx

@@ -59,17 +59,19 @@ function SliderComponent(props) {
           {variables.getMessage('settings:buttons.reset')}
         </span>
       </span>
-      <Slider
-        value={Number(value)}
-        onChange={handleChange}
-        valueLabelDisplay="auto"
-        default={Number(props.default)}
-        min={Number(props.min)}
-        max={Number(props.max)}
-        step={Number(props.step) || 1}
-        getAriaValueText={(value) => `${value}`}
-        marks={props.marks || []}
-      />
+      <div class="mx-auto">
+        <Slider
+          value={Number(value)}
+          onChange={handleChange}
+          valueLabelDisplay="auto"
+          default={Number(props.default)}
+          min={Number(props.min)}
+          max={Number(props.max)}
+          step={Number(props.step) || 1}
+          getAriaValueText={(value) => `${value}`}
+          marks={props.marks || []}
+        />
+      </div>
     </>
   );
 }

src/components/Layout/Settings/Hero/Hero.jsx

@@ -0,0 +1,99 @@
+import variables from 'config/variables';
+import { useState, useEffect } from 'react';
+import EventBus from 'utils/eventbus';
+import { Button } from 'components/Elements';
+import { MdFlag, MdOutlineVisibilityOff, MdOutlineVisibility } from 'react-icons/md';
+import Slider from '../../../Form/Settings/Slider/Slider';
+import values from 'utils/data/slider_values.json';
+
+const Preview = (props) => {
+  return (
+    <div>
+      <h1 className="py-3 uppercase tracking-tight text-neutral-300">Preview</h1>
+      <div className="bg-modal-content-light dark:bg-modal-content-dark p-10 rounded">
+        {props.children}
+      </div>
+    </div>
+  );
+};
+
+const Controls = (props) => {
+  const [setting, setSetting] = useState(localStorage.getItem(props.setting) === 'true');
+
+  useEffect(() => {
+    setSetting(localStorage.getItem(props.setting) === 'true');
+  }, [props.setting]);
+
+  const changeSetting = () => {
+    const toggle = localStorage.getItem(props.setting) === 'true';
+    localStorage.setItem(props.setting, !toggle);
+    setSetting(!toggle);
+
+    variables.stats.postEvent(
+      'setting',
+      `${props.name} ${setting === true ? 'enabled' : 'disabled'}`,
+    );
+
+    EventBus.emit('toggle', props.setting);
+
+    if (props.element) {
+      if (!document.querySelector(props.element)) {
+        document.querySelector('.reminder-info').style.display = 'flex';
+        return localStorage.setItem('showReminder', true);
+      }
+    }
+
+    EventBus.emit('refresh', props.category);
+  };
+
+  const VisibilityToggle = () => (
+    <Button
+      type="settings"
+      onClick={changeSetting}
+      icon={setting ? <MdOutlineVisibilityOff /> : <MdOutlineVisibility />}
+      label={setting ? 'Hide' : 'Show'}
+    />
+  );
+
+  const ReportButton = () => {
+    return (
+      <Button
+        type="settings"
+        onClick={() =>
+          window.open(variables.constants.BUG_REPORT + props.title.split(' ').join('+'), '_blank')
+        }
+        icon={<MdFlag />}
+        label={variables.getMessage('settings:sections.header.report_issue')}
+      />
+    );
+  };
+
+  return (
+    <div>
+      <h1 className="py-3 uppercase tracking-tight text-neutral-300">Controls</h1>
+      <div className="bg-modal-content-light dark:bg-modal-content-dark p-10 rounded flex flex-col gap-10">
+        {props.visibilityToggle && <VisibilityToggle />}
+        {props.report !== false && <ReportButton />}
+        {(props.zoomSetting !== null || props.zoomSetting !== '') && (
+          <Slider
+            name={props.zoomSetting}
+            min="10"
+            max="400"
+            default="100"
+            display="%"
+            marks={values.zoom}
+            category={props.zoomCategory || props.category}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+const Hero = (props) => {
+  return (
+    <div className="grid grid-cols-2 w-full rounded gap-10 auto-rows-[1fr]	">{props.children}</div>
+  );
+};
+
+export { Hero, Preview, Controls };

src/components/Layout/Settings/Hero/index.jsx

@@ -0,0 +1 @@
+export * from './Hero';

src/components/Layout/Settings/PreferencesWrapper/PreferencesWrapper.jsx

@@ -32,7 +32,7 @@ const PreferencesWrapper = ({ children, ...props }) => {
     <div
       className={`preferences transition-opacity duration-700 ease-in-out ${
         shown ? 'opacity-100 pointer-events-auto' : 'opacity-50 pointer-events-none'
-      } bg-modal-content-light dark:bg-modal-content-dark p-10 rounded divide-y divide-gray-500`}
+      } bg-modal-content-light dark:bg-modal-content-dark p-10 rounded`}
     >
       {props.zoomSetting && (
         <Row>