-
-
-
- this.updateColour(event)}
- value={this.state.colour}
- >
-
- {this.state.colour}
-
-
-
- Remove
-
-
-
>
);
diff --git a/src/components/modals/main/settings/sections/Search.jsx b/src/components/modals/main/settings/sections/Search.jsx
index 86b09a13..2cafba3d 100644
--- 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 {
-
+
>
diff --git a/src/components/modals/main/settings/sections/Weather.jsx b/src/components/modals/main/settings/sections/Weather.jsx
index 1b909c06..fecbae6f 100644
--- 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 (
<>
-
+
{localStorage.getItem('weatherType') > 1 && (
@@ -203,21 +209,13 @@ export default class TimeSettings extends PureComponent {
text={getMessage('modals.main.settings.sections.weather.extra_info.max_temp')}
category="weather"
/>
-
+
-
+
>
);
}
diff --git a/src/components/modals/main/settings/sections/background/Custom.jsx b/src/components/modals/main/settings/sections/background/Custom.jsx
index ee80da28..28fc25b5 100644
--- 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';
diff --git a/src/components/modals/welcome/welcome.scss b/src/components/modals/welcome/welcome.scss
index 98fe480e..416cb4fe 100644
--- 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;
- }
-}
\ No newline at end of file
+ }
+}
diff --git a/src/components/widgets/Widgets.jsx b/src/components/widgets/Widgets.jsx
index 2f609392..c8079adf 100644
--- a/src/components/widgets/Widgets.jsx
+++ b/src/components/widgets/Widgets.jsx
@@ -11,6 +11,10 @@ import Reminder from './reminder/Reminder';
import EventBus from 'modules/helpers/eventbus';
+// weather is lazy loaded due to the size of the weather icons module
+// since we're using react-icons this might not be accurate,
+// however, when we used the original module https://bundlephobia.com/package/weather-icons-react@1.2.0
+// as seen here it is ridiculously large
const Weather = lazy(() => import('./weather/Weather'));
const renderLoader = () => <>>;
@@ -68,27 +72,26 @@ export default class Widgets extends PureComponent {
render() {
// don't show when welcome is there
if (this.state.welcome !== 'false') {
- return
;
+ return
;
}
// allow for re-ordering widgets
- let elements = [];
+ // we have a default to prevent errors
+ let elements = [
+ ,
+ ,
+ ,
+
,
+ ,
+ ,
+ ,
+ ];
if (this.state.order) {
+ elements = [];
this.state.order.forEach((element) => {
elements.push({this.widgets[element]} );
});
- } else {
- // prevent error
- elements = [
- ,
- ,
- ,
-
,
- ,
- ,
- ,
- ];
}
return (
diff --git a/src/components/widgets/background/Favourite.jsx b/src/components/widgets/background/Favourite.jsx
index 7baa8112..0cf80df3 100644
--- a/src/components/widgets/background/Favourite.jsx
+++ b/src/components/widgets/background/Favourite.jsx
@@ -27,6 +27,7 @@ export default class Favourite extends PureComponent {
variables.stats.postEvent('feature', 'Background favourite');
} else {
const type = localStorage.getItem('backgroundType');
+
switch (type) {
case 'colour':
return;
@@ -86,8 +87,7 @@ export default class Favourite extends PureComponent {
}
render() {
- const backgroundType = localStorage.getItem('backgroundType');
- if (backgroundType === 'colour') {
+ if (localStorage.getItem('backgroundType') === 'colour') {
return null;
}
diff --git a/src/components/widgets/background/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx
index 670f38a6..4d28a344 100644
--- a/src/components/widgets/background/PhotoInformation.jsx
+++ b/src/components/widgets/background/PhotoInformation.jsx
@@ -35,8 +35,6 @@ const downloadImage = async (info) => {
variables.stats.postEvent('feature', 'Background download');
};
-
-
// todo: copy link to unsplash/pexels page not image url
const copyImage = (info) => {
variables.stats.postEvent('feature', 'Background copied');
@@ -136,7 +134,6 @@ export default function PhotoInformation({ info, url, api }) {
);
}
-
const downloadEnabled =
localStorage.getItem('downloadbtn') === 'true' && !info.offline && !info.photographerURL && api;
const downloadBackground = () => {
@@ -282,7 +279,9 @@ export default function PhotoInformation({ info, url, api }) {
downloadImage(info)} />
-
Description
+
+ Description
+
{variables.language.getMessage(
diff --git a/src/components/widgets/background/scss/_photoinformation.scss b/src/components/widgets/background/scss/_photoinformation.scss
index 71cfd22b..9210d5ee 100644
--- a/src/components/widgets/background/scss/_photoinformation.scss
+++ b/src/components/widgets/background/scss/_photoinformation.scss
@@ -197,7 +197,7 @@
color: t($link);
}
&:hover {
- opacity: 0.8;
+ opacity: 0.8;
}
}
&:hover {
diff --git a/src/components/widgets/navbar/Navbar.jsx b/src/components/widgets/navbar/Navbar.jsx
index 5733e8de..5612f83c 100644
--- a/src/components/widgets/navbar/Navbar.jsx
+++ b/src/components/widgets/navbar/Navbar.jsx
@@ -1,17 +1,15 @@
import variables from 'modules/variables';
import { PureComponent, createRef } from 'react';
-import { MdRefresh, MdSettings, MdAssignment } from 'react-icons/md';
+import { MdRefresh, MdSettings } from 'react-icons/md';
import Notes from './Notes';
import Todo from './Todo';
import Maximise from '../background/Maximise';
import Tooltip from 'components/helpers/tooltip/Tooltip';
-import InfoTooltip from 'components/helpers/tooltip/infoTooltip';
import EventBus from 'modules/helpers/eventbus';
import './scss/index.scss';
-import { FaThemeisle } from 'react-icons/fa';
export default class Navbar extends PureComponent {
constructor() {
diff --git a/src/components/widgets/navbar/Notes.jsx b/src/components/widgets/navbar/Notes.jsx
index f9b647a0..465b887b 100644
--- a/src/components/widgets/navbar/Notes.jsx
+++ b/src/components/widgets/navbar/Notes.jsx
@@ -1,10 +1,11 @@
import variables from 'modules/variables';
-import { PureComponent, useRef } from 'react';
+import { PureComponent } from 'react';
import { MdContentCopy, MdAssignment, MdPushPin, MdDownload } from 'react-icons/md';
import { useFloating, shift } from '@floating-ui/react-dom';
import TextareaAutosize from '@mui/material/TextareaAutosize';
import { toast } from 'react-toastify';
-import Tooltip from '../../helpers/tooltip/Tooltip'; //import Hotkeys from 'react-hot-keys';
+import Tooltip from '../../helpers/tooltip/Tooltip';
+//import Hotkeys from 'react-hot-keys';
import { saveFile } from 'modules/helpers/settings/modals';
class Notes extends PureComponent {
diff --git a/src/components/widgets/navbar/Todo.jsx b/src/components/widgets/navbar/Todo.jsx
index 608623d4..ea4fe928 100644
--- a/src/components/widgets/navbar/Todo.jsx
+++ b/src/components/widgets/navbar/Todo.jsx
@@ -41,7 +41,37 @@ class Todo extends PureComponent {
}
}
- updateTodoState(todoContent) {
+ updateTodo(action, index, data) {
+ let todoContent = this.state.todo;
+ switch (action) {
+ case 'add':
+ todoContent.push({
+ value: '',
+ done: false,
+ });
+ break;
+ case 'remove':
+ todoContent.splice(index, 1);
+ if (todoContent.length === 0) {
+ todoContent.push({
+ value: '',
+ done: false,
+ });
+ }
+ break;
+ case 'set':
+ todoContent[index] = {
+ value: data.target.value,
+ done: todoContent[index].done,
+ };
+ break;
+ case 'done':
+ todoContent[index].done = !todoContent[index].done;
+ break;
+ default:
+ break;
+ }
+
localStorage.setItem('todoContent', JSON.stringify(todoContent));
this.setState({
todo: todoContent,
@@ -49,42 +79,6 @@ class Todo extends PureComponent {
this.forceUpdate();
}
- setTodo(index, data) {
- let todoContent = this.state.todo;
- todoContent[index] = {
- value: data.target.value,
- done: todoContent[index].done,
- };
- this.updateTodoState(todoContent);
- }
-
- addTodo() {
- let todoContent = this.state.todo;
- todoContent.push({
- value: '',
- done: false,
- });
- this.updateTodoState(todoContent);
- }
-
- removeTodo(index) {
- let todoContent = this.state.todo;
- todoContent.splice(index, 1);
- if (todoContent.length === 0) {
- todoContent.push({
- value: '',
- done: false,
- });
- }
- this.updateTodoState(todoContent);
- }
-
- doneTodo(index) {
- let todoContent = this.state.todo;
- todoContent[index].done = !todoContent[index].done;
- this.updateTodoState(todoContent);
- }
-
pin() {
variables.stats.postEvent('feature', 'Todo pin');
if (localStorage.getItem('todoPinned') === 'true') {
@@ -134,20 +128,20 @@ class Todo extends PureComponent {
- this.addTodo()}>
+ this.updateTodo('add')}>
- {this.state.todo.map((value, index) => (
+ {this.state.todo.map((_value, index) => (
this.doneTodo(index)}
+ onClick={() => this.updateTodo('done', index)}
/>
this.setTodo(index, data)}
+ onChange={(data) => this.updateTodo('set', index, data)}
readOnly={this.state.todo[index].done}
/>
- this.removeTodo(index)} />
+ this.updateTodo('remove', index)} />
))}
@@ -169,6 +163,7 @@ class Todo extends PureComponent {
);
}
}
+
export default function TodoWrapper() {
const { x, y, reference, floating, strategy } = useFloating({
placement: 'bottom',
diff --git a/src/components/widgets/quicklinks/QuickLinks.jsx b/src/components/widgets/quicklinks/QuickLinks.jsx
index 39eece63..59183821 100644
--- a/src/components/widgets/quicklinks/QuickLinks.jsx
+++ b/src/components/widgets/quicklinks/QuickLinks.jsx
@@ -68,7 +68,7 @@ export default class QuickLinks extends PureComponent {
data.push({
name: this.state.name || url,
- url: url,
+ url,
icon: this.state.icon || '',
key: Math.random().toString(36).substring(7) + 1,
});
diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx
index 7de8c380..1a17349e 100644
--- a/src/components/widgets/quote/Quote.jsx
+++ b/src/components/widgets/quote/Quote.jsx
@@ -398,7 +398,7 @@ export default class Quote extends PureComponent {
{this.state.quote}
- {(localStorage.getItem('widgetStyle') === 'legacy') ? (
+ {localStorage.getItem('widgetStyle') === 'legacy' ? (
<>
@@ -418,7 +418,7 @@ export default class Quote extends PureComponent {
>
) : (
<>
- {this.state.author !== '' ? (
+ {this.state.author !== '' ? (
- ) :
}
+ ) : (
+
+ )}
>
)}
{/*variables.keybinds.favouriteQuote && variables.keybinds.favouriteQuote !== '' ?
this.favourite()} /> : null*/}
diff --git a/src/components/widgets/reminder/Reminder.jsx b/src/components/widgets/reminder/Reminder.jsx
index 687abe1d..b8f1822f 100644
--- a/src/components/widgets/reminder/Reminder.jsx
+++ b/src/components/widgets/reminder/Reminder.jsx
@@ -1,7 +1,7 @@
import React from 'react';
import './reminder.scss';
-import Tooltip from '../../helpers/tooltip/Tooltip'
+import Tooltip from '../../helpers/tooltip/Tooltip';
import { MdClose, MdSnooze, MdWork } from 'react-icons/md';
export default class Reminder extends React.PureComponent {
@@ -21,8 +21,12 @@ export default class Reminder extends React.PureComponent {
Time
-
-
+
+
+
+
+
+
);
diff --git a/src/components/widgets/reminder/reminder.scss b/src/components/widgets/reminder/reminder.scss
index 875b7ad8..c342afbf 100644
--- a/src/components/widgets/reminder/reminder.scss
+++ b/src/components/widgets/reminder/reminder.scss
@@ -8,6 +8,7 @@
gap: 10px;
height: 60px;
text-align: left;
+
.identifier {
color: #fff;
height: 60px;
@@ -17,15 +18,18 @@
justify-content: center;
align-items: center;
}
+
.content {
display: flex;
flex-flow: column;
padding: 10px;
}
+
.icons {
display: flex;
gap: 10px;
padding: 10px;
+
svg {
@include basicIconButton(10px, 0.9rem, ui);
}
diff --git a/src/components/widgets/search/Search.jsx b/src/components/widgets/search/Search.jsx
index ea014e44..bdebb6d0 100644
--- a/src/components/widgets/search/Search.jsx
+++ b/src/components/widgets/search/Search.jsx
@@ -1,5 +1,5 @@
import variables from 'modules/variables';
-import { PureComponent, Fragment } from 'react';
+import { PureComponent } from 'react';
import { MdSearch, MdMic, MdSettings } from 'react-icons/md';
import Tooltip from 'components/helpers/tooltip/Tooltip';
//import Hotkeys from 'react-hot-keys';
@@ -106,7 +106,7 @@ export default class Search extends PureComponent {
if (localStorage.getItem('voiceSearch') === 'true') {
microphone = (
-
+
);
diff --git a/src/components/widgets/search/search.scss b/src/components/widgets/search/search.scss
index 37ba98de..6d8e009b 100644
--- a/src/components/widgets/search/search.scss
+++ b/src/components/widgets/search/search.scss
@@ -5,12 +5,14 @@
border-radius: 12px;
justify-content: flex-start;
flex-direction: row;
+
input[type='text'] {
@extend %basic;
outline: none;
border: none;
font-size: 20px;
padding: 10px 0 10px 20px;
+
&::placeholder {
@include themed() {
color: t($color);
@@ -24,6 +26,7 @@
gap: 10px;
margin-top: 1px;
margin-right: 10px;
+
.tooltip {
max-height: 44px;
}
@@ -35,6 +38,7 @@
left: 1rem;
display: flex;
flex-flow: column;
+
button {
@include basicIconButton(12px, 20px, ui);
}
@@ -50,10 +54,12 @@
font-size: 0.6em;
width: 200px;
transition: 0.5s;
+
span {
padding: 0.5rem;
cursor: pointer;
border-radius: 12px;
+
&:hover {
@include themed() {
background: t($btn-backgroundHover);
diff --git a/src/components/widgets/time/Clock.jsx b/src/components/widgets/time/Clock.jsx
index 7cf451ca..a8c8941b 100644
--- a/src/components/widgets/time/Clock.jsx
+++ b/src/components/widgets/time/Clock.jsx
@@ -2,8 +2,6 @@ import { PureComponent, Suspense, lazy } from 'react';
import { convertTimezone } from 'modules/helpers/date';
import EventBus from 'modules/helpers/eventbus';
-import { MdSkipNext, MdOutlineRestartAlt, MdPlayArrow } from 'react-icons/md';
-import Tooltip from '../../helpers/tooltip/Tooltip';
import './clock.scss';
import Pomodoro from './Pomodoro';
@@ -142,7 +140,10 @@ export default class Clock extends PureComponent {
{this.state.ampm}
{localStorage.getItem('Pomodoro') === 'true' ? (
-
+
) : null}
>
);
diff --git a/src/components/widgets/time/clock.scss b/src/components/widgets/time/clock.scss
index 2a402336..c531342d 100644
--- a/src/components/widgets/time/clock.scss
+++ b/src/components/widgets/time/clock.scss
@@ -19,9 +19,11 @@
border-radius: 100%;
/*box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);*/
border: none !important;
+
@include themed() {
border: 1px solid t($color) !important;
}
+
cursor: initial;
user-select: none;
}
@@ -39,23 +41,27 @@
padding: 1rem;
}
+// ok so if pomodoro is a separate component, why is this in clock?
+// ^ above note is for alex
.pomodoro {
margin-top: -20px;
- @extend %basic;
+ @extend %basic;
padding: 5px 15px 5px 15px;
font-size: 12px;
display: flex;
flex-flow: row;
gap: 10px;
align-items: center;
+
.pomodoroTime {
display: flex;
flex-flow: row;
align-items: center;
gap: 5px;
+
.timeRemaining {
-
}
+
.type {
color: #ccc;
font-weight: bold;
@@ -63,13 +69,15 @@
display: grid;
}
}
+
.pomodoroControls {
display: flex;
flex-flow: row;
justify-content: space-evenly;
gap: 5px;
}
+
button {
@include basicIconButton(5px, 11px, ui);
}
-}
\ No newline at end of file
+}
diff --git a/src/components/widgets/weather/Weather.jsx b/src/components/widgets/weather/Weather.jsx
index 14fc56d9..7b14cc67 100644
--- a/src/components/widgets/weather/Weather.jsx
+++ b/src/components/widgets/weather/Weather.jsx
@@ -203,27 +203,27 @@ export default class Weather extends PureComponent {
{enabled('showlocation') ? {this.state.location} : null}
- {enabled('upcomingForecast') ? (
- <>
-
Upcoming Forecast
-
-
-
- 15:00
- {minmax()}
-
-
-
- 16:00
- {minmax()}
-
-
-
- 17:00
- {minmax()}
-
-
- >
+ {enabled('upcomingForecast') ? (
+ <>
+
Upcoming Forecast
+
+
+
+ 15:00
+ {minmax()}
+
+
+
+ 16:00
+ {minmax()}
+
+
+
+ 17:00
+ {minmax()}
+
+
+ >
) : null}
Extra Information
diff --git a/src/components/widgets/weather/weather.scss b/src/components/widgets/weather/weather.scss
index 693b7a07..32c7a354 100644
--- a/src/components/widgets/weather/weather.scss
+++ b/src/components/widgets/weather/weather.scss
@@ -12,6 +12,7 @@
width: auto;
display: grid;
place-items: center;
+
&:hover {
height: auto;
transition: 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
@@ -26,6 +27,7 @@
.extra-info {
font-size: 18px;
gap: 40px;
+
@include themed() {
color: t($weather);
}
@@ -39,6 +41,7 @@
display: flex;
flex-flow: row;
justify-content: space-evenly;
+
span {
display: flex;
align-items: center;
@@ -50,16 +53,20 @@
display: flex;
justify-content: space-between;
gap: 25px;
+
div {
align-items: center;
display: flex;
+
svg {
font-size: 2em !important;
}
+
span {
font-size: 34px;
}
}
+
.minmax {
display: flex;
flex-flow: column;
@@ -79,10 +86,12 @@
align-items: center;
gap: 20px;
}
+
@include themed() {
svg {
color: t($subColor);
}
+
.weatherIcon {
font-size: 1.4em;
display: grid;
@@ -96,22 +105,27 @@
width: 100%;
justify-content: space-between;
gap: 10px;
+
div {
@include themed() {
border-radius: t($borderRadius);
border: 1px solid t($btn-backgroundHover);
padding: 5px;
flex: 1;
+
svg {
font-size: 36px;
}
+
span {
justify-content: center;
}
+
.period {
color: t($color);
font-size: 15px;
}
+
.minmax {
margin-top: 5px;
flex-flow: column;
diff --git a/src/index.jsx b/src/index.jsx
index e7802854..fdcd1766 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -13,6 +13,7 @@ import Stats from 'modules/helpers/stats';
// language
import I18n from '@eartharoid/i18n';
+// this is because of vite
import * as de_DE from './translations/de_DE.json';
import * as en_GB from './translations/en_GB.json';
import * as en_US from './translations/en_US.json';
diff --git a/src/modules/constants.js b/src/modules/constants.js
index e3420f91..a6ae4e39 100644
--- a/src/modules/constants.js
+++ b/src/modules/constants.js
@@ -11,7 +11,7 @@ export const OPENSTREETMAP_URL = 'https://www.openstreetmap.org';
// Mue URLs
export const WEBSITE_URL = 'https://muetab.com';
export const PRIVACY_URL = 'https://muetab.com/privacy';
-export const BLOG_POST = 'https://blog.muetab.com/posts/version-6-0';
+export const BLOG_POST = 'https://blog.muetab.com/posts/version-7-0';
export const TRANSLATIONS_URL = 'https://docs.muetab.com/translations/';
export const REPORT_ITEM =
'https://github.com/mue/marketplace/issues/new?assignees=&labels=item+report&template=item-report.md&title=%5BItem+Report%5D+';
@@ -28,8 +28,8 @@ export const DISCORD_SERVER = 'zv8C9F8';
export const COPYRIGHT_NAME = 'The Mue Authors';
export const COPYRIGHT_YEAR = '2018';
export const COPYRIGHT_LICENSE = 'BSD-3-Clause License';
-export const SPONSORS_USERNAME = 'davidcralph';
export const LIBERAPAY_USERNAME = 'mue';
+export const SPONSORS_USERNAME = 'davidcralph';
export const KOFI_USERNAME = 'davidcralph';
export const PATREON_USERNAME = 'davidcralph';
diff --git a/src/modules/helpers/eventbus.js b/src/modules/helpers/eventbus.js
index affb3ca6..1d402f4e 100644
--- a/src/modules/helpers/eventbus.js
+++ b/src/modules/helpers/eventbus.js
@@ -1,3 +1,5 @@
+// one day it might be a good idea to replace all this with redux, but it'd take
+// a lot of rewriting
export default class EventBus {
static on(event, callback) {
document.addEventListener(event, (e) => {
diff --git a/src/modules/helpers/experimental.js b/src/modules/helpers/experimental.js
index 2cf8ca1c..3755d952 100644
--- a/src/modules/helpers/experimental.js
+++ b/src/modules/helpers/experimental.js
@@ -1,4 +1,4 @@
-// todo: add more
+// mainly this is just to make life easier when debugging stuff like hover
export default function ExperimentalInit() {
if (localStorage.getItem('debug') === 'true') {
document.onkeydown = (e) => {
diff --git a/src/modules/helpers/interval.js b/src/modules/helpers/interval.js
index ac0bf8c2..db172147 100644
--- a/src/modules/helpers/interval.js
+++ b/src/modules/helpers/interval.js
@@ -1,4 +1,8 @@
// based on https://stackoverflow.com/a/47009962
+// it has been brought to my attention (many) times that this is horribly broken if the time
+// on the "Change every" setting is longer than 1 minute. I wasn't going to wait days to see
+// if the function worked, so i just assumed it did. i apologise. this function will be
+// replaced entirely in the future probably
export default function interval(callback, interval, name) {
const key = name + 'interval';
const ms = localStorage.getItem(key);
diff --git a/src/modules/helpers/settings/index.js b/src/modules/helpers/settings/index.js
index 0d69066a..02115d90 100644
--- a/src/modules/helpers/settings/index.js
+++ b/src/modules/helpers/settings/index.js
@@ -29,7 +29,7 @@ export function setDefaultSettings(reset) {
localStorage.setItem('showWelcome', false);
}
- // Finally we set this to true so it doesn't run the function on every load
+ // finally we set this to true so it doesn't run the function on every load
localStorage.setItem('firstRun', true);
}
diff --git a/src/modules/helpers/settings/modals.js b/src/modules/helpers/settings/modals.js
index 77e2cbfb..66f7af63 100644
--- a/src/modules/helpers/settings/modals.js
+++ b/src/modules/helpers/settings/modals.js
@@ -17,6 +17,7 @@ export function saveFile(data, filename = 'file', type = 'text/json') {
a.download = filename;
a.dataset.downloadurl = [type, a.download, a.href].join(':');
+ // i need to see what all this actually does, i think wessel wrote this function
event.initMouseEvent(
'click',
true,
@@ -39,9 +40,13 @@ export function saveFile(data, filename = 'file', type = 'text/json') {
export function exportSettings() {
const settings = {};
+
Object.keys(localStorage).forEach((key) => {
settings[key] = localStorage.getItem(key);
});
+
+ // i think a good improvement would be to make the file names more descriptive, or allow for saving as custom
+ // otherwise you'll end up with mue-settings (6000).json and have absolutely no idea what any of them are for
saveFile(settings, 'mue-settings.json');
variables.stats.postEvent('tab', 'Settings exported');
}
diff --git a/src/modules/variables.js b/src/modules/variables.js
index 0fea0e8f..b196c3ad 100644
--- a/src/modules/variables.js
+++ b/src/modules/variables.js
@@ -1,4 +1,4 @@
-import * as Constants from 'modules/constants';
+import * as constants from 'modules/constants';
const variables = {
language: {},
@@ -8,7 +8,7 @@ const variables = {
postEvent: () => '',
},
//keybinds: {},
- constants: Constants,
+ constants,
};
export default variables;
diff --git a/src/scss/_themes.scss b/src/scss/_themes.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/scss/modules/_toast.scss b/src/scss/_toast.scss
similarity index 96%
rename from src/scss/modules/_toast.scss
rename to src/scss/_toast.scss
index c71ecd77..ef7af1b1 100644
--- a/src/scss/modules/_toast.scss
+++ b/src/scss/_toast.scss
@@ -1,4 +1,4 @@
-@import '../variables';
+@import 'variables';
.Toastify__toast-body {
font-size: 16px !important;
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 43f4055c..e34e720d 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -1,3 +1,5 @@
+// since alex will no doubtedly be looking at this file often
+// here's a reminder: please add a new line when doing nested scss, otherwise it is messy!
@use 'sass:map';
@import 'mixins';
@@ -93,15 +95,20 @@ $themes: (
color: t($color);
box-shadow: t($boxShadow);
}
+
backdrop-filter: blur(map.get($ui-elements, 'backgroundBlur'));
+
.title {
font-size: 18px;
+
@include themed() {
color: t($color);
}
}
+
.subtitle {
font-size: 14px;
+
@include themed() {
color: t($subColor);
}
@@ -113,32 +120,40 @@ $themes: (
font-size: 38px;
font-weight: 600;
margin-bottom: 15px;
+
@include themed() {
color: t($color);
}
}
+
.title {
font-size: 24px;
font-weight: 600;
+
@include themed() {
color: t($color);
}
}
+
.subtitle {
font-size: 16px;
+
@include themed() {
color: t($subColor);
}
}
+
.link {
font-size: 16px;
text-decoration: none;
cursor: pointer;
+
@include themed() {
color: t($link);
}
+
&:hover {
- opacity: 0.8;
+ opacity: 0.8;
}
}
}
@@ -149,10 +164,12 @@ $themes: (
background: t($modal-sidebar);
border: 3px solid t($modal-sidebarActive);
color: t($color);
+
&:hover {
background: t($modal-sidebarActive);
}
}
+
border-radius: 12px;
height: 40px;
font-size: 1rem;
@@ -163,17 +180,21 @@ $themes: (
gap: 20px;
transition: 0.5s;
cursor: pointer;
+
&:hover {
background: t($modal-sidebarActive);
}
+
&:active {
background: t($modal-sidebarActive);
box-shadow: 0 0 0 1px t($color);
}
+
&:focus {
background: t($modal-sidebarActive);
box-shadow: 0 0 0 1px t($color);
}
+
&:disabled {
background: t($modal-sidebarActive);
cursor: not-allowed;
@@ -188,56 +209,69 @@ $themes: (
color: t($color);
box-shadow: t($boxShadow);
border-radius: t($borderRadius);
+
&:hover {
background: t($btn-backgroundHover);
}
+
&:active {
background: t($btn-backgroundHover);
box-shadow: 0 0 0 1px t($color);
}
+
&:focus {
background: t($btn-backgroundHover);
box-shadow: 0 0 0 1px t($color);
}
}
+
@if $type == 'modal-text' {
color: t($color);
background: none;
border-radius: t($borderRadius);
+
&:hover {
background: t($modal-sidebarActive);
box-shadow: 3px solid t($modal-sidebarActive);
}
}
+
@if $type == 'modal' {
background: t($modal-sidebar);
border: 3px solid t($modal-sidebarActive);
color: t($color);
border-radius: t($borderRadius);
+
&:hover {
background: t($modal-sidebarActive);
}
+
&:active {
background: t($modal-sidebarActive);
box-shadow: 0 0 0 1px t($color);
}
+
&:focus {
background: t($modal-sidebarActive);
box-shadow: 0 0 0 1px t($color);
}
}
+
@if $type == 'legacy' {
background: none;
color: #fff;
border-radius: t($borderRadius);
box-shadow: 0 0 0 0 !important;
+
&:hover {
background-color: rgb(66 66 66 / 23%);
}
+
&:active {
background-color: rgb(66 66 66 / 23%);
box-shadow: 0 0 0 1px t($color);
}
+
&:focus {
background-color: rgb(66 66 66 / 23%);
box-shadow: 0 0 0 1px t($color);
@@ -245,6 +279,7 @@ $themes: (
}
}
+ // this needs to be moved up!
padding: $padding;
font-size: $font-size;
cursor: pointer;
@@ -259,6 +294,7 @@ $themes: (
@include themed() {
color: t($color);
}
+
&:hover {
@include themed() {
background: t($btn-background);
diff --git a/src/scss/index.scss b/src/scss/index.scss
index 12a15802..18331e46 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -1,7 +1,5 @@
@import 'variables';
-
-@import 'modules/toast';
-@import 'modules/buttons';
+@import 'toast';
body {
background: #000;
@@ -86,6 +84,8 @@ body {
}
/* fonts (imported from fontsource) */
+// i don't even know what the unicode-range is for, but we're keeping it so that nothing breaks
+// same reason as why fontsource is never updated, it broke font loading last time so it flashed
@font-face {
font-family: 'Lexend Deca';
font-style: normal;
diff --git a/src/scss/modules/_buttons.scss b/src/scss/modules/_buttons.scss
deleted file mode 100644
index 8fd60652..00000000
--- a/src/scss/modules/_buttons.scss
+++ /dev/null
@@ -1,113 +0,0 @@
-/*%settingsButton {
- transition: ease 0.33s;
- color: map-get($theme-colours, 'main');
- cursor: pointer;
- padding: 10px 30px;
- font-size: 20px;
- border-radius: 24px;
- box-shadow: 0 5px 15px rgba(128, 161, 144, 0.4);
-
- &:hover,
- &:active {
- outline: none;
- background: none;
- }
-
- &:disabled {
- cursor: not-allowed;
- color: grey !important;
- background: none;
- border: 2px solid grey !important;
- }
-}
-
-.dark %settingsButton {
- box-shadow: none;
-}
-
-.pinNote {
- @extend %settingsButton;
-
- background-color: map-get($button-colours, 'confirm');
- border: 2px solid map-get($button-colours, 'confirm');
- color: map-get($theme-colours, 'main');
- transition: 0s;
-
- &:hover {
- color: map-get($button-colours, 'confirm');
- }
-
- svg {
- fill: currentColor;
- width: 1em;
- height: 1em;
- display: inline-block;
- font-size: 1.5rem;
- transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
- flex-shrink: 0;
- user-select: none;
- }
-}
-
-.copyNote {
- @extend %settingsButton;
-
- background-color: map-get($button-colours, 'other');
- border: 2px solid map-get($button-colours, 'other');
- color: map-get($theme-colours, 'main');
- transition: 0s;
- display: inline;
- margin: 5px;
-
- &:hover {
- color: map-get($button-colours, 'other');
- }
-}
-
-.upload {
- width: 100%;
- height: 100%;
- border-radius: 20px;
- border: none;
- outline: none;
- padding: 50px;
- background: var(--sidebar);
- color: var(--modal-text);
- cursor: pointer;
-
- &:hover {
- background: var(--tab-active);
- }
-
- svg {
- font-size: 4em;
- }
-
- span {
- font-size: 2em;
- }
-}
-
-.cleanButton {
- background: none;
- border: none;
- vertical-align: middle;
-
- svg {
- fill: #ff4757;
- border-radius: 100%;
- background-color: var(--background);
- height: 1.2em;
- width: 1.2em;
- cursor: pointer;
- transition: ease 0.5s;
-
- &:hover {
- border-radius: 100%;
- background: #ff4757;
- fill: var(--background);
- transition: ease 0.5s;
- }
- }
-}
-*/
diff --git a/vite.config.js b/vite.config.js
index 08e20bcc..2bf7c712 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,14 +4,13 @@ import path from 'path';
const isProd = process.env.NODE_ENV === 'production';
-
export default defineConfig({
plugins: [react()],
server: {
hmr: {
protocol: 'ws',
host: 'localhost',
- }
+ },
},
build: {
minify: isProd,
@@ -22,7 +21,7 @@ export default defineConfig({
components: path.resolve(__dirname, './src/components'),
modules: path.resolve(__dirname, './src/modules'),
translations: path.resolve(__dirname, './src/translations'),
- scss: path.resolve(__dirname, './src/scss')
- }
- }
+ scss: path.resolve(__dirname, './src/scss'),
+ },
+ },
});