Merge pull request #246 from mapswipe/fix/update-uptime-logo-placement

Fix/update uptime logo placement

Author: barshathakuri

public/img/uptime.png

@@ -15,6 +15,7 @@
   "osm-wiki": "OSM Wiki",
   "email": "E-mail",
   "copyright": "Copyright © {{year}} MapSwipe",
+  "uptime-pretext": "",
   "privacy": "Soukromí",
   "mapswipe-logo": "Mapswipe Logo",
   "didnot-find-language": "Přidat chybějící jazyk",

public/locales/cs/common.json

@@ -15,6 +15,7 @@
   "osm-wiki": "OSM Wiki",
   "email": "Email",
   "copyright": "Copyright © {{year}} MapSwipe",
+  "uptime-pretext": "",
   "privacy": "Datenschutz",
   "mapswipe-logo": "Mapswipe Logo",
   "didnot-find-language": "Fehlende Sprache hinzufügen",

public/locales/de/common.json

@@ -15,6 +15,7 @@
   "osm-wiki": "OSM Wiki",
   "email": "Email",
   "copyright": "Copyright © {{year}} MapSwipe",
+  "uptime-pretext": "System status monitored by",
   "privacy": "Privacy",
   "mapswipe-logo": "Mapswipe Logo",
   "didnot-find-language": "Add missing language",

public/locales/en/common.json

@@ -15,6 +15,7 @@
   "osm-wiki": "OSM Wiki",
   "email": "E-mail",
   "copyright": "Copyright © {{year}} MapSwipe",
+  "uptime-pretext": "",
   "privacy": "Adatvédelem",
   "mapswipe-logo": "Mapswipe logo",
   "didnot-find-language": "Hiányzó nyelv hozzáadása",

public/locales/hu/common.json

@@ -15,6 +15,7 @@
   "osm-wiki": "OSM Wiki",
   "email": "इमेल",
   "copyright": "प्रतिलिपि अधिकार © {{year}} MapSwipe",
+  "uptime-pretext": "",
   "privacy": "गोपनीयता",
   "mapswipe-logo": "Mapswipe लोगो",
   "didnot-find-language": "छुटेको भाषा थप्नुहोस्",

public/locales/ne/common.json

@@ -15,6 +15,7 @@
   "osm-wiki": "Wiki OSM",
   "email": "Email",
   "copyright": "Direitos de autor © {{year}} MapSwipe",
+  "uptime-pretext": "",
   "privacy": "Privacidade",
   "mapswipe-logo": "Logótipo Mapswipe",
   "didnot-find-language": "Adicionar idioma em falta",

public/locales/pt/common.json

@@ -14,6 +14,7 @@ import {
 } from 'react-icons/io5';
 
 import Heading from 'components/Heading';
+import ImageWrapper from 'components/ImageWrapper';
 
 import styles from './styles.module.css';
 
@@ -143,6 +144,19 @@ function Footer(props: Props) {
                     <div className={styles.leftContainer}>
                         {t('copyright', { year: currentYear })}
                     </div>
+                    <div className={styles.midContainer}>
+                        {t('uptime-pretext')}
+                        <Link
+                            href="https://uptimerobot.com/"
+                            target="_blank"
+                        >
+                            <ImageWrapper
+                                className={styles.partnerLogo}
+                                src="/img/uptime.png"
+                                alt="Uptime Robot"
+                            />
+                        </Link>
+                    </div>
                     <div className={styles.rightContainer}>
                         <Link
                             href="/[locale]/privacy"

src/components/Footer/index.tsx

@@ -60,6 +60,19 @@
                 padding: var(--spacing-medium) 0;
             }
 
+            .midContainer {
+                display: flex;
+                align-items: flex-end;
+
+                .partnerLogo {
+                    /* NOTE: Margin bottom because logo is text and line height is not
+                    * consistent */
+                    margin-bottom: 2px;
+                    width: 7rem;
+                    height: 1rem;
+                }
+            }
+
             .rightContainer {
                 display: flex;
                 padding: var(--spacing-medium) 0;

src/components/Footer/styles.module.css

@@ -72,11 +72,6 @@ const partners = [
         imageSrc: '/img/tc.png',
         link: 'https://togglecorp.com',
     },
-    {
-        altText: 'Uptime Robot',
-        imageSrc: '/img/uptime.png',
-        link: 'https://uptimerobot.com/',
-    },
 ];
 
 interface Props extends SSRConfig {