refactor: cleanup and remove unused stuff

2026-07-27 02:31:06 +02:00 · 2022-04-16 19:25:42 +01:00
parent 987a7eda6e
commit 4691ccf166
60 changed files with 414 additions and 491 deletions
--- a/src/components/modals/main/marketplace/Collection.jsx
+++ b/src/components/modals/main/marketplace/Collection.jsx
@@ -1,43 +0,0 @@
-import variables from 'modules/variables';
-
-export default function Collection({ items, toggleFunction }) {
-  return [
-    <div className="collection starWars">
-      <div className="content">
-        <div className="tags">
-          <div className="tag">
-            <span>Star Wars</span>
-          </div>
-        </div>
-        <span className="title">Star Wars Collection</span>
-        <span className="subtitle">
-          A Collection of stuff inspired by the film franchise star wars..
-        </span>
-        <button>Explore Collection</button>
-      </div>
-    </div>,
-    <div className="items">
-      {items.map((item) => (
-        <div className="item" onClick={() => toggleFunction(item)} key={item.name}>
-          <img
-            alt="icon"
-            draggable="false"
-            src={variables.constants.DDG_IMAGE_PROXY + item.icon_url}
-          />
-          <div className="card-details">
-            <span className="card-title">{item.display_name || item.name}</span>
-            <span className="card-subtitle">{item.author}</span>
-            <div className="tags">
-              <div className="tag">
-                <span>{item.author}</span>
-              </div>
-              <div className="moreTag">
-                <span>1</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>,
-  ];
-}
--- a/src/components/modals/main/marketplace/Item.jsx
+++ b/src/components/modals/main/marketplace/Item.jsx
@@ -4,7 +4,6 @@ import Tooltip from '../../../helpers/tooltip/Tooltip';
 import { toast } from 'react-toastify';
 import {
  MdArrowBack,
-  MdFavoriteBorder,
  MdIosShare,
  MdFlag,
  MdWarning,
@@ -20,7 +19,6 @@ import Modal from 'react-modal';

 import { install, uninstall } from 'modules/helpers/marketplace';

-import Lightbox from './Lightbox';
 import ShareModal from '../../../helpers/sharemodal/ShareModal';

 export default class Item extends PureComponent {
@@ -111,7 +109,7 @@ export default class Item extends PureComponent {
        </Modal>
        <div className="flexTopMarketplace">
          <div className="returnButton">
-            <Tooltip title="back" key="cheese">
+            <Tooltip title="back" key="backArrow">
              <MdArrowBack className="backArrow" onClick={this.props.toggleFunction} />
            </Tooltip>
          </div>
@@ -197,7 +195,7 @@ export default class Item extends PureComponent {
                  <MdTranslate />
                  <div className="text">
                    <span className="header">Language</span>
-                    <span>English</span>
+                    <span>{this.props.data.data.language}</span>
                  </div>
                </div>
              ) : null}
@@ -218,10 +216,10 @@ export default class Item extends PureComponent {
            />
            {this.props.button}
            <div className="iconButtons">
-              <Tooltip title="Share" key="cheese">
+              <Tooltip title="Share" key="share">
                <MdIosShare onClick={() => this.setState({ shareModal: true })} />
              </Tooltip>
-              <Tooltip title="Report" key="cheese">
+              <Tooltip title="Report" key="report">
                <MdFlag
                  onClick={() =>
                    window.open(
--- a/src/components/modals/main/marketplace/sections/Added.jsx
+++ b/src/components/modals/main/marketplace/sections/Added.jsx
@@ -89,7 +89,7 @@ export default class Added extends PureComponent {
    }

    this.setState({
-      installed: installed,
+      installed,
    });

    if (sendEvent) {
--- a/src/components/modals/main/marketplace/sections/Create.jsx
+++ b/src/components/modals/main/marketplace/sections/Create.jsx
@@ -1,3 +1,7 @@
+// warning: this file is even worse than Background.jsx
+// if anyone wants to rewrite it to be actually decent, feel free
+// otherwise it will be cleaned up probably when alex asks me to add something here :(
+// - david
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import {
@@ -303,7 +307,10 @@ export default class Create extends PureComponent {
            onInput={(e) => setMetadata(e.target.value, 'screenshot_url')}
          />
        </SettingsItem>
-        <SettingsItem title={getMessage('modals.main.addons.create.metadata.description')} final={true}>
+        <SettingsItem
+          title={getMessage('modals.main.addons.create.metadata.description')}
+          final={true}
+        >
          <TextField
            label={getMessage('modals.main.addons.create.metadata.description')}
            varient="outlined"
--- a/src/components/modals/main/scss/index.scss
+++ b/src/components/modals/main/scss/index.scss
@@ -7,7 +7,6 @@
@import 'modules/scrollbars';

@import 'settings/main';
-@import 'settings/buttons';

@import 'marketplace/main';

--- a/src/components/modals/main/scss/marketplace/_main.scss
+++ b/src/components/modals/main/scss/marketplace/_main.scss
@@ -1,8 +1,9 @@
+// this file is too long
@import 'modules/item';
@import 'modules/buttons';
@import 'modules/featured';
@import 'modules/lightbox';
-@import '../../../../../scss/variables';
+@import 'scss/variables';

 .items {
  display: flex;
@@ -188,11 +189,13 @@
  align-items: center;
  gap: 15px;
  min-width: 100px;
+
  @include themed() {
    padding: 45px;
    border-radius: t($borderRadius);
    background: t($modal-sidebar);
    box-shadow: 0 0 0 4px t($modal-sidebarActive);
+
    svg {
      font-size: 50px;
      color: t($subColor);
@@ -288,6 +291,7 @@ p.author {
  }
 }

+// reminder to remove this url
 .collection {
  display: flex;
  justify-content: space-between;
@@ -296,22 +300,27 @@ p.author {
  background-image: linear-gradient(to left, transparent, #000),
    url('https://www.gonefullgeek.com/wp-content/uploads/2017/09/RDR2-Banner.jpg');
  align-items: center;
+
  @include themed() {
    box-shadow: 0 0 0 4px t($modal-sidebarActive);
    border-radius: t($borderRadius);
  }
+
  .content {
    display: flex;
    flex-flow: column;
    gap: 15px;
    max-width: 250px;
+
    .title {
      color: #fff !important;
    }
+
    .subtitle {
      color: #ccc !important;
    }
  }
+
  .items {
    justify-content: center;
  }
@@ -321,16 +330,19 @@ p.author {
  button {
    padding: 0 15px 0 15px;
  }
+
  display: flex;
  justify-content: space-between;
  padding: 15px;
  margin-top: 15px;
  align-items: center;
+
  @include themed() {
    box-shadow: 0 0 0 4px t($modal-sidebarActive);
    border-radius: t($borderRadius);
    background: t($modal-sidebar);
  }
+
  .content {
    display: flex;
    flex-flow: column;
@@ -346,16 +358,10 @@ p.author {
  flex-flow: column;
  gap: 15px;
  padding: 15px;
+
  @include themed() {
    box-shadow: 0 0 0 4px t($modal-sidebarActive);
    border-radius: t($borderRadius);
  }
 }

-.starWars {
-  background-image: linear-gradient(to left, transparent, #000),
-    url(https://www.broadway.org.uk/sites/default/files/styles/banner_crop/public/2019-10/star-wars-the-rise-of-skywalker-banner-min.jpg?h=639d4ef1&itok=z4KZ-3Tt);
-  background-size: cover !important;
-  background-repeat: no-repeat !important;
-  background-position: center !important;
-}
--- a/src/components/modals/main/scss/marketplace/modules/_item.scss
+++ b/src/components/modals/main/scss/marketplace/modules/_item.scss
@@ -19,36 +19,44 @@ p.description {
  flex-wrap: wrap;
  width: calc(100% - 30px);
  gap: 15px;
+
  .items {
    margin-top: 0 !important;
  }
+
  .item {
    flex: 1 0 40% !important;
  }
+
  @include themed() {
    background: t($modal-sidebar);
    box-shadow: 0 0 0 4px t($modal-sidebarActive);
    border-radius: t($borderRadius);
    padding: 15px;
+
    .infoItem {
      display: flex;
      flex-flow: row;
      align-items: center;
      gap: 15px;
      flex: 1 0 44%;
+
      svg {
        font-size: 25px;
        color: t($subColor);
      }
+
      .text {
        display: flex;
        flex-flow: column;
      }
    }
+
    .header {
      text-transform: uppercase;
      color: t($subColor);
    }
+
    span {
      color: t($color);
    }
@@ -58,6 +66,7 @@ p.description {
 .itemTitle {
  font-size: 38px;
  font-weight: 600;
+
  @include themed() {
    color: t($color);
  }
@@ -75,6 +84,7 @@ p.description {
  gap: 5px;
  transition: 0.5s;
  cursor: pointer;
+
  @include themed() {
    &:hover {
      color: t($subColor);
--- a/src/components/modals/main/scss/settings/_buttons.scss
+++ b/src/components/modals/main/scss/settings/_buttons.scss
@@ -1 +0,0 @@
-@import 'scss/modules/buttons';
--- a/src/components/modals/main/settings/sections/About.jsx
+++ b/src/components/modals/main/settings/sections/About.jsx
@@ -7,8 +7,6 @@ import { BiDonateHeart } from 'react-icons/bi';

 import Tooltip from 'components/helpers/tooltip/Tooltip';

-import SettingsItem from '../SettingsItem';
-
 import other_contributors from 'modules/other_contributors.json';

 export default class About extends PureComponent {
--- a/src/components/modals/main/settings/sections/Advanced.jsx
+++ b/src/components/modals/main/settings/sections/Advanced.jsx
@@ -10,7 +10,6 @@ import {

 import { exportSettings, importSettings } from 'modules/helpers/settings/modals';

-import Checkbox from '../Checkbox';
 import FileUpload from '../FileUpload';
 import Text from '../Text';
 import Switch from '../Switch';
@@ -69,12 +68,11 @@ export default class AdvancedSettings extends PureComponent {
            </div>
          </div>
        ) : null}
-        <SettingsItem title={getMessage('modals.main.settings.sections.advanced.timezone.title')} subtitle='Choose a timezone from a list of hundreds instead of the automatic default.'>
-          <Dropdown
-            name="timezone"
-            category="timezone"
-            manual={true}
-          >
+        <SettingsItem
+          title={getMessage('modals.main.settings.sections.advanced.timezone.title')}
+          subtitle="Choose a timezone from a list of hundreds instead of the automatic default."
+        >
+          <Dropdown name="timezone" category="timezone" manual={true}>
            <MenuItem value="auto">
              {getMessage('modals.main.settings.sections.advanced.timezone.automatic')}
            </MenuItem>
@@ -86,11 +84,7 @@ export default class AdvancedSettings extends PureComponent {
          </Dropdown>
        </SettingsItem>
        <SettingsItem title={getMessage('modals.main.settings.sections.advanced.tab_name')}>
-          <Text
-            name="tabName"
-            default={getMessage('tabname')}
-            category="other"
-          />
+          <Text name="tabName" default={getMessage('tabname')} category="other" />
        </SettingsItem>
        <FileUpload
          id="file-input"
--- a/src/components/modals/main/settings/sections/Appearance.jsx
+++ b/src/components/modals/main/settings/sections/Appearance.jsx
@@ -12,32 +12,6 @@ import { values } from 'modules/helpers/settings/modals';
 export default function AppearanceSettings() {
  const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);

-  const themeOptions = [
-    {
-      name: getMessage('modals.main.settings.sections.appearance.theme.auto'),
-      value: 'auto',
-    },
-    {
-      name: getMessage('modals.main.settings.sections.appearance.theme.light'),
-      value: 'light',
-    },
-    {
-      name: getMessage('modals.main.settings.sections.appearance.theme.dark'),
-      value: 'dark',
-    },
-  ];
-
-  const styleOptions = [
-    {
-      name: 'Legacy',
-      value: 'legacy',
-    },
-    {
-      name: 'New',
-      value: 'new',
-    },
-  ];
-
  return (
    <>
      <span className="mainTitle">
@@ -51,7 +25,24 @@ export default function AppearanceSettings() {
          <span className="subtitle">subtitle</span>
        </div>
        <div className="action">
-          <Radio name="theme" options={themeOptions} category="other" />
+          <Radio
+            name="theme"
+            options={[
+              {
+                name: getMessage('modals.main.settings.sections.appearance.theme.auto'),
+                value: 'auto',
+              },
+              {
+                name: getMessage('modals.main.settings.sections.appearance.theme.light'),
+                value: 'light',
+              },
+              {
+                name: getMessage('modals.main.settings.sections.appearance.theme.dark'),
+                value: 'dark',
+              },
+            ]}
+            category="other"
+          />
        </div>
      </div>
      <div className="settingsRow">
@@ -125,7 +116,20 @@ export default function AppearanceSettings() {
        title="Widget Style"
        subtitle="Choose between the two styles, legacy (enabled for pre 7.0 users) and our slick modern styling."
      >
-        <Radio name="widgetStyle" options={styleOptions} category="widgets" />
+        <Radio
+          name="widgetStyle"
+          options={[
+            {
+              name: 'Legacy',
+              value: 'legacy',
+            },
+            {
+              name: 'New',
+              value: 'new',
+            },
+          ]}
+          category="widgets"
+        />
      </SettingsItem>

      {/*<h3>{getMessage('modals.main.settings.sections.appearance.accessibility.title')}</h3>
--- a/src/components/modals/main/settings/sections/Message.jsx
+++ b/src/components/modals/main/settings/sections/Message.jsx
@@ -2,7 +2,7 @@ import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { MdCancel, MdAdd } from 'react-icons/md';
 import { toast } from 'react-toastify';
-import { TextField, TextareaAutosize } from '@mui/material';
+import { TextareaAutosize } from '@mui/material';
 import SettingsItem from '../SettingsItem';

 import Header from '../Header';
--- a/src/components/modals/main/settings/sections/Navbar.jsx
+++ b/src/components/modals/main/settings/sections/Navbar.jsx
@@ -50,13 +50,10 @@ export default function Navbar() {
      {showRefreshOptions ? (
        <SettingsItem
          title={getMessage('modals.main.settings.sections.appearance.navbar.refresh')}
-          subtitle='Choose what is refreshed when you click the refresh button'
+          subtitle="Choose what is refreshed when you click the refresh button"
          final={true}
        >
-          <Dropdown
-            name="refreshOption"
-            category="navbar"
-          >
+          <Dropdown name="refreshOption" category="navbar">
            <option value="page">
              {getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.page')}
            </option>
--- a/src/components/modals/main/settings/sections/Quote.jsx
+++ b/src/components/modals/main/settings/sections/Quote.jsx
@@ -1,7 +1,6 @@
 import variables from 'modules/variables';
 import React, { PureComponent } from 'react';
 import { MdCancel, MdAdd } from 'react-icons/md';
-import { TextField } from '@mui/material';
 import TextareaAutosize from '@mui/material/TextareaAutosize';

 import Header from '../Header';
--- a/src/components/modals/main/settings/sections/Reminder.jsx
+++ b/src/components/modals/main/settings/sections/Reminder.jsx
@@ -1,7 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import Header from '../Header';
-import Text from '../Text';
 import { MdRemoveCircleOutline } from 'react-icons/md';
 import SettingsItem from '../SettingsItem';
 export default class ReminderSettings extends PureComponent {
@@ -45,45 +44,35 @@ export default class ReminderSettings extends PureComponent {
          zoomSetting="zoomReminder"
          switch={true}
        />
-        {/*<input
-          type="color"
-          name="colour"
-          className="colour"
-          onChange={(event) => this.updateColour(event)}
-          value={this.state.colour}
-        ></input>
-        <label htmlFor={'colour'} className="customBackgroundHex">
-          {this.state.colour}
-    </label>*/}
        <SettingsItem final={true} title="Add reminder" subtitle="Add reminder">
          <button onClick={() => this.addReminder()}>Add reminder</button>
        </SettingsItem>
        <div className="reminderSettingsHolder">
-            <div className="reminderSetting">
-              <div>
-                <div className="colorPicker">
-                  <input
-                    type="color"
-                    name="colour"
-                    className="colour"
-                    onChange={(event) => this.updateColour(event)}
-                    value={this.state.colour}
-                  ></input>
-                  <label htmlFor={'colour'} className="customBackgroundHex">
-                    {this.state.colour}
-                  </label>
-                </div>
-                <span className="link">
-                  <MdRemoveCircleOutline /> Remove
-                </span>
-              </div>
-              <div>
-                <span className="title">
-                  <input type="text" id="lname" placeholder="Name" />
-                </span>
-                <input type="date" required />
+          <div className="reminderSetting">
+            <div>
+              <div className="colorPicker">
+                <input
+                  type="color"
+                  name="colour"
+                  className="colour"
+                  onChange={(event) => this.updateColour(event)}
+                  value={this.state.colour}
+                ></input>
+                <label htmlFor={'colour'} className="customBackgroundHex">
+                  {this.state.colour}
+                </label>
              </div>
+              <span className="link">
+                <MdRemoveCircleOutline /> Remove
+              </span>
            </div>
+            <div>
+              <span className="title">
+                <input type="text" id="lname" placeholder="Name" />
+              </span>
+              <input type="date" required />
+            </div>
+          </div>
        </div>
      </>
    );
--- a/src/components/modals/main/settings/sections/Search.jsx
+++ b/src/components/modals/main/settings/sections/Search.jsx
@@ -123,7 +123,7 @@ export default class SearchSettings extends PureComponent {
        </SettingsItem>
        <SettingsItem
          title={this.getMessage('modals.main.settings.sections.search.search_engine')}
-          subtitle="cheese is gucci tbf"
+          subtitle="Choose search engine to use in the search bar"
        >
          <Dropdown
            label={this.getMessage('modals.main.settings.sections.search.search_engine')}
--- a/src/components/modals/main/settings/sections/Time.jsx
+++ b/src/components/modals/main/settings/sections/Time.jsx
@@ -25,23 +25,26 @@ export default class TimeSettings extends PureComponent {

    let timeSettings = null;

-    const digitalOptions = [
-      {
-        name: getMessage('modals.main.settings.sections.time.digital.twentyfourhour'),
-        value: 'twentyfourhour',
-      },
-      {
-        name: getMessage('modals.main.settings.sections.time.digital.twelvehour'),
-        value: 'twelvehour',
-      },
-    ];
-
    const digitalSettings = (
      <SettingsItem
        title={getMessage('modals.main.settings.sections.time.digital.title')}
        subtitle={getMessage('modals.main.settings.sections.time.format')}
      >
-        <Radio name="timeformat" options={digitalOptions} smallTitle={true} category="clock" />
+        <Radio
+          name="timeformat"
+          options={[
+            {
+              name: getMessage('modals.main.settings.sections.time.digital.twentyfourhour'),
+              value: 'twentyfourhour',
+            },
+            {
+              name: getMessage('modals.main.settings.sections.time.digital.twelvehour'),
+              value: 'twelvehour',
+            },
+          ]}
+          smallTitle={true}
+          category="clock"
+        />
        <Checkbox
          name="seconds"
          text={getMessage('modals.main.settings.sections.time.digital.seconds')}
@@ -132,10 +135,10 @@ export default class TimeSettings extends PureComponent {
          final={true}
        >
          <Switch
-            name='Pomodoro'
+            name="Pomodoro"
            text={getMessage('modals.main.settings.enabled')}
-            category='Pomodoro'
-            element='Pomodoro'
+            category="Pomodoro"
+            element="Pomodoro"
          />
          <Slider
            title="Work Length"
@@ -145,7 +148,7 @@ export default class TimeSettings extends PureComponent {
            min="5"
            max="60"
            marks={values('pomodoroWork')}
-            display={' ' + 'ms'}
+            display={' ms'}
          />
          <Slider
            title="Break Length"
@@ -155,7 +158,7 @@ export default class TimeSettings extends PureComponent {
            min="1"
            max="45"
            marks={values('pomodoroBreak')}
-            display={' ' + 'ms'}
+            display={' ms'}
          />
        </SettingsItem>
      </>
--- a/src/components/modals/main/settings/sections/Weather.jsx
+++ b/src/components/modals/main/settings/sections/Weather.jsx
@@ -61,21 +61,6 @@ export default class TimeSettings extends PureComponent {
  render() {
    const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);

-    const tempFormat = [
-      {
-        name: getMessage('modals.main.settings.sections.weather.temp_format.celsius') + ' (°C)',
-        value: 'celsius',
-      },
-      {
-        name: getMessage('modals.main.settings.sections.weather.temp_format.fahrenheit') + ' (°F)',
-        value: 'fahrenheit',
-      },
-      {
-        name: getMessage('modals.main.settings.sections.weather.temp_format.kelvin') + ' (K)',
-        value: 'kelvin',
-      },
-    ];
-
    return (
      <>
        <Header
@@ -107,7 +92,28 @@ export default class TimeSettings extends PureComponent {
          </span>
        </SettingsItem>
        <SettingsItem title={getMessage('modals.main.settings.sections.weather.temp_format.title')}>
-          <Radio name="tempformat" options={tempFormat} category="weather" />
+          <Radio
+            name="tempformat"
+            options={[
+              {
+                name:
+                  getMessage('modals.main.settings.sections.weather.temp_format.celsius') + ' (°C)',
+                value: 'celsius',
+              },
+              {
+                name:
+                  getMessage('modals.main.settings.sections.weather.temp_format.fahrenheit') +
+                  ' (°F)',
+                value: 'fahrenheit',
+              },
+              {
+                name:
+                  getMessage('modals.main.settings.sections.weather.temp_format.kelvin') + ' (K)',
+                value: 'kelvin',
+              },
+            ]}
+            category="weather"
+          />
        </SettingsItem>
        {localStorage.getItem('weatherType') > 1 && (
          <SettingsItem title="Active bit" subtitle="idk a better word for it sorry">
@@ -203,21 +209,13 @@ export default class TimeSettings extends PureComponent {
          text={getMessage('modals.main.settings.sections.weather.extra_info.max_temp')}
          category="weather"
        />
-        <Checkbox 
-          name="feelsliketemp" 
-          text={'Feels like temperature'} 
-          category="weather" 
-        />
+        <Checkbox name="feelsliketemp" text={'Feels like temperature'} category="weather" />
        <Checkbox
          name="atmosphericpressure"
          text={getMessage('modals.main.settings.sections.weather.extra_info.atmospheric_pressure')}
          category="weather"
        />
-        <Checkbox
-          name="upcomingForecast"
-          text="Upcoming Forecast"
-          category="weather"
-        />
+        <Checkbox name="upcomingForecast" text="Upcoming Forecast" category="weather" />
      </>
    );
  }
--- a/src/components/modals/main/settings/sections/background/Custom.jsx
+++ b/src/components/modals/main/settings/sections/background/Custom.jsx
@@ -6,7 +6,6 @@ import EventBus from 'modules/helpers/eventbus';

 import Checkbox from '../../Checkbox';
 import FileUpload from '../../FileUpload';
-import SettingsItem from '../../SettingsItem';

 import Modal from 'react-modal';

--- a/src/components/modals/welcome/welcome.scss
+++ b/src/components/modals/welcome/welcome.scss
@@ -277,12 +277,12 @@ a.privacy {
 }

@keyframes float-in {
-  0% { 
-    transform: translate(0,  30px); 
+  0% {
+    transform: translate(0, 30px);
    opacity: 0;
  }
-  100%   { 
-    transform: translate(0, 0px); 
+  100% {
+    transform: translate(0, 0px);
    opacity: 1;
-  }   
-}
+  }
+}