Improved layout after rewrite

PinfluencerIO · Nov 9, 2022 · 2e1b6d1 · 2e1b6d1
1 parent bf78ad1
commit 2e1b6d1
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 58 deletions.
diff --git a/src/api/data.js b/src/api/data.js
@@ -201,8 +201,8 @@ const influencer3 = influencer();
 const listing1 = listing();
 const listing2 = listing();
 const listing3 = listing();
-// const listing4 = listing();
-// const listing5 = listing();
+const listing4 = listing();
+const listing5 = listing();
 // const listing6 = listing();
 // const listing7 = listing();
 // const listing8 = listing();
@@ -214,8 +214,8 @@ export const listings = [
   listing1,
   listing2,
   listing3,
-  // listing4,
-  // listing5,
+  listing4,
+  listing5,
   // listing6,
   // listing7,
   // listing8,
@@ -229,8 +229,8 @@ export const collaborations = [
   collaboration(listing2, influencer3),
   collaboration(listing3, influencer3),
   collaboration(listing3, influencer2),
-  // collaboration(listing4, influencer3),
-  // collaboration(listing5, influencer3),
-  // collaboration(listing5, influencer2),
-  // collaboration(listing5, influencer1),
+  collaboration(listing4, influencer3),
+  collaboration(listing5, influencer3),
+  collaboration(listing5, influencer2),
+  collaboration(listing5, influencer1),
 ];
diff --git a/src/containers/App.js b/src/containers/App.js
@@ -23,9 +23,7 @@ import { ProposalStep4 } from "../presentation/proposal/ProposalStep4";
 import { Values } from "../presentation/values/Values";
 import { YourDetails } from "../presentation/YourDetails";
 import Dev from "../test/Dev";
-import { AllCollaborations } from "./collaborations/AllCollaborations";
 import { CollaborationList } from "./collaborations/CollaborationList";
-import { Dashboard } from "./Dashboard";
 import HomePage from "./HomePage";
 import { OnboardingSteps } from "./onboading/OnboardingSteps";
 import { AllListings } from "./proposals/AllListings";
@@ -93,24 +91,6 @@ function App() {
             />
           }
         />
-
-        <Route
-          path="dashboard"
-          element={<Dashboard userType={userType(user)} />}
-        />
-        <Route path="collaborations" element={<AllCollaborations />} />
-        <Route
-          path="collaborations/applied"
-          element={<CollaborationList state="APPLIED" />}
-        />
-        <Route
-          path="collaborations/approved"
-          element={<CollaborationList state="APPROVED" />}
-        />
-        <Route
-          path="collaborations/rejected"
-          element={<CollaborationList state="REJECTED" />}
-        />
         <Route path="listings" element={<AllListings />} />
         <Route path="listings/new" element={<NewCollaborationProposal />} />
         <Route path="listings/view/:id" element={<ListingView />} />

diff --git a/src/containers/proposals/AllListings.js b/src/containers/proposals/AllListings.js
@@ -1,5 +1,5 @@
 // import MailIcon from "@mui/icons-material/Mail";
-import { Box, Button, Paper, Typography } from "@mui/material";
+import { Box, Button, Paper } from "@mui/material";
 import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { collaborations as collabs, listings as data } from "../../api/data";
@@ -18,20 +18,8 @@ export const AllListings = () => {
     setCollaborations(collabs);
   }, []);
   return (
-    <Box mx={1}>
-      <Box display="flex" justifyContent="space-between" pb={0.3}>
-        <Typography
-          variant="h6"
-          sx={{
-            verticalAlign: "end",
-            fontWeight: 600,
-            position: "relative",
-            top: "5px",
-            left: "5px",
-          }}
-        >
-          My Listings ({listings.length})
-        </Typography>
+    <Box>
+      <Box display="flex" justifyContent="flex-end" mb={1}>
         <Button
           size="small"
           sx={{
@@ -45,8 +33,8 @@ export const AllListings = () => {
         </Button>
       </Box>
 
-      <Paper variant="outlined" sx={{ padding: 2 }}>
-        <Box display="flex" flexDirection="column" gap={2} mt={0}>
+      <Paper variant="outlined" sx={{ px: 1, pt: 1 }}>
+        <Box display="flex" flexDirection="column" gap={2}>
           {listings
             .sort(
               (a, b) =>

diff --git a/src/presentation/BackLink.js b/src/presentation/BackLink.js
@@ -5,7 +5,7 @@ import { useNavigate } from "react-router";
 export const BackLink = ({ backLocation = -1 }) => {
   const nav = useNavigate();
   return (
-    <Box display={{ xs: "flex", sm: "none" }} flexDirection="row">
+    <Box display={{ xs: "flex" }} flexDirection="row">
       <Link
         underline="none"
         onClick={() => {

diff --git a/src/presentation/ListingRow.js b/src/presentation/ListingRow.js
@@ -24,6 +24,7 @@ export const ListingRow = ({
       justifyContent="space-between"
       borderBottom={1}
       pb={1}
+      pt={1}
     >
       <Box display="flex">
         <Box>
@@ -34,6 +35,7 @@ export const ListingRow = ({
           <Box
             maxWidth={{ xs: "450px", sm: "550px", md: "700px", lg: "1000px" }}
             mb={1}
+            fontSize={{ xs: "1rem", sm: "1.5rem" }}
           >
             {listingTitle}
           </Box>
@@ -43,10 +45,12 @@ export const ListingRow = ({
         </Box>
       </Box>
       <Box
-        my={1}
+        mt={{ xs: 3, sm: 0 }}
+        mb={{ xs: 3, sm: 0 }}
         display="flex"
         flexDirection={{ xs: "row", sm: "column" }}
-        gap={2}
+        rowGap={1}
+        columnGap={2}
       >
         {action("Applications", appliedCount, () => {
           console.log("applications");

diff --git a/src/presentation/iconMenu/IconMenu.js b/src/presentation/iconMenu/IconMenu.js
@@ -20,7 +20,7 @@ const IconMenu = ({
   };
   const open = Boolean(anchorElement);
   return (
-    <Box margin="0 auto">
+    <Box>
       <IconButton onClick={handleClick} aria-label={name}>
         {icon}
       </IconButton>

diff --git a/src/presentation/layout/Layout.js b/src/presentation/layout/Layout.js
@@ -15,7 +15,14 @@ export default function Layout({
   signout,
 }) {
   return (
-    <>
+    <Box
+      mx={2}
+      display="flex"
+      flexDirection="column"
+      border={0}
+      borderColor="red"
+      sx={{ minHeight: "100vh" }}
+    >
       <Header
         isAuthenticated={isAuthenticated}
         isOnboarded={isOnboarded}
@@ -24,10 +31,17 @@ export default function Layout({
         signin={signin}
         signout={signout}
       />
-      <Box component="main" border={0} borderColor="blue" my={1}>
+      <Box
+        component="main"
+        border={0}
+        borderColor="blue"
+        paddingY={1}
+        display="flex"
+        flexDirection="column"
+      >
         <Outlet />
       </Box>
-      <Footer />
-    </>
+      <Footer marginTop="auto" py={3} />
+    </Box>
   );
 }
diff --git a/src/presentation/layout/header/Header.js b/src/presentation/layout/header/Header.js
@@ -47,7 +47,7 @@ export default function Header(props) {
   return (
     <ElevationScroll {...props}>
       <AppBar role="navigation" component="nav">
-        <Toolbar disableGutters>
+        <Toolbar disableGutters sx={{ borderRight: 0, borderLeft: 0 }}>
           <Link
             to="/"
             style={{
@@ -121,8 +121,9 @@ function ElevationScroll(props) {
         trigger ? "" : "1px solid " + theme.palette.divider,
       color: (theme) => theme.palette.primary.main,
       position: "sticky",
+      boxShadow: trigger && "0px 10px 5px -7px  rgb(0 0 0 / 40%)",
     },
-    elevation: trigger ? 1 : 0,
+    elevation: 0,
   });
 }
 

diff --git a/src/presentation/layout/header/HorizontalNavigation.js b/src/presentation/layout/header/HorizontalNavigation.js
@@ -13,7 +13,6 @@ const HorizontalNavigation = () => {
   const item = (label, path) => {
     return (
       <Box
-        px={2}
         sx={{ width: "fit-content", cursor: "pointer" }}
         onClick={() => nav(path)}
       >

diff --git a/src/style/theme.js b/src/style/theme.js
@@ -26,14 +26,14 @@ const customTheme = createTheme(baseTheme, {
     MuiCssBaseline: {
       styleOverrides: {
         body: {},
+        html: {},
         "& #root": {
           minWidth: "375px",
           maxWidth: maxWidth,
           margin: "0 auto",
-          padding: 0,
+          padding: "0",
           border: "0px red solid",
         },
-        html: {},
       },
     },
   },