adding friendship popup

JoinTheAlliance · Mar 16, 2024 · b32854b · b32854b
1 parent 2ad353a
commit b32854b
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 0 deletions.
diff --git a/packages/app/src/components/FriendShip/FriendRequestPopup.tsx b/packages/app/src/components/FriendShip/FriendRequestPopup.tsx
@@ -0,0 +1,89 @@
+import React from "react"
+import {
+	Avatar,
+	Text,
+	Button,
+	Paper,
+	CheckIcon,
+	Flex
+	// PhoneIcon,
+	// UserPlusIcon
+} from "@mantine/core"
+
+const ContactPopup = () => {
+	return (
+		<Paper
+			shadow="xs"
+			p="xl"
+			style={{
+				position: "absolute",
+				bottom: "7rem",
+				left: "0",
+				right: "0",
+				borderRadius: "25.15px",
+				backgroundColor: "rgba(114, 114, 114, 0.5)",
+				backdropFilter: "blur(10px)",
+				zIndex: "999"
+			}}
+		>
+			<Text className="mb-2 md:mb-0 lg:mb-0 text-[#444444]">
+				Emmy wants you to meet
+			</Text>
+			<Flex gap="md" justify="space-between" align="center">
+				<div className="flex items-center justify-center mr-2">
+					<Avatar
+						src="/images/characters/upstreet/2d/anemone.png"
+						sizes="lg"
+						style={{ borderRadius: "1000px" }}
+					/>
+					<Text className="ml-2 lg:ml-4 mb-1.5 font-bold font-sans w-[100px] lg:w-[200px] text-left overflow-hidden whitespace-nowrap overflow-ellipsis">
+						Moon
+					</Text>
+				</div>
+				<div className="flex items-center justify-center gap-2 lg:gap-4 place-items-baseline">
+					<Button
+						variant="outline"
+						color="blue"
+						style={{
+							transform: "scale(1)",
+							transition: "transform 500ms",
+							":hover": { transform: "scale(1.1)" }
+						}}
+					>
+						<CheckIcon
+							style={{ width: "28.58px", height: "32.5px", color: "white" }}
+						/>
+					</Button>
+					<Button
+						variant="outline"
+						color="blue"
+						style={{
+							transform: "scale(1)",
+							transition: "transform 500ms",
+							":hover": { transform: "scale(1.1)" }
+						}}
+					>
+						{/* <UserPlusIcon style={{ fontSize: "24px", color: "white" }} /> */}
+					</Button>
+					<Button
+						variant="outline"
+						color="red"
+						style={{
+							transform: "scale(1)",
+							transition: "transform 500ms",
+							":hover": { transform: "scale(1.1)" }
+						}}
+					>
+						<img
+							src="/icons/Close.svg"
+							alt="close"
+							style={{ width: "23.5px", height: "20px" }}
+						/>
+					</Button>
+				</div>
+			</Flex>
+		</Paper>
+	)
+}
+
+export default ContactPopup
diff --git a/packages/app/src/pages/app/root.tsx b/packages/app/src/pages/app/root.tsx
@@ -14,6 +14,7 @@ import removeTypingIndicatorFromOfflineUsers from "../../helpers/removeTypingInd
 import useGlobalStore, { initialState } from "../../store/useGlobalStore"
 import OAuthUser from "./../../components/OAuthUser"
 import useRootStyles from "./useRootStyles"
+import FriendRequestPopup from "../../components/FriendShip/FriendRequestPopup"
 
 const Root = (): JSX.Element => {
 	const { getUserFriends, getUserRoomData } = useLoadUserData()
@@ -123,6 +124,7 @@ const Root = (): JSX.Element => {
 		>
 			{!isMobile && <SideMenu closeMenu={(): void => {}} />}
 			<div className={classes.content}>
+				<FriendRequestPopup />
 				<Outlet />
 			</div>
 		</div>