diff --git a/src/App.jsx b/src/App.jsx index cf2d69e7..e867bfbf 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -75,10 +75,8 @@ export default class App extends React.PureComponent { -
- - -
+ + this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
this.favourite()} /> + favourited: this.favourite()} /> }; } favourite() { if (localStorage.getItem('favourite')) { localStorage.removeItem('favourite'); - this.setState({ favourited: this.favourite()} /> }); + this.setState({ favourited: this.favourite()} /> }); } else { const url = document.getElementById('backgroundImage').style.backgroundImage.replace('url("', '').replace('")', ''); const credit = document.getElementById('credit').textContent; const location = document.getElementById('location').textContent; localStorage.setItem('favourite', JSON.stringify({ url: url, credit: credit, location: location })); - this.setState({ favourited: this.favourite()} /> }); + this.setState({ favourited: this.favourite()} /> }); } } componentDidMount() { - if (localStorage.getItem('favourite')) this.setState({ favourited: this.favourite()} /> }); + if (localStorage.getItem('favourite')) this.setState({ favourited: this.favourite()} /> }); } render() { diff --git a/src/components/widgets/background/Maximise.jsx b/src/components/widgets/background/Maximise.jsx index b74c5bf0..a339cbb1 100644 --- a/src/components/widgets/background/Maximise.jsx +++ b/src/components/widgets/background/Maximise.jsx @@ -38,7 +38,7 @@ export default class View extends React.PureComponent { render() { if (localStorage.getItem('view') === 'false' || localStorage.getItem('background') === 'false') return null; return
- this.viewStuff()} /> + this.viewStuff()} />
} } \ 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 ab3ab0b8..8bba3f82 100644 --- a/src/components/widgets/background/scss/_photoinformation.scss +++ b/src/components/widgets/background/scss/_photoinformation.scss @@ -7,19 +7,10 @@ svg { float: left; - vertical-align: middle; margin-right: 1rem; font-size: calc(10px + 2vmin); } - span { - display: none; - } - - h1 { - position: relative; - } - svg, h1 { display: inline; @@ -75,10 +66,10 @@ outline: none; border: none; } -} -.infoCard:hover { - display: block !important; + &:hover { + display: block !important; + } } .photoInformationHover { diff --git a/src/components/widgets/background/scss/index.scss b/src/components/widgets/background/scss/index.scss index 9e7a62f6..9730cd66 100644 --- a/src/components/widgets/background/scss/index.scss +++ b/src/components/widgets/background/scss/index.scss @@ -42,28 +42,23 @@ } .view { - bottom: 10px; right: 25px; } .favourite { - bottom: 10px; right: 50px; padding-right: 5px; } .view, .favourite { + bottom: 10px; position: absolute; transition: all 0.5s ease 0s; + width: auto; + cursor: pointer; &:hover { transform: scale(1.1); } -} - -#viewButton, -#favouriteButton { - width: auto; - cursor: pointer; } \ No newline at end of file diff --git a/src/components/widgets/navbar/scss/_notes.scss b/src/components/widgets/navbar/scss/_notes.scss index c58d72d0..288269b3 100644 --- a/src/components/widgets/navbar/scss/_notes.scss +++ b/src/components/widgets/navbar/scss/_notes.scss @@ -1,15 +1,4 @@ -.notes { - position: relative; - display: inline-block; - - h3 { - text-shadow: none; - margin: 0; - } -} - -.notes .notescontainer { - text-align: center; +.notescontainer { padding: 15px; visibility: hidden; background-color: #fff; @@ -48,33 +37,21 @@ } textarea { - overflow: none; border: none; - outline: none; width: 200px; resize: none; height: 100px; margin: 10px; } -.noteIcon { - display: inline; - font-size: 1em; - float: none; -} - .topbarnotes { - text-align: center; - svg { font-size: 48px; - float: left !important; padding: 9px; } h3 { font-size: 48px; - float: right; margin-right: 20px; } } diff --git a/src/components/widgets/navbar/scss/index.scss b/src/components/widgets/navbar/scss/index.scss index 2a48bb44..3d1d0ed2 100644 --- a/src/components/widgets/navbar/scss/index.scss +++ b/src/components/widgets/navbar/scss/index.scss @@ -34,38 +34,6 @@ } } -.bottom-navbar { - position: absolute; - bottom: 1rem; - right: 1rem; - - div { - display: inline; - } - - img { - height: 1em; - width: auto; - margin: 0.5rem; - } - - svg.topicons { - color: map-get($theme-colours, 'main-text-color'); - -webkit-font-smoothing: subpixel-antialiased; - font-size: 1em; - display: inline; - margin: 0.5rem; - filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3)); - cursor: pointer; - transition: .2s ease; - - &:hover { - transform: translateZ(0); - transform: scale(1.3); - } - } -} - .visibilityshow { visibility: visible !important; } \ No newline at end of file diff --git a/src/components/widgets/quote/quote.scss b/src/components/widgets/quote/quote.scss index 04202718..da1c0ff3 100644 --- a/src/components/widgets/quote/quote.scss +++ b/src/components/widgets/quote/quote.scss @@ -15,24 +15,12 @@ .quoteauthor { font-size: 0.9em; letter-spacing: 0.5px; - margin: 0; -} - -.quoteAuthor, -.copyButton { - display: inline; - font-size: 0.8em; - position: relative !important; - display: block; - margin: 0 auto; } .copyButton { cursor: pointer; vertical-align: middle; - float: middle; margin: 0 auto; - text-align: right; transition: ease 0.2s !important; &:hover { @@ -45,19 +33,6 @@ h1.quoteauthor { display: inline; } -button.copyButton { - background: transparent; - border: none; - color: map-get($theme-colours, 'main'); - padding: 20px 20px; - text-align: center; - text-decoration: none; - font-size: 20px; - cursor: pointer; - border-radius: 5px; - display: table-cell -} - .quoteauthorlink { text-decoration: none; color: white; diff --git a/src/components/widgets/search/search.scss b/src/components/widgets/search/search.scss index aab31294..ef6b0560 100644 --- a/src/components/widgets/search/search.scss +++ b/src/components/widgets/search/search.scss @@ -20,6 +20,7 @@ background-color: rgba(0, 0, 0, 0.1); -webkit-transition: width 0.5s ease-in-out; transition: width 0.5s ease-in-out; + color: white; &:focus { width: 400px; @@ -41,8 +42,4 @@ .micIcon { margin-right: 10px; -} - -#searchEngine { - width: 130px; } \ No newline at end of file diff --git a/src/components/widgets/time/clock.scss b/src/components/widgets/time/clock.scss index 777a123e..8f8b9c4e 100644 --- a/src/components/widgets/time/clock.scss +++ b/src/components/widgets/time/clock.scss @@ -14,11 +14,10 @@ margin: 0 auto; border-radius: 100%; box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3); - border: 1px solid map-get($theme-colours, "main"); + border: 1px solid map-get($theme-colours, 'main'); } .react-clock__hand__body { - background: map-get($theme-colours, "main"); - ; + background: map-get($theme-colours, 'main'); box-shadow: 0 0 25px rgba(0, 0, 0, 0.3); } \ No newline at end of file diff --git a/src/scss/modules/_buttons.scss b/src/scss/modules/_buttons.scss index 7477450f..a582691a 100644 --- a/src/scss/modules/_buttons.scss +++ b/src/scss/modules/_buttons.scss @@ -1,15 +1,10 @@ %settingsButton { - text-align: center; - border: none; transition: ease 0.33s; color: map-get($theme-colours, 'main'); cursor: pointer; - display: inline-block; - position: relative; padding: 10px 30px; font-size: 20px; border-radius: 24px; - background: none; box-shadow: 0 5px 15px rgba(128, 161, 144, 0.4); &:hover, &:active { @@ -92,14 +87,9 @@ cursor: pointer; font-size: 18px; float: right; - vertical-align: middle; padding: 5px 30px; background: none; - outline: none; - border: none; - border: 2px solid #2d3436; border-radius: 24px; - font-family: 'Lexend Deca', sans-serif; transition: ease 0.33s; &:hover { diff --git a/src/scss/modules/_marketplace.scss b/src/scss/modules/_marketplace.scss index 389f3314..669598c7 100644 --- a/src/scss/modules/_marketplace.scss +++ b/src/scss/modules/_marketplace.scss @@ -1,33 +1,3 @@ -.tab, -button.tablinks { - margin-top: -10px; - font-size: 24px; - background: none; - border: none; - outline: none; - color: map-get($modal, 'text'); -} - -button.tablinks { - cursor: pointer; - padding: 6px; - border-radius: 12px; - padding: 10px 30px 10px 30px; - - &:hover { - background: rgba(189, 195, 199, .075); - } - - &:after { - content: ''; - display: block; - margin: 0 auto; - width: 50%; - padding-top: 10px; - border-bottom: 3px solid map-get($modal, 'tab-underline'); - } -} - #item a { color: map-get($button-colours, 'other'); cursor: pointer; @@ -222,16 +192,6 @@ p.description { } } -.banner { - text-align: center; - background: #54a0ff; - border-radius: 24px; - padding: 10px; - margin: 0; - color: map-get($theme-colours, 'main'); - display: none !important; -} - .featured { background: #2d3436; margin-top: 20px; @@ -261,10 +221,6 @@ p.description { color: white; } -.requires { - float: right; -} - #seemore { display: none; diff --git a/src/scss/modules/_modal.scss b/src/scss/modules/_modal.scss index 1d008987..b6f926c6 100644 --- a/src/scss/modules/_modal.scss +++ b/src/scss/modules/_modal.scss @@ -149,18 +149,38 @@ } } -.updateContent { - width: 400px; - padding: 5px; +.tab, +button.tablinks { + margin-top: -10px; + font-size: 24px; + background: none; + border: none; + outline: none; + color: map-get($modal, 'text'); +} - .closeModal { - margin-top: 10px; - font-size: 45px; +.tablinks { + cursor: pointer; + padding: 6px; + border-radius: 12px; + padding: 10px 30px 10px 30px; + + &:hover { + background: rgba(189, 195, 199, .075); } - img { - width: 100%; - height: auto; + &:after { + content: ''; + display: block; + margin: 0 auto; + width: 50%; + padding-top: 10px; + border-bottom: 3px solid map-get($modal, 'tab-underline'); + } + + svg { + top: 0.125em; + position: relative; } } @@ -177,9 +197,19 @@ border-bottom-right-radius: map-get($modal, 'border-radius'); } -.tablinks svg { - top: 0.125em; - position: relative; +.updateContent { + width: 400px; + padding: 5px; + + .closeModal { + margin-top: 10px; + font-size: 45px; + } + + img { + width: 100%; + height: auto; + } } #feedbackmodal { diff --git a/src/scss/modules/_settings.scss b/src/scss/modules/_settings.scss index 4cc27925..eb7e014e 100644 --- a/src/scss/modules/_settings.scss +++ b/src/scss/modules/_settings.scss @@ -37,10 +37,6 @@ transition: 0.4s; border-radius: 50%; } - - &.round:before { - border-radius: 50%; - } } input { @@ -50,7 +46,6 @@ input { box-sizing: border-box; border-image-slice: 1; border-image-source: map-get($theme-colours, 'gradient'); - outline: none; background: transparent; } @@ -59,7 +54,6 @@ input { &:before { -webkit-transform: translateX(26px); - -ms-transform: translateX(26px); transform: translateX(26px); } } @@ -186,7 +180,6 @@ input[type=color] { } } -// This is duplicated because it didn't work with a comma, need to look into it later input[type=color]::-moz-color-swatch { border-radius: 100%; height: 30px; @@ -207,28 +200,16 @@ input[type=color]::-moz-color-swatch { } } -input[type=checkbox] { - vertical-align: middle; -} - .customBackgroundHex { font-size: 1.2em; padding-left: 7px; vertical-align: middle; } -input[type=number].stop { - margin-left: 7px; -} - button.remove + input[type=color].colour { margin-left: 7px; } -#customBackgroundColour { - cursor: pointer; -} - // Dark Theme .dark { #blurRange, #brightnessRange {