Dark theme notes + photoinformation, new features and fixes

src/App.jsx

@@ -50,15 +50,16 @@ export default class App extends React.PureComponent {
   // Render all the components
   render() {
     let modalClassList = 'Modal'; // Modal features
-    //  let tooltipClassList = 'tooltiptext';
+    let tooltipClassList = 'infoCard';
     if ((localStorage.getItem('brightnessTime') && new Date().getHours() > 18) || localStorage.getItem('darkTheme') === 'true') {
-      modalClassList = 'Modal dark';
-     // tooltipClassList = 'tooltiptext dark';
+      modalClassList += ' dark';
+      tooltipClassList += ' dark';
     }
     const overlayClassList = (localStorage.getItem('animations') === 'true') ? 'Overlay modal-animation' : 'Overlay';
 
     const en = require('./translations/en.json'); // User language
-    const language = merge(en, require(`./translations/${localStorage.getItem('language') || 'en'}.json`));
+    const languagecode = localStorage.getItem('language') || 'en';
+    const language = merge(en, require(`./translations/${languagecode}.json`));
 
     return (
       <React.Fragment>
@@ -70,8 +71,8 @@ export default class App extends React.PureComponent {
           <Greeting language={language.greeting} />
           <Clock/>
           <Date/>
-          <Quote language={language.toasts} />
-          <PhotoInformation language={language} />
+          <Quote language={language.toasts} languagecode={languagecode} />
+          <PhotoInformation language={language} className={tooltipClassList} />
           <div className='bottom-navbar'>
             <Maximise/>
             <Favourite/>

src/components/modals/tabs/Addons.jsx

@@ -68,6 +68,8 @@ export default class Addons extends React.PureComponent {
   }
 
   componentDidMount() {
+    if (localStorage.getItem('animations') === 'true') document.getElementById('marketplace').classList.add('marketplaceanimation');
+
     document.getElementById('file-input').onchange = (e) => {
         const reader = new FileReader();
         reader.readAsText(e.target.files[0], 'UTF-8');
@@ -76,7 +78,7 @@ export default class Addons extends React.PureComponent {
   }
 
   render() {
-    let content = <Items items={this.state.installed} toggleFunction={(input) => this.toggle('item', 'addon', input)} />
+    let content = <Items items={this.state.installed} toggleFunction={(input) => this.toggle('item', 'addon', input)} />;
 
     if (this.state.installed.length === 0) {
          content = (

src/components/modals/tabs/Marketplace.jsx

@@ -106,6 +106,7 @@ export default class Marketplace extends React.PureComponent {
   }
 
   componentDidMount() {
+    if (localStorage.getItem('animations') === 'true') document.getElementById('marketplace').classList.add('marketplaceanimation');
     if (navigator.onLine === false) return;
     this.getItems();
   }

src/components/widgets/background/PhotoInformation.jsx

@@ -7,11 +7,13 @@ import Photographer from '@material-ui/icons/Person';
 
 export default class PhotoInformation extends React.PureComponent {
   render() {
+    let classList = 'infoCard';
+    if (this.props.className) classList = this.props.className;
     return (
       <div className='photoInformation'>
         <h1 id='photographer'>{this.props.language.credit}</h1>
         <Info className='photoInformationHover'/>
-        <div className='infoCard'>
+        <div className={classList}>
           <Info className='infoIcon'/>
           <h1>{this.props.language.information}</h1>
           <hr/>
@@ -24,9 +26,6 @@ export default class PhotoInformation extends React.PureComponent {
           <Photographer/>
           <span id='photographerCard'></span>
         </div>
-        <div id='backgroundCredits' className='tooltip'>
-          <span className='tooltiptext' id='location'/>
-        </div>
         <span id='credit' style={{ 'display': 'none' }}></span>
       </div>
     );

src/components/widgets/background/offline_images.json

@@ -1,5 +1,5 @@
 {
-    "Tirachard Kumtanom" : {
+    "Tirachard Kumtanom": {
         "photo": [1]
     },
     "Sohail Na": {
@@ -14,7 +14,7 @@
     "Pixabay": {
         "photo": [2, 3, 9, 11, 13, 14, 15]
     },
-    "Unknown" : {
+    "Unknown": {
         "photo": [5, 6, 8, 10, 12, 16, 17, 18, 19]
     }
 }

src/components/widgets/background/scss/_photoinformation.scss

@@ -83,4 +83,8 @@
 
 .photoInformationHover {
     cursor: pointer;
+}
+
+.dark hr {
+    background-color: white !important;
 }

src/components/widgets/navbar/Notes.jsx

@@ -27,8 +27,10 @@ export default class Notes extends React.PureComponent {
     }
 
     render() {
+        let classList = 'notescontainer';
+        if (localStorage.getItem('darkTheme') === 'true') classList += ' dark';
         return (
-            <span id='noteContainer' className='notescontainer'>
+            <span id='noteContainer' className={classList}>
                 <div className='topbarnotes'>
                     <NotesIcon/>
                     <h3>{this.props.language.title}</h3>

src/components/widgets/navbar/scss/_notes.scss

@@ -77,4 +77,9 @@ textarea {
         float: right;
         margin-right: 20px;
     }
+}
+
+.dark textarea {
+    background-color: #2f3542;
+    color: white;
 }

src/components/widgets/quote/Quote.jsx

@@ -69,7 +69,8 @@ export default class Quote extends React.PureComponent {
       if (data.statusCode === 429) return this.doOffline(); // If we hit the ratelimit, we fallback to local quotes
       this.setState({
         quote: '"' + data.quote + '"',
-        author: data.author
+        author: data.author,
+        authorlink: `https://${this.props.languagecode}.wikipedia.org/wiki/${data.author.split(' ').join('_')}`
       });
     } catch (e) { // ..and if that fails we load one locally
       this.doOffline();
@@ -110,7 +111,10 @@ export default class Quote extends React.PureComponent {
     return (
         <div className='quotediv'>
           <h1 className='quote'>{`${this.state.quote}`}</h1>
-          <h1 className='quoteauthor'>{this.state.author} {copy} {tweet} {this.state.favourited}</h1>
+          <h1 className='quoteauthor'>
+            <a href={this.state.authorlink} className='quoteauthorlink' target='_blank' rel='noopener noreferrer'>{this.state.author}</a>
+            {copy} {tweet} {this.state.favourited}
+          </h1>
         </div>
     );
   }

src/components/widgets/quote/quote.scss

@@ -56,4 +56,9 @@ button.copyButton {
     cursor: pointer;
     border-radius: 5px;
     display: table-cell
+}
+
+.quoteauthorlink {
+    text-decoration: none;
+    color: white;
 }

src/scss/modules/_marketplace.scss

@@ -211,7 +211,7 @@ p.description {
   width: auto;
 }
 
-#marketplace {
+.marketplaceanimation {
   @include animation('content 0.5s');
 }