style(home): style landing page ui and remove scrollbar

arjunan-k · Nov 20, 2023 · 4a4105a · 4a4105a
1 parent 64804f6
commit 4a4105a
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 147 deletions.
diff --git a/app/Home.css b/app/Home.css
@@ -1,3 +1,17 @@
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.home-hero {
+  transition: background-color 1s ease;
+  animation: fadeIn 1s ease;
+}
+
 .login-signup-container {
   width: 100%;
   display: flex;

diff --git a/app/chatsz/page.tsx b/app/chatsz/page.tsx
diff --git a/app/components/ContactList.tsx b/app/components/ContactList.tsx
@@ -109,6 +109,7 @@ const ContactList = ({ fetchAgain }: { fetchAgain: boolean }) => {
       display="flex"
       $mDisplay={selectedChat ? "none" : "flex"}
       $overflowY="scroll"
+      className="hideVerticalScrollBar"
     >
       <Flex width="100%" justifyContent="space-between" alignItems="center" margin="0 0 8px 0">
         <Text color={isDark ? Theme.colors.white : Theme.colors.black} fontSize="24px">

diff --git a/app/components/MyChats/MyChats.tsx b/app/components/MyChats/MyChats.tsx
@@ -1,7 +0,0 @@
-import React from "react";
-
-const MyChats = () => {
-  return <div style={{ width: "20%" }}>MyChats</div>;
-};
-
-export default MyChats;

diff --git a/app/components/ScrollableChat.tsx b/app/components/ScrollableChat.tsx
@@ -49,6 +49,7 @@ const ScrollableChat = ({ messages, isTyping }: { messages: MessageData[]; isTyp
         height="-webkit-fill-available"
         margin="12px 0 0"
         ref={messageContainerRef}
+        className="hideVerticalScrollBar"
       >
         {messages &&
           messages.map((message, index) => (

diff --git a/app/components/SideDrawer/SideDrawer.tsx b/app/components/SideDrawer/SideDrawer.tsx
@@ -1,48 +0,0 @@
-import React, { useContext } from "react";
-import { ChatState } from "@/contexts/ChatProvider";
-import Image from "next/image";
-import { useRouter } from "next/navigation";
-import { VscAccount } from "react-icons/vsc";
-import { DarkLightModeContext } from "@/contexts/DarkLightModeProvider";
-import Theme from "@/styles/Theme.styled";
-
-const SideDrawer = () => {
-  const { user } = ChatState() || { user: null };
-  // const [search, setSearch] = useState("");
-  // const [searchResults, setSearchResults] = useState([]);
-  // const [loading, setLoading] = useState(false);
-  // const [loadingChat, setLoadingChat] = useState(false);
-  const router = useRouter();
-  const { isDark } = useContext(DarkLightModeContext)!;
-
-  const logoutHandler = () => {
-    localStorage.removeItem("userInfo");
-    router.push("/");
-  };
-  return (
-    <>
-      <nav style={{ display: "flex", justifyContent: "space-between" }}>
-        <button>Search</button>
-        <h1>BytePing</h1>
-        <section>
-          <button>Notification</button>
-          <span>{user?.name}</span>
-          <span>
-            <Image src={user?.pic || ""} alt="profile picture of user" width={25} height={25} />
-          </span>
-          <div>
-            <p>My Profile</p>
-            <p onClick={logoutHandler}>Logout</p>
-            {user?.pic ? (
-              <Image src={user?.pic || ""} alt={user.name} width={24} height={24} style={{ borderRadius: "50%" }} />
-            ) : (
-              <VscAccount size={24} fill={isDark ? Theme.colors.black : Theme.colors.white} />
-            )}
-          </div>
-        </section>
-      </nav>
-    </>
-  );
-};
-
-export default SideDrawer;

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,28 +1,58 @@
 "use client";
 
 import "./Home.css";
-import { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import Login from "@/components/Login/Login";
 import SignUp from "@/components/SignUp/SignUp";
+import Flex from "./styles/Flex.styled";
+import Text from "./styles/Text.styled";
+import Container from "./styles/Container.styled";
+import Theme from "./styles/Theme.styled";
 
 const Home = () => {
   const router = useRouter();
+  const [heroOneBorderRadius, setHeroOneBorderRadius] = useState("0");
 
   useEffect(() => {
     const userInfoString = localStorage.getItem("userInfo");
     if (userInfoString) {
       router.push("/chats");
     }
   }, [router]);
+
   return (
-    <main>
-      <h1>BytePing</h1>
+    <Container>
+      <Flex
+        className="home-hero"
+        height="100vh"
+        alignItems="center"
+        justifyContent="center"
+        backgroundColor="#34a853"
+        borderRadius={heroOneBorderRadius}
+        onScroll={() => setHeroOneBorderRadius("0 0 0 100%")}
+      >
+        <Text fontSize="5.5rem" fontWeight="900" fontStyle="italic" letterSpacing="16px" color={Theme.colors.black}>
+          BYTEPING
+        </Text>
+      </Flex>
+      <Flex backgroundColor="#FBBC05" height="100vh">
+        Features
+      </Flex>
+      <Flex backgroundColor={Theme.colors.violet} height="100vh">
+        Features
+      </Flex>
+      <Flex backgroundColor="#4285F4" height="100vh">
+        Features
+      </Flex>
+      <Flex backgroundColor="#EA4335" height="100vh">
+        Features
+      </Flex>
       <section className="login-signup-container">
         <Login />
         <SignUp />
       </section>
-    </main>
+    </Container>
   );
 };
 

diff --git a/app/styles/Global.styled.ts b/app/styles/Global.styled.ts
@@ -6,6 +6,24 @@ const GlobalStyle = createGlobalStyle`
       padding: 0;
       margin: 0;
     }
+
+    body {
+      -ms-overflow-style: none;
+      scrollbar-width: none;
+    }
+
+    body::-webkit-scrollbar {
+      display: none;
+    }
+
+    .hideVerticalScrollBar {
+      -ms-overflow-style: none;
+      scrollbar-width: none;
+    }
+
+    .hideVerticalScrollBar::-webkit-scrollbar {
+      display: none;
+    }
 `;
 
 export default GlobalStyle;