fix: welcome import, widget zoom

package.json

@@ -15,8 +15,8 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@floating-ui/react-dom": "2.0.8",
-    "@fontsource/lexend-deca": "5.0.8",
+    "@fontsource/lexend-deca": "5.0.12",
-    "@fontsource/montserrat": "5.0.16",
+    "@fontsource/montserrat": "5.0.17",
     "@muetab/react-color-gradient-picker": "0.1.2",
     "@muetab/react-sortable-hoc": "^2.0.1",
     "@mui/material": "5.15.15",
@@ -33,12 +33,12 @@
     "react-toastify": "10.0.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.2.1",
+    "@commitlint/cli": "^19.2.2",
-    "@commitlint/config-conventional": "^19.1.0",
+    "@commitlint/config-conventional": "^19.2.2",
     "@eartharoid/deep-merge": "^0.0.2",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "adm-zip": "^0.5.12",
-    "eslint": "^8.57.0",
+    "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
     "husky": "^9.0.11",

src/components/Layout/Settings/Header/Header.jsx

@@ -65,26 +65,24 @@ function Header(props) {
   };
 
   return (
-    <>
+    <div className="modalHeader">
-      <div className="modalHeader">
+      <span className="mainTitle">
-        <span className="mainTitle">
+        {props.secondaryTitle && (
-          {props.secondaryTitle && (
+          <>
-            <>
+            <span className="backTitle" onClick={props.goBack}>
-              <span className="backTitle" onClick={props.goBack}>
+              {props.title}
-                {props.title}
+            </span>
-              </span>
+            <MdOutlineKeyboardArrowRight />
-              <MdOutlineKeyboardArrowRight />
+          </>
-            </>
+        )}
-          )}
+        {props.secondaryTitle || props.title}
-          {props.secondaryTitle || props.title}
+      </span>
-        </span>
+      <div className="headerActions">
-        <div className="headerActions">
+        {props.visibilityToggle && <VisibilityToggle />}
-          {props.visibilityToggle && <VisibilityToggle />}
+        {props.report !== false && <ReportButton />}
-          {props.report !== false && <ReportButton />}
+        {props.children}
-          {props.children}
-        </div>
       </div>
-    </>
+    </div>
   );
 }
 

src/features/greeting/options/GreetingOptions.jsx

@@ -273,7 +273,7 @@ const GreetingOptions = () => {
           {CustomEventsSection()}
         </>
       ) : (
-        <PreferencesWrapper setting="greeting" zoomSetting="zoomGreeting" visibilityToggle={true}>
+        <PreferencesWrapper setting="greeting" zoomSetting="zoomGreeting" category="greeting" visibilityToggle={true}>
           <AdditionalOptions />
           <Section
             title="Events"

src/features/message/options/MessageOptions.jsx

@@ -69,7 +69,12 @@ class MessageOptions extends PureComponent {
           zoomSetting="zoomMessage"
           visibilityToggle={true}
         />
-        <PreferencesWrapper setting="message" visibilityToggle={true} zoomSetting="zoomMessage">
+        <PreferencesWrapper
+          setting="message"
+          visibilityToggle={true}
+          category="message"
+          zoomSetting="zoomMessage"
+        >
           <Row final={true}>
             <Content title={variables.getMessage(`${MESSAGE_SECTION}.messages`)} />
             <Action>

src/features/misc/sections/Experimental.jsx

@@ -37,7 +37,7 @@ function ExperimentalOptions() {
             marks={values.experimental}
             element=".other"
           />
-          <p style={{ textAlign: 'left' }}>Send Event</p>
+          <p style={{ textAlign: 'left', width: '100%' }}>Send Event</p>
           <TextField
             label={'Type'}
             value={eventType}
@@ -57,7 +57,7 @@ function ExperimentalOptions() {
           <Button
             type="settings"
             onClick={() => EventBus.emit(eventType, eventName)}
-            label="send"
+            label="Send"
           />
         </Action>
       </Row>

src/features/misc/sections/overview_skeletons/Clock.jsx

@@ -15,16 +15,16 @@ function ClockSkeleton() {
       </Suspense>
     );
   } else if (localStorage.getItem('timeType') === 'percentageComplete') {
-    return <span className="new-clock clock-container clockSkeleton">68%</span>;
+    return <span className="vertical-clock clock-container clockSkeleton">68%</span>;
   } else if (localStorage.getItem('timeType') === 'verticalClock') {
     return (
-      <span className="new-clock clock-container" style={{ fontSize: '30px' }}>
+      <span className="vertical-clock clock-container" style={{ fontSize: '30px' }}>
         <div className="hour">10</div>
         <div className="minute">23</div>
       </span>
     );
   } else {
-    return <span className="new-clock clock-container clockSkeleton">10:24</span>;
+    return <span className="vertical-clock clock-container clockSkeleton">10:24</span>;
   }
 }
 

src/features/quicklinks/options/QuickLinksOptions.jsx

@@ -210,6 +210,7 @@ class QuickLinksOptions extends PureComponent {
         />
         <PreferencesWrapper
           setting="quicklinksenabled"
+          category="quicklinks"
           visibilityToggle={true}
           zoomSetting="zoomQuicklinks"
         >

src/features/quote/options/QuoteOptions.jsx

@@ -277,7 +277,12 @@ class QuoteOptions extends PureComponent {
           </Row>
         )}
         {!this.state.sourceSection && (
-          <PreferencesWrapper setting="quote" zoomSetting="zoomQuote" visibilityToggle={true}>
+          <PreferencesWrapper
+            setting="quote"
+            zoomSetting="zoomQuote"
+            category="quote"
+            visibilityToggle={true}
+          >
             <Section
               icon={<MdSource />}
               title={variables.getMessage('modals.main.settings.sections.background.source.title')}

src/features/stats/options/StatsOptions.jsx

@@ -73,16 +73,17 @@ class Stats extends PureComponent {
   render() {
     const achievementElement = (key, id, achieved, timestamp) => {
       const { name, description } = getLocalisedAchievementData(id);
-      console.log(timestamp);
 
       return (
         <div className="achievement" key={key}>
           {achieved ? <FaTrophy className="trophy" /> : <MdLock className="trophyLocked" />}
           <div className={'achievementContent' + (achieved ? ' achieved' : '')}>
             {achieved ? (
-              <span className="timestamp">
+              timestamp !== undefined ? (
-                <MdAccessTime /> {new Date(timestamp).toLocaleDateString()}
+                <span className="timestamp">
-              </span>
+                  <MdAccessTime /> {new Date(timestamp).toLocaleDateString()}
+                </span>
+              ) : null
             ) : null}
             <span className="achievementTitle">{name}</span>
             <span className="subtitle">{achieved ? description : '?????'}</span>
@@ -165,7 +166,7 @@ class Stats extends PureComponent {
               )}
               {statsElement(
                 variables.getMessage(`${STATS_SECTION}.sections.addons_installed`),
-                this.state.stats.marketplace ? this.state.stats.marketplace['install'] : 0,
+                this.state.stats.marketplace['install'] ? this.state.stats.marketplace['install'].length : 0,
               )}
             </div>
           </div>

src/features/time/clock.scss

@@ -49,8 +49,9 @@
   }
 }
 
-.new-clock {
+.vertical-clock {
   line-height: 100%;
+  user-select: none;
 
   .seconds {
     font-size: 0.2em;

src/features/time/components/VerticalClock.jsx

@@ -3,7 +3,7 @@ function VerticalClock({ finalHour, finalMinute, finalSeconds }) {
   const minuteColour = localStorage.getItem('minuteColour') || '#ƒff';
 
   return (
-    <span className="new-clock clock-container">
+    <span className="vertical-clock clock-container">
       <div className="hour" style={{ color: hourColour }}>
         {finalHour}
       </div>

src/features/time/options/DateOptions.jsx

@@ -88,7 +88,7 @@ function DateOptions() {
         zoomSetting="zoomDate"
         visibilityToggle={true}
       />
-      <PreferencesWrapper setting="date" visibilityToggle={true} zoomSetting="zoomDate">
+      <PreferencesWrapper setting="date" visibilityToggle={true} category="date" zoomSetting="zoomDate">
         <Row>
           <Content
             title={variables.getMessage('modals.main.settings.sections.time.type')}

src/features/time/options/TimeOptions.jsx

@@ -210,7 +210,12 @@ const TimeOptions = () => {
         zoomSetting="zoomClock"
         visibilityToggle={true}
       />
-      <PreferencesWrapper setting="time" zoomSetting="zoomClock" visibilityToggle={true}>
+      <PreferencesWrapper
+        setting="time"
+        zoomSetting="zoomClock"
+        category="clock"
+        visibilityToggle={true}
+      >
         <WidgetType />
         {getTimeSettings()}
       </PreferencesWrapper>

src/features/weather/Weather.jsx

@@ -21,15 +21,20 @@ class WeatherWidget extends PureComponent {
 
   async componentDidMount() {
     EventBus.on('refresh', async (data) => {
-      // Convert the callback function to an async function
       if (data === 'weather') {
         const weatherData = await getWeather(this.state.location, this.state.done);
         this.setState(weatherData);
+
+        const zoomWeather = `${Number((localStorage.getItem('zoomWeather') || 100) / 100)}em`;
+        document.querySelector('.weather').style.fontSize = zoomWeather;
       }
     });
 
     const weatherData = await getWeather(this.state.location, this.state.done);
     this.setState(weatherData);
+
+    const zoomWeather = `${Number((localStorage.getItem('zoomWeather') || 100) / 100)}em`;
+    document.querySelector('.weather').style.fontSize = zoomWeather;
   }
 
   componentWillUnmount() {

src/features/weather/api/getWeather.js

@@ -14,9 +14,6 @@ export const getWeather = async (location, done) => {
     return;
   }
 
-  const zoomWeather = `${Number((localStorage.getItem('zoomWeather') || 100) / 100)}em`;
-  document.querySelector('.weather').style.fontSize = zoomWeather;
-
   try {
     const response = await fetch(
       variables.constants.API_URL + `/weather?city=${location}&language=${variables.languagecode}`,
@@ -65,6 +62,4 @@ export const getWeather = async (location, done) => {
   } catch (error) {
     console.error('Fetch Error: ', error);
   }
-
-  document.querySelector('.top-weather svg').style.fontSize = zoomWeather;
 };

src/features/weather/options/WeatherOptions.jsx

@@ -35,7 +35,6 @@ class WeatherOptions extends PureComponent {
 
   render() {
     const weatherType = localStorage.getItem('weatherType');
-
     const WEATHER_SECTION = 'modals.main.settings.sections.weather';
 
     const WidgetType = () => {

src/features/welcome/components/Sections/Final.jsx

@@ -29,11 +29,10 @@ function Final(props) {
           </span>
         </div>
         {props.importedSettings.length !== 0 && (
-          <div className="toggle" onClick={() => props.switchTab(3)}>
+          <div className="toggle" onClick={() => props.switchTab(2)}>
             {variables.getMessage('modals.welcome.sections.final.imported', {
               amount: props.importedSettings.length,
             })}{' '}
-            {props.importedSettings.length}
           </div>
         )}
       </div>

src/features/welcome/components/Sections/ImportSettings.jsx

@@ -7,7 +7,7 @@ import default_settings from 'utils/data/default_settings.json';
 
 function ImportSettings(props) {
   const importSettings = (e) => {
-    importSettingsFunction(e);
+    importSettingsFunction(e, true);
 
     const settings = [];
     const data = JSON.parse(e);

src/utils/settings/import.js

@@ -6,7 +6,7 @@ import variables from 'config/variables';
  * file.
  * @param e - The JSON settings string to import
  */
-export function importSettings(e) {
+export function importSettings(e, initial = false) {
   const content = JSON.parse(e);
 
   Object.keys(content).forEach((key) => {
@@ -14,5 +14,8 @@ export function importSettings(e) {
   });
 
   toast(variables.getMessage('toasts.imported'));
-  variables.stats.postEvent('tab', 'Settings imported');
+  // don't show achievements on welcome
+  if (!initial) {
+    variables.stats.postEvent('tab', 'Settings imported');
+  }
 }