fix: favourite button, optimise widgets and remove dependency

src/components/widgets/background/Background.jsx

@@ -409,7 +409,7 @@ export default class Background extends PureComponent {
       <>
         <div style={{ WebkitFilter: `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%) ${backgroundFilter ? backgroundFilter + '(' + localStorage.getItem('backgroundFilterAmount') + '%)' : ''}` }} id='backgroundImage'/>
         {(this.state.photoInfo.credit !== '') ?
-          <PhotoInformation className={this.props.photoInformationClass} info={this.state.photoInfo} api={this.state.currentAPI} url={this.state.url}/>
+          <PhotoInformation info={this.state.photoInfo} api={this.state.currentAPI} url={this.state.url}/>
         : null}
       </>
     );

src/components/widgets/background/Favourite.jsx

@@ -34,7 +34,8 @@ export default class Favourite extends PureComponent {
         url: url, 
         credit: document.getElementById('credit').textContent,
         location: document.getElementById('infoLocation').textContent,
-        camera: document.getElementById('infoCamera').textContent
+        camera: document.getElementById('infoCamera').textContent,
+        resolution: document.getElementById('infoResolution').textContent
       }));
 
       this.setState({

src/components/widgets/background/PhotoInformation.jsx

@@ -52,31 +52,43 @@ export default function PhotoInformation(props) {
   }
   img.src = (localStorage.getItem('ddgProxy') === 'true' && !props.info.offline && !props.url.startsWith('data:')) ? window.constants.DDG_IMAGE_PROXY + props.url : props.url;
 
+  // info is still there because we want the favourite button to work
+  if (localStorage.getItem('photoInformation') === 'false') {
+    return (
+      <div className='photoInformation'>
+        <h1>{photo} <span id='credit'>{credit}</span></h1>
+        <div style={{ display: 'none' }}>
+          <span id='infoLocation'>{props.info.location || 'N/A'}</span>
+          <span id='infoCamera'>{props.info.camera || 'N/A'}</span>
+          <span id='infoResolution'>{width}x{height}</span>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className='photoInformation'>
       <h1>{photo} <span id='credit'>{credit}</span></h1>
-      {localStorage.getItem('photoInformation') !== 'false' ? 
-      <>
-        <Info className='photoInformationHover'/>
-        <div className={props.className || 'infoCard'}>
-          <Info className='infoIcon'/>
-          <h1>{language.information}</h1>
-          <hr/>
-          <LocationOn/>
-          <span id='infoLocation'>{props.info.location || 'N/A'}</span>
-          <PhotoCamera/>
-          <span id='infoCamera'>{props.info.camera || 'N/A'}</span>
-          <Resolution/>
-          <span id='infoResolution'>{width}x{height}</span>
-          <Photographer/>
-          <span>{photographer}</span>
-          {(localStorage.getItem('downloadbtn') === 'true') && !props.info.offline && !props.info.photographerURL ? 
-            <>
-              <Download/>
-              <span className='download' onClick={() => downloadImage(props.info)}>{language.download}</span>
-            </> : null}
-        </div>
-      </> : null}
+      <Info className='photoInformationHover'/>
+      <div className='infoCard'>
+        <Info className='infoIcon'/>
+        <h1>{language.information}</h1>
+        <hr/>
+        <LocationOn/>
+        <span id='infoLocation'>{props.info.location || 'N/A'}</span>
+        <PhotoCamera/>
+        <span id='infoCamera'>{props.info.camera || 'N/A'}</span>
+        <Resolution/>
+        <span id='infoResolution'>{width}x{height}</span>
+        <Photographer/>
+        <span>{photographer}</span>
+        {(localStorage.getItem('downloadbtn') === 'true') && !props.info.offline && !props.info.photographerURL ? 
+          <>
+            <Download/>
+            <span className='download' onClick={() => downloadImage(props.info)}>{language.download}</span>
+          </> 
+        : null}
+      </div>
     </div>
   );
 }

src/components/widgets/greeting/Greeting.jsx

@@ -1,7 +1,6 @@
 import { PureComponent } from 'react';
-import { utcToZonedTime } from 'date-fns-tz';
 
-import dtf from '../../../modules/helpers/date';
+import { nth, convertTimezone } from '../../../modules/helpers/date';
 import EventBus from '../../../modules/helpers/eventbus';
 
 import './greeting.scss';
@@ -49,8 +48,8 @@ export default class Greeting extends PureComponent {
     this.timer = setTimeout(() => {
       let now = new Date();
       const timezone = localStorage.getItem('timezone');
-      if (timezone) {
-        now = utcToZonedTime(now, timezone);
+      if (timezone && timezone !== 'auto') {
+        now = convertTimezone(now, timezone);
       }
 
       const hour = now.getHours();
@@ -94,7 +93,7 @@ export default class Greeting extends PureComponent {
         if (birth.getDate() === now.getDate() && birth.getMonth() === now.getMonth()) {
           if (localStorage.getItem('birthdayage') === 'true') {
             const text = this.language.birthday.split(' ');
-            message = `${text[0]} ${dtf.nth(this.calculateAge(birth))} ${text[1]}`;
+            message = `${text[0]} ${nth(this.calculateAge(birth))} ${text[1]}`;
           } else {
             message = this.language.birthday;
           }

src/components/widgets/time/Clock.jsx

@@ -1,6 +1,6 @@
 import { PureComponent, Suspense, lazy } from 'react';
-import { utcToZonedTime } from 'date-fns-tz';
 
+import { convertTimezone } from '../../../modules/helpers/date';
 import EventBus from '../../../modules/helpers/eventbus';
 
 import './clock.scss';
@@ -23,8 +23,8 @@ export default class Clock extends PureComponent {
     this.timer = setTimeout(() => {
       let now = new Date();
       const timezone = localStorage.getItem('timezone');
-      if (timezone) {
-        now = utcToZonedTime(now, timezone);
+      if (timezone && timezone !== 'auto') {
+        now = convertTimezone(now, timezone);
       }
 
       switch (localStorage.getItem('timeType')) {

src/components/widgets/time/Date.jsx

@@ -1,7 +1,6 @@
 import { PureComponent } from 'react';
-import { utcToZonedTime } from 'date-fns-tz';
 
-import dtf from '../../../modules/helpers/date';
+import { nth, convertTimezone } from '../../../modules/helpers/date';
 import EventBus from '../../../modules/helpers/eventbus';
 
 import './date.scss';
@@ -35,8 +34,8 @@ export default class DateWidget extends PureComponent {
   getDate() {
     let date = new Date();
     const timezone = localStorage.getItem('timezone');
-    if (timezone) {
-      date = utcToZonedTime(date, timezone);
+    if (timezone && timezone !== 'auto') {
+      date = convertTimezone(date, timezone);
     }
 
     if (localStorage.getItem('weeknumber') === 'true') {
@@ -97,13 +96,13 @@ export default class DateWidget extends PureComponent {
       // Long date
       const lang = window.languagecode.split('_')[0];
 
-      const nth = (localStorage.getItem('datenth') === 'true') ? dtf.nth(date.getDate()) : date.getDate();
+      const datenth = (localStorage.getItem('datenth') === 'true') ? nth(date.getDate()) : date.getDate();
 
       const day = (localStorage.getItem('dayofweek') === 'true') ? date.toLocaleDateString(lang, { weekday: 'long' }) : '';
       const month = date.toLocaleDateString(lang, { month: 'long' });
 
       this.setState({
-        date: `${day} ${nth} ${month} ${date.getFullYear()}`
+        date: `${day} ${datenth} ${month} ${date.getFullYear()}`
       });
     }
   }