From 8e5eecead8a001ea220766a5fabecd0f4491e838 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Wed, 10 Aug 2022 20:45:34 +0300
Subject: [PATCH] fix: fixed the issues regarding the mobile nav styling

---
 .../ErrorBoundary/ErrorBoundary.tsx           | 16 ++++---
 src/Components/Navbar/NavDesktop.tsx          |  2 +-
 src/Components/Navbar/NavMobile.tsx           | 43 +++++++------------
 3 files changed, 26 insertions(+), 35 deletions(-)

diff --git a/src/Components/ErrorBoundary/ErrorBoundary.tsx b/src/Components/ErrorBoundary/ErrorBoundary.tsx
index 3a17e1f..7fcfef3 100644
--- a/src/Components/ErrorBoundary/ErrorBoundary.tsx
+++ b/src/Components/ErrorBoundary/ErrorBoundary.tsx
@@ -26,14 +26,16 @@ class ErrorBoundary extends Component<Props, State> {
 
     public render() {
         if (this.state.hasError) {
-            return <ErrorMessage message={
-                <p className="text-body3">
-                    Sorry, something went wrong...😵
-                    <br />
-                    Try refreshing the page.
-                </p>
+            return <div className="page-container">
+                <ErrorMessage message={
+                    <p className="text-body3">
+                        Sorry, something went wrong...😵
+                        <br />
+                        Try refreshing the page.
+                    </p>
 
-            } type="unknown"></ErrorMessage>;
+                } type="unknown"></ErrorMessage>
+            </div>;
         }
 
         return this.props.children;
diff --git a/src/Components/Navbar/NavDesktop.tsx b/src/Components/Navbar/NavDesktop.tsx
index 4fa8a9a..f69ae78 100644
--- a/src/Components/Navbar/NavDesktop.tsx
+++ b/src/Components/Navbar/NavDesktop.tsx
@@ -201,7 +201,7 @@ export default function NavDesktop() {
                         </Menu>
 
                         :
-                        <Button color="primary" href="/login">
+                        <Button size="sm" color="white" href="/login">
                             Connect ⚡
                         </Button>
                     )
diff --git a/src/Components/Navbar/NavMobile.tsx b/src/Components/Navbar/NavMobile.tsx
index db03d3b..0e32380 100644
--- a/src/Components/Navbar/NavMobile.tsx
+++ b/src/Components/Navbar/NavMobile.tsx
@@ -151,20 +151,8 @@ export default function NavMobile() {
         >
           <div className="flex flex-col gap-16 py-16">
             <Search onResultClick={() => toggleDrawerOpen(false)} />
-            {
-              !curUser &&
-              <Button
-                color="primary"
-                fullWidth
-                className="!py-16 px-40 rounded-12 "
-                href='/login'
-                onClick={() => toggleDrawerOpen()}
-              >
-                Connect your lightning wallet ⚡️
-              </Button>
-            }
           </div>
-          <ul className="px-32 flex flex-col py-16 gap-32 border-t">
+          <ul className="flex flex-col py-16 gap-32 border-t">
 
             <li className="relative">
               <Link
@@ -198,8 +186,8 @@ export default function NavMobile() {
                     onClick={() => toggleDrawerOpen(false)}
                     className='font-medium flex gap-16 !rounded-12 '
                   >
-                    <div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
-                      <span className="text-body2">✍🏼</span>
+                    <div className="shrink-0 bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
+                      <span className="text-body2 shrink-0">✍🏼</span>
                     </div>
                     <div>
                       <p className="text-body4 text-black font-medium">
@@ -214,8 +202,8 @@ export default function NavMobile() {
 
                     className='font-medium flex gap-16 !rounded-12 opacity-60'
                   >
-                    <div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
-                      <span className="text-body2">💬</span>
+                    <div className="shrink-0 bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
+                      <span className="text-body2 shrink-0">💬</span>
                     </div>
                     <div>
                       <p className="text-body4 text-black font-medium">
@@ -231,8 +219,8 @@ export default function NavMobile() {
                     onClick={() => toggleDrawerOpen(false)}
                     className='font-medium flex gap-16 !rounded-12'
                   >
-                    <div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
-                      <span className="text-body2">🏆</span>
+                    <div className="shrink-0 bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
+                      <span className="text-body2 shrink-0">🏆</span>
                     </div>
                     <div>
                       <p className="text-body4 text-black font-medium">
@@ -264,14 +252,15 @@ export default function NavMobile() {
                 Donate
               </Link>
             </li>
-            <li className="relative">
-              <Link
-                to={'/logout'}
-                onClick={() => toggleDrawerOpen(false)}
-                className='text-body4 font-bold hover:text-primary-600'>
-                Logout 👋
-              </Link>
-            </li>
+            {curUser &&
+              <li className="relative">
+                <Link
+                  to={'/logout'}
+                  onClick={() => toggleDrawerOpen(false)}
+                  className='text-body4 font-bold hover:text-primary-600'>
+                  Logout 👋
+                </Link>
+              </li>}
           </ul>
           <ul className="px-16 py-16 pb-32 flex flex-wrap gap-y-12  border-t pt-32 mt-auto">
             <li className="text-body4 text-gray-500 hover:text-gray-700 w-1/2">