Merge pull request #1714 from Sawan-Kushwah/responsive/profilePage

Maked profile page responsive and also fixes some issues in login page
ANSHIKA-26 · Nov 6, 2024 · f498d0e · f498d0e · vercel · Nov 6, 2024
2 parents c288325 + 9402add
commit f498d0e
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 55 deletions.
diff --git a/frontend/src/pages/BloggerProfile.js b/frontend/src/pages/BloggerProfile.js
@@ -20,10 +20,10 @@ let drafts = loadDrafts();
 
 export function renderProfilePage(container) {
     container.innerHTML = `
-        <div class="w-4/5 mx-auto p-6 pb-20">
-            <div class='flex w-full justify-between'>
+        <div class="w-4/5 mx-auto p-6 pb-20 max-sm:w-full max-sm:p-0">
+            <div class='flex w-full justify-between max-md:flex-col-reverse'>
                 <!-- Draft Form -->
-                <div class="p-6 bg-white dark:bg-gray-800 dark:text-gray-200 rounded-lg shadow-md w-3/5" data-aos="fade-up" data-aos-delay="100">
+                <div class="p-6 bg-white dark:bg-gray-800 dark:text-gray-200 rounded-lg shadow-md w-3/5 max-md:mt-12 max-md:w-full" data-aos="fade-up" data-aos-delay="100">
                     <h2 class="text-2xl font-semibold mb-4 text-gray-800 dark:text-gray-100">Draft a New Blog</h2>
                     <p class="text-gray-600 dark:text-gray-400 mb-6">Create and save your blog drafts below.</p>
                     <input type="text" id="draft-title" placeholder="Blog Title..." class=" bg-gray-300 dark:bg-gray-700 p-3 w-full rounded-lg shadow-sm" />
@@ -42,9 +42,9 @@ export function renderProfilePage(container) {
                     <button id="save-draft-btn" class="mt-4 bg-blue-600 text-white px-6 py-3 rounded-md shadow-lg hover:bg-blue-700 w-full">Save Draft</button>
                 </div>
                 <!-- Profile Header -->
-                <div class="bg-white dark:bg-gray-800 dark:text-gray-200 p-6 rounded-lg border-2 border-blue-300 shadow-lg w-1/3 h-64 flex flex-col items-center" data-aos="fade-up" data-aos-delay="100">
-                    <button id="logout-btn" class="bg-red-500 hover:bg-red-600 text-white font-semibold py-1 px-4 rounded shadow-md relative left-[135px] -top-4">Sign out</button>
-                    <img src="${userDetails.profilePic}" alt="Profile" class="rounded-full object-cover w-28 h-28 border-4 border-gray-200" />
+                <div class="bg-white dark:bg-gray-800 dark:text-gray-200 p-6 rounded-lg border-2 border-blue-300 shadow-lg w-1/3 h-64 flex flex-col items-center max-md:w-full" data-aos="fade-up" data-aos-delay="100">
+                    <button id="logout-btn" class="bg-red-500 hover:bg-red-600 text-white font-semibold py-1 px-4 rounded shadow-md relative left-[135px] -top-4 " >Sign out</button>
+                    <img src="${userDetails.profilePic}" alt="Profile" class="rounded-full object-cover w-28 h-28 border-4 border-gray-200 max-md:flex max-md:justify-center max-md:items-center" />
                     <h1 class="text-2xl text-center font-semibold text-gray-800 dark:text-gray-100 tracking-wide">${userDetails.name}</h1>
                     <p class="text-gray-500 dark:text-gray-400 mt-2 leading-relaxed">${userDetails.email}</p>
                 </div>

diff --git a/frontend/src/pages/Login.js b/frontend/src/pages/Login.js
@@ -1,4 +1,22 @@
 // Function to render the login UI
+import { initializeApp } from "firebase/app";
+import { getAuth, signInWithPopup, GoogleAuthProvider, onAuthStateChanged, signOut as firebaseSignOut } from "firebase/auth";
+
+// Initialize Firebase
+const firebaseConfig = {
+    apiKey: "AIzaSyDwowmzH0skVhieH3KPgIP8_vQBzhJmIi4",
+    authDomain: "wordwise-d1607.firebaseapp.com",
+    projectId: "wordwise-d1607",
+    storageBucket: "wordwise-d1607.appspot.com",
+    messagingSenderId: "426579758621",
+    appId: "1:426579758621:web:5bc883cd5eea3a416940f4",
+    measurementId: "G-QL9ZF6G3HH"
+};
+
+const app = initializeApp(firebaseConfig);
+const auth = getAuth(app);
+const googleAuthProvider = new GoogleAuthProvider();
+
 export function renderLogin(container) {
     container.innerHTML = `
         <div id="auth-status" class="flex items-center bg-[#8b5cf6] hover:bg-[#753ff1] text-white text-sm font-medium mr-2 space-x-4 p-2 shadow-lg rounded-md border-none hidden ">

diff --git a/frontend/src/styles/output.css b/frontend/src/styles/output.css
@@ -634,6 +634,10 @@ video {
   margin-bottom: 3rem;
 }
 
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
 .mb-12 {
   margin-bottom: 3rem;
 }
@@ -698,10 +702,6 @@ video {
   margin-top: 6px;
 }
 
-.mb-1 {
-  margin-bottom: 0.25rem;
-}
-
 .block {
   display: block;
 }
@@ -815,14 +815,14 @@ video {
   width: 100%;
 }
 
-.max-w-screen-xl {
-  max-width: 1280px;
-}
-
 .max-w-4xl {
   max-width: 56rem;
 }
 
+.max-w-screen-xl {
+  max-width: 1280px;
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -871,10 +871,6 @@ video {
   justify-content: space-between;
 }
 
-.justify-evenly {
-  justify-content: space-evenly;
-}
-
 .gap-4 {
   gap: 1rem;
 }
@@ -971,6 +967,10 @@ video {
   border-bottom-width: 1px;
 }
 
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+
 .border-l-4 {
   border-left-width: 4px;
 }
@@ -979,10 +979,6 @@ video {
   border-top-width: 1px;
 }
 
-.border-b-2 {
-  border-bottom-width: 2px;
-}
-
 .border-none {
   border-style: none;
 }
@@ -1022,15 +1018,15 @@ video {
   border-color: rgb(99 102 241 / var(--tw-border-opacity));
 }
 
-.border-transparent {
-  border-color: transparent;
-}
-
 .border-teal-600 {
   --tw-border-opacity: 1;
   border-color: rgb(13 148 136 / var(--tw-border-opacity));
 }
 
+.border-transparent {
+  border-color: transparent;
+}
+
 .bg-\[\#8b5cf6\] {
   --tw-bg-opacity: 1;
   background-color: rgb(139 92 246 / var(--tw-bg-opacity));
@@ -1106,11 +1102,6 @@ video {
   background-color: rgb(254 249 195 / var(--tw-bg-opacity));
 }
 
-.bg-yellow-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(253 224 71 / var(--tw-bg-opacity));
-}
-
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -1195,6 +1186,10 @@ video {
   padding-bottom: 2rem;
 }
 
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
 .pb-20 {
   padding-bottom: 5rem;
 }
@@ -1219,10 +1214,6 @@ video {
   padding-top: 2rem;
 }
 
-.pb-2 {
-  padding-bottom: 0.5rem;
-}
-
 .text-center {
   text-align: center;
 }
@@ -1300,11 +1291,6 @@ video {
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 
-.text-blue-600 {
-  --tw-text-opacity: 1;
-  color: rgb(37 99 235 / var(--tw-text-opacity));
-}
-
 .text-blue-700 {
   --tw-text-opacity: 1;
   color: rgb(29 78 216 / var(--tw-text-opacity));
@@ -1390,6 +1376,11 @@ video {
   color: rgb(153 27 27 / var(--tw-text-opacity));
 }
 
+.text-teal-700 {
+  --tw-text-opacity: 1;
+  color: rgb(15 118 110 / var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1405,11 +1396,6 @@ video {
   color: rgb(133 77 14 / var(--tw-text-opacity));
 }
 
-.text-teal-700 {
-  --tw-text-opacity: 1;
-  color: rgb(15 118 110 / var(--tw-text-opacity));
-}
-
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -1571,11 +1557,6 @@ body.dark-mode {
   color: rgb(30 64 175 / var(--tw-text-opacity));
 }
 
-.hover\:text-blue-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(30 58 138 / var(--tw-text-opacity));
-}
-
 .hover\:text-gray-900:hover {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -1805,6 +1786,11 @@ body.dark-mode {
   color: rgb(252 165 165 / var(--tw-text-opacity));
 }
 
+.dark\:text-teal-300:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(94 234 212 / var(--tw-text-opacity));
+}
+
 .dark\:text-white:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1820,11 +1806,6 @@ body.dark-mode {
   color: rgb(253 224 71 / var(--tw-text-opacity));
 }
 
-.dark\:text-teal-300:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(94 234 212 / var(--tw-text-opacity));
-}
-
 .dark\:shadow-gray-800\/30:is(.dark *) {
   --tw-shadow-color: rgb(31 41 55 / 0.3);
   --tw-shadow: var(--tw-shadow-colored);
@@ -1880,6 +1861,42 @@ body.dark-mode {
   --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
 }
 
+@media not all and (min-width: 768px) {
+  .max-md\:mt-12 {
+    margin-top: 3rem;
+  }
+
+  .max-md\:flex {
+    display: flex;
+  }
+
+  .max-md\:w-full {
+    width: 100%;
+  }
+
+  .max-md\:flex-col-reverse {
+    flex-direction: column-reverse;
+  }
+
+  .max-md\:items-center {
+    align-items: center;
+  }
+
+  .max-md\:justify-center {
+    justify-content: center;
+  }
+}
+
+@media not all and (min-width: 640px) {
+  .max-sm\:w-full {
+    width: 100%;
+  }
+
+  .max-sm\:p-0 {
+    padding: 0px;
+  }
+}
+
 @media (min-width: 640px) {
   .sm\:inline {
     display: inline;