diff --git a/README.md b/README.md
index be62e4f1..a38a4e27 100644
--- a/README.md
+++ b/README.md
@@ -39,9 +39,9 @@ Mue is a fast, open and free-to-use browser extension that gives a new, fresh an
* Supports multiple browsers
* Actively developed and open source
* Automatically updating API (no tracking) with new photos, quotes and offline mode
-* Search bar
+* Widgets such as searchbar, weather, quick links, clock, date, quote, greeting
* Settings - enable/disable various features and customise parts of Mue
-* Update modal, copy button and more!
+* Navbar with copy button, favourite background, notes feature etc
* Marketplace - download custom photo packs made by the community!
### Planned Features
@@ -132,4 +132,4 @@ Many thanks to [Highholding](https://discord.bio/p/highholding), [Noa Shapira](#
And finally, a big thank you to all the other [contributors](https://github.com/mue/mue/graphs/contributors)!
### Resources
-[Pexels](https://pexels.com), [Unsplash](https://unsplash.com) - Stock photos used for offline mode
+[Pexels](https://pexels.com), [Unsplash](https://unsplash.com) - Stock photos used for offline mode
diff --git a/src/components/modals/feedback/feedback.scss b/src/components/modals/feedback/feedback.scss
index c6eb3acf..5dd9f321 100644
--- a/src/components/modals/feedback/feedback.scss
+++ b/src/components/modals/feedback/feedback.scss
@@ -32,7 +32,7 @@
padding: 15px 20px;
font-size: 1.5em;
background: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%);
- color: #ffffff;
+ color: #fff;
text-transform: uppercase;
cursor: pointer;
}
diff --git a/src/components/modals/main/marketplace/sections/Marketplace.jsx b/src/components/modals/main/marketplace/sections/Marketplace.jsx
index 4658f5db..6775bdca 100644
--- a/src/components/modals/main/marketplace/sections/Marketplace.jsx
+++ b/src/components/modals/main/marketplace/sections/Marketplace.jsx
@@ -53,7 +53,7 @@ export default class Marketplace extends React.PureComponent {
const installed = JSON.parse(localStorage.getItem('installed'));
- if (installed.some(item => item.name === info.data.name)) {
+ if (installed.some((item) => item.name === info.data.name)) {
button = this.buttons.uninstall;
}
@@ -125,7 +125,7 @@ export default class Marketplace extends React.PureComponent {
);
- }
+ };
if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
return errorMessage(<>
diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss
index 7358cc9a..90a9ca68 100644
--- a/src/components/modals/main/scss/index.scss
+++ b/src/components/modals/main/scss/index.scss
@@ -77,6 +77,21 @@
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
overflow-y: auto;
position: relative;
+
+ // animation
+ opacity: 0;
+ transform: scale(0);
+ transition: all 300ms cubic-bezier(.47, 1.64, .41, 0.8);
+}
+
+.ReactModal__Content--after-open {
+ opacity: 1;
+ transform: scale(1);
+}
+
+.ReactModal__Content--before-close {
+ opacity: 0;
+ transform: scale(0);
}
@media only screen and (max-height: 700px) {
@@ -92,22 +107,6 @@
}
}
-.ReactModal__Content {
- opacity: 0;
- transform: scale(0);
- transition: all 300ms cubic-bezier(.47, 1.64, .41, .8);
-}
-
-.ReactModal__Content--after-open {
- opacity: 1;
- transform: scale(1);
-}
-
-.ReactModal__Content--before-close {
- opacity: 0;
- transform: scale(0);
-}
-
ul.sidebar {
position: absolute;
top: 0;
@@ -172,7 +171,6 @@ li {
background: var(--tab-active);
}
-
@media only screen and (max-width: 1200px) {
li.tab-list-item {
span {
@@ -252,6 +250,16 @@ li {
&:hover {
color: rgb(165, 165, 165);
+ background: none;
+ }
+
+ span,
+ svg {
+ font-size: 1.1em !important;
+ }
+
+ svg {
+ font-size: 1.2em !important;
}
}
@@ -274,21 +282,6 @@ li {
}
}
-.navbar-item {
- span,
- svg {
- font-size: 1.1em !important;
- }
-
- svg {
- font-size: 1.2em !important;
- }
-
- &:hover {
- background: none;
- }
-}
-
@media only screen and (max-width: 1300px) {
li.navbar-item {
span {
@@ -373,4 +366,4 @@ li {
.MuiIconButton-root {
color: var(--modal-text) !important;
-}
\ No newline at end of file
+}
diff --git a/src/components/modals/main/scss/settings/_buttons.scss b/src/components/modals/main/scss/settings/_buttons.scss
index 5cbdb822..fbdc7805 100644
--- a/src/components/modals/main/scss/settings/_buttons.scss
+++ b/src/components/modals/main/scss/settings/_buttons.scss
@@ -20,6 +20,7 @@
.refresh {
@extend %settingsButton;
+
background-color: map-get($button-colours, 'confirm');
border: 2px solid map-get($button-colours, 'confirm');
@@ -31,6 +32,7 @@
.reset {
@extend %settingsButton;
+
margin-left: 5px;
background-color: map-get($button-colours, 'reset');
border: 2px solid map-get($button-colours, 'reset');
@@ -43,6 +45,7 @@
.close {
@extend %settingsButton;
+
padding: 10px 50px 10px 50px;
background-color: map-get($button-colours, 'other');
border: 2px solid map-get($button-colours, 'other');
@@ -55,6 +58,7 @@
.add {
@extend %settingsButton;
+
background-color: map-get($button-colours, 'other');
border: 2px solid map-get($button-colours, 'other');
@@ -68,6 +72,7 @@
.uploadbg,
.import {
@extend %settingsButton;
+
background-color: map-get($button-colours, 'other');
color: map-get($theme-colours, 'primary');
border: 2px solid map-get($button-colours, 'other');
diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss
index 1fa6b4f9..59c7ed70 100644
--- a/src/components/modals/main/scss/settings/_main.scss
+++ b/src/components/modals/main/scss/settings/_main.scss
@@ -109,7 +109,12 @@ input[type=color]::-moz-color-swatch {
margin-left: 0;
}
-.MuiCheckbox-colorPrimary.Mui-checked, .MuiSwitch-colorPrimary.Mui-checked, .MuIconButton-colorPrimary.Mui-checked, .MuiSwitch-thumb, .MuiRadio-colorSecondary.Mui-checked, .PrivateSwitchBase-input-4 {
+.MuiCheckbox-colorPrimary.Mui-checked,
+.MuiSwitch-colorPrimary.Mui-checked,
+.MuIconButton-colorPrimary.Mui-checked,
+.MuiSwitch-thumb,
+.MuiRadio-colorSecondary.Mui-checked,
+.PrivateSwitchBase-input-4 {
color: var(--modal-text) !important;
}
@@ -121,7 +126,7 @@ input[type=color]::-moz-color-swatch {
margin-left: 0px !important;
}
-.MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track {
+.MuiSwitch-colorPrimary.Mui-checked+.MuiSwitch-track {
background: darkgray !important;
}
@@ -155,4 +160,4 @@ input[type=color]::-moz-color-swatch {
.sortableitem {
color: var(--modal-text) !important;
cursor: move;
-}
\ No newline at end of file
+}
diff --git a/src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss b/src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss
index d181d3fb..d51f2be0 100644
--- a/src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss
+++ b/src/components/modals/main/scss/settings/react-color-picker-gradient-picker-custom-styles.scss
@@ -1,6 +1,6 @@
// The following CSS is to work around some assumptions made by the react-color-gradient-picker
* {
-// workaround for https://github.com/arthay/react-color-gradient-picker/issues/11
+ // workaround for https://github.com/arthay/react-color-gradient-picker/issues/11
box-sizing: inherit;
}
@@ -11,6 +11,7 @@ div.color-preview-area > div > div:nth-child(5) {
.ui-color-picker {
margin: 8px -12px;
+ background-color: var(--background) !important;
}
.input-field .label {
@@ -18,10 +19,6 @@ div.color-preview-area > div > div:nth-child(5) {
}
// other styling for themes support etc
-.ui-color-picker {
- background-color: var(--background) !important;
-}
-
.gradient-degrees {
border: 3px solid var(--modal-text) !important;
}
@@ -36,4 +33,4 @@ div.color-preview-area > div > div:nth-child(5) {
.gradient-type-item.active::after {
border: 2px solid var(--modal-text) !important;
-}
\ No newline at end of file
+}
diff --git a/src/components/widgets/background/scss/_photoinformation.scss b/src/components/widgets/background/scss/_photoinformation.scss
index 055bf2a7..21c7870e 100644
--- a/src/components/widgets/background/scss/_photoinformation.scss
+++ b/src/components/widgets/background/scss/_photoinformation.scss
@@ -88,4 +88,4 @@
.MuiSvgIcon-root {
cursor: initial;
}
-}
\ No newline at end of file
+}
diff --git a/src/components/widgets/background/scss/index.scss b/src/components/widgets/background/scss/index.scss
index bd5cc2ae..ca01fc28 100644
--- a/src/components/widgets/background/scss/index.scss
+++ b/src/components/widgets/background/scss/index.scss
@@ -34,4 +34,4 @@
to {
opacity: 1;
}
-}
\ No newline at end of file
+}
diff --git a/src/components/widgets/navbar/scss/index.scss b/src/components/widgets/navbar/scss/index.scss
index 7dc34163..bd13d697 100644
--- a/src/components/widgets/navbar/scss/index.scss
+++ b/src/components/widgets/navbar/scss/index.scss
@@ -23,7 +23,7 @@
margin: 0.5rem;
filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
cursor: pointer;
- transition: .2s ease;
+ transition: 0.2s ease;
&:hover {
color: map-get($theme-colours, 'main-text-color');
diff --git a/src/components/widgets/quicklinks/QuickLinks.jsx b/src/components/widgets/quicklinks/QuickLinks.jsx
index 08844572..06a9ea7c 100644
--- a/src/components/widgets/quicklinks/QuickLinks.jsx
+++ b/src/components/widgets/quicklinks/QuickLinks.jsx
@@ -111,7 +111,7 @@ export default class QuickLinks extends React.PureComponent {
this.addLink();
e.preventDefault();
}
- }
+ };
}
render() {
diff --git a/src/components/widgets/quicklinks/quicklinks.scss b/src/components/widgets/quicklinks/quicklinks.scss
index 88354b5e..9107a4c7 100644
--- a/src/components/widgets/quicklinks/quicklinks.scss
+++ b/src/components/widgets/quicklinks/quicklinks.scss
@@ -79,7 +79,7 @@ textarea {
img {
height: 32px;
width: auto;
- transition: transform .2s;
+ transition: transform 0.2s;
user-select: none;
&:hover {
diff --git a/src/components/widgets/quote/Quote.jsx b/src/components/widgets/quote/Quote.jsx
index 40fb5cfc..75946ece 100644
--- a/src/components/widgets/quote/Quote.jsx
+++ b/src/components/widgets/quote/Quote.jsx
@@ -23,12 +23,10 @@ export default class Quote extends React.PureComponent {
copy: '',
quoteLanguage: ''
};
-
this.buttons = {
tweet: ,
copy:
- }
-
+ };
this.language = window.language.widgets.quote;
}
diff --git a/src/components/widgets/search/search.scss b/src/components/widgets/search/search.scss
index cbd88058..2bbb88ec 100644
--- a/src/components/widgets/search/search.scss
+++ b/src/components/widgets/search/search.scss
@@ -22,7 +22,7 @@
&:focus {
width: 400px;
- background-color: rgba(0, 0, 0, .5);
+ background-color: rgba(0, 0, 0, 0.5);
user-select: text;
}
}
diff --git a/src/components/widgets/time/clock.scss b/src/components/widgets/time/clock.scss
index 70ccbc29..c85d64fa 100644
--- a/src/components/widgets/time/clock.scss
+++ b/src/components/widgets/time/clock.scss
@@ -22,11 +22,12 @@
user-select: none;
}
-.react-clock__hand__body, .react-clock__mark__body {
+.react-clock__hand__body,
+.react-clock__mark__body {
background: map-get($theme-colours, 'main') !important;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}
.clock-container {
margin-top: 13px;
-}
\ No newline at end of file
+}
diff --git a/src/components/widgets/time/date.scss b/src/components/widgets/time/date.scss
index 6b490372..2c9d7268 100644
--- a/src/components/widgets/time/date.scss
+++ b/src/components/widgets/time/date.scss
@@ -3,4 +3,4 @@
user-select: none;
text-transform: capitalize;
font-weight: bold;
-}
\ No newline at end of file
+}
diff --git a/src/components/widgets/weather/Weather.jsx b/src/components/widgets/weather/Weather.jsx
index f2d218d8..e2de72c1 100644
--- a/src/components/widgets/weather/Weather.jsx
+++ b/src/components/widgets/weather/Weather.jsx
@@ -42,7 +42,7 @@ export default class Weather extends React.PureComponent {
humidity: this.state.weather.humidity,
pressure: this.state.weather.pressure
}
- }
+ };
if (!this.state.weather.temp) {
data = await (await fetch (window.constants.WEATHER_URL + `?city=${this.state.location}`)).json();
diff --git a/src/scss/_themes.scss b/src/scss/_themes.scss
index 5defef21..042b7874 100644
--- a/src/scss/_themes.scss
+++ b/src/scss/_themes.scss
@@ -10,8 +10,8 @@ $modal-link: map-get($modal, 'modal-link');
$main-text-dark: map-get($theme-colours, 'secondary');
$modal-text-dark: map-get($theme-colours, 'main');
-$background-dark: map-get($modal, 'background-dark');
-$sidebar-dark: map-get($modal, 'sidebar-dark');
+$background-dark: map-get($modal, 'background-dark');
+$sidebar-dark: map-get($modal, 'sidebar-dark');
$tab-active-dark: map-get($modal, 'tab-active-dark');
$photo-info-dark: map-get($theme-colours, 'photo-info-dark');
$modal-link-dark: map-get($modal, 'modal-link-dark');
@@ -34,4 +34,4 @@ $modal-link-dark: map-get($modal, 'modal-link-dark');
--tab-active: #{$tab-active-dark};
--photo-info: #{$photo-info-dark};
--modal-link: #{$modal-link-dark};
-}
\ No newline at end of file
+}
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 810ddc5f..a4136d5d 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -19,7 +19,7 @@ $modal: (
'sidebar': #f0f0f0,
'tab-active': rgba(219, 219, 219, 0.72),
'sidebar-dark': #353b48,
- 'tab-active-dark': rgba(65, 71, 84, .9),
+ 'tab-active-dark': rgba(65, 71, 84, 0.9),
'modal-link': #5352ed,
'modal-link-dark': #3498db
);
@@ -36,5 +36,5 @@ $button-colours: (
);
$main-parts: (
- 'shadow': 0 0 1rem 0 rgba(0, 0, 0, .2)
+ 'shadow': 0 0 1rem 0 rgba(0, 0, 0, 0.2)
);
diff --git a/src/scss/index.scss b/src/scss/index.scss
index a1e49a31..66b39aa6 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -6,7 +6,7 @@
@import 'modules/buttons';
body {
- background: #000000;
+ background: #000;
margin: 0;
overflow: hidden;
}
diff --git a/src/scss/modules/_buttons.scss b/src/scss/modules/_buttons.scss
index 1d2bf331..afc07007 100644
--- a/src/scss/modules/_buttons.scss
+++ b/src/scss/modules/_buttons.scss
@@ -7,7 +7,8 @@
border-radius: 24px;
box-shadow: 0 5px 15px rgba(128, 161, 144, 0.4);
- &:hover, &:active {
+ &:hover,
+ &:active {
outline: none;
background: none;
}
@@ -19,6 +20,7 @@
.pinNote {
@extend %settingsButton;
+
background-color: map-get($button-colours, 'confirm');
border: 2px solid map-get($button-colours, 'confirm');
color: map-get($theme-colours, 'main');
@@ -42,6 +44,7 @@
.saveNote {
@extend %settingsButton;
+
background-color: map-get($button-colours, 'other');
border: 2px solid map-get($button-colours, 'other');
color: map-get($theme-colours, 'main');
diff --git a/src/scss/modules/_toast.scss b/src/scss/modules/_toast.scss
index 0257c70e..55cad22b 100644
--- a/src/scss/modules/_toast.scss
+++ b/src/scss/modules/_toast.scss
@@ -22,20 +22,17 @@
.Toastify__progress-bar--default {
height: 3px !important;
background: var(--modal-text) !important;
+ color: var(--modal-text) !important;
}
.Toastify__toast-container {
width: auto !important;
}
-.Toastify__progress-bar--default {
- color: var(--modal-text) !important;
-}
-
.Toastify__close-button {
color: var(--modal-text) !important;
}
.Toastify__toast--default {
background: var(--background) !important;
-}
\ No newline at end of file
+}