Styling Changes

frontend/src/api/api.ts

@@ -6,7 +6,7 @@ import { createPriceEstimationApi, createSlicerApi } from "./slicerAPI";
 import { createUserApi } from "./userAPI";
 
 const API_BASE_URL = "http://localhost:3000/api";
-const MICRO_SERVICE_URL = "http://44.215.25.156:3000/api"
+const MICRO_SERVICE_URL = "http://44.215.25.156:3000/api";
 
 const authApi = createAuthApi(API_BASE_URL);
 const userApi = createUserApi(API_BASE_URL);

frontend/src/api/api.types.ts

@@ -28,33 +28,33 @@ export type SlicerData = {
   maxy: number;
   maxz: number;
   targetMachineName: string;
-}
+};
 
 export type PriceEstimation = {
-  shipping: boolean,
-  filamentType: string,
-  slices: SlicerData[],
-}
+  shipping: boolean;
+  filamentType: string;
+  slices: SlicerData[];
+};
 
 export type EstimateBreakdown = {
-  file: string,
-  baseCost: number,
-  timeCost: number,
-  filamentCost: number,
-  shippingCost: number,
-  producerSubtotal: number,
-  producerFee: number,
-  producerTotal: number,
-  taxCost: number,
-  stripeCost: number,
-  voxetiCost: number,
-  total: number,
-}
+  file: string;
+  baseCost: number;
+  timeCost: number;
+  filamentCost: number;
+  shippingCost: number;
+  producerSubtotal: number;
+  producerFee: number;
+  producerTotal: number;
+  taxCost: number;
+  stripeCost: number;
+  voxetiCost: number;
+  total: number;
+};
 
 export type VoxetiJob = {
-  id: string,
-  job: Job,
-}
+  id: string;
+  job: Job;
+};
 
 export type CheckoutState = {
   prices: EstimateBreakdown[];

frontend/src/api/authAPI.ts

@@ -11,12 +11,12 @@ export const createAuthApi = (baseUrl: string) =>
       baseUrl: `${baseUrl}/auth`,
       credentials: "include",
       prepareHeaders: (headers, { getState }) => {
-        const token = (getState() as RootState).user.csrfToken
+        const token = (getState() as RootState).user.csrfToken;
         if (token) {
-          headers.set("Csrftoken", token)
+          headers.set("Csrftoken", token);
         }
-        return headers
-      }
+        return headers;
+      },
     }),
     endpoints: (builder) => ({
       login: builder.mutation<UserSliceState, UserCredentials>({
@@ -42,8 +42,8 @@ export const createAuthApi = (baseUrl: string) =>
       authenticate: builder.query({
         query: () => ({
           method: "POST",
-          url: "/authenticate"
-        })
-      })
+          url: "/authenticate",
+        }),
+      }),
     }),
   });

frontend/src/api/designAPI.ts

@@ -9,12 +9,12 @@ export const createDesignApi = (baseUrl: string) =>
       baseUrl: `${baseUrl}/designs`,
       credentials: "include",
       prepareHeaders: (headers, { getState }) => {
-        const token = (getState() as RootState).user.csrfToken
+        const token = (getState() as RootState).user.csrfToken;
         if (token) {
-          headers.set("Csrftoken", token)
+          headers.set("Csrftoken", token);
         }
-        return headers
-      }
+        return headers;
+      },
     }),
     endpoints: (builder) => ({
       uploadDesign: builder.mutation<Design[], FormData>({

frontend/src/api/jobAPI.ts

@@ -95,7 +95,7 @@ export const createJobApi = (baseUrl: string) =>
       >({
         query: ({ producerId, page, limit, filter, sort }) =>
           `/recommendations/${producerId}?page=${page}&limit=${limit}&filter=${filter.join(
-            ","
+            ",",
           )}&sort=${sort}`,
       }),
 

frontend/src/api/slicerAPI.ts

@@ -27,12 +27,12 @@ export const createPriceEstimationApi = (baseUrl: string) =>
       baseUrl: `${baseUrl}/slicer`,
       credentials: "include",
       prepareHeaders: (headers, { getState }) => {
-        const token = (getState() as RootState).user.csrfToken
+        const token = (getState() as RootState).user.csrfToken;
         if (token) {
-          headers.set("Csrftoken", token)
+          headers.set("Csrftoken", token);
         }
-        return headers
-      }
+        return headers;
+      },
     }),
     endpoints: (builder) => ({
       estimatePrices: builder.mutation<EstimateBreakdown[], PriceEstimation>({

frontend/src/api/userAPI.ts

@@ -10,12 +10,12 @@ export const createUserApi = (baseUrl: string) =>
       baseUrl: `${baseUrl}/users`,
       credentials: "include",
       prepareHeaders: (headers, { getState }) => {
-        const token = (getState() as RootState).user.csrfToken
+        const token = (getState() as RootState).user.csrfToken;
         if (token) {
-          headers.set("Csrftoken", token)
+          headers.set("Csrftoken", token);
         }
-        return headers
-      }
+        return headers;
+      },
     }),
     endpoints: (builder) => ({
       createUser: builder.mutation<User, User>({

frontend/src/components/Auth/Auth.tsx

@@ -10,9 +10,8 @@ export default function Auth({ children, authRoute }: AuthProps) {
   useEffect(() => {
     if (authRoute) {
       userId == "" && router.navigate({ to: "/login" });
-    }
-    else {
-      userId !== "" && router.navigate({ to: '/jobs' })
+    } else {
+      userId !== "" && router.navigate({ to: "/jobs" });
     }
   }, [authRoute, userId]);
 

frontend/src/components/Button/Button.types.ts

@@ -6,7 +6,13 @@ export interface StyledButtonProps {
   type?: "submit" | "button";
   icon?: string;
   disabled?: boolean;
-  size?: 'sm' | 'md' | 'lg';
-  color: 'primary' | 'seconday' | 'producer'| 'designer' | 'delete' | 'success';
+  size?: "sm" | "md" | "lg";
+  color:
+    | "primary"
+    | "seconday"
+    | "producer"
+    | "designer"
+    | "delete"
+    | "success";
   onClick?: () => void;
 }

frontend/src/components/Jobs/AvatarCell.tsx

@@ -1,27 +1,33 @@
 import { Avatar } from "@mui/material";
 
 type ProducerCellProps = {
-  avatar?: string,
-  firstName?: string,
-  lastName?: string,
-  userType: 'designer' | 'producer',
-  imageOnly: boolean,
-  size: number,
-}
+  avatar?: string;
+  firstName?: string;
+  lastName?: string;
+  userType: "designer" | "producer";
+  imageOnly: boolean;
+  size: number;
+};
 
-export default function AvatarCell({ firstName, lastName, userType, imageOnly, size } : ProducerCellProps) {
+export default function AvatarCell({
+  firstName,
+  lastName,
+  userType,
+  imageOnly,
+  size,
+}: ProducerCellProps) {
   const avatarOutlineColor = {
-    designer: '!bg-designer',
-    producer: '!bg-producer',
-  }
+    designer: "!bg-designer",
+    producer: "!bg-producer",
+  };
 
   return (
     <div className="flex items-center text-base">
       <Avatar
         sx={{
           width: size,
           height: size,
-          marginRight: '20px'
+          marginRight: "20px",
         }}
         className={avatarOutlineColor[userType]}
       >
@@ -42,9 +48,10 @@ export default function AvatarCell({ firstName, lastName, userType, imageOnly, s
           </Avatar>
         </Avatar>
       </Avatar>
-      {!imageOnly && ((firstName && lastName)
-        ? firstName + " " + lastName
-        : userType === "producer"
+      {!imageOnly &&
+        (firstName && lastName
+          ? firstName + " " + lastName
+          : userType === "producer"
           ? "Awaiting Acceptance"
           : "User Not Found")}
     </div>