diff --git a/src/components/modals/tabs/Settings.jsx b/src/components/modals/tabs/Settings.jsx index b0a0b27f..6860b1e8 100644 --- a/src/components/modals/tabs/Settings.jsx +++ b/src/components/modals/tabs/Settings.jsx @@ -15,20 +15,17 @@ export default class Settings extends React.PureComponent { toast(this.props.toastLanguage.reset); } - updateCurrent() { + componentDidMount() { + // Settings document.getElementById('greetingName').value = localStorage.getItem('greetingName'); document.getElementById('language').value = localStorage.getItem('language'); - if (document.getElementById('modal').classList.contains('dark')) { + if (document.getElementById('modal').classList.contains('dark')) { // Dark theme support for dropdowns const choices = document.getElementsByClassName('choices'); for (let i = 0; i < choices.length; i++) choices[i].style.backgroundColor = '#2f3542'; } - } - componentDidMount() { - this.updateCurrent(); - - document.getElementById('file-input').onchange = (e) => { + document.getElementById('file-input').onchange = (e) => { // import settings const file = e.target.files[0]; if (file.type !== 'application/json') return console.error(`expected json, got ${file.type}`); @@ -89,7 +86,7 @@ export default class Settings extends React.PureComponent { - + diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 3c7b5b81..3dc62563 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -16,8 +16,8 @@ $modal: ( ); $marketplace: ( - 'item-background': rgba(242, 243, 244, 1), - 'product-information-backgroud': rgba(242, 243, 244, 1), + 'item-background': rgba(242, 243, 244, 1), + 'product-information-backgroud': rgba(242, 243, 244, 1), ); $button-colours: ( diff --git a/src/scss/modules/_buttons.scss b/src/scss/modules/_buttons.scss index 6011d3bd..c0e3c5e7 100644 --- a/src/scss/modules/_buttons.scss +++ b/src/scss/modules/_buttons.scss @@ -10,6 +10,7 @@ font-size: 20px; border-radius: 24px; background: none; + &:hover { outline: none; } @@ -32,7 +33,6 @@ } } - .reset { @extend %settingsButton; background-color: map-get($button-colours, "reset"); @@ -171,11 +171,7 @@ @extend .storebutton; } -.sideload { - margin-top: 12px; -} - -.seemore { +.sideload, .seemore { margin-top: 12px; } diff --git a/src/scss/modules/_marketplace.scss b/src/scss/modules/_marketplace.scss index 49896293..3dea237a 100644 --- a/src/scss/modules/_marketplace.scss +++ b/src/scss/modules/_marketplace.scss @@ -151,7 +151,6 @@ p.author { font-size: 35px !important; } - p.description { margin-top: 0px; } @@ -213,14 +212,10 @@ p.description { } #marketplace { - -webkit-animation: content 0.5s; - -moz-animation: content 0.5s; - -ms-animation: content 0.5s; - -o-animation: content 0.5s; - animation: content 0.5s; + @include animation('content 0.5s'); } -@keyframes content { +@include keyframes(content) { from { opacity: 0; transform: translateY(5%); @@ -278,9 +273,9 @@ p.description { #seemore { display: none; -} -#seemore svg { - font-size: 35px !important; - margin-bottom: -30px; + svg { + font-size: 35px !important; + margin-bottom: -30px; + } } \ No newline at end of file diff --git a/src/scss/modules/_modal.scss b/src/scss/modules/_modal.scss index 84c7c801..be344c42 100644 --- a/src/scss/modules/_modal.scss +++ b/src/scss/modules/_modal.scss @@ -130,11 +130,10 @@ } .zoom-out { - -webkit-animation: zoom-out 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; - animation: zoom-out 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + @include animation('zoom-out 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both'); } -@-webkit-keyframes zoom-out { +@include keyframes(zoom-out) { 0% { transform: scale(1, 1); } @@ -148,20 +147,6 @@ } } -@keyframes zoom-out { - 0% { - -webkit-transform: scale(1, 1); - } - - 50% { - -webkit-transform: scale(1.05, 1.05); - } - - 100% { - -webkit-transform: scale(0); - } -} - .updateContent { width: 400px; padding: 5px;