refactor: updated status bar deps and synced with android

homocodian · Mar 11, 2023 · 6b06b14 · 6b06b14
1 parent 52ff9d7
commit 6b06b14
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 44 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,18 +1,17 @@
 import { useMemo } from "react";
 
+import loadable from "@loadable/component";
+import { Capacitor } from "@capacitor/core";
 import { Routes, Route } from "react-router-dom";
 import { useTernaryDarkMode } from "usehooks-ts";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
-import { Capacitor } from "@capacitor/core";
 import { StatusBar, Style } from "@capacitor/status-bar";
-import loadable from "@loadable/component";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
 
-import Seperator from "./components/Seperator";
+import Loading from "./components/Loading";
 import { PrivateRoute, MenuAppBar } from "./components";
 import { getDesignTokens } from "./utils/getDesignToken";
 import { AccountMenuProvider, DrawerProvider } from "./context";
 import NotesCategoryProvider from "./context/NotesCategoryProvider";
-import Loading from "./components/Loading";
 
 const HomePage = loadable(() => import("./pages/Home"));
 const SignInPage = loadable(() => import("./pages/SignIn"));
@@ -47,30 +46,28 @@ function App() {
 			<DrawerProvider>
 				<AccountMenuProvider>
 					<MenuAppBar />
-					<Seperator>
-						<Routes>
-							<Route path="/">
-								<Route
-									index
-									element={
-										<PrivateRoute>
-											<NotesCategoryProvider>
-												<HomePage fallback={<Loading />} />
-											</NotesCategoryProvider>
-										</PrivateRoute>
-									}
-								/>
-								<Route
-									path="signup"
-									element={<SignUpPage fallback={<Loading />} />}
-								/>
-								<Route
-									path="login"
-									element={<SignInPage fallback={<Loading />} />}
-								/>
-							</Route>
-						</Routes>
-					</Seperator>
+					<Routes>
+						<Route path="/">
+							<Route
+								index
+								element={
+									<PrivateRoute>
+										<NotesCategoryProvider>
+											<HomePage fallback={<Loading />} />
+										</NotesCategoryProvider>
+									</PrivateRoute>
+								}
+							/>
+							<Route
+								path="signup"
+								element={<SignUpPage fallback={<Loading />} />}
+							/>
+							<Route
+								path="login"
+								element={<SignInPage fallback={<Loading />} />}
+							/>
+						</Route>
+					</Routes>
 				</AccountMenuProvider>
 			</DrawerProvider>
 		</ThemeProvider>

diff --git a/src/components/MenuAppBar.tsx b/src/components/MenuAppBar.tsx
@@ -15,7 +15,7 @@ function MenuAppBar() {
 	const { isDrawerOpen, setDrawerIsOpen } = useDrawer();
 
 	return (
-		<Box sx={{ flexGrow: 1 }}>
+		<Box sx={{ flexGrow: 1, paddingBottom: "70px" }}>
 			<AppBar position="fixed">
 				<Toolbar>
 					{user && (

diff --git a/src/components/Seperator.tsx b/src/components/Seperator.tsx
@@ -1,5 +1,5 @@
 function Seperator(props: { children: React.ReactNode }) {
-  return <div style={{ marginTop: "70px" }}>{props.children}</div>;
+	return <div style={{ paddingTop: "70px" }}>{props.children}</div>;
 }
 
 export default Seperator;
diff --git a/src/index.css b/src/index.css
@@ -1,20 +1,25 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap");
 
 body {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	height: 100vh;
+}
+
+#root {
+	height: 100vh;
 }
 
 .container {
-  display: grid;
-  place-items: center;
-  width: 100%;
-  height: 100vh;
-  background: #000000;
+	display: grid;
+	place-items: center;
+	width: 100%;
+	height: 100vh;
+	background: #000000;
 }
 
 .animation-container {
-  background: #000000;
-  max-width: 512px;
+	background: #000000;
+	max-width: 512px;
 }
diff --git a/src/pages/SignIn.tsx b/src/pages/SignIn.tsx
@@ -128,7 +128,7 @@ export default function SignIn() {
 			<Container component="main" maxWidth="xs">
 				<Box
 					sx={{
-						marginTop: 3,
+						paddingTop: 3,
 						display: "flex",
 						flexDirection: "column",
 						alignItems: "center",
@@ -203,7 +203,7 @@ export default function SignIn() {
 								Continue With Google
 							</Button>
 						)}
-						<Grid container>
+						<Grid container sx={{ mt: 2 }}>
 							<Grid item xs>
 								<Link
 									href="#"

diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx
@@ -271,7 +271,7 @@ export default function SignUp() {
 							</Button>
 						)}
 						<Grid container>
-							<Grid item>
+							<Grid item sx={{ mt: 2 }}>
 								<Link href="/login" variant="body2">
 									{"Already have an account? Sign In"}
 								</Link>