From aacc779162551231af54c3aea31edeca78427f93 Mon Sep 17 00:00:00 2001
From: David Ralph <davetheprogrammer2@gmail.com>
Date: Wed, 28 Oct 2020 23:14:34 +0000
Subject: [PATCH] Fixes and improvements

---
 src/App.jsx                                 | 10 +++---
 src/components/widgets/PhotoInformation.jsx | 10 +++---
 src/scss/modules/_credit.scss               |  4 +++
 src/scss/modules/_navbar.scss               | 34 +++++++++++++++++++++
 src/translations/en.json                    |  1 +
 5 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 5f13d415..92d6befc 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -65,10 +65,12 @@ export default class App extends React.PureComponent {
           <Navbar mainModalOpen={() => this.setState({ mainModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} language={language} />
           <Greeting language={language.greeting} />
           <Clock/>
-          <Quote language={language.toasts}/>
-          <PhotoInformation/>
-          <Maximise/>
-          <Favourite/>
+          <Quote language={language.toasts} />
+          <PhotoInformation language={language} />
+          <div class="bottom-navbar">
+            <Maximise/>
+            <Favourite/>
+          </div>
           <React.Suspense fallback={renderLoader()}>
             <Modal id={'modal'} onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
               <MainModal
diff --git a/src/components/widgets/PhotoInformation.jsx b/src/components/widgets/PhotoInformation.jsx
index c2150792..ea7b7889 100644
--- a/src/components/widgets/PhotoInformation.jsx
+++ b/src/components/widgets/PhotoInformation.jsx
@@ -9,25 +9,25 @@ export default class PhotoInformation extends React.PureComponent {
   render() {
     return (
       <div className='photoInformation'>
-        <h1 id='photographer'>Photo By</h1>
+        <h1 id='photographer'>{this.props.language.credit}</h1>
         <Info className='photoInformationHover'/>
         <div className='infoCard'>
           <Info className='infoIcon'/>
-          <h1>Information</h1>
+          <h1>{this.props.language.information}</h1>
           <hr/>
           <Location/>
           <span id='location'></span>
           <Camera/>
-          <span id='camera'>Gaming</span>
+          <span id='camera'></span>
           <Resolution/>
-          <span id='resolution'>1280x720</span>
+          <span id='resolution'></span>
           <Photographer/>
           <span id='photographerCard'></span>
         </div>
         <div id='backgroundCredits' className='tooltip'>
           <span className='tooltiptext' id='location'/>
         </div>
-        <span id='credit' style={{'display': 'none'}}></span>
+        <span id='credit' style={{ 'display': 'none' }}></span>
       </div>
     );
   }
diff --git a/src/scss/modules/_credit.scss b/src/scss/modules/_credit.scss
index f7326953..53030bbf 100644
--- a/src/scss/modules/_credit.scss
+++ b/src/scss/modules/_credit.scss
@@ -74,6 +74,10 @@
   }
 }
 
+.infoCard:hover {
+  display: block !important;
+}
+
 .photoInformationHover {
   cursor: pointer;
 }
diff --git a/src/scss/modules/_navbar.scss b/src/scss/modules/_navbar.scss
index f8884cea..59d87fad 100644
--- a/src/scss/modules/_navbar.scss
+++ b/src/scss/modules/_navbar.scss
@@ -31,6 +31,40 @@
     }
 }
 
+.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 {
+            color: map-get($theme-colours, 'main-text-color');
+            transform: translateZ(0);
+            transform: scale(1.3);
+        }
+    }
+}
+
+
 .navbar-container-bottom {
     position: absolute;
     bottom: 1rem;
diff --git a/src/translations/en.json b/src/translations/en.json
index bd6da9d4..73f30d8a 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -8,6 +8,7 @@
         "halloween": "Happy Halloween"
     },
     "credit": "Photo by",
+    "information": "Information",
     "search": "Search",
     "modals": {
         "title": "Options",