From 3d945656d6a66bb952dc7a29784cb1e474b622ce Mon Sep 17 00:00:00 2001 From: David Ralph Date: Wed, 7 Apr 2021 22:19:46 +0100 Subject: [PATCH] fix: changelog tab now works, about tab fixed and improved, removed update modal and improved download button ui --- public/icons/logo_horizontal.png | Bin 0 -> 10097 bytes src/components/modals/Modals.jsx | 4 -- src/components/modals/main/scss/index.scss | 7 ++- .../modals/main/settings/sections/About.jsx | 12 ++++ .../main/settings/sections/Changelog.jsx | 17 +++--- src/components/modals/update/Update.jsx | 57 ------------------ src/components/modals/update/update.scss | 16 ----- .../widgets/background/PhotoInformation.jsx | 4 +- .../background/scss/_photoinformation.scss | 23 ++----- 9 files changed, 34 insertions(+), 106 deletions(-) create mode 100644 public/icons/logo_horizontal.png delete mode 100644 src/components/modals/update/Update.jsx delete mode 100644 src/components/modals/update/update.scss diff --git a/public/icons/logo_horizontal.png b/public/icons/logo_horizontal.png new file mode 100644 index 0000000000000000000000000000000000000000..e5c643c61c64052e1091fe7ede891876b3beb011 GIT binary patch literal 10097 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

HE#JRJQ2}zO7jUeUH-H8e*Rj2mn!Xjr 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 import('./main/Main')); -const Update = React.lazy(() => import('./update/Update')); const Welcome = React.lazy(() => import('./welcome/Welcome')); const Feedback = React.lazy(() => import('./feedback/Feedback')); const renderLoader = () => <>; @@ -45,9 +44,6 @@ export default class Modals extends React.PureComponent { this.setState({ mainModal: false })} isOpen={this.state.mainModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}>

this.setState({ mainModal: false })}/> - this.setState({ updateModal: false })} isOpen={this.state.updateModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}> - this.setState({ updateModal: false })}/> - this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal welcomemodal' overlayClassName='Overlay' ariaHideApp={false}> this.closeWelcome()}/> diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss index 6dadd46d..f5768060 100644 --- a/src/components/modals/main/scss/index.scss +++ b/src/components/modals/main/scss/index.scss @@ -339,4 +339,9 @@ li { .resetoverlay { background-color: rgba(0, 0, 0, 0.5); -} \ No newline at end of file +} + +.welcomeLink { + color: var(--modal-text) !important; + padding-right: 10px; +} diff --git a/src/components/modals/main/settings/sections/About.jsx b/src/components/modals/main/settings/sections/About.jsx index 22c643f2..49df30ab 100644 --- a/src/components/modals/main/settings/sections/About.jsx +++ b/src/components/modals/main/settings/sections/About.jsx @@ -1,6 +1,9 @@ import React from 'react'; import Tooltip from '@material-ui/core/Tooltip'; +import EmailIcon from '@material-ui/icons/Email'; +import TwitterIcon from '@material-ui/icons/Twitter'; +import ForumIcon from '@material-ui/icons/Forum'; const other_contributors = require('../../../../../modules/other_contributors.json'); @@ -68,10 +71,17 @@ export default class About extends React.PureComponent { Mue logo

{this.language.copyright} 2018-{new Date().getFullYear()} Mue Tab (BSD-3 License)

{this.language.version.title} {window.constants.VERSION} ({this.state.update})

+ +

{window.language.modals.welcome.support}

+ + + +

{this.language.resources_used.title}

Pexels ({this.language.resources_used.bg_images})

Google ({this.language.resources_used.pin_icon})

Undraw ({this.language.resources_used.welcome_img})

+

{this.language.contributors}

{this.state.loading} {this.state.contributors.map((item) => ( @@ -85,6 +95,7 @@ export default class About extends React.PureComponent { {item.login}/ ))} +

{this.language.supporters}

{this.state.loading} {this.state.sponsors.map((item) => ( @@ -92,6 +103,7 @@ export default class About extends React.PureComponent { {item.handle} ))} +

{this.language.photographers}

{this.state.loading}

{this.state.photographers}

diff --git a/src/components/modals/main/settings/sections/Changelog.jsx b/src/components/modals/main/settings/sections/Changelog.jsx index 8481ea5e..18458c4f 100644 --- a/src/components/modals/main/settings/sections/Changelog.jsx +++ b/src/components/modals/main/settings/sections/Changelog.jsx @@ -4,22 +4,23 @@ export default class Changelog extends React.PureComponent { constructor() { super(); this.state = { - title: this.props.language.title, + title: window.language.modals.update.title, date: null, - content: this.props.language.title, - html: this.props.language.loading, + content: window.language.modals.update.title, + html: window.language.modals.main.loading, image: null }; + this.language = window.language.modals.update; } async getUpdate() { const data = await (await fetch(window.constants.API_URL + '/getUpdate')).json(); if (data.statusCode === 500 || data.title === null) { - const supportText = `

${this.props.language.contact_support}: https://muetab.com/contact

`; + const supportText = `

${this.language.contact_support}: https://muetab.com/contact

`; return this.setState({ - title: this.props.language.error.title, - html: this.props.language.error.description + supportText + title: this.language.error.title, + html: this.language.error.description + supportText }); } @@ -35,8 +36,8 @@ export default class Changelog extends React.PureComponent { componentDidMount() { if (localStorage.getItem('offlineMode') === 'true') { return this.setState({ - title: this.props.language.offline.title, - html: this.props.language.offline.description + title: this.language.offline.title, + html: this.language.offline.description }); } diff --git a/src/components/modals/update/Update.jsx b/src/components/modals/update/Update.jsx deleted file mode 100644 index 2c437e44..00000000 --- a/src/components/modals/update/Update.jsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react'; - -import './update.scss'; - -export default class Update extends React.PureComponent { - constructor() { - super(); - this.state = { - title: this.props.language.title, - date: null, - content: this.props.language.title, - html: this.props.language.loading, - image: null - }; - } - - async getUpdate() { - const data = await (await fetch(window.constants.API_URL + '/getUpdate')).json(); - - if (data.statusCode === 500 || data.title === null) { - const supportText = `

${this.props.language.contact_support}: https://muetab.com/contact

`; - return this.setState({ - title: this.props.language.error.title, - html: this.props.language.error.description + supportText - }); - } - - this.setState({ - title: data.title, - date: data.published, - image: data.image || null, - author: data.author, - html: data.content - }); - } - - componentDidMount() { - if (localStorage.getItem('offlineMode') === 'true') { - return this.setState({ - title: this.props.language.offline.title, - html: this.props.language.offline.description - }); - } - - this.getUpdate(); - } - - render() { - return
- × -

{this.state.title}

-
{this.state.date}
- {this.state.image ? Update : null} -

-
; - } -} diff --git a/src/components/modals/update/update.scss b/src/components/modals/update/update.scss deleted file mode 100644 index 8b2068b6..00000000 --- a/src/components/modals/update/update.scss +++ /dev/null @@ -1,16 +0,0 @@ -@import '../main/scss/index.scss'; - -.updateContent { - width: 400px; - padding: 5px; - - .closeModal { - margin-top: 10px; - font-size: 45px; - } - - img { - width: 100%; - height: auto; - } -} diff --git a/src/components/widgets/background/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx index 4a900d6a..59f5745a 100644 --- a/src/components/widgets/background/PhotoInformation.jsx +++ b/src/components/widgets/background/PhotoInformation.jsx @@ -5,6 +5,7 @@ import Location from '@material-ui/icons/LocationOn'; import Camera from '@material-ui/icons/PhotoCamera'; import Resolution from '@material-ui/icons/Crop'; import Photographer from '@material-ui/icons/Person'; +import Download from '@material-ui/icons/GetApp'; const toDataURL = async (url) => { const response = await fetch(url); @@ -45,7 +46,8 @@ export default function PhotoInformation(props) { {props.info.resolution} {props.info.credit.split(` ${language.unsplash}`)[0]} - + + downloadImage(props.info)}>{language.download} ); diff --git a/src/components/widgets/background/scss/_photoinformation.scss b/src/components/widgets/background/scss/_photoinformation.scss index 0708c25e..8765f320 100644 --- a/src/components/widgets/background/scss/_photoinformation.scss +++ b/src/components/widgets/background/scss/_photoinformation.scss @@ -74,26 +74,11 @@ } .download { - transition: ease 0.33s; - color: var(--modal-text); - background-color: rgba(83, 82, 237, 1); + text-decoration: underline; cursor: pointer; - padding: 10px 30px; - font-size: 20px; - border-radius: 24px; - box-shadow: 0 5px 15px rgba(128, 161, 144, 0.4); + } - border: 2px solid rgba(83, 82, 237, 1); - color: var(--modal-text); - - &:hover { - color: rgba(83, 82, 237, 1); - } - - &:hover, - &:active { - outline: none; - background: none; - } + .MuiSvgIcon-root { + cursor: initial; } } \ No newline at end of file