fixed tab styling

ahnafnafee · Feb 28, 2022 · 2581184 · 2581184
1 parent 298b26f
commit 2581184
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 134 deletions.
diff --git a/components/CustomTab.js b/components/CustomTab.js
@@ -5,48 +5,34 @@ import TabPanelUnstyled from "@mui/base/TabPanelUnstyled";
 import { buttonUnstyledClasses } from "@mui/base/ButtonUnstyled";
 import TabUnstyled, { tabUnstyledClasses } from "@mui/base/TabUnstyled";
 
-const blue = {
-    50: "#F0F7FF",
-    100: "#C2E0FF",
-    200: "#80BFFF",
-    300: "#66B2FF",
-    400: "#3399FF",
-    500: "#007FFF",
-    600: "#0072E5",
-    700: "#0059B2",
-    800: "#004C99",
-    900: "#003A75",
-};
-
 export const CustomTab = styled(TabUnstyled)`
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: Poppins, sans-serif;
     color: white;
     cursor: pointer;
     font-size: 0.875rem;
     font-weight: bold;
     background-color: transparent;
     width: 100%;
-    padding: 12px 16px;
-    margin: 6px 6px;
+    padding: 10px 12px;
+    margin: 4px 4px;
     border: none;
-    border-radius: 5px;
+    border-radius: 4px;
     display: flex;
     justify-content: center;
 
     &:hover {
-        background-color: ${blue[400]};
+        background-color: #3d3d3d;
     }
 
     &:focus {
         color: #fff;
         border-radius: 3px;
-        outline: 2px solid ${blue[200]};
         outline-offset: 2px;
     }
 
     &.${tabUnstyledClasses.selected} {
-        background-color: ${blue[50]};
-        color: ${blue[600]};
+        background-color: #fff;
+        color: #0f0f0f;
     }
 
     &.${buttonUnstyledClasses.disabled} {
@@ -63,7 +49,7 @@ export const CustomTabPanel = styled(TabPanelUnstyled)`
 
 export const CustomTabsList = styled(TabsListUnstyled)`
     min-width: 320px;
-    background-color: ${blue[500]};
+    background-color: #0f0f0f;
     border-radius: 8px;
     margin-bottom: 16px;
     display: flex;

diff --git a/components/SignIn.js b/components/SignIn.js
@@ -13,24 +13,6 @@ import Typography from "@mui/material/Typography";
 import Container from "@mui/material/Container";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 
-function Copyright(props) {
-    return (
-        <Typography
-            variant="body2"
-            color="text.secondary"
-            align="center"
-            {...props}
-        >
-            {"Copyright © "}
-            <Link color="inherit" href="https://mui.com/">
-                Your Website
-            </Link>{" "}
-            {new Date().getFullYear()}
-            {"."}
-        </Typography>
-    );
-}
-
 const theme = createTheme();
 
 export default function SignIn() {
@@ -46,44 +28,59 @@ export default function SignIn() {
 
     return (
         <ThemeProvider theme={theme}>
-            <Container component="main">
+            <Container
+                style={{
+                    padding: 0,
+                }}
+            >
                 <CssBaseline />
                 <Box
-                    sx={{
-                        display: "flex",
-                        flexDirection: "column",
-                        alignItems: "center",
-                    }}
+                    sx={
+                        {
+                            // display: "flex",
+                            // flexDirection: "column",
+                            // alignItems: "center",
+                        }
+                    }
                 >
                     <Box component="form" onSubmit={handleSubmit} noValidate>
-                        <TextField
-                            margin="normal"
-                            required
-                            fullWidth
-                            id="email"
-                            label="Email Address"
-                            name="email"
-                            autoComplete="email"
-                            autoFocus
-                        />
-                        <TextField
-                            margin="normal"
-                            required
-                            fullWidth
-                            name="password"
-                            label="Password"
-                            type="password"
-                            id="password"
-                            autoComplete="current-password"
-                        />
-                        <Button
-                            type="submit"
-                            fullWidth
-                            variant="contained"
-                            sx={{ mt: 3, mb: 2 }}
+                        <div
+                            style={{
+                                flexDirection: "column",
+                                justifyContent: "space-between",
+                            }}
                         >
-                            Sign In
-                        </Button>
+                            <div>
+                                <TextField
+                                    margin="normal"
+                                    required
+                                    fullWidth
+                                    id="email"
+                                    label="Email Address"
+                                    name="email"
+                                    autoComplete="email"
+                                    autoFocus
+                                />
+                                <TextField
+                                    margin="normal"
+                                    required
+                                    fullWidth
+                                    name="password"
+                                    label="Password"
+                                    type="password"
+                                    id="password"
+                                    autoComplete="current-password"
+                                />
+                            </div>
+                            <Button
+                                type="submit"
+                                fullWidth
+                                variant="contained"
+                                sx={{ mt: 3, mb: 2 }}
+                            >
+                                Sign In
+                            </Button>
+                        </div>
                     </Box>
                 </Box>
             </Container>

diff --git a/components/SignUp.js b/components/SignUp.js
@@ -48,7 +48,11 @@ export default function SignUp() {
 
     return (
         <ThemeProvider theme={theme}>
-            <Container component="main" maxWidth="xs">
+            <Container
+                style={{
+                    padding: 0,
+                }}
+            >
                 <CssBaseline />
                 <Box
                     sx={{

diff --git a/pages/authenticate.js b/pages/authenticate.js
@@ -27,7 +27,12 @@ function AuthPage(props) {
     };
 
     return (
-        <Container>
+        <Container
+            style={{
+                flex: 1,
+                minHeight: "100vh",
+            }}
+        >
             <Head>
                 <title>Authenticate - Bookworm</title>
             </Head>

diff --git a/pages/index.js b/pages/index.js
@@ -8,68 +8,15 @@ export default function Home() {
     return (
         <div className="container">
             <Head>
-                <title>Welcome to Next.js!</title>
-            </Head>
-            <div>Welcome to Next.js!</div>
-            <Link href="/authenticate">
-                <a>Users</a>
-            </Link>
-            <br />
-            <img src="/vercel.svg" alt="Vercel" className="logo" />
-            {/* <Head>
                 <title>Create Next App</title>
                 <link rel="icon" href="/favicon.ico" />
             </Head>
 
             <main>
                 <h1 className="title">
-                    Welcome to <a href="https://nextjs.org">Next.js!</a>
+                    Welcome to <Link href="/authenticate">Bookworm</Link>
                 </h1>
-
-                <p className="description">
-                    Get started by editing <code>pages/index.js</code>
-                </p>
-
-                <div className="grid">
-                    <a href="https://nextjs.org/docs" className="card">
-                        <h3>Documentation &rarr;</h3>
-                        <p>
-                            Find in-depth information about Next.js features and
-                            API.
-                        </p>
-                    </a>
-
-                    <a href="https://nextjs.org/learn" className="card">
-                        <h3>Learn &rarr;</h3>
-                        <p>
-                            Learn about Next.js in an interactive course with
-                            quizzes!
-                        </p>
-                    </a>
-
-                    <a
-                        href="https://github.com/vercel/next.js/tree/master/examples"
-                        className="card"
-                    >
-                        <h3>Examples &rarr;</h3>
-                        <p>
-                            Discover and deploy boilerplate example Next.js
-                            projects.
-                        </p>
-                    </a>
-
-                    <a
-                        href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-                        className="card"
-                    >
-                        <h3>Deploy &rarr;</h3>
-                        <p>
-                            Instantly deploy your Next.js site to a public URL
-                            with Vercel.
-                        </p>
-                    </a>
-                </div>
-            </main> */}
+            </main>
 
             <footer>
                 <a

diff --git a/styles/global.css b/styles/global.css
@@ -4,8 +4,5 @@
 
 body {
     font-family: Poppins;
-    margin: 0;
-    padding: 0;
-    /* background: black; */
-    color: white;
+    min-height: "100vh";
 }