Refine Job Accept Styling

GenerateNU · Dec 7, 2023 · 061c91c · 061c91c
1 parent bf14ee1
commit 061c91c
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 37 deletions.
diff --git a/frontend/src/components/Button/Button.tsx b/frontend/src/components/Button/Button.tsx
@@ -24,6 +24,7 @@ export default function StyledButton({
     producer: ["!bg-producer", "!text-background", "hover:!bg-[#565656]"],
     designer: ["!bg-designer", "!text-background", "hover:!bg-[#565656]"],
     delete: ["!bg-[#F5F5F5]", "!text-error", "hover:!bg-[#FFCCCB]"],
+    success: ["!bg-[#14AE5C]", "!text-background", "hover:!bg[#14AE5C]"],
   };
 
   return (

diff --git a/frontend/src/components/Button/Button.types.ts b/frontend/src/components/Button/Button.types.ts
@@ -7,6 +7,6 @@ export interface StyledButtonProps {
   icon?: string;
   disabled?: boolean;
   size?: 'sm' | 'md' | 'lg';
-  color: 'primary' | 'seconday' | 'producer'| 'designer' | 'delete';
+  color: 'primary' | 'seconday' | 'producer'| 'designer' | 'delete' | 'success';
   onClick?: () => void;
 }
diff --git a/frontend/src/components/Jobs/ProducerJobs/components/DesignInfo.tsx b/frontend/src/components/Jobs/ProducerJobs/components/DesignInfo.tsx
@@ -1,8 +1,8 @@
 import { designApi } from "../../../../api/api";
 import Divider from "@mui/material/Divider";
 import DownloadIcon from "@mui/icons-material/Download";
-import IconButton from "@mui/material/IconButton";
 import { saveAs } from "file-saver";
+import StyledButton from "../../../Button/Button";
 
 export default function DesignInfo(props: {
   designId: string;
@@ -12,22 +12,23 @@ export default function DesignInfo(props: {
 
   return (
     <div>
-      <Divider variant="middle" className=" py-3" />
+      <Divider variant="middle" className="py-3 !m-0"/>
       <div className=" py-3" />
-      <div className=" flex justify-between py-1">
-        <p>Filename (temp designId)</p>
-        <div className=" flex flex-row">
-          <p>{props.designId}</p>
+      <div className="flex justify-between py-1 items-center">
+        <p>Files</p>
+        <div className="flex flex-row items-center">
           {data && (
-            <IconButton
+            <StyledButton
+              color="seconday"
+              size='sm'
               onClick={() => saveAs(data, `voxeti-${props.designId}.stl`)}
             >
               <DownloadIcon fontSize="small" />
-            </IconButton>
+            </StyledButton>
           )}
         </div>
       </div>
-      <div className=" flex justify-between py-1">
+      <div className=" flex justify-between py-1 mt-6">
         <p>Quantity</p>
         <p>{props.quantity} piece(s)</p>
       </div>

diff --git a/frontend/src/components/Jobs/ProducerJobs/components/DesignerInfo.tsx b/frontend/src/components/Jobs/ProducerJobs/components/DesignerInfo.tsx
@@ -16,19 +16,21 @@ export default function DesignerName(props: { designerId: string; job?: Job }) {
         <div className=" flex flex-row">
           {data ? (
             <Avatar
-              className={` outline outline-3 outline-offset-2 ${
+              className={`outline outline-4 outline-offset-2 !w-24 !h-24 ${
                 data.userType == "DESIGNER"
                   ? "outline-designer"
                   : "outline-producer"
               }`}
               alt={`${data.firstName} ${data.lastName}`}
               sx={{ width: 64, height: 64 }}
-            />
+            >
+              {data.firstName.charAt(0)}
+            </Avatar>
           ) : (
             <Skeleton variant="circular" width={64} height={64} />
           )}
           {data ? (
-            <div className=" px-4 flex flex-col justify-center">
+            <div className="ml-5 px-4 flex flex-col justify-center">
               <p className=" text-lg">
                 {data && data.firstName} {data && data.lastName}
               </p>

diff --git a/frontend/src/components/Jobs/ProducerJobs/components/FieldValueRow.tsx b/frontend/src/components/Jobs/ProducerJobs/components/FieldValueRow.tsx
@@ -5,7 +5,7 @@ export default function FieldValueRow(props: {
 }) {
   return (
     <div className=" flex flex-col">
-      <Divider variant="middle" className=" py-3" />
+      <Divider variant="middle" className="!m-0 py-3" />
       <div className=" py-3" />
       {props.section.map((row) => (
         <div className=" flex justify-between py-1">

diff --git a/frontend/src/components/Jobs/ProducerJobs/components/JobAcceptButtons.tsx b/frontend/src/components/Jobs/ProducerJobs/components/JobAcceptButtons.tsx
@@ -1,9 +1,10 @@
 import * as React from "react";
 import { Job } from "../../../../main.types";
-import { Button, createTheme, ThemeProvider } from "@mui/material";
+import { createTheme, ThemeProvider } from "@mui/material";
 import { jobApi } from "../../../../api/api";
 import { useStateSelector } from "../../../../hooks/use-redux";
 import { useApiError } from "../../../../hooks/use-api-error";
+import StyledButton from "../../../Button/Button";
 
 declare module "@mui/material/styles" {
   interface Palette {
@@ -87,35 +88,33 @@ export default function JobAcceptButtons(props: { currentJob: Job }) {
   if (jobStatus.toUpperCase() === "PENDING") {
     return (
       <ThemeProvider theme={theme}>
-        <div className=" flex flex-row flex-wrap items-center justify-end gap-y-1 gap-x-2">
-          <Button
-            variant="contained"
-            color="black"
-            className=" w-32"
+        <div className="flex flex-row items-center justify-end gap-y-1 gap-x-2">
+          <StyledButton
+            color="primary"
             onClick={acceptJob}
+            size="md"
           >
             Accept
-          </Button>
-          <Button
-            variant="outlined"
-            color="black"
-            className=" w-32"
+          </StyledButton>
+          <StyledButton
+            color="seconday"
             href="/jobs"
             onClick={declineJob}
+            size="md"
           >
             Decline
-          </Button>
+          </StyledButton>
         </div>
       </ThemeProvider>
     );
   } else {
     return (
       <ThemeProvider theme={theme}>
-        <div className=" flex flex-row flex-wrap items-center justify-end gap-y-1 gap-x-4">
-          <p className=" text-producer">JOB ACCEPTED</p>
-          <Button href="/jobs" variant="outlined" color="black" className="">
+        <div className=" flex flex-row items-center justify-end gap-y-1 gap-x-2">
+          <StyledButton color="success" size="md">Job Accepted</StyledButton>
+          <StyledButton href="/jobs" color="seconday" size="md">
             Current Jobs
-          </Button>
+          </StyledButton>
         </div>
       </ThemeProvider>
     );

diff --git a/frontend/src/main.types.ts b/frontend/src/main.types.ts
@@ -3,7 +3,7 @@
 // A Voxeti User, can be both a Designer and a Producer
 export interface User {
   id: string;
-  userType?: 'DESIGNER' | 'PRODUCER' | 'HYBRID',
+  userType?: UserType,
   firstName: string;
   lastName: string;
   email: string;
@@ -106,6 +106,8 @@ export type ExperienceLevel = 1 | 2 | 3;
 
 export type SocialProvider = "NONE" | "GOOGLE";
 
+export type UserType = "DESIGNER" | "PRODUCER" | "HYBRID"
+
 // 4. Extra Types:
 
 export type Error = {

diff --git a/frontend/src/pages/JobInfo.tsx b/frontend/src/pages/JobInfo.tsx
@@ -1,6 +1,6 @@
 import { useParams } from "@tanstack/react-router";
 import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
-import { Box, Container, IconButton } from "@mui/material";
+import { Box, Container } from "@mui/material";
 import { Link } from "@mui/material";
 import * as React from "react";
 import { jobApi } from "../api/api";
@@ -43,18 +43,18 @@ export default function JobInfo() {
 
   const BackButton = () => {
     return (
-      <IconButton href="/jobs" aria-label="delete" size="small">
+      <div aria-label="delete" className='flex items-center w-[75px] text-[gray] hover:text-[black]'>
         <ArrowBackIosIcon fontSize="inherit" />
         <Link
           href="/jobs"
           underline="none"
-          color="black"
+          color="gray"
           sx={{ cursor: "pointer" }}
-          className="!hidden md:!flex"
+          className="!hidden md:!flex hover:text-[black]"
         >
           My Jobs
         </Link>
-      </IconButton>
+      </div>
     );
   };
 
@@ -93,7 +93,7 @@ export default function JobInfo() {
       <div className="py-32 w-full flex flex-col items-center justify-center">
         <div className=" px-4 w-full sm:w-3/5 md:w-1/2">
           <BackButton />
-          <div className=" py-3" />
+          <h1 className='text-2xl mt-6 mb-12'>Job Request</h1>
           <div className=" flex flex-row justify-between">
             {currentJob && (
               <DesignerName