fix: updates files to prettier styling

Gather307 · May 20, 2024 · 4326539 · 4326539
1 parent 51b6e1e
commit 4326539
Show file tree

Hide file tree

Showing 11 changed files with 172 additions and 102 deletions.
diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs
@@ -2,17 +2,17 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
+    "react-refresh/only-export-components": [
+      "warn",
       { allowConstantExport: true },
     ],
   },
-}
+};
diff --git a/frontend/README.md b/frontend/README.md
@@ -17,12 +17,12 @@ If you are developing a production application, we recommend updating the config
 export default {
   // other rules...
   parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
+    ecmaVersion: "latest",
+    sourceType: "module",
+    project: ["./tsconfig.json", "./tsconfig.node.json"],
     tsconfigRootDir: __dirname,
   },
-}
+};
 ```
 
 - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`

diff --git a/frontend/package.json b/frontend/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "npx eslint . --report-unused-disable-directives --max-warnings 0 && npx prettier --check .",
+    "lint": "npx eslint --report-unused-disable-directives --max-warnings 0 && npx prettier --check .",
     "preview": "vite preview"
   },
   "dependencies": {

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -25,7 +25,7 @@ function App() {
                 width="300px"
                 onSearch={() =>
                   console.log(
-                    "Wow, you really just submitted information. How dare you."
+                    "Wow, you really just submitted information. How dare you.",
                   )
                 }
                 placeholder="DO NOT USE THIS."

diff --git a/frontend/src/components/NavbarSignedIn.tsx b/frontend/src/components/NavbarSignedIn.tsx
@@ -11,55 +11,67 @@ import {
   MenuDivider,
   HStack,
   Image,
-  Link
-} from '@chakra-ui/react';
-import logo from '../../public/target.png';
-import { ReactNode } from 'react';
+  Link,
+} from "@chakra-ui/react";
+import logo from "../../public/target.png";
+import { ReactNode } from "react";
 
-const NavLink = ({ children, href = '#' }: { children: ReactNode, href?: string }) => (
+const NavLink = ({
+  children,
+  href = "#",
+}: {
+  children: ReactNode;
+  href?: string;
+}) => (
   <Link
     px={2}
     py={1}
-    rounded={'md'}
+    rounded={"md"}
     href={href}
-    color={'#DCE1DE'}
+    color={"#DCE1DE"}
     _hover={{
-      textDecoration: 'underline',
-      color: '#DCE1DE',
-      bg: 'transparent'
+      textDecoration: "underline",
+      color: "#DCE1DE",
+      bg: "transparent",
     }}
-    style={{ fontWeight: '500' }}
+    style={{ fontWeight: "500" }}
   >
     {children}
   </Link>
 );
 
-const NavbarSignedIn = ({ userName = "User", userImage = "/path-to-user-image.png" }) => {
+const NavbarSignedIn = ({
+  userName = "User",
+  userImage = "/path-to-user-image.png",
+}) => {
   return (
-    <Box bg={'#216869'} px={4}>
+    <Box bg={"#216869"} px={4}>
       <Flex
-        minH={'60px'}
-        alignItems={'center'}
-        justifyContent={'space-between'}>
+        minH={"60px"}
+        alignItems={"center"}
+        justifyContent={"space-between"}
+      >
         <Flex align="center" ml={2}>
           <Link href="/">
             <Image src={logo} alt="Logo" boxSize="32px" mr={3} />
           </Link>
-          <Text fontSize="lg" color={'#DCE1DE'} ml={1}>Welcome, {userName}!</Text>
+          <Text fontSize="lg" color={"#DCE1DE"} ml={1}>
+            Welcome, {userName}!
+          </Text>
         </Flex>
-        <HStack spacing={8} alignItems={'center'}>
+        <HStack spacing={8} alignItems={"center"}>
           <NavLink href="#">My Items</NavLink>
           <NavLink href="#">My Groups</NavLink>
           <Menu>
             <MenuButton
               as={Button}
-              rounded={'full'}
-              variant={'link'}
-              cursor={'pointer'}
+              rounded={"full"}
+              variant={"link"}
+              cursor={"pointer"}
               minW={0}
-              _focus={{ boxShadow: '0 0 0 3px #49A078' }}
+              _focus={{ boxShadow: "0 0 0 3px #49A078" }}
             >
-              <Avatar size={'sm'} src={userImage} />
+              <Avatar size={"sm"} src={userImage} />
             </MenuButton>
             <MenuList>
               <MenuItem>Profile</MenuItem>

diff --git a/frontend/src/components/NavbarSignedOut.tsx b/frontend/src/components/NavbarSignedOut.tsx
@@ -1,54 +1,52 @@
-import { Link } from 'react-router-dom';
-import {
-  Box,
-  Flex,
-  Text,
-  Button,
-  HStack,
-  Image,
-} from '@chakra-ui/react';
-import logo from '../../public/target.png';
+import { Link } from "react-router-dom";
+import { Box, Flex, Text, Button, HStack, Image } from "@chakra-ui/react";
+import logo from "../../public/target.png";
 
 const NavbarSignedOut = () => {
   return (
-    <Box bg={'#216869'} px={4}>
+    <Box bg={"#216869"} px={4}>
       <Flex
-        minH={'60px'}
+        minH={"60px"}
         py={{ base: 2 }}
         px={{ base: 4 }}
-        align={'center'}
-        justify={'space-between'}>
+        align={"center"}
+        justify={"space-between"}
+      >
         <Flex align="center" ml={2}>
           <Link to="/">
             <Image src={logo} alt="Logo" boxSize="32px" mr={3} />
           </Link>
-          <Text fontSize="lg" color={'#DCE1DE'} ml={1}>Welcome, Gatherer!</Text>
+          <Text fontSize="lg" color={"#DCE1DE"} ml={1}>
+            Welcome, Gatherer!
+          </Text>
         </Flex>
-        <HStack spacing={8} alignItems={'center'}>
+        <HStack spacing={8} alignItems={"center"}>
           <Button
             as={Link}
             to="/login"
-            fontSize={'sm'}
+            fontSize={"sm"}
             fontWeight={400}
-            variant={'link'}
+            variant={"link"}
             _hover={{
-              textDecoration: 'underline',
-              color: '#DCE1DE'
+              textDecoration: "underline",
+              color: "#DCE1DE",
             }}
-            color={'#DCE1DE'}>
+            color={"#DCE1DE"}
+          >
             Sign In
           </Button>
           <Button
             as={Link}
             to="/signup"
-            fontSize={'sm'}
+            fontSize={"sm"}
             fontWeight={600}
-            color={'#DCE1DE'}
-            bg={'#49A078'}
+            color={"#DCE1DE"}
+            bg={"#49A078"}
             _hover={{
-              bg: '#9CC5A1',
-              color: '#1F2421'
-            }}>
+              bg: "#9CC5A1",
+              color: "#1F2421",
+            }}
+          >
             Sign Up
           </Button>
         </HStack>

diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -6,5 +6,5 @@ import "./index.css";
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
@@ -1,21 +1,23 @@
 const HomePage = () => {
   return (
-    <div style={{ 
-      height: '100vh',
-      width: '100vw',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-      background: '#DCE1DE',
-      color: '#216869',
-      fontSize: '24px',
-      padding: '0 20px',
-    }}>
+    <div
+      style={{
+        height: "100vh",
+        width: "100vw",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        background: "#DCE1DE",
+        color: "#216869",
+        fontSize: "24px",
+        padding: "0 20px",
+      }}
+    >
       <h1>Welcome to Gather!</h1>
       <p>Your go to place to keep track of your stuff</p>
     </div>
   );
-}
+};
 
 export default HomePage;
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
@@ -8,7 +8,7 @@ import {
   Link,
   Flex,
   Text,
-} from '@chakra-ui/react';
+} from "@chakra-ui/react";
 
 const LoginPage = () => {
   // Responsive styles for input fields
@@ -23,20 +23,44 @@ const LoginPage = () => {
       width="100vw"
       bg="#DCE1DE"
     >
-      <Box p={{ base: 4, md: 8 }} width="full" maxW={{ base: "90%", md: "md" }} borderWidth={1} borderRadius={8} boxShadow="lg" bg="white">
+      <Box
+        p={{ base: 4, md: 8 }}
+        width="full"
+        maxW={{ base: "90%", md: "md" }}
+        borderWidth={1}
+        borderRadius={8}
+        boxShadow="lg"
+        bg="white"
+      >
         <VStack spacing={6}>
-          <Text fontSize={{ base: "xl", md: "2xl" }} color="#216869">Login</Text>
+          <Text fontSize={{ base: "xl", md: "2xl" }} color="#216869">
+            Login
+          </Text>
           <FormControl id="email">
             <FormLabel>Email</FormLabel>
-            <Input type="email"  borderColor="#216869" _hover={{ borderColor: '#49A078' }} />
+            <Input
+              type="email"
+              borderColor="#216869"
+              _hover={{ borderColor: "#49A078" }}
+            />
           </FormControl>
           <FormControl id="password">
             <FormLabel>Password</FormLabel>
-            <Input type="password"  borderColor="#216869" _hover={{ borderColor: '#49A078' }} />
+            <Input
+              type="password"
+              borderColor="#216869"
+              _hover={{ borderColor: "#49A078" }}
+            />
           </FormControl>
-          <Button colorScheme="teal" variant="solid" width="full">Login</Button>
-          <Link color="teal.500" href="/signup">Create New Account</Link>
-          <Link color="teal.600" href="#">Forgot Your Password?</Link>
+          <Button colorScheme="teal" variant="solid" width="full">
+            Login
+          </Button>
+          <Link color="teal.500" href="/signup">
+            Create New Account
+          </Link>
+          <Link color="teal.600" href="#">
+            Forgot Your Password?
+          </Link>
         </VStack>
       </Box>
     </Flex>