(fix): Creator profile gets margin (#1008)

* fix creator profile margin * fix projects section margin * fix wider project css issues * fix eslint issues Closes #1005 Signed-off-by: Ndibe Raymond Olisaemeka <rolisaemeka-ctr@wikimedia.org> Co-authored-by: Ndibe Raymond Olisaemeka <rolisaemeka-ctr@wikimedia.org>
unstructuredstudio · May 29, 2024 · 771ae09 · 771ae09
1 parent 1f7a025
commit 771ae09
Show file tree

Hide file tree

Showing 52 changed files with 4,486 additions and 11,020 deletions.
diff --git a/zubhub_frontend/zubhub/package-lock.json b/zubhub_frontend/zubhub/package-lock.json
diff --git a/zubhub_frontend/zubhub/package.json b/zubhub_frontend/zubhub/package.json
@@ -31,7 +31,7 @@
     "lodash": "^4.17.21",
     "nanoid": "^3.3.1",
     "pdfmake": "^0.2.7",
-    "prop-types": "^15.0.0",
+    "prop-types": "^15.8.1",
     "quill": "^1.3.7",
     "react": "^17.0.0",
     "react-confetti": "^6.1.0",

diff --git a/zubhub_frontend/zubhub/src/App.js b/zubhub_frontend/zubhub/src/App.js
@@ -153,7 +153,7 @@ function App(props) {
           element={<PageWrapper {...props} Component={CreateProject} protected />}
         />
 
-        <Route path="/projects/:id" element={<PageWrapper {...props} Component={ProjectDetails} protected />} />
+        <Route path="/projects/:id" element={<PageWrapper {...props} Component={ProjectDetails} />} />
 
         <Route path="/ambassadors" element={<PageWrapper {...props} Component={Ambassadors} />} />
 

diff --git a/...ontend/zubhub/src/assets/js/styles/components/projects_drafts/projectsDraftsGridStyles.js b/...ontend/zubhub/src/assets/js/styles/components/projects_drafts/projectsDraftsGridStyles.js
@@ -1,42 +1,43 @@
-const styles = theme => ({
-  titleStyle: {
-    fontWeight: 900,
-    fontSize: '1.5rem',
-    padding: '1em',
-  },
-
-  profileLowerStyle: {
-    // margin: '1em',
-    [theme.breakpoints.down('740')]: {
-      margin: '1em',
-    },
-    borderRadius: 8, overflow: 'hidden'
-  },
-
-  viewAllBtn: {
-    marginLeft: '2em',
-  },
-
-  gridStyle: {
-    // marginBottom: '2em',
-  },
-
-  tabStyle: {
-      '&.Mui-selected': {
-        color: 'var(--primary-color3)',
-        fontWeight: 'bold',
-        backgroundColor: '#ffffff',
-      },
-
-      backgroundColor: 'var(--text-color3)',
-      width: '50%',
-      maxWidth: '50%',
-  },
-
-  indicator: {
-    backgroundColor: "var(--primary-color3)",
-    height: '5px',
-  }
-});
-
-export default styles;
+const styles = () => ({
+  titleStyle: {
+    fontWeight: 900,
+    fontSize: '1.5rem',
+    padding: '1em',
+  },
+
+  profileLowerStyle: {
+    // margin: '1em',
+    // [theme.breakpoints.down('740')]: {
+    //   margin: '1em',
+    // },
+    borderRadius: 8,
+    overflow: 'hidden',
+  },
+
+  viewAllBtn: {
+    marginLeft: '2em',
+  },
+
+  gridStyle: {
+    // marginBottom: '2em',
+  },
+
+  tabStyle: {
+    '&.Mui-selected': {
+      color: 'var(--primary-color3)',
+      fontWeight: 'bold',
+      backgroundColor: '#ffffff',
+    },
+
+    backgroundColor: 'var(--text-color3)',
+    width: '50%',
+    maxWidth: '50%',
+  },
+
+  indicator: {
+    backgroundColor: 'var(--primary-color3)',
+    height: '5px',
+  },
+});
+
+export default styles;
diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/account_status/accountStatusStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/account_status/accountStatusStyles.js
@@ -3,17 +3,12 @@ const styles = theme => ({
     paddingBottom: '2em',
     display: 'flex',
     flex: '1 0 auto',
+    marginTop: '2em',
+    [theme.breakpoints.down('378')]: {
+      marginTop: '3em',
+    },
     background: 'var(--primary-color2)',
-    background:
-      '-moz-linear-gradient(top, var(--primary-color2) 0%, var(--primary-color2) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)',
-    background:
-      '-webkit-gradient(left top, left bottom, color-stop(0%, var(--primary-color2)), color-stop(25%, var(--primary-color2)), color-stop(61%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)))',
-    background:
-      '-webkit-linear-gradient(top, var(--primary-color2) 0%, var(--primary-color2) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)',
-    background:
-      '-o-linear-gradient(top, var(--primary-color2) 0%, var(--primary-color2) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)',
-    background:
-      '-ms-linear-gradient(top, var(--primary-color2) 0%, var(--primary-color2) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)',
+    // eslint-disable-next-line no-dupe-keys
     background:
       'linear-gradient(to bottom, var(--primary-color2) 0%, var(--primary-color2) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)',
     filter:

diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/activities/activitiesStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/activities/activitiesStyles.js
@@ -1,13 +1,8 @@
 const styles = theme => ({
   activityListContainer: {
-    padding: '4em 0',
-    width: '70%',
-    margin: 'auto',
-    [theme.breakpoints.down('1000')]: {
-      width: '90%',
-    },
-    [theme.breakpoints.down('400')]: {
-      width: '95%',
+    marginTop: '2em',
+    [theme.breakpoints.down('378')]: {
+      marginTop: '3em',
     },
   },
   activityBoxContainer: {

diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/activity_details/activityDetailsStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/activity_details/activityDetailsStyles.js
@@ -1,6 +1,10 @@
 const styles = theme => ({
   root: {
     flex: '1 0 auto',
+    marginTop: '2em',
+    [theme.breakpoints.down('378')]: {
+      marginTop: '3em',
+    },
   },
   activityDetailContainer: {
     width: '100%',
@@ -54,7 +58,7 @@ const styles = theme => ({
   },
   demoImageStyle: {
     objectFit: 'cover',
-    //height: '60vh',
+    // height: '60vh',
     maxWidth: '100%',
     borderRadius: '15px',
     boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',

diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/add_group_members/addGroupMembersStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/add_group_members/addGroupMembersStyles.js
@@ -1,11 +1,14 @@
-import { fade } from '@mui/material/styles';
-
 const styles = theme => ({
   root: {
-    paddingTop: '2em',
-    paddingBottom: '2em',
+    marginTop: '2em',
+    marginBottom: '2em',
+    [theme.breakpoints.down('378')]: {
+      marginTop: '3em',
+      marginBottom: '3em',
+    },
     flex: '1 0 auto',
     background: 'var(--primary-color2)',
+    // eslint-disable-next-line no-dupe-keys
     background:
       'linear-gradient(to bottom, var(--primary-color2) 0%, var(--primary-color2) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)',
   },

diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/ambassadors/ambassadorsStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/ambassadors/ambassadorsStyles.js
@@ -1,8 +1,12 @@
 const styles = theme => ({
   root: {
     color: 'black',
-    paddingTop: '2em',
-    paddingBottom: '2em',
+    marginTop: '2em',
+    marginBottom: '2em',
+    [theme.breakpoints.down('378')]: {
+      marginTop: '3em',
+      marginBottom: '3em',
+    },
     flex: '1 0 auto',
     background:
       'linear-gradient(to bottom, var(--primary-color2) 0%, var(--primary-color2) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)',
@@ -23,7 +27,7 @@ const styles = theme => ({
   },
   ambassadorsBodyStyle: {
     marginBottom: '5em',
-    fontSize: '1.2rem'
+    fontSize: '1.2rem',
   },
   projectGridStyle: {
     marginBottom: '2em',

diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/challenge/challengeStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/challenge/challengeStyles.js
@@ -1,10 +1,12 @@
-import { fade } from '@mui/material/styles';
-
 const styles = theme => ({
   root: {
     color: 'black',
-    paddingTop: '2em',
-    paddingBottom: '2em',
+    marginTop: '2em',
+    marginBottom: '2em',
+    [theme.breakpoints.down('378')]: {
+      marginTop: '3em',
+      marginBottom: '3em',
+    },
     flex: '1 0 auto',
     background:
       'linear-gradient(to bottom, var(--primary-color2) 0%, var(--primary-color2) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)',
@@ -19,7 +21,7 @@ const styles = theme => ({
   },
   challengeBodyStyle: {
     marginBottom: '5em',
-    fontSize: '1.2rem'
+    fontSize: '1.2rem',
   },
 });
 

diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/create_project/createProjectStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/create_project/createProjectStyles.js
@@ -1,11 +1,10 @@
-import { fade } from '@mui/material/styles';
-
 const styles = theme => ({
   root: {
     paddingTop: '2em',
     paddingBottom: '2em',
     flex: '1 0 auto',
     background: 'var(--primary-color2)',
+    // eslint-disable-next-line no-dupe-keys
     background:
       'linear-gradient(to bottom, var(--primary-color2) 0%, var(--primary-color2) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)',
   },

diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/edit_profile/editProfileStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/edit_profile/editProfileStyles.js
@@ -1,11 +1,14 @@
-import { fade } from '@mui/material/styles';
-
 const styles = theme => ({
   root: {
-    paddingTop: '2em',
-    paddingBottom: '2em',
+    marginTop: '2em',
+    marginBottom: '2em',
+    [theme.breakpoints.down('378')]: {
+      marginTop: '3em',
+      marginBottom: '3em',
+    },
     flex: '1 0 auto',
     background: 'var(--primary-color2)',
+    // eslint-disable-next-line no-dupe-keys
     background:
       'linear-gradient(to bottom, var(--primary-color2) 0%, var(--primary-color2) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)',
   },

diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/edit_team/editTeamStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/edit_team/editTeamStyles.js
@@ -1,12 +1,16 @@
-import { Translate } from "@mui/icons-material";
-import { colors } from "../../../colors";
+import { colors } from '../../../colors';
 
 const styles = theme => ({
   root: {
-    paddingTop: '2em',
-    paddingBottom: '2em',
+    marginTop: '2em',
+    marginBottom: '2em',
+    [theme.breakpoints.down('378')]: {
+      marginTop: '3em',
+      marginBottom: '3em',
+    },
     flex: '1 0 auto',
-    background: 'linear-gradient(to bottom, var(--primary-color2) 0%, var(--primary-color2) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)',
+    background:
+      'linear-gradient(to bottom, var(--primary-color2) 0%, var(--primary-color2) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)',
   },
   containerStyle: {
     maxWidth: '600px',
@@ -97,4 +101,4 @@ const styles = theme => ({
   },
 });
 
-export default styles;
+export default styles;
diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/email_confirm/emailConfirmStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/email_confirm/emailConfirmStyles.js
@@ -1,11 +1,14 @@
-import { fade } from '@mui/material/styles';
-
 const styles = theme => ({
   root: {
-    paddingTop: '2em',
-    paddingBottom: '2em',
+    marginTop: '2em',
+    marginBottom: '2em',
+    [theme.breakpoints.down('378')]: {
+      marginTop: '3em',
+      marginBottom: '3em',
+    },
     flex: '1 0 auto',
     background: 'var(--primary-color2)',
+    // eslint-disable-next-line no-dupe-keys
     background:
       'linear-gradient(to bottom, var(--primary-color2) 0%, var(--primary-color2) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)',
   },

diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/faqs/FAQsStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/faqs/FAQsStyles.js
@@ -1,12 +1,15 @@
-import { fade } from '@mui/material/styles';
-
 const styles = theme => ({
   root: {
     color: 'black',
-    paddingTop: '2em',
-    paddingBottom: '2em',
+    marginTop: '2em',
+    marginBottom: '2em',
+    [theme.breakpoints.down('378')]: {
+      marginTop: '3em',
+      marginBottom: '3em',
+    },
     flex: '1 0 auto',
     background: 'var(--primary-color2)',
+    // eslint-disable-next-line no-dupe-keys
     background:
       'linear-gradient(to bottom, var(--primary-color2) 0%, var(--primary-color2) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)',
   },

diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/guidelines/guidelinesStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/guidelines/guidelinesStyles.js
@@ -1,11 +1,14 @@
-import { fade } from '@mui/material/styles';
-
 const styles = theme => ({
   root: {
-    paddingTop: '2em',
-    paddingBottom: '2em',
+    marginTop: '2em',
+    marginBottom: '2em',
+    [theme.breakpoints.down('378')]: {
+      marginTop: '3em',
+      marginBottom: '3em',
+    },
     flex: '1 0 auto',
     background: 'var(--primary-color2)',
+    // eslint-disable-next-line no-dupe-keys
     background:
       'linear-gradient(to bottom, var(--primary-color2) 0%, var(--primary-color2) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)',
   },

diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/loading/loadingPageStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/loading/loadingPageStyles.js
@@ -1,10 +1,11 @@
-const styles = theme => ({
+const styles = () => ({
   root: {
     paddingBottom: '2em',
     display: 'flex',
     flex: '1 0 auto',
     alignItems: 'center',
     justifyContent: 'center',
+    minHeight: '90vh',
     // background: 'var(--primary-color2)',
     // background:
     //   '-moz-linear-gradient(top, var(--primary-color2) 0%, var(--primary-color2) 25%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%)',

diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/login/loginStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/login/loginStyles.js
@@ -1,9 +1,11 @@
-import { fade } from '@mui/material/styles';
-
 const styles = theme => ({
   root: {
-    paddingTop: '2em',
-    paddingBottom: '2em',
+    marginTop: '2em',
+    marginBottom: '2em',
+    [theme.breakpoints.down('378')]: {
+      marginTop: '3em',
+      marginBottom: '3em',
+    },
     flex: '1 0 auto',
     // background: 'var(--primary-color2)',
     // background:
@@ -15,7 +17,7 @@ const styles = theme => ({
       maxWidth: '950px',
     },
     [theme.breakpoints.down('400')]: {
-      marginTop:'30px',
+      marginTop: '30px',
     },
   },
   cardStyle: {