From e8440d03da6c3211dd697fa341d445de7e1548b2 Mon Sep 17 00:00:00 2001
From: saakshiraut28 <saakshiraut28@gmail.com>
Date: Wed, 19 Jul 2023 22:42:54 +0530
Subject: [PATCH 1/4] Place the logo on the required position

---
 frontend/src/components/Footer.tsx | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index 7ecf59a71..125fc9882 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -3,16 +3,19 @@ import { useTranslation } from "react-i18next";
 
 //Project resources
 import { Newsletter } from "./Newsletter";
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import { AuthContext } from "../providers/AuthProvider";
 import useToClipboard from "../util/to-clipboard.hooks";
 
 export default function Footer() {
+  const AppStore  = "https://images.clothingloop.org/150x/app_store_badge.png";
+  const GooglePlay = "https://images.clothingloop.org/150x/google_play_badge.png"
   const { t } = useTranslation();
   const { authUser } = useContext(AuthContext);
   const addCopyAttributes = useToClipboard();
   const currentYear = new Date().getFullYear();
 
+
   return (
     <footer className="bg-white pt-8 lg:pt-16 w-full">
       <div className="relative">
@@ -124,7 +127,18 @@ export default function Footer() {
           </div>
         </div>
       </div>
-
+      <div className="flex bg-white justify-center items-center space-x-4 py-4">
+        <img
+          src={AppStore}
+          alt="App Store Logo"
+          width={130}
+        />
+        <img
+          src={GooglePlay}
+          alt="Google Play Logo"
+          width={144}
+        />
+      </div>
       <div className="bg-teal text-white">
         <div className="container mx-auto px-1 md:px-20 py-4 flex flex-col md:flex-row justify-between items-center">
           <div className="flex flex-col sm:flex-row sm:flex-wrap mb-2 md:mb-0">
@@ -149,7 +163,7 @@ export default function Footer() {
               {t("contribute")}
             </a>
           </div>
-
+            
           <p className="text-center sm:text-right" aria-label="copyright">
             <span className="font-bold">The Clothing Loop</span>
             &nbsp;&copy;&nbsp;{currentYear}

From 168b8e2d3557e759ed8aa480d2b0359891dab729 Mon Sep 17 00:00:00 2001
From: saakshiraut28 <saakshiraut28@gmail.com>
Date: Wed, 19 Jul 2023 22:58:42 +0530
Subject: [PATCH 2/4] Add the functionality to detect the mobile OS and show
 the logo accordingly

---
 frontend/src/components/Footer.tsx | 56 +++++++++++++++++++++++-------
 1 file changed, 43 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index 125fc9882..4b5d1b0e9 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -3,19 +3,36 @@ import { useTranslation } from "react-i18next";
 
 //Project resources
 import { Newsletter } from "./Newsletter";
-import { useContext, useEffect } from "react";
+import { useContext, useEffect, useState } from "react";
 import { AuthContext } from "../providers/AuthProvider";
 import useToClipboard from "../util/to-clipboard.hooks";
 
 export default function Footer() {
-  const AppStore  = "https://images.clothingloop.org/150x/app_store_badge.png";
-  const GooglePlay = "https://images.clothingloop.org/150x/google_play_badge.png"
+  const AppStore  = "https://images.clothingloop.org/x50/app_store_badge.png";
+  const GooglePlay = "https://images.clothingloop.org/x50/google_play_badge.png"
   const { t } = useTranslation();
   const { authUser } = useContext(AuthContext);
   const addCopyAttributes = useToClipboard();
   const currentYear = new Date().getFullYear();
+  const [mobileOS, setMobileOS] = useState("unknown");
+    useEffect(() => {
+    const detectMobileOS = () => {
+      const userAgent = navigator.userAgent || navigator.vendor;
 
+      if (/android/i.test(userAgent)) {
+        return "android";
+      }
 
+      if (/iPad|iPhone|iPod/i.test(userAgent)) {
+        return "ios";
+      }
+
+      return "unknown";
+    };
+
+    const os = detectMobileOS();
+    setMobileOS(os);
+  }, []);
   return (
     <footer className="bg-white pt-8 lg:pt-16 w-full">
       <div className="relative">
@@ -128,16 +145,29 @@ export default function Footer() {
         </div>
       </div>
       <div className="flex bg-white justify-center items-center space-x-4 py-4">
-        <img
-          src={AppStore}
-          alt="App Store Logo"
-          width={130}
-        />
-        <img
-          src={GooglePlay}
-          alt="Google Play Logo"
-          width={144}
-        />
+        {mobileOS === "ios" || mobileOS === "unknown" ? (
+          <a
+            href="#"
+            target="_blank"
+          >
+            <img
+              src={AppStore}
+              alt="App Store Logo"
+            />
+          </a>
+        ) : null}
+
+        {mobileOS === "android" || mobileOS === "unknown" ? (
+          <a
+            href="#"
+            target="_blank"
+          >
+            <img
+              src={GooglePlay}
+              alt="Google Play Logo"
+            />
+          </a>
+        ) : null}
       </div>
       <div className="bg-teal text-white">
         <div className="container mx-auto px-1 md:px-20 py-4 flex flex-col md:flex-row justify-between items-center">

From bb6273876ceb6b2b928be9c2836bf53af306311b Mon Sep 17 00:00:00 2001
From: "Lucian I. Last" <li@last.nl>
Date: Thu, 20 Jul 2023 10:01:24 +0200
Subject: [PATCH 3/4] Move to inside the find us section

---
 frontend/src/components/Footer.tsx | 72 ++++++++++++++++--------------
 1 file changed, 39 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index 4b5d1b0e9..59a5beb53 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -7,27 +7,34 @@ import { useContext, useEffect, useState } from "react";
 import { AuthContext } from "../providers/AuthProvider";
 import useToClipboard from "../util/to-clipboard.hooks";
 
+enum MobileOS {
+  ANDROID = "android",
+  IOS = "ios",
+  OTHER = "",
+}
+
 export default function Footer() {
-  const AppStore  = "https://images.clothingloop.org/x50/app_store_badge.png";
-  const GooglePlay = "https://images.clothingloop.org/x50/google_play_badge.png"
+  const AppStore = "https://images.clothingloop.org/x100/app_store_badge.png";
+  const GooglePlay =
+    "https://images.clothingloop.org/x100/google_play_badge.png";
   const { t } = useTranslation();
   const { authUser } = useContext(AuthContext);
   const addCopyAttributes = useToClipboard();
   const currentYear = new Date().getFullYear();
-  const [mobileOS, setMobileOS] = useState("unknown");
-    useEffect(() => {
+  const [mobileOS, setMobileOS] = useState<MobileOS>(MobileOS.OTHER);
+  useEffect(() => {
     const detectMobileOS = () => {
       const userAgent = navigator.userAgent || navigator.vendor;
 
       if (/android/i.test(userAgent)) {
-        return "android";
+        return MobileOS.ANDROID;
       }
 
       if (/iPad|iPhone|iPod/i.test(userAgent)) {
-        return "ios";
+        return MobileOS.IOS;
       }
 
-      return "unknown";
+      return MobileOS.OTHER;
     };
 
     const os = detectMobileOS();
@@ -42,6 +49,7 @@ export default function Footer() {
         ></div>
         <div className="lg:container lg:px-20 mx-auto flex flex-col lg:flex-row-reverse relative z-10">
           <Newsletter />
+
           <div className="container mx-auto lg:mx-0 lg:w-1/2 pt-6">
             <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-2 items-center ltr:md:items-start rtl:md:items-end sm:justify-end text-center md:text-left lg:mt-8">
               <div className="flex flex-col items-center md:items-start px-3 pb-6 pt-0">
@@ -81,7 +89,7 @@ export default function Footer() {
                   </Link>
                 )}
               </div>
-              <div className="lg:col-span-2 px-3 pb-6 pt-0 rtl:text-right">
+              <div className="md:row-span-2 lg:col-span-2  px-3 rtl:text-right md:mb-3 lg:mb-0">
                 <span className="block text-secondary font-bold text-2xl mb-3">
                   {t("findUs")}
                 </span>
@@ -140,35 +148,33 @@ export default function Footer() {
                   </li>
                 </ul>
               </div>
+              <div className="md:col-span-2 md:row-start-2 lg:row-start-auto lg:col-span-2 self-end flex justify-center md:justify-start space-x-4 mt-3 mb-6 px-3">
+                {mobileOS === MobileOS.IOS || mobileOS === MobileOS.OTHER ? (
+                  <a href="#" target="_blank">
+                    <img
+                      src={AppStore}
+                      alt="App Store Logo"
+                      style={{ height: 50 }}
+                    />
+                  </a>
+                ) : null}
+
+                {mobileOS === MobileOS.ANDROID ||
+                mobileOS === MobileOS.OTHER ? (
+                  <a href="#" target="_blank">
+                    <img
+                      src={GooglePlay}
+                      alt="Google Play Logo"
+                      style={{ height: 50 }}
+                    />
+                  </a>
+                ) : null}
+              </div>
             </div>
           </div>
         </div>
       </div>
-      <div className="flex bg-white justify-center items-center space-x-4 py-4">
-        {mobileOS === "ios" || mobileOS === "unknown" ? (
-          <a
-            href="#"
-            target="_blank"
-          >
-            <img
-              src={AppStore}
-              alt="App Store Logo"
-            />
-          </a>
-        ) : null}
 
-        {mobileOS === "android" || mobileOS === "unknown" ? (
-          <a
-            href="#"
-            target="_blank"
-          >
-            <img
-              src={GooglePlay}
-              alt="Google Play Logo"
-            />
-          </a>
-        ) : null}
-      </div>
       <div className="bg-teal text-white">
         <div className="container mx-auto px-1 md:px-20 py-4 flex flex-col md:flex-row justify-between items-center">
           <div className="flex flex-col sm:flex-row sm:flex-wrap mb-2 md:mb-0">
@@ -193,7 +199,7 @@ export default function Footer() {
               {t("contribute")}
             </a>
           </div>
-            
+
           <p className="text-center sm:text-right" aria-label="copyright">
             <span className="font-bold">The Clothing Loop</span>
             &nbsp;&copy;&nbsp;{currentYear}

From fed152238fcad9ee440ecabedc9b33b22dd509b4 Mon Sep 17 00:00:00 2001
From: "Lucian I. Last" <li@last.nl>
Date: Thu, 20 Jul 2023 10:01:50 +0200
Subject: [PATCH 4/4] Hide the buttons for now

---
 frontend/src/components/Footer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index 59a5beb53..b5afc2cec 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -148,7 +148,7 @@ export default function Footer() {
                   </li>
                 </ul>
               </div>
-              <div className="md:col-span-2 md:row-start-2 lg:row-start-auto lg:col-span-2 self-end flex justify-center md:justify-start space-x-4 mt-3 mb-6 px-3">
+              <div className="hidden md:col-span-2 md:row-start-2 lg:row-start-auto lg:col-span-2 self-end flex justify-center md:justify-start space-x-4 mt-3 mb-6 px-3">
                 {mobileOS === MobileOS.IOS || mobileOS === MobileOS.OTHER ? (
                   <a href="#" target="_blank">
                     <img