From 5b1b1bf9e0e4283f7e056418df2395c585048e23 Mon Sep 17 00:00:00 2001
From: gift256 <giftnamulika@gmail.com>
Date: Wed, 18 Oct 2023 15:22:03 +0300
Subject: [PATCH 1/9] add login modal when searching projects for non-auth
 users

---
 .../js/styles/views/login/loginStyles.js      |  2 +-
 .../search_results/searchResultsStyles.js     | 56 ++++++++++++++++++-
 .../zubhub/src/views/PageWrapper.jsx          | 16 +++++-
 .../zubhub/src/views/login/Login.jsx          | 11 ++--
 .../views/search_results/SearchResults.jsx    | 51 ++++++++++++++++-
 .../search_results/searchResultsScripts.js    | 19 ++++---
 6 files changed, 135 insertions(+), 20 deletions(-)

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
index 6e2c4368d..87c6015f6 100644
--- a/zubhub_frontend/zubhub/src/assets/js/styles/views/login/loginStyles.js
+++ b/zubhub_frontend/zubhub/src/assets/js/styles/views/login/loginStyles.js
@@ -19,7 +19,7 @@ const styles = theme => ({
     },
   },
   cardStyle: {
-    border: 0,
+    border: 'none',
     borderRadius: 15,
     boxShadow: '0 3px 5px 2px rgba(0, 0, 0, .12)',
     color: 'white',
diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/search_results/searchResultsStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/search_results/searchResultsStyles.js
index c2ad17231..ab399c477 100644
--- a/zubhub_frontend/zubhub/src/assets/js/styles/views/search_results/searchResultsStyles.js
+++ b/zubhub_frontend/zubhub/src/assets/js/styles/views/search_results/searchResultsStyles.js
@@ -1,4 +1,6 @@
-const styles = theme => ({
+import { colors } from "../../../colors";
+
+export const styles = theme => ({
   root: {
     paddingBottom: '2em',
     flex: '1 0 auto',
@@ -19,8 +21,9 @@ const styles = theme => ({
 
   pageHeaderStyle: {
     marginTop: '1em',
-    fontWeight: 'bold',
+    fontWeight: '800',
     textAlign: 'center',
+    fontSize: '36px'
   },
   cardStyle: {
     display: 'flex',
@@ -91,4 +94,51 @@ const styles = theme => ({
   },
 });
 
-export default styles;
+export const resultModal = (theme) => ({
+  root: {
+    maxWidth: '1152px',
+    backgroundColor: colors.white,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    marginTop: '50px',
+    borderRadius: '8px 8px 0 0',
+    height: '1013px',
+  
+    '& .MuiGrid-root.MuiGrid-container': {
+      width: '100%',
+      backgroundColor: colors.white,
+    },
+  },
+  projectContainer: {
+    width: '100%', 
+    backgroundColor: colors.white, 
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'column'
+  },
+  gridBlur: {
+    background: `linear-gradient(to top, ${colors.white} 0%, ${colors.white} 25%, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%)`,
+    position: 'absolute', 
+    height: '588px', 
+    width: '100%', 
+    top: 0, 
+    zIndex: 1
+  },
+  loginModal: {
+    zIndex: 2,
+    position: 'absolute',
+    marginTop: '25%',
+    [theme.breakpoints.down('756')]: {
+      marginTop: '35%'
+    },
+    [theme.breakpoints.down('556')]: {
+      marginTop: '45%'
+    },
+    [theme.breakpoints.down('400')]: {
+      marginTop: '65%'
+    }
+  }
+})
+
diff --git a/zubhub_frontend/zubhub/src/views/PageWrapper.jsx b/zubhub_frontend/zubhub/src/views/PageWrapper.jsx
index 086f5c32e..03393434d 100644
--- a/zubhub_frontend/zubhub/src/views/PageWrapper.jsx
+++ b/zubhub_frontend/zubhub/src/views/PageWrapper.jsx
@@ -225,6 +225,17 @@ function PageWrapper(props) {
   };
 
   const { anchor_el, loading, open_search_form } = state;
+
+  const renderer = useMemo(() => {
+    if (!props.auth.token && props.match.path === '/search') {
+      return props.children
+    } 
+
+    if (props.auth.token) {
+      return (<DashboardLayout>{loading ? <LoadingPage /> : props.children}</DashboardLayout>)
+    }
+  }, [loading, props.auth.token, props.children, props.match.path])
+
   const { t } = props;
   const { zubhub, hero } = props.projects;
 
@@ -238,7 +249,7 @@ function PageWrapper(props) {
       <Navbar {...props} />
 
       <Container className={classes.childrenContainer} maxWidth="lg">
-        {props.auth?.token ? <DashboardLayout>{loading ? <LoadingPage /> : props.children}</DashboardLayout> : null}
+        {renderer}
         {!props.auth?.token &&
           ![
             '/',
@@ -253,7 +264,8 @@ function PageWrapper(props) {
             '/challenge',
             '/password-reset',
             '/email-confirm',
-            '/password-reset-confirm'
+            '/password-reset-confirm',
+            '/search'
           ].includes(props.match?.path) && (
             <div style={{ minHeight: '80vh' }}>
               <NotFoundPage />
diff --git a/zubhub_frontend/zubhub/src/views/login/Login.jsx b/zubhub_frontend/zubhub/src/views/login/Login.jsx
index d409a3356..26a98e36d 100644
--- a/zubhub_frontend/zubhub/src/views/login/Login.jsx
+++ b/zubhub_frontend/zubhub/src/views/login/Login.jsx
@@ -63,10 +63,12 @@ function Login(props) {
   const { show_password } = state;
   const { t } = props;
 
+  const styleOverridesPresent = Object.keys(props?.styleOverrides).length > 0
+
   return (
     <Box className={classes.root}>
-      <Container className={classes.containerStyle}>
-        <Card className={classes.cardStyle}>
+      <Container className={classes.containerStyle} >
+        <Card className={classes.cardStyle} style={ styleOverridesPresent ? {...props.styleOverrides.containerStyles } : {}}>
           <CardActionArea>
             <CardContent>
               <form
@@ -81,8 +83,9 @@ function Login(props) {
                   component="h2"
                   color="textPrimary"
                   className={classes.titleStyle}
+                  style={{...props.styleOverrides.titleStyles}}
                 >
-                  {t('login.welcomeMsg.primary')}
+                  {props.primaryTitle ?? t('login.welcomeMsg.primary')}
                 </Typography>
                 <Typography
                   className={classes.descStyle}
@@ -90,7 +93,7 @@ function Login(props) {
                   color="textSecondary"
                   component="p"
                 >
-                  {t('login.welcomeMsg.secondary')}
+                  {props.secondaryTitle ?? t('login.welcomeMsg.secondary')}
                 </Typography>
                 <Grid container spacing={3}>
                   <Grid item xs={12}>
diff --git a/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx b/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx
index 629603976..23d62d523 100644
--- a/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx
+++ b/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx
@@ -34,10 +34,12 @@ import CustomButton from '../../components/button/Button';
 import ErrorPage from '../error/ErrorPage';
 import LoadingPage from '../loading/LoadingPage';
 import Project from '../../components/project/Project';
-import styles from '../../assets/js/styles/views/search_results/searchResultsStyles';
+import {styles, resultModal} from '../../assets/js/styles/views/search_results/searchResultsStyles';
 import commonStyles from '../../assets/js/styles';
+import Login from '../login/Login';
 
 const useStyles = makeStyles(styles);
+const useModalStyles = makeStyles(resultModal)
 const useCommonStyles = makeStyles(commonStyles);
 
 /**
@@ -106,7 +108,9 @@ const buildCreatorProfiles = (
  * @todo - describe function's signature
  */
 function SearchResults(props) {
+  console.log(props, "PROPS")
   const classes = useStyles();
+  const modalClasses = useModalStyles()
   const common_classes = useCommonStyles();
 
   const [state, setState] = React.useState({
@@ -173,7 +177,41 @@ function SearchResults(props) {
     next: next_page,
     loading,
   } = state;
-  const { t } = props;
+  const { t, auth } = props;
+
+  if (!auth.token) {
+    return (
+      <Container className={modalClasses.root}>
+        <Grid className={modalClasses.projectContainer}>
+          <Grid item xs={12}>
+            <Typography
+              className={classes.pageHeaderStyle}
+              variant="h3"
+              gutterBottom
+              style={{ height: '40px'}}
+            >
+              {`${t('searchResults.resultsFound')} "${getQueryParams(window.location.href).get('q')}"`}
+            </Typography>
+          </Grid>
+          {getResults(
+            getQueryParams(window.location.href).get('type'),
+            results
+            // props.auth.token ? results : results[0]?.projects?.results,
+          )}
+          <Grid className={modalClasses.gridBlur}></Grid>
+        </Grid>
+        <Grid className={modalClasses.loginModal}>
+          <Login {...props}
+           primaryTitle='Log in or Sign up to search for projects'
+           secondaryTitle='' 
+           styleOverrides={{ containerStyles: {boxShadow: 'none'}, titleStyles: { textAlign: 'center'}}}
+           withoutShadow 
+          />
+        </Grid>
+      </Container>
+    )
+  }
+
   if (loading) {
     return <LoadingPage />;
   } else {
@@ -197,7 +235,8 @@ function SearchResults(props) {
               </Grid>
               {getResults(
                 getQueryParams(window.location.href).get('type'),
-                results,
+                results
+                // props.auth.token ? results : results[0]?.projects?.results,
               )}
             </Grid>
             <ButtonGroup
@@ -256,6 +295,7 @@ function SearchResults(props) {
           </Container>
         ) : (
           <ErrorPage
+            style={{ maxWidth: '100vw' }}
             error={t('searchResults.errors.noResult')}
           />
         )}
@@ -264,8 +304,10 @@ function SearchResults(props) {
   }
 }
 
+
 SearchResults.propTypes = {
   auth: PropTypes.object.isRequired,
+  getStaffPicks: PropTypes.object.isRequired,
   searchProjects: PropTypes.func.isRequired,
   searchCreators: PropTypes.func.isRequired,
   searchTags: PropTypes.func.isRequired,
@@ -282,6 +324,9 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => {
   return {
+    getStaffPicks: args => {
+      return dispatch(ProjectActions.getStaffPicks(args))
+    },
     searchProjects: args => {
       return dispatch(ProjectActions.searchProjects(args));
     },
diff --git a/zubhub_frontend/zubhub/src/views/search_results/searchResultsScripts.js b/zubhub_frontend/zubhub/src/views/search_results/searchResultsScripts.js
index f21740109..4f9a6c14f 100644
--- a/zubhub_frontend/zubhub/src/views/search_results/searchResultsScripts.js
+++ b/zubhub_frontend/zubhub/src/views/search_results/searchResultsScripts.js
@@ -31,13 +31,18 @@ export const getQueryParams = url => {
  */
 export const fetchPage = (page, props, query_string, type) => {
   if (type === SearchType.PROJECTS) {
-    return props.searchProjects({
-      page,
-      query_string,
-      t: props.t,
-      token: props.auth.token,
-      tab: 'projects',
-    });
+    // if (props.auth.token) {
+      return props.searchProjects({
+        page,
+        query_string,
+        t: props.t,
+        token: props.auth.token,
+        tab: 'projects',
+      });
+    // } else {
+    //   return props.getStaffPicks({ token: props.token })
+    // }
+   
   } else if (type === SearchType.CREATORS) {
     return props.searchCreators({
       page,

From f44729c8931bda20320420dd60821d7c986e9865 Mon Sep 17 00:00:00 2001
From: gift256 <giftnamulika@gmail.com>
Date: Wed, 18 Oct 2023 15:29:58 +0300
Subject: [PATCH 2/9] fix up

---
 .../src/views/search_results/searchResultsScripts.js      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/zubhub_frontend/zubhub/src/views/search_results/searchResultsScripts.js b/zubhub_frontend/zubhub/src/views/search_results/searchResultsScripts.js
index 4f9a6c14f..8bb186f71 100644
--- a/zubhub_frontend/zubhub/src/views/search_results/searchResultsScripts.js
+++ b/zubhub_frontend/zubhub/src/views/search_results/searchResultsScripts.js
@@ -31,7 +31,7 @@ export const getQueryParams = url => {
  */
 export const fetchPage = (page, props, query_string, type) => {
   if (type === SearchType.PROJECTS) {
-    // if (props.auth.token) {
+    if (props.auth.token) {
       return props.searchProjects({
         page,
         query_string,
@@ -39,9 +39,9 @@ export const fetchPage = (page, props, query_string, type) => {
         token: props.auth.token,
         tab: 'projects',
       });
-    // } else {
-    //   return props.getStaffPicks({ token: props.token })
-    // }
+    } else {
+      return props.getStaffPicks({ token: props.token })
+    }
    
   } else if (type === SearchType.CREATORS) {
     return props.searchCreators({

From b42600ca4c39c4b19935453a05f9baa068f4156c Mon Sep 17 00:00:00 2001
From: gift256 <giftnamulika@gmail.com>
Date: Wed, 18 Oct 2023 17:17:53 +0300
Subject: [PATCH 3/9] remove comments

---
 .../zubhub/src/views/search_results/SearchResults.jsx         | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx b/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx
index 23d62d523..8c72a902f 100644
--- a/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx
+++ b/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx
@@ -195,8 +195,7 @@ function SearchResults(props) {
           </Grid>
           {getResults(
             getQueryParams(window.location.href).get('type'),
-            results
-            // props.auth.token ? results : results[0]?.projects?.results,
+            props.auth.token ? results : results[0]?.projects?.results,
           )}
           <Grid className={modalClasses.gridBlur}></Grid>
         </Grid>
@@ -236,7 +235,6 @@ function SearchResults(props) {
               {getResults(
                 getQueryParams(window.location.href).get('type'),
                 results
-                // props.auth.token ? results : results[0]?.projects?.results,
               )}
             </Grid>
             <ButtonGroup

From 6274108084f06086bc5247f493ad1ad172c0e1ad Mon Sep 17 00:00:00 2001
From: gift256 <giftnamulika@gmail.com>
Date: Mon, 23 Oct 2023 10:17:37 +0300
Subject: [PATCH 4/9] code review

---
 .../styles/views/search_results/searchResultsStyles.js   | 4 +++-
 zubhub_frontend/zubhub/src/views/login/Login.jsx         | 9 +++------
 .../zubhub/src/views/search_results/SearchResults.jsx    | 5 ++---
 .../src/views/search_results/searchResultsScripts.js     | 2 +-
 4 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/search_results/searchResultsStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/search_results/searchResultsStyles.js
index ab399c477..23669b176 100644
--- a/zubhub_frontend/zubhub/src/assets/js/styles/views/search_results/searchResultsStyles.js
+++ b/zubhub_frontend/zubhub/src/assets/js/styles/views/search_results/searchResultsStyles.js
@@ -139,6 +139,8 @@ export const resultModal = (theme) => ({
     [theme.breakpoints.down('400')]: {
       marginTop: '65%'
     }
-  }
+  },
+  containerStylesOverrides: { boxShadow: 'none' }, 
+  titleStylesOverrides: { textAlign: 'center'}
 })
 
diff --git a/zubhub_frontend/zubhub/src/views/login/Login.jsx b/zubhub_frontend/zubhub/src/views/login/Login.jsx
index 26a98e36d..e863908b6 100644
--- a/zubhub_frontend/zubhub/src/views/login/Login.jsx
+++ b/zubhub_frontend/zubhub/src/views/login/Login.jsx
@@ -61,14 +61,12 @@ function Login(props) {
   };
 
   const { show_password } = state;
-  const { t } = props;
-
-  const styleOverridesPresent = Object.keys(props?.styleOverrides).length > 0
+  const { t } = props
 
   return (
     <Box className={classes.root}>
       <Container className={classes.containerStyle} >
-        <Card className={classes.cardStyle} style={ styleOverridesPresent ? {...props.styleOverrides.containerStyles } : {}}>
+        <Card className={clsx([classes.cardStyle, props.styleOverrides?.containerStyles])}>
           <CardActionArea>
             <CardContent>
               <form
@@ -82,8 +80,7 @@ function Login(props) {
                   variant="h5"
                   component="h2"
                   color="textPrimary"
-                  className={classes.titleStyle}
-                  style={{...props.styleOverrides.titleStyles}}
+                  className={clsx([classes.titleStyle, props.styleOverrides?.titleStyles])}
                 >
                   {props.primaryTitle ?? t('login.welcomeMsg.primary')}
                 </Typography>
diff --git a/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx b/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx
index 8c72a902f..aa169be4b 100644
--- a/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx
+++ b/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx
@@ -147,7 +147,7 @@ function SearchResults(props) {
     } else {
       return (
         <Grid container spacing={3}>
-          {results.map(project => (
+          {results?.map(project => (
             <Grid
               item
               xs={12}
@@ -203,8 +203,7 @@ function SearchResults(props) {
           <Login {...props}
            primaryTitle='Log in or Sign up to search for projects'
            secondaryTitle='' 
-           styleOverrides={{ containerStyles: {boxShadow: 'none'}, titleStyles: { textAlign: 'center'}}}
-           withoutShadow 
+           styleOverrides={{containerStyles: modalClasses.containerStylesOverrides, titleStyles: modalClasses.titleStylesOverrides}}
           />
         </Grid>
       </Container>
diff --git a/zubhub_frontend/zubhub/src/views/search_results/searchResultsScripts.js b/zubhub_frontend/zubhub/src/views/search_results/searchResultsScripts.js
index 8bb186f71..333931a75 100644
--- a/zubhub_frontend/zubhub/src/views/search_results/searchResultsScripts.js
+++ b/zubhub_frontend/zubhub/src/views/search_results/searchResultsScripts.js
@@ -31,7 +31,7 @@ export const getQueryParams = url => {
  */
 export const fetchPage = (page, props, query_string, type) => {
   if (type === SearchType.PROJECTS) {
-    if (props.auth.token) {
+    if (props.auth?.token) {
       return props.searchProjects({
         page,
         query_string,

From 39b054258080e1d1f05e524b6e955299276491ea Mon Sep 17 00:00:00 2001
From: gift256 <giftnamulika@gmail.com>
Date: Mon, 23 Oct 2023 12:07:41 +0300
Subject: [PATCH 5/9] add translations

---
 zubhub_frontend/zubhub/public/locales/en/translation.json      | 3 +++
 .../zubhub/src/views/search_results/SearchResults.jsx          | 3 +--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/zubhub_frontend/zubhub/public/locales/en/translation.json b/zubhub_frontend/zubhub/public/locales/en/translation.json
index 51afb1356..df75f484b 100644
--- a/zubhub_frontend/zubhub/public/locales/en/translation.json
+++ b/zubhub_frontend/zubhub/public/locales/en/translation.json
@@ -481,6 +481,9 @@
     "errors": {
       "unexpected": "Uh oh! Seems like we hit a snag :( Maybe try again later?",
       "noResult": "We could not find anything for your search term! Maybe try to search something else?"
+    },
+    "loginModal": {
+      "title": "Log in or Sign up to search for projects"
     }
   },
 
diff --git a/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx b/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx
index aa169be4b..6c01aed6b 100644
--- a/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx
+++ b/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx
@@ -108,7 +108,6 @@ const buildCreatorProfiles = (
  * @todo - describe function's signature
  */
 function SearchResults(props) {
-  console.log(props, "PROPS")
   const classes = useStyles();
   const modalClasses = useModalStyles()
   const common_classes = useCommonStyles();
@@ -201,7 +200,7 @@ function SearchResults(props) {
         </Grid>
         <Grid className={modalClasses.loginModal}>
           <Login {...props}
-           primaryTitle='Log in or Sign up to search for projects'
+           primaryTitle={t('searchResults.loginModal.title')}
            secondaryTitle='' 
            styleOverrides={{containerStyles: modalClasses.containerStylesOverrides, titleStyles: modalClasses.titleStylesOverrides}}
           />

From 8e33d7991bf2979b1e1c62af5ae83aab2156ded7 Mon Sep 17 00:00:00 2001
From: gift256 <giftnamulika@gmail.com>
Date: Mon, 23 Oct 2023 12:36:43 +0300
Subject: [PATCH 6/9] error handling

---
 .../src/assets/js/styles/views/error/errorPageStyles.js      | 2 +-
 .../js/styles/views/search_results/searchResultsStyles.js    | 5 +++--
 zubhub_frontend/zubhub/src/views/error/ErrorPage.jsx         | 3 ++-
 .../zubhub/src/views/search_results/SearchResults.jsx        | 5 ++++-
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/error/errorPageStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/error/errorPageStyles.js
index e99fcd586..9509a1c5d 100644
--- a/zubhub_frontend/zubhub/src/assets/js/styles/views/error/errorPageStyles.js
+++ b/zubhub_frontend/zubhub/src/assets/js/styles/views/error/errorPageStyles.js
@@ -19,7 +19,7 @@ const styles = theme => ({
     // filter:
     //   "progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--primary-color2)', endColorstr='#ffffff', GradientType=0 )",
     '& .MuiGrid-root.MuiGrid-container': {
-      width: '100%',
+      width: '100dvw',
     },
   },
   mainContainerStyle: {
diff --git a/zubhub_frontend/zubhub/src/assets/js/styles/views/search_results/searchResultsStyles.js b/zubhub_frontend/zubhub/src/assets/js/styles/views/search_results/searchResultsStyles.js
index 23669b176..4a31a5ae7 100644
--- a/zubhub_frontend/zubhub/src/assets/js/styles/views/search_results/searchResultsStyles.js
+++ b/zubhub_frontend/zubhub/src/assets/js/styles/views/search_results/searchResultsStyles.js
@@ -96,7 +96,7 @@ export const styles = theme => ({
 
 export const resultModal = (theme) => ({
   root: {
-    maxWidth: '1152px',
+    maxWidth: '72rem',
     backgroundColor: colors.white,
     display: 'flex',
     flexDirection: 'column',
@@ -141,6 +141,7 @@ export const resultModal = (theme) => ({
     }
   },
   containerStylesOverrides: { boxShadow: 'none' }, 
-  titleStylesOverrides: { textAlign: 'center'}
+  titleStylesOverrides: { textAlign: 'center'},
+  errorPage: { width: '80dvw'}
 })
 
diff --git a/zubhub_frontend/zubhub/src/views/error/ErrorPage.jsx b/zubhub_frontend/zubhub/src/views/error/ErrorPage.jsx
index 92192b2cf..851c8cdb6 100644
--- a/zubhub_frontend/zubhub/src/views/error/ErrorPage.jsx
+++ b/zubhub_frontend/zubhub/src/views/error/ErrorPage.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx'
 
 import { makeStyles } from '@material-ui/core/styles';
 import { Box, Typography, Container } from '@material-ui/core';
@@ -19,7 +20,7 @@ function ErrorPage(props) {
   const classes = useStyles();
   const propStyle = props.style;
   return (
-    <Box className={classes.root} style={propStyle ? propStyle : null}>
+    <Box className={clsx([classes.root, props.styleOverrides.width])} style={propStyle ? propStyle : null}>
       <Container className={classes.mainContainerStyle}>
         <img className={classes.disconnectedStyle} src={disconnected} alt={props.error} />
         <Box className={classes.errorBoxStyle}>
diff --git a/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx b/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx
index 6c01aed6b..c19648319 100644
--- a/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx
+++ b/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx
@@ -135,6 +135,10 @@ function SearchResults(props) {
   };
 
   const getResults = (type, results) => {
+    if (!results) {
+      return <ErrorPage error={t('searchResults.errors.noResult')} styleOverrides={{ width: modalClasses.errorPage }}/>
+    }
+
     if (type === SearchType.CREATORS) {
       return buildCreatorProfiles(
         results,
@@ -291,7 +295,6 @@ function SearchResults(props) {
           </Container>
         ) : (
           <ErrorPage
-            style={{ maxWidth: '100vw' }}
             error={t('searchResults.errors.noResult')}
           />
         )}

From 9ee8cc5e68edb7c3b2485cd876c95d5beb890889 Mon Sep 17 00:00:00 2001
From: gift256 <giftnamulika@gmail.com>
Date: Mon, 23 Oct 2023 12:44:33 +0300
Subject: [PATCH 7/9] remove useMemo

---
 zubhub_frontend/zubhub/src/views/PageWrapper.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/zubhub_frontend/zubhub/src/views/PageWrapper.jsx b/zubhub_frontend/zubhub/src/views/PageWrapper.jsx
index 03393434d..9180060a1 100644
--- a/zubhub_frontend/zubhub/src/views/PageWrapper.jsx
+++ b/zubhub_frontend/zubhub/src/views/PageWrapper.jsx
@@ -226,7 +226,7 @@ function PageWrapper(props) {
 
   const { anchor_el, loading, open_search_form } = state;
 
-  const renderer = useMemo(() => {
+  const renderer = (() => {
     if (!props.auth.token && props.match.path === '/search') {
       return props.children
     } 
@@ -234,7 +234,7 @@ function PageWrapper(props) {
     if (props.auth.token) {
       return (<DashboardLayout>{loading ? <LoadingPage /> : props.children}</DashboardLayout>)
     }
-  }, [loading, props.auth.token, props.children, props.match.path])
+  })()
 
   const { t } = props;
   const { zubhub, hero } = props.projects;

From 2c52948a6d3d5ed189467f1b5ef02a5aa2de8938 Mon Sep 17 00:00:00 2001
From: gift256 <giftnamulika@gmail.com>
Date: Mon, 23 Oct 2023 12:54:40 +0300
Subject: [PATCH 8/9] remove unused imports

---
 .../zubhub/src/views/search_results/SearchResults.jsx          | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx b/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx
index c19648319..00cd4d402 100644
--- a/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx
+++ b/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
@@ -13,7 +12,6 @@ import {
   Grid,
   Box,
   ButtonGroup,
-  Button,
   Typography,
   Container,
   Card,
@@ -191,7 +189,6 @@ function SearchResults(props) {
               className={classes.pageHeaderStyle}
               variant="h3"
               gutterBottom
-              style={{ height: '40px'}}
             >
               {`${t('searchResults.resultsFound')} "${getQueryParams(window.location.href).get('q')}"`}
             </Typography>

From a6fc96a768a9a18d37d85b97e66e4531c904f5fb Mon Sep 17 00:00:00 2001
From: gift256 <giftnamulika@gmail.com>
Date: Sun, 12 Nov 2023 11:05:49 +0300
Subject: [PATCH 9/9] fix regression

---
 .../zubhub/public/locales/en/translation.json |  2 +-
 .../zubhub/src/views/error/ErrorPage.jsx      |  2 +-
 .../views/search_results/SearchResults.jsx    | 28 +++++++++++++------
 .../search_results/searchResultsScripts.js    | 19 +++++--------
 4 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/zubhub_frontend/zubhub/public/locales/en/translation.json b/zubhub_frontend/zubhub/public/locales/en/translation.json
index df75f484b..907395192 100644
--- a/zubhub_frontend/zubhub/public/locales/en/translation.json
+++ b/zubhub_frontend/zubhub/public/locales/en/translation.json
@@ -483,7 +483,7 @@
       "noResult": "We could not find anything for your search term! Maybe try to search something else?"
     },
     "loginModal": {
-      "title": "Log in or Sign up to search for projects"
+      "title": "Log in or Sign up to search for {{type}}"
     }
   },
 
diff --git a/zubhub_frontend/zubhub/src/views/error/ErrorPage.jsx b/zubhub_frontend/zubhub/src/views/error/ErrorPage.jsx
index 851c8cdb6..00ce9eb87 100644
--- a/zubhub_frontend/zubhub/src/views/error/ErrorPage.jsx
+++ b/zubhub_frontend/zubhub/src/views/error/ErrorPage.jsx
@@ -20,7 +20,7 @@ function ErrorPage(props) {
   const classes = useStyles();
   const propStyle = props.style;
   return (
-    <Box className={clsx([classes.root, props.styleOverrides.width])} style={propStyle ? propStyle : null}>
+    <Box className={clsx([classes.root, props.styleOverrides?.width])} style={propStyle ? propStyle : null}>
       <Container className={classes.mainContainerStyle}>
         <img className={classes.disconnectedStyle} src={disconnected} alt={props.error} />
         <Box className={classes.errorBoxStyle}>
diff --git a/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx b/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx
index 00cd4d402..4985e0e64 100644
--- a/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx
+++ b/zubhub_frontend/zubhub/src/views/search_results/SearchResults.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
@@ -132,12 +132,16 @@ function SearchResults(props) {
     }
   };
 
-  const getResults = (type, results) => {
-    if (!results) {
+
+  const { t, auth } = props;
+
+  const getResults = useCallback((type, results) => {
+    if (!loading && !results?.length) {
       return <ErrorPage error={t('searchResults.errors.noResult')} styleOverrides={{ width: modalClasses.errorPage }}/>
     }
-
+    
     if (type === SearchType.CREATORS) {
+      results.slice(0, 4)
       return buildCreatorProfiles(
         results,
         { classes, common_classes },
@@ -146,9 +150,14 @@ function SearchResults(props) {
         handleSetState,
       );
     } else {
+      // Sort the results array
+      results.sort((a, b) => {
+        return a.title.localeCompare(b.title);
+      });
+      const limitedResults = results.slice(0, 3);
       return (
         <Grid container spacing={3}>
-          {results?.map(project => (
+          {limitedResults?.map(project => (
             <Grid
               item
               xs={12}
@@ -169,7 +178,7 @@ function SearchResults(props) {
         </Grid>
       )
     }
-  };
+  }, [classes, common_classes, modalClasses.errorPage, props, state, t])
 
   const {
     count,
@@ -178,7 +187,6 @@ function SearchResults(props) {
     next: next_page,
     loading,
   } = state;
-  const { t, auth } = props;
 
   if (!auth.token) {
     return (
@@ -195,13 +203,15 @@ function SearchResults(props) {
           </Grid>
           {getResults(
             getQueryParams(window.location.href).get('type'),
-            props.auth.token ? results : results[0]?.projects?.results,
+            results
           )}
           <Grid className={modalClasses.gridBlur}></Grid>
         </Grid>
         <Grid className={modalClasses.loginModal}>
           <Login {...props}
-           primaryTitle={t('searchResults.loginModal.title')}
+           primaryTitle={t('searchResults.loginModal.title', {
+            type: getQueryParams(window.location.href).get('type')
+           })}
            secondaryTitle='' 
            styleOverrides={{containerStyles: modalClasses.containerStylesOverrides, titleStyles: modalClasses.titleStylesOverrides}}
           />
diff --git a/zubhub_frontend/zubhub/src/views/search_results/searchResultsScripts.js b/zubhub_frontend/zubhub/src/views/search_results/searchResultsScripts.js
index 333931a75..f21740109 100644
--- a/zubhub_frontend/zubhub/src/views/search_results/searchResultsScripts.js
+++ b/zubhub_frontend/zubhub/src/views/search_results/searchResultsScripts.js
@@ -31,18 +31,13 @@ export const getQueryParams = url => {
  */
 export const fetchPage = (page, props, query_string, type) => {
   if (type === SearchType.PROJECTS) {
-    if (props.auth?.token) {
-      return props.searchProjects({
-        page,
-        query_string,
-        t: props.t,
-        token: props.auth.token,
-        tab: 'projects',
-      });
-    } else {
-      return props.getStaffPicks({ token: props.token })
-    }
-   
+    return props.searchProjects({
+      page,
+      query_string,
+      t: props.t,
+      token: props.auth.token,
+      tab: 'projects',
+    });
   } else if (type === SearchType.CREATORS) {
     return props.searchCreators({
       page,