diff --git a/.stylelintrc.json b/.stylelintrc.json index 13945df0..fac097b7 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,6 +1,3 @@ { - "extends": [ - "stylelint-config-standard-scss", - "stylelint-config-prettier-scss" - ] + "extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss"] } diff --git a/manifest/chrome.json b/manifest/chrome.json index 936aa40f..d45fc22c 100644 --- a/manifest/chrome.json +++ b/manifest/chrome.json @@ -4,7 +4,7 @@ "default_locale": "en", "name": "__MSG_name__", "description": "__MSG_description__", - "version": "6.0.5", + "version": "7.0.0", "homepage_url": "https://muetab.com", "browser_action": { "default_icon": "icons/128x128.png" diff --git a/manifest/firefox.json b/manifest/firefox.json index 424459b4..c378e150 100644 --- a/manifest/firefox.json +++ b/manifest/firefox.json @@ -2,7 +2,7 @@ "manifest_version": 2, "name": "Mue", "description": "Fast, open and free-to-use new tab page for modern browsers.", - "version": "6.0.5", + "version": "7.0.0", "homepage_url": "https://muetab.com", "browser_action": { "default_icon": "icons/128x128.png" diff --git a/package.json b/package.json index 55cfff90..8b3b08a9 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "homepage": "https://muetab.com", "bugs": "https://github.com/mue/mue/issues/new?assignees=&labels=bug&template=bug-report.md&title=%5BBUG%5D", "license": "BSD-3-Clause", - "version": "6.0.5", + "version": "7.0.0", "dependencies": { "@eartharoid/i18n": "1.0.2", "@emotion/react": "^11.9.0", diff --git a/src/App.jsx b/src/App.jsx index d286dcc2..bc2a627c 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,52 +1,52 @@ -import variables from 'modules/variables'; -import { PureComponent } from 'react'; -import { ToastContainer } from 'react-toastify'; - -import Background from 'components/widgets/background/Background'; -import Widgets from 'components/widgets/Widgets'; -import Modals from 'components/modals/Modals'; - -import { loadSettings, moveSettings } from 'modules/helpers/settings'; - -import EventBus from 'modules/helpers/eventbus'; - -export default class App extends PureComponent { - componentDidMount() { - // 4.0 -> 5.0 (the key below is only on 5.0) - // now featuring 5.0 -> 5.1 - // the firstRun check was moved here because the old function was useless - if (!localStorage.getItem('firstRun') || !localStorage.getItem('stats')) { - moveSettings(); - window.location.reload(); - } - - loadSettings(); - - EventBus.on('refresh', (data) => { - if (data === 'other') { - loadSettings(true); - } - }); - - variables.stats.tabLoad(); - } - - render() { - return ( - <> - {localStorage.getItem('background') === 'true' ? : null} - -
- - -
- - ); - } -} +import variables from 'modules/variables'; +import { PureComponent } from 'react'; +import { ToastContainer } from 'react-toastify'; + +import Background from 'components/widgets/background/Background'; +import Widgets from 'components/widgets/Widgets'; +import Modals from 'components/modals/Modals'; + +import { loadSettings, moveSettings } from 'modules/helpers/settings'; + +import EventBus from 'modules/helpers/eventbus'; + +export default class App extends PureComponent { + componentDidMount() { + // 4.0 -> 5.0 (the key below is only on 5.0) + // now featuring 5.0 -> 5.1 + // the firstRun check was moved here because the old function was useless + if (!localStorage.getItem('firstRun') || !localStorage.getItem('stats')) { + moveSettings(); + window.location.reload(); + } + + loadSettings(); + + EventBus.on('refresh', (data) => { + if (data === 'other') { + loadSettings(true); + } + }); + + variables.stats.tabLoad(); + } + + render() { + return ( + <> + {localStorage.getItem('background') === 'true' ? : null} + +
+ + +
+ + ); + } +} diff --git a/src/components/helpers/autocomplete/Autocomplete.jsx b/src/components/helpers/autocomplete/Autocomplete.jsx index 87db8d7f..2f524e5b 100644 --- a/src/components/helpers/autocomplete/Autocomplete.jsx +++ b/src/components/helpers/autocomplete/Autocomplete.jsx @@ -1,7 +1,5 @@ import { PureComponent } from 'react'; -import { InputBase } from '@mui/material'; - import EventBus from 'modules/helpers/eventbus'; import './autocomplete.scss'; diff --git a/src/components/helpers/autocomplete/autocomplete.scss b/src/components/helpers/autocomplete/autocomplete.scss index b3d4f9ff..abaa51d6 100644 --- a/src/components/helpers/autocomplete/autocomplete.scss +++ b/src/components/helpers/autocomplete/autocomplete.scss @@ -40,5 +40,5 @@ } .micActive { - box-shadow: 0px 0px 50px 9px #E74C3C !important; -} \ No newline at end of file + box-shadow: 0px 0px 50px 9px #e74c3c !important; +} diff --git a/src/components/helpers/preview/Preview.jsx b/src/components/helpers/preview/Preview.jsx index 09a8bb2c..adfd4bc2 100644 --- a/src/components/helpers/preview/Preview.jsx +++ b/src/components/helpers/preview/Preview.jsx @@ -1,5 +1,4 @@ import variables from 'modules/variables'; -import { MdArrowForwardIos } from 'react-icons/md'; import './preview.scss'; export default function Preview(props) { diff --git a/src/components/helpers/sharemodal/ShareModal.jsx b/src/components/helpers/sharemodal/ShareModal.jsx index 953510ce..be9aa9db 100644 --- a/src/components/helpers/sharemodal/ShareModal.jsx +++ b/src/components/helpers/sharemodal/ShareModal.jsx @@ -68,6 +68,9 @@ export default function ShareModal({ modalClose, data }) { + {/* i think that wechat has no actual share function outside of qrcodes, as the only example of a share to wechat button i've seen used this api + * this requires some investigating before we deploy to production + */ } - - , -
- {items.map((item) => ( -
toggleFunction(item)} key={item.name}> - icon -
- {item.display_name || item.name} - {item.author} -
-
- {item.author} -
-
- 1 -
-
-
-
- ))} -
, - ]; -} diff --git a/src/components/modals/main/marketplace/Item.jsx b/src/components/modals/main/marketplace/Item.jsx index 8b58dbcb..f267f02b 100644 --- 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 {
- +
@@ -197,7 +195,7 @@ export default class Item extends PureComponent {
Language - English + {this.props.data.data.language}
) : null} @@ -218,10 +216,10 @@ export default class Item extends PureComponent { /> {this.props.button}
- + this.setState({ shareModal: true })} /> - + window.open( diff --git a/src/components/modals/main/marketplace/sections/Added.jsx b/src/components/modals/main/marketplace/sections/Added.jsx index 31d06940..fa64ddcb 100644 --- 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) { diff --git a/src/components/modals/main/marketplace/sections/Create.jsx b/src/components/modals/main/marketplace/sections/Create.jsx index 0531183d..3c9280fc 100644 --- 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')} /> - +
) : null} - - + + {getMessage('modals.main.settings.sections.advanced.timezone.automatic')} @@ -86,11 +84,7 @@ export default class AdvancedSettings extends PureComponent { - + 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 ( <> @@ -51,7 +25,24 @@ export default function AppearanceSettings() { subtitle
- +
@@ -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." > - + {/*

{getMessage('modals.main.settings.sections.appearance.accessibility.title')}

diff --git a/src/components/modals/main/settings/sections/Message.jsx b/src/components/modals/main/settings/sections/Message.jsx index 2d64cc6c..c6f72856 100644 --- 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'; diff --git a/src/components/modals/main/settings/sections/Navbar.jsx b/src/components/modals/main/settings/sections/Navbar.jsx index 0e756a2d..c67a0ce8 100644 --- 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 ? ( - + diff --git a/src/components/modals/main/settings/sections/Quote.jsx b/src/components/modals/main/settings/sections/Quote.jsx index 1d300c10..f69feb38 100644 --- 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'; diff --git a/src/components/modals/main/settings/sections/Reminder.jsx b/src/components/modals/main/settings/sections/Reminder.jsx index eef7e367..584c1057 100644 --- 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} /> - {/* this.updateColour(event)} - value={this.state.colour} - > - */}
-
-
-
- this.updateColour(event)} - value={this.state.colour} - > - -
- - Remove - -
-
- - - - +
+
+
+ this.updateColour(event)} + value={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.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'), + }, + }, });