temp: debug statements for testing

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

src/features/marketplace/components/Elements/Carousel/carousel.scss

@@ -23,7 +23,6 @@
   display: flex;
   -webkit-touch-callout: none;
   user-select: none;
-  user-select: none;
   -webkit-tap-highlight-color: transparent;
   margin-left: -10px;
 }

src/features/marketplace/components/Items/Items.jsx

@@ -116,13 +116,14 @@ function Items({
       <div className={`items ${moreByCreator ? 'creatorItems' : ''}`}>
         {items
           ?.filter((item) => filterItems(item, filter))
-          .map((item) => (
+          .map((item, index) => (
             <ItemPage
               isCurator={isCurator}
               item={item}
               toggleFunction={toggleFunction}
               type={type}
               onCollection={onCollection}
+              key={index}
             />
           ))}
       </div>

src/features/marketplace/views/Browse.jsx

@@ -215,7 +215,7 @@ class Marketplace extends PureComponent {
   }
 
   sortMarketplace(data, sendEvent) {
-    const value = localStorage.getItem('sortMarketplace');
+    const value = localStorage.getItem('sortMarketplace') || 'a-z';
     let items = data || this.state.items;
     if (!items) {
       return;

src/features/navbar/options/AppsOptions.jsx

@@ -0,0 +1,166 @@
+import variables from 'config/variables';
+
+import { useState, memo } from 'react';
+
+import Modal from 'react-modal';
+import {
+  MdAddLink,
+} from 'react-icons/md';
+
+import { AddModal } from 'components/Elements/AddModal';
+import { Button } from 'components/Elements';
+
+import { Row, Content, Action } from 'components/Layout/Settings/Item';
+
+import { getTitleFromUrl, isValidUrl } from 'utils/links';
+import { QuickLinks } from 'features/quicklinks';
+
+function AppsOptions(appsEnabled) {
+  const [appsModalInfo, setAppsModalInfo] = useState({
+    newLink: false,
+    edit: false,
+    items: JSON.parse(localStorage.getItem('applinks')),
+    urlError: '',
+    iconError: '',
+    editData: null,
+  });
+
+  const addLink = async (name, url, icon) => {
+    const data = JSON.parse(localStorage.getItem('applinks'));
+
+    if (!url.startsWith('http://') && !url.startsWith('https://')) {
+      url = 'https://' + url;
+    }
+
+    if (url.length <= 0 || isValidUrl(url) === false) {
+      return setAppsModalInfo((oldState) => ({
+        ...oldState,
+        urlError: variables.getMessage('widgets.quicklinks.url_error'),
+      }));
+    }
+
+    if (icon.length > 0 && isValidUrl(icon) === false) {
+      return setAppsModalInfo((oldState) => ({
+        ...oldState,
+        iconError: variables.getMessage('widgets.quicklinks.icon_error'),
+      }));
+    }
+
+    data.push({
+      name: name || (await getTitleFromUrl(url)),
+      url,
+      icon: icon || '',
+      key: Math.random().toString(36).substring(7) + 1,
+    });
+
+    localStorage.setItem('applinks', JSON.stringify(data));
+
+    setAppsModalInfo({
+      newLink: false,
+      edit: false,
+      items: data,
+      urlError: '',
+      iconError: '',
+    });
+
+    variables.stats.postEvent('feature', 'App link add');
+  };
+
+  const startEditLink = (data) => {
+    setAppsModalInfo((oldState) => ({
+      ...oldState,
+      edit: true,
+      editData: data,
+    }));
+  };
+
+  const editLink = async (og, name, url, icon) => {
+    const data = JSON.parse(localStorage.getItem('applinks'));
+    const dataobj = data.find((i) => i.key === og.key);
+    dataobj.name = name || (await getTitleFromUrl(url));
+    dataobj.url = url;
+    dataobj.icon = icon || '';
+
+    localStorage.setItem('applinks', JSON.stringify(data));
+
+    setAppsModalInfo((oldState) => ({
+      ...oldState,
+      items: data,
+      edit: false,
+      newLink: false,
+    }));
+  };
+
+  const deleteLink = (key, event) => {
+    event.preventDefault();
+
+    // remove link from array
+    const data = JSON.parse(localStorage.getItem('applinks')).filter((i) => i.key !== key);
+
+    localStorage.setItem('applinks', JSON.stringify(data));
+
+    setAppsModalInfo((oldState) => ({
+      ...oldState,
+      items: data,
+    }));
+
+    variables.stats.postEvent('feature', 'App link delete');
+  };
+
+  return (
+    <>
+      <Row final={true} inactive={!appsEnabled}>
+        <Content
+          title={variables.getMessage('widgets.navbar.apps.title')}
+          subtitle={variables.getMessage(
+            'modals.main.settings.sections.appearance.navbar.apps_subtitle',
+          )}
+        />
+        <Action>
+          <Button
+            type="settings"
+            onClick={() => setAppsModalInfo((oldState) => ({ ...oldState, newLink: true }))}
+            icon={<MdAddLink />}
+            label={variables.getMessage('modals.main.settings.sections.quicklinks.add_link')}
+          />
+        </Action>
+      </Row>
+
+      <div className="messagesContainer">
+        {appsModalInfo.items.map((item, i) => (
+          <QuickLinks
+            key={i}
+            item={item}
+            startEditLink={() => startEditLink(item)}
+            deleteLink={(key, e) => deleteLink(key, e)}
+          />
+        ))}
+      </div>
+
+      <Modal
+        closeTimeoutMS={100}
+        onRequestClose={() =>
+          setAppsModalInfo((oldState) => ({ ...oldState, newLink: false, edit: false }))
+        }
+        isOpen={appsModalInfo.edit || appsModalInfo.newLink}
+        className="Modal resetmodal mainModal"
+        overlayClassName="Overlay resetoverlay"
+        ariaHideApp={false}
+      >
+        <AddModal
+          urlError={appsModalInfo.urlError}
+          addLink={(name, url, icon) => addLink(name, url, icon)}
+          editLink={(og, name, url, icon) => editLink(og, name, url, icon)}
+          edit={appsModalInfo.edit}
+          editData={appsModalInfo.editData}
+          closeModal={() =>
+            setAppsModalInfo((oldState) => ({ ...oldState, newLink: false, edit: false }))
+          }
+        />
+      </Modal>
+    </>
+  );
+}
+
+const MemorizedAppsOptions = memo(AppsOptions);
+export { MemorizedAppsOptions as default, MemorizedAppsOptions as AppsOptions };

src/features/navbar/options/NavbarOptions.jsx

@@ -2,9 +2,7 @@ import variables from 'config/variables';
 
 import { useState, memo } from 'react';
 
-import Modal from 'react-modal';
 import {
-  MdAddLink,
   MdAssignment,
   MdCropFree,
   MdRefresh,
@@ -12,112 +10,19 @@ import {
   MdOutlineApps,
 } from 'react-icons/md';
 
-import { AddModal } from 'components/Elements/AddModal';
-
 import { Checkbox, Dropdown } from 'components/Form';
-import { Button } from 'components/Elements';
 import EventBus from 'utils/eventbus';
 
 import { Row, Content, Action } from 'components/Layout/Settings/Item';
 import { Header } from 'components/Layout/Settings';
-import { getTitleFromUrl, isValidUrl } from 'utils/links';
-import { QuickLinks } from 'features/quicklinks';
+
+import AppsOptions from './AppsOptions';
 
 function NavbarOptions() {
   const [showRefreshOptions, setShowRefreshOptions] = useState(
     localStorage.getItem('refresh') === 'true',
   );
   const [appsEnabled, setAppsEnabled] = useState(localStorage.getItem('appsEnabled') === 'true');
-  const [appsModalInfo, setAppsModalInfo] = useState({
-    newLink: false,
-    edit: false,
-    items: JSON.parse(localStorage.getItem('applinks')),
-    urlError: '',
-    iconError: '',
-    editData: null,
-  });
-
-  const addLink = async (name, url, icon) => {
-    const data = JSON.parse(localStorage.getItem('applinks'));
-
-    if (!url.startsWith('http://') && !url.startsWith('https://')) {
-      url = 'https://' + url;
-    }
-
-    if (url.length <= 0 || isValidUrl(url) === false) {
-      return setAppsModalInfo((oldState) => ({
-        ...oldState,
-        urlError: variables.getMessage('widgets.quicklinks.url_error'),
-      }));
-    }
-
-    if (icon.length > 0 && isValidUrl(icon) === false) {
-      return this.setState((oldState) => ({
-        ...oldState,
-        iconError: variables.getMessage('widgets.quicklinks.url_error'),
-      }));
-    }
-
-    data.push({
-      name: name || (await getTitleFromUrl(url)),
-      url,
-      icon: icon || '',
-      key: Math.random().toString(36).substring(7) + 1,
-    });
-
-    localStorage.setItem('applinks', JSON.stringify(data));
-
-    setAppsModalInfo({
-      newLink: false,
-      edit: false,
-      items: data,
-      urlError: '',
-      iconError: '',
-    });
-
-    variables.stats.postEvent('feature', 'App link add');
-  };
-
-  const startEditLink = (data) => {
-    setAppsModalInfo((oldState) => ({
-      ...oldState,
-      edit: true,
-      editData: data,
-    }));
-  };
-
-  const editLink = async (og, name, url, icon) => {
-    const data = JSON.parse(localStorage.getItem('applinks'));
-    const dataobj = data.find((i) => i.key === og.key);
-    dataobj.name = name || (await getTitleFromUrl(url));
-    dataobj.url = url;
-    dataobj.icon = icon || '';
-
-    localStorage.setItem('applinks', JSON.stringify(data));
-
-    setAppsModalInfo((oldState) => ({
-      ...oldState,
-      items: data,
-      edit: false,
-      newLink: false,
-    }));
-  };
-
-  const deleteLink = (key, event) => {
-    event.preventDefault();
-
-    // remove link from array
-    const data = JSON.parse(localStorage.getItem('applinks')).filter((i) => i.key !== key);
-
-    localStorage.setItem('applinks', JSON.stringify(data));
-
-    setAppsModalInfo((oldState) => ({
-      ...oldState,
-      items: data,
-    }));
-
-    variables.stats.postEvent('feature', 'App link delete');
-  };
 
   const NAVBAR_SECTION = 'modals.main.settings.sections.appearance.navbar';
 
@@ -260,27 +165,6 @@ function NavbarOptions() {
     );
   };
 
-  const AppsOptions = () => {
-    return (
-      <Row final={true} inactive={!appsEnabled}>
-        <Content
-          title={variables.getMessage('widgets.navbar.apps.title')}
-          subtitle={variables.getMessage(
-            'modals.main.settings.sections.appearance.navbar.apps_subtitle',
-          )}
-        />
-        <Action>
-          <Button
-            type="settings"
-            onClick={() => setAppsModalInfo((oldState) => ({ ...oldState, newLink: true }))}
-            icon={<MdAddLink />}
-            label={variables.getMessage('modals.main.settings.sections.quicklinks.add_link')}
-          />
-        </Action>
-      </Row>
-    );
-  };
-
   return (
     <>
       <Header
@@ -293,40 +177,7 @@ function NavbarOptions() {
       <AdditionalSettings />
       <NavbarOptions />
       <RefreshOptions />
-      <AppsOptions />
-
-      <div className="messagesContainer">
-        {appsModalInfo.items.map((item, i) => (
-          <QuickLinks
-            key={i}
-            item={item}
-            startEditLink={() => startEditLink(item)}
-            deleteLink={(key, e) => deleteLink(key, e)}
-          />
-        ))}
-      </div>
-
-      <Modal
-        closeTimeoutMS={100}
-        onRequestClose={() =>
-          setAppsModalInfo((oldState) => ({ ...oldState, newLink: false, edit: false }))
-        }
-        isOpen={appsModalInfo.edit || appsModalInfo.newLink}
-        className="Modal resetmodal mainModal"
-        overlayClassName="Overlay resetoverlay"
-        ariaHideApp={false}
-      >
-        <AddModal
-          urlError={appsModalInfo.urlError}
-          addLink={(name, url, icon) => addLink(name, url, icon)}
-          editLink={(og, name, url, icon) => editLink(og, name, url, icon)}
-          edit={appsModalInfo.edit}
-          editData={appsModalInfo.editData}
-          closeModal={() =>
-            setAppsModalInfo((oldState) => ({ ...oldState, newLink: false, edit: false }))
-          }
-        />
-      </Modal>
+      <AppsOptions appsEnabled={appsEnabled} />
     </>
   );
 }

src/features/navbar/scss/index.scss

@@ -93,18 +93,22 @@
   display: flex;
   flex-flow: row;
   gap: 10px;
+
   .navbarButtonOption {
     .subtitle {
       font-size: 12px;
     }
+
     svg {
       background: linear-gradient(238.7deg, #ff5c25 13.8%, #d21a11 49.49%, #ff456e 87.48%);
       padding: 5px;
       border-radius: 100%;
+
       @include themed {
         color: t($color);
       }
     }
+
     cursor: pointer;
     width: 70px !important;
     border: none;
@@ -118,15 +122,18 @@
     justify-content: center;
     text-align: center;
     gap: 10px;
+
     @include themed {
       background: t($modal-sidebarActive);
       border-radius: t($borderRadius);
       box-shadow: 0 0 0 1px t($btn-backgroundHover);
+
       &:hover {
         background: t($modal-sidebar);
       }
     }
   }
+
   .disabled {
     @include themed {
       background: t($modal-sidebar);
@@ -136,6 +143,7 @@
         background: t($modal-sidebarActive);
       }
     }
+
     svg {
       @include themed {
         background-image: t($slightGradient);

src/features/quote/quote.scss

@@ -4,7 +4,7 @@
   font-size: 0.8em;
   text-shadow: 0 0 10px rgb(0 0 0 / 30%);
   cursor: initial;
-  -webkit-user-select: none;
+  user-select: none;
   user-select: none;
 
   --shadow-shift: 0.125rem;
@@ -17,7 +17,7 @@
 .quoteauthor {
   font-size: 0.9em;
   letter-spacing: 0.5px;
-  -webkit-user-select: none;
+  user-select: none;
   user-select: none;
 
   --shadow-shift: 0.125rem;
@@ -36,7 +36,7 @@ h1.quoteauthor {
 .quoteAuthorLink {
   text-decoration: none;
   color: white;
-  -webkit-user-select: none;
+  user-select: none;
   user-select: none;
 }
 
@@ -64,6 +64,7 @@ h1.quoteauthor {
 
 .author-license {
   font-size: clamp(8px, 2.5vw, 0.1em);
+
   // max-width: 150px;
   // white-space: nowrap;
   // overflow-x: hidden;

src/features/search/options/SearchOptions.jsx

@@ -1,7 +1,7 @@
 import variables from 'config/variables';
 import { PureComponent } from 'react';
 import { toast } from 'react-toastify';
-import { MenuItem, TextField } from '@mui/material';
+import { TextField } from '@mui/material';
 
 import { Header, Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
 import { Dropdown, Checkbox } from 'components/Form/Settings';

src/features/time/Clock.jsx

@@ -58,12 +58,12 @@ export default class Clock extends PureComponent {
 
           if (localStorage.getItem('seconds') === 'true') {
             sec = `:${('00' + now.getSeconds()).slice(-2)}`;
-            this.setState({ finalSeconds: `:${('00' + now.getSeconds()).slice(-2)}` });
+            this.setState({ finalSeconds: `${('00' + now.getSeconds()).slice(-2)}` });
           }
 
           if (localStorage.getItem('timeformat') === 'twentyfourhour') {
             if (zero === 'false') {
-              time = `${now.getHours()}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
+              time = `${now.getHours()}:${('00' + now.getMinutes()).slice(-2)}:${sec}`;
               this.setState({
                 finalHour: `${now.getHours()}`,
                 finalMinute: `${('00' + now.getMinutes()).slice(-2)}`,

src/features/time/clock.scss

@@ -56,7 +56,8 @@
   font-size: 4em;
 
   .seconds {
-    font-size: 0.2em;
+    font-size: 7rem;
+    margin: 50px;
     line-height: 0;
   }
 }

src/features/time/components/AnalogClock.jsx

@@ -1,10 +1,12 @@
 import { Suspense, lazy } from 'react';
+
 const Analog = lazy(() => import('react-clock'));
 
 function AnalogClock({ time }) {
   const enabled = (setting) => {
     return localStorage.getItem(setting) === 'true';
   };
+
   return (
     <Suspense fallback={<></>}>
       <div className={`clockBackground ${enabled('roundClock') ? 'round' : ''}`}>

src/features/time/components/VerticalClock.jsx

@@ -1,6 +1,7 @@
 function VerticalClock({ finalHour, finalMinute, finalSeconds }) {
   const hourColour = localStorage.getItem('hourColour') || '#fff';
-  const minuteColour = localStorage.getItem('minuteColour') || '#ƒff';
+  const minuteColour = localStorage.getItem('minuteColour') || '#fff';
+  const secondColour = localStorage.getItem('secondColour') || '#fff';
 
   return (
     <span className="vertical-clock clock-container">
@@ -10,7 +11,9 @@ function VerticalClock({ finalHour, finalMinute, finalSeconds }) {
       <div className="minute" style={{ color: minuteColour }}>
         {finalMinute}
       </div>
-      <div className="seconds">{finalSeconds}</div>
+      <div className="seconds" style={{ color: secondColour }}>
+        {finalSeconds}
+      </div>
     </span>
   );
 }

src/features/time/options/TimeOptions.jsx

@@ -12,6 +12,9 @@ const TimeOptions = () => {
   const [minuteColour, setMinuteColour] = useState(
     localStorage.getItem('minuteColour') || '#ffffff',
   );
+  const [secondColour, setSecondColour] = useState(
+    localStorage.getItem('secondColour') || '#ffffff',
+  );
   const TIME_SECTION = 'modals.main.settings.sections.time';
 
   const updateColour = (type, event) => {
@@ -20,6 +23,8 @@ const TimeOptions = () => {
       setHourColour(colour);
     } else if (type === 'minuteColour') {
       setMinuteColour(colour);
+    } else if (type === 'secondColour') {
+      setSecondColour(colour);
     }
     localStorage.setItem(type, colour);
   };
@@ -183,6 +188,32 @@ const TimeOptions = () => {
           </span>
         </Action>
       </Row>
+      <Row>
+        <Content
+          title={variables.getMessage(
+            'modals.main.settings.sections.time.vertical_clock.change_second_colour',
+          )}
+        />
+        <Action>
+          <div className="colourInput">
+            <input
+              type="color"
+              name="secondColour"
+              className="secondColour"
+              onChange={(event) => updateColour('secondColour', event)}
+              value={secondColour}
+            ></input>
+            <label htmlFor={'secondColour'} className="customBackgroundHex">
+              {secondColour}
+            </label>
+          </div>
+          <span className="link" onClick={() => localStorage.setItem('secondColour', '#ffffff')}>
+            <MdRefresh />
+            {variables.getMessage('modals.main.settings.buttons.reset')}
+          </span>
+        </Action>
+      </Row>
+      
       {digitalSettings}
     </>
   );

src/features/weather/weather.scss

@@ -12,7 +12,6 @@
   transition: 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
   display: flex;
   flex-flow: column;
-
   animation: fadeIn 1s;
 
   &:hover {
@@ -152,6 +151,7 @@
   .minmax {
     max-width: fit-content;
     background: transparent !important;
+
     .subtitle {
       margin-bottom: 5px;
     }