From 70ebe7b14ae83fd30eb657a412ea0dbf4fec647b Mon Sep 17 00:00:00 2001
From: pivi <paul.lartisant@icloud.com>
Date: Mon, 20 Nov 2023 14:50:15 +0100
Subject: [PATCH] Add Mobile Screen

---
 src/i18n/en_US.json                       |  3 +++
 src/layouts/LayoutBridge/LayoutBridge.tsx | 23 ++++++++++++++++++-----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/i18n/en_US.json b/src/i18n/en_US.json
index 9645d6ef..430fbdfe 100644
--- a/src/i18n/en_US.json
+++ b/src/i18n/en_US.json
@@ -16,6 +16,9 @@
     "title": "Bridge is under maintenance!",
     "subtitle": "We are working hard to improve the Bridge! We should be back soon."
   },
+  "desktop": {
+    "title": "The bridge is only available on dekstop"
+  },
   "index": {
     "top-banner": {
       "bridge-off": "The Bridge process is temporarily down but you can still Redeem tokens. We expect to be back running soon!",
diff --git a/src/layouts/LayoutBridge/LayoutBridge.tsx b/src/layouts/LayoutBridge/LayoutBridge.tsx
index 0475a85c..9bac6837 100644
--- a/src/layouts/LayoutBridge/LayoutBridge.tsx
+++ b/src/layouts/LayoutBridge/LayoutBridge.tsx
@@ -88,7 +88,10 @@ export function LayoutBridge({ ...props }) {
       from-bright-blue to-deep-blue to-60% overflow-auto w-full min-h-screen
       "
     >
-      <div className="flex flex-row items-center justify-between px-11 py-8 w-full h-fit fixed z-10 backdrop-blur-sm">
+      <div
+        className="hidden sm:flex flex-row items-center justify-between px-11 
+      py-8 w-full h-fit fixed z-10 backdrop-blur-sm"
+      >
         <BridgeLogo theme={selectedTheme} />
         <div className="flex flex-row items-center gap-4">
           <Dropdown
@@ -104,14 +107,24 @@ export function LayoutBridge({ ...props }) {
           <ThemeMode onSetTheme={handleSetTheme} />
         </div>
       </div>
-      <div
-        className={`flex flex-col justify-center items-center pt-[150px] pb-10`}
-      >
+      <div className="hidden sm:flex flex-col justify-center items-center pt-[150px] pb-10">
         <TopBanner />
         {children}
       </div>
       {open && <ConnectWalletPopup setOpen={setOpen} />}
-      <Footer selectedTheme={selectedTheme} />
+      <div className="hidden sm:block">
+        <Footer selectedTheme={selectedTheme} />
+      </div>
+
+      {/* display only on mobile*/}
+      <div className="sm:hidden h-screen flex items-center justify-center">
+        <div className="flex flex-col w-full gap-10 p-4">
+          <BridgeLogo theme={selectedTheme} />
+          <p className="mas-banner text-6xl text-f-primary mb-6">
+            {Intl.t('desktop.title')}
+          </p>
+        </div>
+      </div>
     </div>
   );
 }