mirror of https://github.com/mue/mue.git
refactor: cleanup and remove unused stuff
This commit is contained in:
David Ralph
parent
987a7eda6e
commit
4691ccf166
|
|
@ -1,6 +1,3 @@
|
|||
{
|
||||
"extends": [
|
||||
"stylelint-config-standard-scss",
|
||||
"stylelint-config-prettier-scss"
|
||||
]
|
||||
"extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
104
src/App.jsx
104
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' ? <Background /> : null}
|
||||
<ToastContainer
|
||||
position="bottom-right"
|
||||
autoClose={localStorage.getItem('toastDisplayTime') || 2500}
|
||||
newestOnTop={true}
|
||||
closeOnClick
|
||||
pauseOnFocusLoss
|
||||
/>
|
||||
<div id="center">
|
||||
<Widgets />
|
||||
<Modals />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
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' ? <Background /> : null}
|
||||
<ToastContainer
|
||||
position="bottom-right"
|
||||
autoClose={localStorage.getItem('toastDisplayTime') || 2500}
|
||||
newestOnTop={true}
|
||||
closeOnClick
|
||||
pauseOnFocusLoss
|
||||
/>
|
||||
<div id="center">
|
||||
<Widgets />
|
||||
<Modals />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
import { PureComponent } from 'react';
|
||||
|
||||
import { InputBase } from '@mui/material';
|
||||
|
||||
import EventBus from 'modules/helpers/eventbus';
|
||||
|
||||
import './autocomplete.scss';
|
||||
|
|
|
|||
|
|
@ -40,5 +40,5 @@
|
|||
}
|
||||
|
||||
.micActive {
|
||||
box-shadow: 0px 0px 50px 9px #E74C3C !important;
|
||||
}
|
||||
box-shadow: 0px 0px 50px 9px #e74c3c !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import variables from 'modules/variables';
|
||||
import { MdArrowForwardIos } from 'react-icons/md';
|
||||
import './preview.scss';
|
||||
|
||||
export default function Preview(props) {
|
||||
|
|
|
|||
|
|
@ -68,6 +68,9 @@ export default function ShareModal({ modalClose, data }) {
|
|||
<MdEmail />
|
||||
</button>
|
||||
</Tooltip>
|
||||
{/* 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
|
||||
*/ }
|
||||
<Tooltip title="WeChat">
|
||||
<button
|
||||
onClick={() =>
|
||||
|
|
|
|||
|
|
@ -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>,
|
||||
];
|
||||
}
|
||||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ export default class Added extends PureComponent {
|
|||
}
|
||||
|
||||
this.setState({
|
||||
installed: installed,
|
||||
installed,
|
||||
});
|
||||
|
||||
if (sendEvent) {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
@import 'modules/scrollbars';
|
||||
|
||||
@import 'settings/main';
|
||||
@import 'settings/buttons';
|
||||
|
||||
@import 'marketplace/main';
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
@import 'scss/modules/buttons';
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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')}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 <div id="widgets"></div>;
|
||||
return <div id="widgets" />;
|
||||
}
|
||||
|
||||
// allow for re-ordering widgets
|
||||
let elements = [];
|
||||
// we have a default to prevent errors
|
||||
let elements = [
|
||||
<Greeting />,
|
||||
<Clock />,
|
||||
<QuickLinks />,
|
||||
<Quote />,
|
||||
<Date />,
|
||||
<Message />,
|
||||
<Reminder />,
|
||||
];
|
||||
|
||||
if (this.state.order) {
|
||||
elements = [];
|
||||
this.state.order.forEach((element) => {
|
||||
elements.push(<Fragment key={element}>{this.widgets[element]}</Fragment>);
|
||||
});
|
||||
} else {
|
||||
// prevent error
|
||||
elements = [
|
||||
<Greeting />,
|
||||
<Clock />,
|
||||
<QuickLinks />,
|
||||
<Quote />,
|
||||
<Date />,
|
||||
<Message />,
|
||||
<Reminder />,
|
||||
];
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 }) {
|
|||
<Download onClick={() => downloadImage(info)} />
|
||||
</Tooltip>
|
||||
</div>
|
||||
<span className='subtitle' style={{marginBottom: '20px'}}>Description</span>
|
||||
<span className="subtitle" style={{ marginBottom: '20px' }}>
|
||||
Description
|
||||
</span>
|
||||
<div className="extra-content">
|
||||
<span className="subtitle">
|
||||
{variables.language.getMessage(
|
||||
|
|
|
|||
|
|
@ -197,7 +197,7 @@
|
|||
color: t($link);
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
|||
</button>
|
||||
</Tooltip>
|
||||
<Tooltip title={'Add'}>
|
||||
<button onClick={() => this.addTodo()}>
|
||||
<button onClick={() => this.updateTodo('add')}>
|
||||
<MdPlaylistAdd />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div className={'todoRows'}>
|
||||
{this.state.todo.map((value, index) => (
|
||||
{this.state.todo.map((_value, index) => (
|
||||
<div
|
||||
className={'todoRow' + (this.state.todo[index].done ? ' done' : '')}
|
||||
key={index}
|
||||
>
|
||||
<Checkbox
|
||||
checked={this.state.todo[index].done}
|
||||
onClick={() => this.doneTodo(index)}
|
||||
onClick={() => this.updateTodo('done', index)}
|
||||
/>
|
||||
<TextareaAutosize
|
||||
placeholder={variables.language.getMessage(
|
||||
|
|
@ -155,10 +149,10 @@ class Todo extends PureComponent {
|
|||
'widgets.navbar.notes.placeholder',
|
||||
)}
|
||||
value={this.state.todo[index].value}
|
||||
onChange={(data) => this.setTodo(index, data)}
|
||||
onChange={(data) => this.updateTodo('set', index, data)}
|
||||
readOnly={this.state.todo[index].done}
|
||||
/>
|
||||
<MdDelete onClick={() => this.removeTodo(index)} />
|
||||
<MdDelete onClick={() => this.updateTodo('remove', index)} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -169,6 +163,7 @@ class Todo extends PureComponent {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default function TodoWrapper() {
|
||||
const { x, y, reference, floating, strategy } = useFloating({
|
||||
placement: 'bottom',
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -398,7 +398,7 @@ export default class Quote extends PureComponent {
|
|||
<span className="quote" ref={this.quote}>
|
||||
{this.state.quote}
|
||||
</span>
|
||||
{(localStorage.getItem('widgetStyle') === 'legacy') ? (
|
||||
{localStorage.getItem('widgetStyle') === 'legacy' ? (
|
||||
<>
|
||||
<div>
|
||||
<h1 className="quoteauthor" ref={this.quoteauthor}>
|
||||
|
|
@ -418,7 +418,7 @@ export default class Quote extends PureComponent {
|
|||
</>
|
||||
) : (
|
||||
<>
|
||||
{this.state.author !== '' ? (
|
||||
{this.state.author !== '' ? (
|
||||
<div className="author-holder">
|
||||
<div className="author">
|
||||
<div
|
||||
|
|
@ -451,7 +451,9 @@ export default class Quote extends PureComponent {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : <div ref={this.quoteauthor}></div> }
|
||||
) : (
|
||||
<div ref={this.quoteauthor}></div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{/*variables.keybinds.favouriteQuote && variables.keybinds.favouriteQuote !== '' ? <Hotkeys keyName={variables.keybinds.favouriteQuote} onKeyDown={() => this.favourite()} /> : null*/}
|
||||
|
|
|
|||
|
|
@ -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 {
|
|||
<span className="subtitle">Time</span>
|
||||
</div>
|
||||
<div className="icons">
|
||||
<Tooltip title='Remove'><MdClose /></Tooltip>
|
||||
<Tooltip title='Snooze'><MdSnooze /></Tooltip>
|
||||
<Tooltip title="Remove">
|
||||
<MdClose />
|
||||
</Tooltip>
|
||||
<Tooltip title="Snooze">
|
||||
<MdSnooze />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = (
|
||||
<button onClick={this.startSpeechRecognition} id='micBtn'>
|
||||
<button onClick={this.startSpeechRecognition} id="micBtn">
|
||||
<MdMic className="micIcon" />
|
||||
</button>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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 {
|
|||
<span className="ampm">{this.state.ampm}</span>
|
||||
</span>
|
||||
{localStorage.getItem('Pomodoro') === 'true' ? (
|
||||
<Pomodoro hours={this.state.nowGlobal.getHours} minutes={this.state.nowGlobal.getMinutes} />
|
||||
<Pomodoro
|
||||
hours={this.state.nowGlobal.getHours}
|
||||
minutes={this.state.nowGlobal.getMinutes}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -203,27 +203,27 @@ export default class Weather extends PureComponent {
|
|||
{enabled('showlocation') ? <span className="loc">{this.state.location}</span> : null}
|
||||
</div>
|
||||
<div className="expanded-info">
|
||||
{enabled('upcomingForecast') ? (
|
||||
<>
|
||||
<span className="subtitle">Upcoming Forecast</span>
|
||||
<div className="upcomingForecast">
|
||||
<div>
|
||||
<WeatherIcon name={this.state.icon} />
|
||||
<span className="period">15:00</span>
|
||||
<span className="minmax">{minmax()}</span>
|
||||
</div>
|
||||
<div>
|
||||
<WeatherIcon name={this.state.icon} />
|
||||
<span className="period">16:00</span>
|
||||
<span className="minmax">{minmax()}</span>
|
||||
</div>
|
||||
<div>
|
||||
<WeatherIcon name={this.state.icon} />
|
||||
<span className="period">17:00</span>
|
||||
<span className="minmax">{minmax()}</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
{enabled('upcomingForecast') ? (
|
||||
<>
|
||||
<span className="subtitle">Upcoming Forecast</span>
|
||||
<div className="upcomingForecast">
|
||||
<div>
|
||||
<WeatherIcon name={this.state.icon} />
|
||||
<span className="period">15:00</span>
|
||||
<span className="minmax">{minmax()}</span>
|
||||
</div>
|
||||
<div>
|
||||
<WeatherIcon name={this.state.icon} />
|
||||
<span className="period">16:00</span>
|
||||
<span className="minmax">{minmax()}</span>
|
||||
</div>
|
||||
<div>
|
||||
<WeatherIcon name={this.state.icon} />
|
||||
<span className="period">17:00</span>
|
||||
<span className="minmax">{minmax()}</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
<span className="subtitle">Extra Information</span>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '../variables';
|
||||
@import 'variables';
|
||||
|
||||
.Toastify__toast-body {
|
||||
font-size: 16px !important;
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
|
@ -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'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue