Update Bridge file layout

apps/bridge-frontend/app/_components/Login.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import { FC, useState } from "react";
+import {
+  Box,
+  Grid,
+  Container,
+  IconButton,
+  Typography,
+  TextField,
+} from "@mui/material";
+import {
+  Apple as AppleIcon,
+  Google as GoogleIcon,
+  Key as KeyIcon,
+} from "@mui/icons-material";
+import { signIn } from "next-auth/react";
+import Image from "next/image";
+import LinkLogo from "@/app/../public/link-logo-small.png";
+import { colors } from "@/app/_styles/theme";
+import { useSearchParams } from "next/navigation";
+
+type LoginProps = {
+  session: any;
+};
+
+export const Login: FC<LoginProps> = ({ session }) => {
+  const origin =
+    typeof window !== "undefined" && window.location.origin
+      ? window.location.origin
+      : "";
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const params = useSearchParams();
+  const error = params.get("error");
+  const { darkGray, cdrLinkOrange, white } = colors;
+  const buttonStyles = {
+    borderRadius: 500,
+    width: "100%",
+    fontSize: "16px",
+    fontWeight: "bold",
+    backgroundColor: white,
+    "&:hover": {
+      color: white,
+      backgroundColor: cdrLinkOrange,
+    },
+  };
+  const fieldStyles = {
+    "& label.Mui-focused": {
+      color: cdrLinkOrange,
+    },
+    "& .MuiInput-underline:after": {
+      borderBottomColor: cdrLinkOrange,
+    },
+    "& .MuiFilledInput-underline:after": {
+      borderBottomColor: cdrLinkOrange,
+    },
+    "& .MuiOutlinedInput-root": {
+      "&.Mui-focused fieldset": {
+        borderColor: cdrLinkOrange,
+      },
+    },
+  };
+
+  return (
+    <Box sx={{ backgroundColor: darkGray, height: "100vh" }}>
+      <Container maxWidth="md" sx={{ p: 10 }}>
+        <Grid container spacing={2} direction="column" alignItems="center">
+          <Grid
+            item
+            container
+            direction="row"
+            justifyContent="center"
+            alignItems="center"
+          >
+            <Grid item>
+              <Box
+                sx={{
+                  width: "70px",
+                  height: "70px",
+                  margin: "0 auto",
+                }}
+              >
+                <Image
+                  src={LinkLogo}
+                  alt="Link logo"
+                  width={70}
+                  height={70}
+                  style={{
+                    objectFit: "cover",
+                    filter: "grayscale(100) brightness(100)",
+                  }}
+                />
+              </Box>
+            </Grid>
+            <Grid item>
+              <Typography
+                variant="h2"
+                sx={{
+                  fontSize: 36,
+                  color: "white",
+                  fontWeight: 700,
+                  mt: 1,
+                  ml: 0.5,
+                  fontFamily: "Poppins",
+                }}
+              >
+                CDR Bridge
+              </Typography>
+            </Grid>
+          </Grid>
+
+          <Grid item sx={{ width: "100%" }}>
+            {!session ? (
+              <Container
+                maxWidth="xs"
+                sx={{
+                  p: 3,
+                  mt: 3,
+                }}
+              >
+                <Grid
+                  container
+                  spacing={3}
+                  direction="column"
+                  alignItems="center"
+                >
+                  {error ? (
+                    <Grid item sx={{ width: "100%" }}>
+                      <Box sx={{ backgroundColor: "red", p: 3 }}>
+                        <Typography
+                          variant="body1"
+                          sx={{
+                            fontSize: 18,
+                            color: "white",
+                            textAlign: "center",
+                          }}
+                        >
+                          {`${error} error`}
+                        </Typography>
+                      </Box>
+                    </Grid>
+                  ) : null}
+                  <Grid item sx={{ width: "100%" }}>
+                    <IconButton
+                      sx={buttonStyles}
+                      onClick={() =>
+                        signIn("google", {
+                          callbackUrl: `${origin}`,
+                        })
+                      }
+                    >
+                      <GoogleIcon sx={{ mr: 1 }} />
+                      Sign in with Google
+                    </IconButton>
+                  </Grid>
+                  <Grid item sx={{ width: "100%" }}>
+                    <IconButton
+                      aria-label="Sign in with Apple"
+                      sx={buttonStyles}
+                      onClick={() =>
+                        signIn("apple", {
+                          callbackUrl: `${window.location.origin}`,
+                        })
+                      }
+                    >
+                      <AppleIcon sx={{ mr: 1 }} />
+                      Sign in with Apple
+                    </IconButton>
+                  </Grid>
+                </Grid>
+              </Container>
+            ) : null}
+            {session ? (
+              <Box component="h4">
+                {` ${session.user.name ?? session.user.email}.`}
+              </Box>
+            ) : null}
+          </Grid>
+        </Grid>
+      </Container>
+    </Box>
+  );
+};