Merge pull request #62 from JimTheCat/CU-8696pcytb_Create-settings_Patryk-Kosiski

Cu 8696pcytb create settings patryk kosiski

Author: JimTheCat

frontend/package-lock.json

@@ -16,7 +16,7 @@
     "@mantine/form": "^7.14.1",
     "@mantine/hooks": "^7.14.1",
     "@mantine/tiptap": "^7.14.1",
-    "@tabler/icons-react": "^3.22.0",
+    "@tabler/icons-react": "^3.23.0",
     "@tiptap/extension-highlight": "^2.10.0",
     "@tiptap/extension-link": "^2.10.0",
     "@tiptap/extension-placeholder": "^2.10.2",

frontend/package.json

@@ -0,0 +1,24 @@
+import {ActionIcon, Box, Stack, Text} from "@mantine/core";
+import {IconX} from "@tabler/icons-react";
+
+export const Escape = () => {
+  return (
+    <Box pos={"absolute"} top={20} right={30}>
+      <Stack align={"center"} justify={"center"} gap={2}>
+        <ActionIcon
+          p={"xs"}
+          variant={"outline"}
+          size={"xl"}
+          aria-label={"Close"}
+          color={"gray"}
+          radius={"xl"}
+          // Back to previous page
+          onClick={() => window.history.back()}
+        >
+          <IconX stroke={1}/>
+        </ActionIcon>
+        <Text>Esc</Text>
+      </Stack>
+    </Box>
+  );
+}

frontend/src/Components/Escape/Escape.tsx

@@ -0,0 +1 @@
+export * from './Escape';

frontend/src/Components/Escape/index.tsx

@@ -68,7 +68,7 @@ export const Navbar = () => {
               <MenuButton icon={<IconMail/>} text={"Wiadomości"} href={"placeholder6"}/>
             </Box>
             <Box>
-              <MenuButton icon={<IconSettings/>} text={"Ustawienia"}/>
+              <MenuButton icon={<IconSettings/>} text={"Ustawienia"} href={"/settings"}/>
               <MenuButton icon={<IconLogout/>} text={"Wyloguj się"}/>
             </Box>
           </Stack>

frontend/src/Components/Navbar/Navbar.tsx

@@ -8,20 +8,23 @@ import {Recovery} from "../Recovery";
 import {Profile} from "../Profile";
 import {Search} from "../Search";
 import {Post} from "../Post";
+import {Settings} from "../Settings";
 
 export const Root = () => {
-  return(
+  return (
     <Routes>
-      <Route path="/" element={ <Login/> }/>
-      <Route path="/register" element={ <Register/>} />
-      <Route path="/passwordrecovery" element={ <Recovery/>} />
+      <Route path="/" element={<Login/>}/>
+      <Route path="/register" element={<Register/>}/>
+      <Route path="/passwordrecovery" element={<Recovery/>}/>
       <Route element={<Layout/>}>
-        <Route path="/mainpage" element={ <MainPage/> }/>
+        <Route path="/mainpage" element={<MainPage/>}/>
         <Route path="/search" element={<Search/>}/>
         <Route path="/profile/:userTag" element={<Profile/>}/>
         <Route path="/createpost" element={<Post/>}/>
       </Route>
-      <Route path="*" element={ <NotFound/> }/>
+      <Route path="/settings" element={<Settings/>}/>
+
+      <Route path="*" element={<NotFound/>}/>
     </Routes>
   );
 }

frontend/src/Pages/Root/Root.tsx

@@ -0,0 +1,8 @@
+export const About = () => {
+  return (
+    <div>
+      {/* About */}
+      <p>About content goes here</p>
+    </div>
+  );
+}

frontend/src/Pages/Settings/Menu/About/About.tsx

@@ -0,0 +1 @@
+export * from './About';

frontend/src/Pages/Settings/Menu/About/index.tsx

@@ -0,0 +1,8 @@
+export const Accessibility = () => {
+  return (
+    <div>
+      {/* Accessibility */}
+      <p>Accessibility content goes here</p>
+    </div>
+  );
+}

frontend/src/Pages/Settings/Menu/Accessibility/Accessibility.tsx

@@ -0,0 +1 @@
+export * from './Accessibility';