Merge pull request #85 from ClioDynamics/fix_chat_UI

FIX chat Layout
JoinTheAlliance · Mar 9, 2024 · 393c2e1 · 393c2e1
2 parents ed616b5 + c8bd078
commit 393c2e1
Show file tree

Hide file tree

Showing 15 changed files with 1,543 additions and 1,130 deletions.
diff --git a/packages/app/src/components/SideMenu/MobileSideMenu/MobileSideMenu.tsx b/packages/app/src/components/SideMenu/MobileSideMenu/MobileSideMenu.tsx
@@ -0,0 +1,100 @@
+import {
+	Button,
+	Flex,
+	Group,
+	Navbar,
+	Text,
+	rem,
+	Box,
+	useMantineTheme,
+} from "@mantine/core";
+import React from "react";
+import { useNavigate } from "react-router";
+import iconImgSrc from "../../../../public/icons/account.svg";
+import { getAvatarImage } from "../../../helpers/getAvatarImage";
+import useGlobalStore from "../../../store/useGlobalStore";
+import UserAvatar from "../../UserAvatar";
+import useSideMenuStyles from "./MobileSideMenustyles";
+import FriendsSideMenuScreen from "../SideMenuScreens/FriendsSideMenuScreen";
+
+const MobileSideMenu = ({
+	closeMenu,
+}: {
+	closeMenu: () => void;
+}): JSX.Element => {
+	const { classes } = useSideMenuStyles();
+	const theme = useMantineTheme();
+	const navigate = useNavigate();
+	const { user } = useGlobalStore();
+
+	return (
+		<Navbar className={classes.container}>
+			<Navbar.Section className={classes.wrapper} grow>
+				<div className={classes.main}>
+					<Flex direction={"column"} justify={"space-between"}>
+						<Flex
+							pos={"absolute"}
+							bottom={"0"}
+							w={"100%"}
+							p={"xl"}
+							direction={"row"}
+							gap={"xl"}
+							align={"center"}
+							justify="space-between"
+						>
+							<Group>
+								<UserAvatar
+									src={
+										user.avatar_url ||
+										getAvatarImage(user.name || user.email || "")
+									}
+									online={true}
+								/>
+								<Box w={96.5}>
+									<Text color={theme.white} weight={500} truncate="end">
+										{user.name}
+									</Text>
+									<Text size="xs" color="dimmed">
+										Online
+									</Text>
+								</Box>
+							</Group>
+							<Group
+								style={{
+									textAlign: "center",
+								}}
+							>
+								<Button
+									size={"sm"}
+									bg={"#292929"}
+									style={{
+										display: "flex",
+										alignItems: "center",
+										backgroundColor: "#292929",
+										paddingLeft: rem(20),
+										color: "#757474",
+									}}
+									onClick={() => {
+										navigate("/profile");
+										closeMenu();
+									}}
+								>
+									<Text mr={"md"}>My Account</Text>
+									<img
+										src={iconImgSrc}
+										alt="Icon"
+										width={"20px"}
+										height={"20px"}
+									/>
+								</Button>
+							</Group>
+						</Flex>
+						<FriendsSideMenuScreen />
+					</Flex>
+				</div>
+			</Navbar.Section>
+		</Navbar>
+	);
+};
+
+export default MobileSideMenu;
diff --git a/packages/app/src/components/SideMenu/MobileSideMenu/MobileSideMenustyles.ts b/packages/app/src/components/SideMenu/MobileSideMenu/MobileSideMenustyles.ts
@@ -0,0 +1,155 @@
+import { createStyles } from "@mantine/core";
+
+const useSideMenuStyles = createStyles((theme) => ({
+	wrapper: {
+		display: "flex",
+		width: "100%",
+	},
+
+	aside: {
+		backgroundColor:
+			theme.colorScheme === "dark" ? theme.colors.dark[9] : theme.white,
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		borderRight: `1px solid ${
+			theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[3]
+		}`,
+		padding: 5,
+	},
+	container: {
+		boxSizing: "border-box",
+		overflowY: "auto",
+		overflowX: "hidden",
+		position: "relative",
+		flexDirection: "column",
+		justifyContent: "space-between",
+		alignItems: "flex-start",
+		height: "100%",
+		fontSize: "1.125rem",
+		lineHeight: "1.75rem",
+		textAlign: "center",
+		color: "#ffffff",
+		width: "100%",
+		"@media (min-width: 1024px)": {
+			display: "none",
+		},
+	},
+	main: {
+		flex: 1,
+		backgroundColor:
+			theme.colorScheme === "dark"
+				? theme.colors.dark[8]
+				: theme.colors.gray[0],
+	},
+	linkContainer: {
+		maxHeight: "calc(100vh - 100px)",
+		overflowY: "auto",
+	},
+	mainLink: {
+		width: 44,
+		height: 44,
+		borderRadius: theme.radius.md,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		color:
+			theme.colorScheme === "dark"
+				? theme.colors.dark[0]
+				: theme.colors.gray[7],
+
+		"&:hover": {
+			backgroundColor:
+				theme.colorScheme === "dark"
+					? theme.colors.dark[5]
+					: theme.colors.gray[0],
+		},
+	},
+
+	mainLinkActive: {
+		"&, &:hover": {
+			backgroundColor: theme.fn.variant({
+				variant: "light",
+				color: theme.primaryColor,
+			}).background,
+			color: theme.fn.variant({ variant: "light", color: theme.primaryColor })
+				.color,
+		},
+	},
+
+	title: {
+		display: "flex",
+		justifyContent: "space-between",
+		alignItems: "center",
+		boxSizing: "border-box",
+		fontFamily: `Greycliff CF, ${theme.fontFamily}`,
+		marginBottom: theme.spacing.xl,
+		backgroundColor:
+			theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.white,
+		padding: theme.spacing.md,
+		paddingTop: 18,
+		height: 60,
+		borderBottom: `1px solid ${
+			theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[3]
+		}`,
+	},
+
+	logo: {
+		boxSizing: "border-box",
+		width: "100%",
+		display: "flex",
+		justifyContent: "center",
+		height: 60,
+		paddingTop: theme.spacing.md,
+		borderBottom: `1px solid ${
+			theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[3]
+		}`,
+		marginBottom: theme.spacing.xl,
+	},
+	newRoomButton: {
+		width: "calc(100% - 20px)",
+		margin: 10,
+		marginTop: 0,
+		marginBottom: 20,
+	},
+	link: {
+		boxSizing: "border-box",
+		display: "flex",
+		alignItems: "center",
+		textDecoration: "none",
+		color:
+			theme.colorScheme === "dark"
+				? theme.colors.dark[0]
+				: theme.colors.gray[7],
+		padding: `0 ${theme.spacing.md}`,
+		fontSize: theme.fontSizes.sm,
+		marginRight: theme.spacing.md,
+		fontWeight: 500,
+		height: 44,
+		width: "100%",
+
+		"&:hover": {
+			backgroundColor:
+				theme.colorScheme === "dark"
+					? theme.colors.dark[5]
+					: theme.colors.gray[1],
+			color: theme.colorScheme === "dark" ? theme.white : theme.black,
+		},
+	},
+
+	linkActive: {
+		"&, &:hover": {
+			borderLeftColor: theme.fn.variant({
+				variant: "filled",
+				color: theme.primaryColor,
+			}).background,
+			backgroundColor: theme.fn.variant({
+				variant: "filled",
+				color: theme.primaryColor,
+			}).background,
+			color: theme.white,
+		},
+	},
+}));
+
+export default useSideMenuStyles;