From 1c43396c755e953c6cfadd63f7575674abcd3798 Mon Sep 17 00:00:00 2001
From: PhilReact <philliplangmartinez@gmail.com>
Date: Fri, 1 Nov 2024 02:03:08 +0200
Subject: [PATCH] welcome small screens

---
 index.html                                 |  2 +-
 src/components/Group/ThingsToDoInitial.tsx |  2 +-
 src/components/Mobile/MobileFooter.tsx     | 48 ++++++++++++++++++----
 3 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index fe0ef55..4484aaf 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />    
 
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
 
     <title>Qortal Extension</title>
diff --git a/src/components/Group/ThingsToDoInitial.tsx b/src/components/Group/ThingsToDoInitial.tsx
index 28c3889..ff52f35 100644
--- a/src/components/Group/ThingsToDoInitial.tsx
+++ b/src/components/Group/ThingsToDoInitial.tsx
@@ -78,7 +78,7 @@ export const ThingsToDoInitial = ({ myAddress, name, hasGroups, balance }) => {
       <Box
         sx={{
           width: "322px",
-          height: isMobile ? "165px" : "250px",
+          minHeight: isMobile ? "165px" : "250px",
           display: "flex",
           flexDirection: "column",
           bgcolor: "background.paper",
diff --git a/src/components/Mobile/MobileFooter.tsx b/src/components/Mobile/MobileFooter.tsx
index df91f32..cd69664 100644
--- a/src/components/Mobile/MobileFooter.tsx
+++ b/src/components/Mobile/MobileFooter.tsx
@@ -4,6 +4,7 @@ import {
   BottomNavigationAction,
   ButtonBase,
   Typography,
+  useMediaQuery,
 } from "@mui/material";
 import { Home, Groups, Message, ShowChart } from "@mui/icons-material";
 import Box from "@mui/material/Box";
@@ -67,6 +68,7 @@ export const MobileFooter = ({
   hasUnreadDirects
 }) => {
   const [value, setValue] = React.useState(0);
+  const isSmallScreen = useMediaQuery("(max-width:370px)"); // Define a custom breakpoint
   return (
     <Box
       sx={{
@@ -95,9 +97,16 @@ export const MobileFooter = ({
             setIsOpenDrawerProfile(true);
           }}
           icon={
-            <IconWrapper color="rgba(250, 250, 250, 0.5)" label="Wallet">
+            <>
+            {isSmallScreen ? (
+              <WalletIcon color="rgba(250, 250, 250, 0.5)" />
+            ) : (
+              <IconWrapper color="rgba(250, 250, 250, 0.5)" label="Wallet">
               <WalletIcon color="rgba(250, 250, 250, 0.5)" />
             </IconWrapper>
+            )}
+            </>
+            
           }
           sx={{ color: value === 0 ? "white" : "gray", padding: "0px 10px" }}
         />
@@ -106,14 +115,21 @@ export const MobileFooter = ({
             setMobileViewMode("groups");
           }}
           icon={
-            <IconWrapper color="rgba(250, 250, 250, 0.5)" label="Hubs">
+            <>
+              {isSmallScreen ? (
+              <HubsIcon color={hasUnreadGroups ? "var(--unread)" : "rgba(250, 250, 250, 0.5)"} />
+              ) : (
+              <IconWrapper color="rgba(250, 250, 250, 0.5)" label="Hubs">
               <HubsIcon color={hasUnreadGroups ? "var(--unread)" : "rgba(250, 250, 250, 0.5)"} />
             </IconWrapper>
+            )}
+            </>
+           
           }
           sx={{
             color: value === 0 ? "white" : "gray",
-            paddingLeft: "10px",
-            paddingRight: "42px",
+            paddingLeft: isSmallScreen ? '0px' :  "10px",
+            paddingRight: isSmallScreen ? '30px' : "42px",
           }}
         />
       </BottomNavigation>
@@ -173,14 +189,22 @@ export const MobileFooter = ({
             setMobileViewModeKeepOpen("messaging");
           }}
           icon={
-            <IconWrapper label="Messaging" color="rgba(250, 250, 250, 0.5)">
+            <>
+            {isSmallScreen ? (
+                         <MessagingIcon color={hasUnreadDirects ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"} />
+
+            ) : (
+              <IconWrapper label="Messaging" color="rgba(250, 250, 250, 0.5)">
               <MessagingIcon color={hasUnreadDirects ? "var(--unread)" :"rgba(250, 250, 250, 0.5)"} />
             </IconWrapper>
+          )}
+          </>
+           
           }
           sx={{
             color: value === 2 ? "white" : "gray",
-            paddingLeft: "55px",
-            paddingRight: "10px",
+            paddingLeft: isSmallScreen ? '30px' : "55px",
+            paddingRight: isSmallScreen ? '0px' : "10px",
           }}
         />
         <BottomNavigationAction
@@ -189,9 +213,17 @@ export const MobileFooter = ({
           }}
           
           icon={
-            <IconWrapper label="Trading" color="rgba(250, 250, 250, 0.5)">
+          
+             <>
+             {isSmallScreen ? (
+              <TradingIcon color="rgba(250, 250, 250, 0.5)" />
+ 
+             ) : (
+              <IconWrapper label="Trading" color="rgba(250, 250, 250, 0.5)">
               <TradingIcon color="rgba(250, 250, 250, 0.5)" />
             </IconWrapper>
+           )}
+           </>
           }
           sx={{ color: value === 3 ? "white" : "gray", padding: "0px 10px" }}
         />