+ {isSizeSmall && isLTR && toggleSidebarButton}
+
{
{isDarkMode ? : }
+
+
+
+
+
+ {isSizeSmall && !isLTR && toggleSidebarButton}
diff --git a/src/Components/Static/Settings/Item.tsx b/src/Components/Static/Settings/Item.tsx
new file mode 100644
index 00000000..6eb212cd
--- /dev/null
+++ b/src/Components/Static/Settings/Item.tsx
@@ -0,0 +1,137 @@
+// React Imports
+import React, { FC } from "react";
+
+// Material UI Imports
+import {
+ makeStyles,
+ MenuItem,
+ MenuItemProps,
+ Select,
+ Switch,
+ SwitchProps,
+ TextField,
+ TextFieldProps,
+ Typography,
+ useMediaQuery,
+ useTheme,
+} from "@material-ui/core";
+
+const useStyles = makeStyles((theme) => ({
+ item: {
+ display: "flex",
+ alignItems: "center",
+ width: "100%",
+ padding: theme.spacing(0.75, 6.5),
+
+ [theme.breakpoints.only("xs")]: {
+ padding: theme.spacing(0.5, 3, 0.75, 6),
+ },
+ },
+ label: {
+ flexGrow: 1,
+ },
+}));
+
+interface ItemProps {
+ label: string;
+ action: JSX.Element;
+}
+
+type ExtendItem = Omit
;
+
+const Item: FC = (props) => {
+ const classes = useStyles();
+ const theme = useTheme();
+ const isSizeXS = useMediaQuery(theme.breakpoints.only("xs"));
+
+ return (
+
+
+ {props.label}
+
+ {props.action}
+
+ );
+};
+
+type SwitchItemProps = ExtendItem & {
+ checked: boolean;
+ onChange: () => void;
+ color?: SwitchProps["color"];
+};
+
+export const SwitchItem: FC = (props) => {
+ const theme = useTheme();
+ const isSizeXS = useMediaQuery(theme.breakpoints.only("xs"));
+
+ return (
+ - props.onChange(e.target.value as T)}
+ >
+ {props.values.map((val: T, i: number) => (
+
+ ))}
+
+ }
+ />
+);
+
+type InputItemProps = ExtendItem & {
+ value: T;
+ onChange: (value: T) => void;
+ type?: TextFieldProps["type"];
+};
+
+export const InputItem = (
+ props: InputItemProps
+): JSX.Element => {
+ return (
+
- props.onChange(e.target.value as T)}
+ type={props.type}
+ />
+ }
+ />
+ );
+};
+
+export default Item;
diff --git a/src/Components/Static/Settings/Section.tsx b/src/Components/Static/Settings/Section.tsx
new file mode 100644
index 00000000..0f4c0ec5
--- /dev/null
+++ b/src/Components/Static/Settings/Section.tsx
@@ -0,0 +1,57 @@
+// React Imports
+import React, { FC } from "react";
+import clsx from "clsx";
+import HorizontalDivider from "../../Atomic/Divider/Horizontal";
+
+// Material UI Imports
+import { makeStyles, Typography } from "@material-ui/core";
+
+const useStyles = makeStyles((theme) => ({
+ section: {
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center",
+ alignItems: "center",
+ width: "100%",
+ borderTop: `2px solid ${theme.palette.text.disabled}`,
+ margin: theme.spacing(2, 0),
+ backgroundColor:
+ theme.palette.type === "dark"
+ ? theme.palette.grey[800]
+ : theme.palette.grey[200],
+ },
+ title: {
+ width: "100%",
+ fontWeight: theme.typography.fontWeightMedium,
+ padding: theme.spacing(2, 1),
+
+ [theme.breakpoints.only("xs")]: {
+ padding: theme.spacing(1),
+ },
+ },
+}));
+
+interface SectionProps {
+ title: string;
+ className?: string;
+}
+
+const Section: FC = (props) => {
+ const classes = useStyles();
+
+ return (
+
+
+ {props.title}
+
+
+ {props.children}
+
+ );
+};
+
+export default Section;
diff --git a/src/Components/Static/Settings/Sections/Display.tsx b/src/Components/Static/Settings/Sections/Display.tsx
new file mode 100644
index 00000000..26ae2789
--- /dev/null
+++ b/src/Components/Static/Settings/Sections/Display.tsx
@@ -0,0 +1,90 @@
+// React Imports
+import React, { FC } from "react";
+import { useLocation } from "react-router-dom";
+import { useTitle } from "../../../../Context/HeadContext";
+import { generateSearch } from "../../../../Utils/funcs";
+import Section from "../Section";
+import Subsection from "../Subsection";
+import Item, { SelectInput, SwitchItem } from "../Item";
+import StyledLink from "../../../Atomic/StyledLink";
+
+// Redux Imports
+import { useSelector } from "react-redux";
+import {
+ toggleDarkMode,
+ getSpacing,
+ changeSpacing,
+ getDirection,
+ changeDirection,
+} from "../../../../Redux";
+import {
+ DEFAULT_DIRECTION,
+ DEFAULT_SPACING,
+ DIRECTIONS,
+ SPACINGS,
+} from "../../../../Redux/display.slice";
+import { useAppDispatch } from "../../../../Store";
+
+// Material UI Imports
+import { useTheme } from "@material-ui/core";
+import { Computer, SettingsBrightness } from "@material-ui/icons";
+
+const Display: FC = () => {
+ const dispatch = useAppDispatch();
+ const location = useLocation();
+ const title = useTitle();
+ const theme = useTheme();
+ const isDarkMode = theme.palette.type === "dark";
+
+ const spacing = useSelector(getSpacing);
+ const direction = useSelector(getDirection);
+
+ return (
+
+ }>
+ dispatch(toggleDarkMode())}
+ />
+ -
+ Colors Page
+
+ }
+ />
+
+ }>
+ dispatch(changeSpacing(val))}
+ />
+ dispatch(changeDirection(val))}
+ />
+
+
+ );
+};
+
+export default Display;
diff --git a/src/Components/Static/Settings/Sections/Profile/LoggedIn.tsx b/src/Components/Static/Settings/Sections/Profile/LoggedIn.tsx
new file mode 100644
index 00000000..b293703d
--- /dev/null
+++ b/src/Components/Static/Settings/Sections/Profile/LoggedIn.tsx
@@ -0,0 +1,290 @@
+// React Imports
+import React, { FC, useState } from "react";
+import { getExtension } from "mime";
+import { useClosableSnackbar } from "../../../../../Hooks";
+import { User } from "../../../../../Context/UserContext";
+
+// Firebase Imports
+import "firebase/auth";
+import "firebase/storage";
+import { useAuth, useStorage } from "../../../../../Utils/Config/firebase";
+
+// Material UI Imports
+import {
+ Avatar,
+ Button,
+ CircularProgress,
+ InputAdornment,
+ makeStyles,
+ TextField,
+ Tooltip,
+ useMediaQuery,
+ useTheme,
+} from "@material-ui/core";
+import { Check, CloudUpload } from "@material-ui/icons";
+import clsx from "clsx";
+
+const useStyles = makeStyles((theme) => ({
+ container: {
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ width: "100%",
+ padding: theme.spacing(2),
+ },
+ info: {
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ margin: theme.spacing(0, 3, 2),
+
+ [theme.breakpoints.down("sm")]: {
+ flexDirection: "column",
+ },
+ },
+ input: {
+ margin: theme.spacing(1, 1.5),
+
+ [theme.breakpoints.down("sm")]: {
+ width: "100%",
+ margin: theme.spacing(1, 0),
+ },
+ },
+ saveIcon: {
+ cursor: "pointer",
+ },
+ savingSpinner: {
+ color: theme.palette.text.primary,
+ },
+ emailInput: {
+ cursor: "not-allowed",
+ },
+ logout: {
+ borderColor: theme.palette.error.main,
+ color: theme.palette.error.main,
+ marginLeft: "auto",
+
+ [theme.breakpoints.down("sm")]: {
+ marginLeft: 0,
+ },
+ },
+}));
+
+interface LoggedInProps {
+ user: User;
+}
+
+const LoggedIn: FC = (props) => {
+ const classes = useStyles();
+ const theme = useTheme();
+ const isSizeXS = useMediaQuery(theme.breakpoints.only("xs"));
+
+ return (
+
+ );
+};
+
+const useProfilePictureStyles = makeStyles((theme) => ({
+ container: {
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ height: 56,
+ width: 56,
+ margin: theme.spacing(1, 1.5),
+ cursor: "pointer",
+ position: "relative",
+ },
+ fileInput: {
+ position: "absolute",
+ left: "0px",
+ top: "0px",
+ opacity: 0,
+ width: "100%",
+ height: "100%",
+ },
+ avatar: {
+ width: "100%",
+ height: "100%",
+ },
+ avatarDimmed: {
+ opacity: 0.5,
+ },
+ spinner: {
+ position: "absolute",
+ color: theme.palette.text.primary,
+ zIndex: 1000,
+ },
+}));
+
+const ProfilePicture: FC = (props) => {
+ const classes = useProfilePictureStyles();
+ const theme = useTheme();
+ const storage = useStorage();
+ const { enqueueSnackbar } = useClosableSnackbar();
+ const [uploading, setUploading] = useState(false);
+
+ const onUpload = async (files: FileList | null) => {
+ if (files === null) return;
+
+ const file = files[0];
+ if (!file) return;
+
+ try {
+ setUploading(true);
+ const size = file.size / 1000 / 1000; // Size in MB
+ if (size > 5) {
+ const formattedSize = size.toFixed(1);
+ throw new Error(
+ `File size must be less than 5 MB (Uploaded file size was ${formattedSize} MB)`
+ );
+ }
+ const ext = getExtension(file.type);
+ const ref = storage
+ .ref()
+ .child(`users/${props.user.id}/profile_picture${ext ? `.${ext}` : ""}`);
+ const upload = await ref.put(file);
+ const url = await upload.ref.getDownloadURL();
+ await props.user.updatePicture(url);
+ enqueueSnackbar("Uploaded New Profile Picture", {
+ variant: "success",
+ });
+ } catch (e: any) {
+ const message = typeof e === "string" ? e : e.message;
+ enqueueSnackbar(message || "An error occurred. Please try again.", {
+ variant: "error",
+ });
+ } finally {
+ setUploading(false);
+ }
+ };
+
+ return (
+
+ );
+};
+
+const NameField: FC = (props) => {
+ const classes = useStyles();
+ const theme = useTheme();
+ const isSizeXS = useMediaQuery(theme.breakpoints.only("xs"));
+ const { enqueueSnackbar } = useClosableSnackbar();
+ const [name, setName] = useState(props.user.name);
+ const [isNameSaving, setNameSaving] = useState(false);
+
+ const onNameSave = async () => {
+ setNameSaving(true);
+ try {
+ await props.user.updateName(name);
+ enqueueSnackbar("Saved Name", {
+ variant: "success",
+ });
+ } catch (e: any) {
+ const message = typeof e === "string" ? e : e.message;
+ enqueueSnackbar(message || "An error occurred. Please try again.", {
+ variant: "error",
+ });
+ } finally {
+ setNameSaving(false);
+ }
+ };
+
+ return (
+ setName(e.target.value)}
+ name="name"
+ type="text"
+ label="Name"
+ variant="outlined"
+ size={isSizeXS ? "small" : "medium"}
+ InputProps={{
+ endAdornment: (
+
+ {name === props.user.name ? (
+
+
+
+ ) : isNameSaving ? (
+
+ ) : (
+
+
+
+ )}
+
+ ),
+ }}
+ className={classes.input}
+ />
+ );
+};
+
+const SignOutButton: FC = () => {
+ const classes = useStyles();
+ const auth = useAuth();
+ const { enqueueSnackbar } = useClosableSnackbar();
+
+ return (
+
+ );
+};
+
+export default LoggedIn;
diff --git a/src/Components/Static/Settings/Sections/Profile/LoggedOut.tsx b/src/Components/Static/Settings/Sections/Profile/LoggedOut.tsx
new file mode 100644
index 00000000..e646d687
--- /dev/null
+++ b/src/Components/Static/Settings/Sections/Profile/LoggedOut.tsx
@@ -0,0 +1,60 @@
+// React Imports
+import React, { FC } from "react";
+import { useClosableSnackbar } from "../../../../../Hooks";
+
+// Firebase Imports
+import "firebase/auth";
+import firebase, { useAuth } from "../../../../../Utils/Config/firebase";
+import { StyledFirebaseAuth } from "react-firebaseui";
+
+// Material UI Imports
+import { makeStyles, Typography } from "@material-ui/core";
+
+const useStyles = makeStyles((theme) => ({
+ container: {
+ margin: theme.spacing(2),
+ },
+}));
+
+const NotLoggedIn: FC = () => {
+ const classes = useStyles();
+ const auth = useAuth();
+ const { enqueueSnackbar } = useClosableSnackbar();
+
+ return (
+
+ You are not signed in.
+
+
+ );
+};
+
+export default NotLoggedIn;
diff --git a/src/Components/Static/Settings/Sections/Profile/index.tsx b/src/Components/Static/Settings/Sections/Profile/index.tsx
new file mode 100644
index 00000000..8c6ff62a
--- /dev/null
+++ b/src/Components/Static/Settings/Sections/Profile/index.tsx
@@ -0,0 +1,20 @@
+// React Imports
+import React, { FC } from "react";
+import LoggedIn from "./LoggedIn";
+import NotLoggedIn from "./LoggedOut";
+import Section from "../../Section";
+import { useUser } from "../../../../../Context/UserContext";
+import HorizontalDivider from "../../../../Atomic/Divider/Horizontal";
+
+const Profile: FC = () => {
+ const user = useUser();
+
+ return (
+
+ );
+};
+
+export default Profile;
diff --git a/src/Components/Static/Settings/Subsection.tsx b/src/Components/Static/Settings/Subsection.tsx
new file mode 100644
index 00000000..2f82b3cf
--- /dev/null
+++ b/src/Components/Static/Settings/Subsection.tsx
@@ -0,0 +1,72 @@
+// React Imports
+import React, { cloneElement, FC } from "react";
+import clsx from "clsx";
+import HorizontalDivider from "../../Atomic/Divider/Horizontal";
+
+// Material UI Imports
+import {
+ makeStyles,
+ Typography,
+ useMediaQuery,
+ useTheme,
+} from "@material-ui/core";
+
+const useStyles = makeStyles((theme) => ({
+ subsection: {
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center",
+ alignItems: "center",
+ width: "100%",
+ },
+ titleContainer: {
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ width: "100%",
+ padding: theme.spacing(2, 1, 0.5),
+ },
+ icon: {
+ marginLeft: theme.spacing(1),
+ },
+ title: {
+ flexGrow: 1,
+ marginLeft: theme.spacing(1.5),
+ },
+}));
+
+interface SubsectionProps {
+ title: string;
+ icon: JSX.Element;
+ className?: string;
+}
+
+const Subsection: FC = (props) => {
+ const classes = useStyles();
+ const theme = useTheme();
+ const isSizeXS = useMediaQuery(theme.breakpoints.only("xs"));
+
+ const icon = cloneElement(props.icon, {
+ className: classes.icon,
+ fontSize: isSizeXS ? "small" : "default",
+ });
+
+ return (
+
+
+ {icon}
+
+ {props.title}
+
+
+ {props.children}
+
+