From db61157344be7df9ae166cc2a5de873cec00685a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Selin=20I=C5=9F=C4=B1k?=
 <56879777+selinisik@users.noreply.github.com>
Date: Tue, 14 Nov 2023 23:06:02 +0300
Subject: [PATCH] updated auth and feed mobile view

---
 .../MobileMenu/MobileMenu.module.css          | 97 ++++++++++---------
 .../src/Components/MobileMenu/index.jsx       |  8 +-
 .../Components/PollCard/PollCard.module.css   | 22 +++++
 .../src/Components/PollCard/index.jsx         |  7 +-
 .../src/Components/Sidebar/Sidebar.module.css |  2 +-
 .../src/Pages/Auth/SignIn/SignIn.module.css   |  6 ++
 .../src/Pages/Auth/SignUp/SignUp.module.css   | 10 +-
 .../frontend/src/Pages/Feed/Feed.module.css   | 19 +++-
 .../frontend/src/Pages/Feed/index.jsx         |  3 +-
 9 files changed, 117 insertions(+), 57 deletions(-)

diff --git a/prediction-polls/frontend/src/Components/MobileMenu/MobileMenu.module.css b/prediction-polls/frontend/src/Components/MobileMenu/MobileMenu.module.css
index 44e66bc1..66d4d38a 100644
--- a/prediction-polls/frontend/src/Components/MobileMenu/MobileMenu.module.css
+++ b/prediction-polls/frontend/src/Components/MobileMenu/MobileMenu.module.css
@@ -1,46 +1,4 @@
-.mobileMenu {
-  width: 80vw;
-  height: 100vh;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  padding-top: 20px;
-  background-color: var(--primary-50);
-  justify-content: space-between;
-  overflow: auto;
-}
-.wrapper {
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-}
 
-.menuItem {
-  padding: 20px;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 20px;
-  background-color: var(--primary-50);
-  color: var(--neutral-900);
-  cursor: pointer;
-  border-bottom: 1px solid var(--neutral-300);
-}
-
-.menuItem:last-child {
-  border-bottom: none;
-}
-
-.logo {
-  width: 100%;
-  flex-shrink: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  pointer-events: none;
-}
 
 .mobileMenuButton {
   display: none;
@@ -48,8 +6,11 @@
   color: var(--neutral-900);
   cursor: pointer;
 }
+.wrapper {
+  display: none;
+}
 
-@media (max-width: 640px) {
+@media (max-width: 768px) {
   .mobileMenuButton {
     justify-content: flex-start;
     height: 50px;
@@ -60,8 +21,52 @@
     cursor: pointer;
     padding-left: 10px;
   }
-}
-.point {
+  .mobileMenu {
+    width: 80vw;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    padding-top: 20px;
+    background-color: var(--primary-50);
+    justify-content: space-between;
+  }
+  .wrapper {
+    flex-grow: 1;
+    position: fixed;
+    width: 100vw;
+    height: 100%;
+    z-index: 3;
+    display: flex;
+    align-items: stretch;
+  }
+  
+  .menuItem {
+    padding: 20px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 20px;
+    background-color: var(--primary-50);
+    color: var(--neutral-900);
+    cursor: pointer;
+    border-bottom: 1px solid var(--neutral-300);
+  }
+  
+  .menuItem:last-child {
+    border-bottom: none;
+  }
+  
+  .logo {
+    width: 100%;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+  }
+  .point {
   display: flex;
   justify-content: center;
   gap: 20px;
@@ -73,3 +78,5 @@
   font-size: 20px;
   font-weight: 700;
 }
+}
+
diff --git a/prediction-polls/frontend/src/Components/MobileMenu/index.jsx b/prediction-polls/frontend/src/Components/MobileMenu/index.jsx
index e7e67b1e..902c7f3b 100644
--- a/prediction-polls/frontend/src/Components/MobileMenu/index.jsx
+++ b/prediction-polls/frontend/src/Components/MobileMenu/index.jsx
@@ -26,9 +26,7 @@ const menuData = [
 const MobileMenuItem = ({ pageKey, Icon, label, navigate, to, theme }) => {
   return (
     <div key={pageKey} className={styles.menuItem} onClick={() => navigate(to)}>
-      {Icon && (
-        <Icon width={30} height={30} />
-      )}
+      {Icon && <Icon width={30} height={30} />}
       {label || pageKey}
     </div>
   );
@@ -44,11 +42,13 @@ const MobileMenu = () => {
 
   return (
     <>
-      {!menuActive && (
+      {!menuActive ? (
         <MenuOutlined
           className={styles.mobileMenuButton}
           onClick={toggleMenu}
         />
+      ) : (
+        <div className={styles.mobileMenuButton}></div>
       )}
       {menuActive && (
         <div className={styles.wrapper} onClick={() => setMenuActive(false)}>
diff --git a/prediction-polls/frontend/src/Components/PollCard/PollCard.module.css b/prediction-polls/frontend/src/Components/PollCard/PollCard.module.css
index 99b0aea0..9362480a 100644
--- a/prediction-polls/frontend/src/Components/PollCard/PollCard.module.css
+++ b/prediction-polls/frontend/src/Components/PollCard/PollCard.module.css
@@ -163,4 +163,26 @@
 
 a{
   text-decoration: none;
+}
+
+.buttonText{
+  margin: 0px;
+}
+
+@media (max-width:769px){
+  .buttonText{
+    display: none;
+  }
+  .commentButton,
+.shareButton,
+.reportButton {
+  padding: 12px;
+}
+}
+@media (max-width:1025px){
+  .card{
+    padding: 25px 15px ;
+    
+  }
+
 }
\ No newline at end of file
diff --git a/prediction-polls/frontend/src/Components/PollCard/index.jsx b/prediction-polls/frontend/src/Components/PollCard/index.jsx
index 9542531d..43e9e40a 100644
--- a/prediction-polls/frontend/src/Components/PollCard/index.jsx
+++ b/prediction-polls/frontend/src/Components/PollCard/index.jsx
@@ -79,7 +79,7 @@ function PollCard({ PollData }) {
         <div className={styles.actionButtons}>
           <div className={styles.buttonWrapper}>
             <button className={styles.commentButton}>
-              <CommentIcon /> Comments
+              <CommentIcon /> <p className={styles.buttonText}>Comments</p>
             </button>
             <span className={styles.commentCount}>
               {`${PollData.comments.length} comment${
@@ -90,13 +90,14 @@ function PollCard({ PollData }) {
 
           <div className={styles.buttonWrapper}>
             <button className={styles.shareButton}>
-              <ShareIcon /> Share
+              <ShareIcon /> <p className={styles.buttonText}>Share</p>
             </button>
           </div>
           <div className={styles.buttonWrapper}>
             <button className={styles.reportButton}>
               <ReportIcon />
-              Report
+              <p className={styles.buttonText}>Report</p>
+              
             </button>
           </div>
         </div>
diff --git a/prediction-polls/frontend/src/Components/Sidebar/Sidebar.module.css b/prediction-polls/frontend/src/Components/Sidebar/Sidebar.module.css
index 6885b0a8..f4875e15 100644
--- a/prediction-polls/frontend/src/Components/Sidebar/Sidebar.module.css
+++ b/prediction-polls/frontend/src/Components/Sidebar/Sidebar.module.css
@@ -58,7 +58,7 @@
   border: none;
 }
 
-@media (max-width: 640px) {
+@media (max-width: 768px) {
   .sidebar {
     display: none;
   }
diff --git a/prediction-polls/frontend/src/Pages/Auth/SignIn/SignIn.module.css b/prediction-polls/frontend/src/Pages/Auth/SignIn/SignIn.module.css
index e85184fe..29ef13b4 100644
--- a/prediction-polls/frontend/src/Pages/Auth/SignIn/SignIn.module.css
+++ b/prediction-polls/frontend/src/Pages/Auth/SignIn/SignIn.module.css
@@ -85,4 +85,10 @@
 .messageStyle {
   color: var(--neutral-100);
   color: var(--warning-600)
+}
+@media (max-width: 768px) {
+  .imageStyle{
+    display: none;
+  }
+  
 }
\ No newline at end of file
diff --git a/prediction-polls/frontend/src/Pages/Auth/SignUp/SignUp.module.css b/prediction-polls/frontend/src/Pages/Auth/SignUp/SignUp.module.css
index 09ea98bc..3c4d04c7 100644
--- a/prediction-polls/frontend/src/Pages/Auth/SignUp/SignUp.module.css
+++ b/prediction-polls/frontend/src/Pages/Auth/SignUp/SignUp.module.css
@@ -58,6 +58,7 @@
      display: flex;
      flex-direction: column;
      align-items: center;
+     justify-content: center
  }
 
  .logoStyle {
@@ -67,4 +68,11 @@
      margin-bottom: 20px;
      max-width: 80%;
      max-height: 80%;
- }
\ No newline at end of file
+ }
+
+ @media (max-width: 768px) {
+    .imageContainerStyle{
+      display: none;
+    }
+    
+  }
\ No newline at end of file
diff --git a/prediction-polls/frontend/src/Pages/Feed/Feed.module.css b/prediction-polls/frontend/src/Pages/Feed/Feed.module.css
index ba3df987..d8e406b8 100644
--- a/prediction-polls/frontend/src/Pages/Feed/Feed.module.css
+++ b/prediction-polls/frontend/src/Pages/Feed/Feed.module.css
@@ -2,16 +2,31 @@
     display: flex;
     background-color: var(--neutral-white);
     width: 100%;
+    box-sizing: border-box;
 }
-@media (max-width: 640px) {
+@media (max-width: 768px) {
     .page{
         flex-direction: column;
     }
+    .pointsButton{
+        display:none;
+    }
+    .pollList{
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        padding: 20px;
+        justify-content: center;
+        align-items: center;
+    }
 }
+
+@media (min-width: 769px) {
 .pollList{
     display: flex;
     flex-direction: column;
     padding-left: 20px;
     width: 60%;
-    margin-top: 30px;
+    padding-top: 100px;
+}
 }
\ No newline at end of file
diff --git a/prediction-polls/frontend/src/Pages/Feed/index.jsx b/prediction-polls/frontend/src/Pages/Feed/index.jsx
index 5996afc1..97144f71 100644
--- a/prediction-polls/frontend/src/Pages/Feed/index.jsx
+++ b/prediction-polls/frontend/src/Pages/Feed/index.jsx
@@ -16,7 +16,8 @@ function Feed() {
           <PollCard PollData={poll} key={index}/>
         ))
       }</div>
-      <PointsButton points={pointData.points}/>
+     <div className={styles.pointsButton}>
+      <PointsButton points={pointData.points}/></div> 
     </div>
   );
 }