UI UODATE : update bg styling of all component. define common style d…

…irective of bg
shyamtala003 · Apr 29, 2024 · 2f81921 · 2f81921
1 parent 319723f
commit 2f81921
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 8 deletions.
diff --git a/src/assets/BG.jpeg b/src/assets/BG.jpeg
diff --git a/src/assets/BG.webp b/src/assets/BG.webp
diff --git a/src/index.css b/src/index.css
@@ -25,8 +25,17 @@ body {
       rgba(0, 0, 0, 0.3),
       rgba(255, 255, 255, 0)
     ),
-    url("./assets/BG.webp");
+    url("./assets/BG.jpeg");
 
   background-size: cover;
   background-position: center;
 }
+
+@layer components {
+  .bg-blur-primary {
+    @apply backdrop-blur-lg bg-clip-padding backdrop-filter bg-opacity-10;
+  }
+  .bg-blur-secondary {
+    @apply backdrop-blur-xl bg-white bg-opacity-10;
+  }
+}
diff --git a/src/pages/home/Home.jsx b/src/pages/home/Home.jsx
@@ -3,7 +3,7 @@ import Sidebar from "../../components/sidebar/Sidebar";
 
 const Home = () => {
   return (
-    <div className="self-center flex max-auto w-full h-full 2xl:max-h-[90%] backdrop-blur-xl rounded-md bg-white bg-opacity-5">
+    <div className="self-center flex max-auto w-full h-full 2xl:max-h-[90%]  rounded-md  bg-blur-secondary">
       <Sidebar />
       <MessagesContainer />
     </div>

diff --git a/src/pages/signin/SignIn.jsx b/src/pages/signin/SignIn.jsx
@@ -48,8 +48,21 @@ const SignIn = () => {
   const onSubmit = async (data) => {
     try {
       let response = await apiCall("post", "/auth/v1/signin", { body: data });
-      let { _id: userId, username, name, gender } = response.data;
-      setUseDetails({ isLoggedIn: true, userId, username, gender, name });
+      let {
+        _id: userId,
+        username,
+        name,
+        gender,
+        profilePicture,
+      } = response.data;
+      setUseDetails({
+        isLoggedIn: true,
+        userId,
+        username,
+        gender,
+        name,
+        profilePicture,
+      });
       toast(response.message, { type: "success" });
       return reset();
     } catch (error) {
@@ -59,7 +72,7 @@ const SignIn = () => {
 
   return (
     <MainLayout>
-      <div className="flex flex-col self-center w-full h-full px-4 py-8 mx-auto bg-gray-600 rounded-r-none md:h-auto md:max-w-lg backdrop-blur-lg bg-clip-padding backdrop-filter bg-opacity-10 md:rounded-2xl">
+      <div className="flex flex-col self-center w-full h-full px-4 py-8 mx-auto rounded-r-none md:h-auto md:max-w-lg  md:rounded-2xl bg-blur-primary">
         <h2 className="text-2xl font-semibold text-center text-white">
           Login to <span className="text-green-300">ChatApp</span>
         </h2>

diff --git a/src/pages/signup/SignUp.jsx b/src/pages/signup/SignUp.jsx
@@ -61,8 +61,21 @@ const SignUp = () => {
   const onSubmit = async (data) => {
     try {
       let response = await apiCall("post", "/auth/v1/signup", { body: data });
-      let { _id: userId, username, name, gender } = response.data;
-      setUseDetails({ isLoggedIn: true, userId, username, gender, name });
+      let {
+        _id: userId,
+        username,
+        name,
+        gender,
+        profilePicture,
+      } = response.data;
+      setUseDetails({
+        isLoggedIn: true,
+        userId,
+        username,
+        gender,
+        name,
+        profilePicture,
+      });
       toast(response.message, { type: "success" });
       return reset();
     } catch (error) {
@@ -72,7 +85,7 @@ const SignUp = () => {
 
   return (
     <MainLayout>
-      <div className="flex flex-col self-center w-full h-full px-4 py-8 mx-auto bg-gray-600 rounded-r-none md:h-auto md:max-w-lg backdrop-blur-lg bg-clip-padding backdrop-filter bg-opacity-10 md:rounded-2xl">
+      <div className="flex flex-col self-center w-full h-full px-4 py-8 mx-auto  rounded-r-none md:h-auto md:max-w-lg md:rounded-2xl bg-blur-primary">
         <h2 className="text-2xl font-semibold text-center text-white">
           Sign Up to <span className="text-green-300">ChatApp</span>
         </h2>