diff --git a/src/App-styles.ts b/src/App-styles.ts index b33bb0a..c2a036f 100644 --- a/src/App-styles.ts +++ b/src/App-styles.ts @@ -77,7 +77,7 @@ display: flex; border: 1px solid var(--50-white, rgba(255, 255, 255, 0.5)); justify-content: space-between; align-items: center; -width: 132px; +width: 140px; height: 25px; padding: 5px 15px 5px 15px; gap: 5px; diff --git a/src/App.tsx b/src/App.tsx index b43d357..3872eaa 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -129,7 +129,7 @@ const defaultValues: MyContextInterface = { message: "", }, }; -export let isMobile = true +export let isMobile = false const isMobileDevice = () => { const userAgent = navigator.userAgent || navigator.vendor || window.opera; diff --git a/src/components/Desktop/DesktopFooter.tsx b/src/components/Desktop/DesktopFooter.tsx new file mode 100644 index 0000000..4eafe8b --- /dev/null +++ b/src/components/Desktop/DesktopFooter.tsx @@ -0,0 +1,118 @@ +import * as React from "react"; +import { + BottomNavigation, + BottomNavigationAction, + ButtonBase, + Typography, +} from "@mui/material"; +import { Home, Groups, Message, ShowChart } from "@mui/icons-material"; +import Box from "@mui/material/Box"; +import BottomLogo from "../../assets/svgs/BottomLogo5.svg"; +import { CustomSvg } from "../../common/CustomSvg"; +import { WalletIcon } from "../../assets/Icons/WalletIcon"; +import { HubsIcon } from "../../assets/Icons/HubsIcon"; +import { TradingIcon } from "../../assets/Icons/TradingIcon"; +import { MessagingIcon } from "../../assets/Icons/MessagingIcon"; +import { HomeIcon } from "../../assets/Icons/HomeIcon"; + +const IconWrapper = ({ children, label, color, selected }) => { + return ( + + {children} + + {label} + + + ); +}; + +export const DesktopFooter = ({ + selectedGroup, + groupSection, + isUnread, + goToAnnouncements, + isUnreadChat, + goToChat, + goToThreads, + setOpenManageMembers, + groupChatHasUnread, + groupsAnnHasUnread, + directChatHasUnread, + chatMode, + openDrawerGroups, + goToHome, + setIsOpenDrawerProfile, + mobileViewMode, + setMobileViewMode, + setMobileViewModeKeepOpen, + hasUnreadGroups, + hasUnreadDirects, + isHome, + isGroups, + isDirects, + setDesktopSideView +}) => { + const [value, setValue] = React.useState(0); + return ( + + + { + goToHome() + }}> + + + + + { + setDesktopSideView('groups') + }}> + + + + + { + setDesktopSideView('directs') + }}> + + + + + + + + + ); +}; diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx index 58312cb..a38eff1 100644 --- a/src/components/Group/Group.tsx +++ b/src/components/Group/Group.tsx @@ -85,6 +85,8 @@ import { GroupMenu } from "./GroupMenu"; import { getRootHeight } from "../../utils/mobile/mobileUtils"; import { ReturnIcon } from "../../assets/Icons/ReturnIcon"; import { ExitIcon } from "../../assets/Icons/ExitIcon"; +import { HomeDesktop } from "./HomeDesktop"; +import { DesktopFooter } from "../Desktop/DesktopFooter"; // let touchStartY = 0; // let disablePullToRefresh = false; @@ -418,7 +420,7 @@ export const Group = ({ const [mutedGroups, setMutedGroups] = useState([]); const [mobileViewMode, setMobileViewMode] = useState("home"); const [mobileViewModeKeepOpen, setMobileViewModeKeepOpen] = useState(""); - + const [desktopSideView, setDesktopSideView] = useState('groups') const isFocusedRef = useRef(true); const selectedGroupRef = useRef(null); const selectedDirectRef = useRef(null); @@ -1547,10 +1549,12 @@ export const Group = ({
{isMobile && ( @@ -1752,10 +1756,12 @@ export const Group = ({
{/*
-
+ {isMobile && ( +
+ )} +
- {!isMobile && renderGroups()} + {!isMobile && desktopSideView === 'groups' && renderGroups()} + {!isMobile && desktopSideView === 'directs' && renderDirects()} + - - - - { - setMobileViewMode("groups"); - }} - > - - - - - {selectedGroup?.groupName} - - - {/* */} - - - - {mobileViewMode === "group" && ( + {isMobile && ( + + + + { + setMobileViewMode("groups"); + }} + > + + + + + {selectedGroup?.groupName} + + + {/* */} + + + + )} + + {isMobile && mobileViewMode === "group" && ( <> )} - - {mobileViewMode === "home" && ( + {!isMobile && ( + + )} + {isMobile && mobileViewMode === "home" && ( )} - {/* { - !selectedGroup && + { + !isMobile && !selectedGroup && groupSection === "home" && ( - - )} */} + )}
- {mobileViewMode === "home" && !mobileViewModeKeepOpen && ( + + {isMobile && mobileViewMode === "home" && !mobileViewModeKeepOpen && ( <>
{ const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState( @@ -75,7 +75,8 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => { { @@ -124,7 +124,8 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get { + return ( + + + + 15 ? "16px" : "20px", + padding: '10px' + }} + > + Welcome{" "} + {userInfo?.name ? ( + {`, ${userInfo?.name}`} + ) : null} + + + {!isLoadingGroups && ( + + + + + + + + + + + + + + + )} + + + + + {/* + + */} + + + + ); +}; diff --git a/src/components/Group/ListOfThreadPostsWatched.tsx b/src/components/Group/ListOfThreadPostsWatched.tsx index 3e794b0..4817805 100644 --- a/src/components/Group/ListOfThreadPostsWatched.tsx +++ b/src/components/Group/ListOfThreadPostsWatched.tsx @@ -15,6 +15,7 @@ import { Spacer } from "../../common/Spacer"; import { getGroupNames } from "./UserListOfInvites"; import { CustomLoader } from "../../common/CustomLoader"; import VisibilityIcon from "@mui/icons-material/Visibility"; +import { isMobile } from "../../App"; export const ListOfThreadPostsWatched = () => { const [posts, setPosts] = React.useState([]); @@ -92,7 +93,7 @@ export const ListOfThreadPostsWatched = () => { { const [checked1, setChecked1] = React.useState(false); @@ -77,7 +78,7 @@ export const ThingsToDoInitial = ({ myAddress, name, hasGroups, balance }) => {