merged keybindings and savefile into options, css

src/App.tsx

@@ -5,9 +5,9 @@ import { HashRouter, Route, Switch } from "react-router-dom";
 import Notes from "./dom-components/Notes";
 import MainPage from "./dom-components/MainPage";
 import Guide from "./dom-components/Guide";
-import Keybinding from "./dom-components/Keybinding";
+import Options from "./dom-components/Options";
 import { useStore } from "./store";
-import Savefile from "./dom-components/Savefile";
+
 
 const App = () => {
   const setKeybindings = useStore((state) => state.setKeybindings);
@@ -24,8 +24,7 @@ const App = () => {
         <Route path={"/notes"} exact component={Notes} />
         <Route path={"/game"} exact component={Game} />
         <Route path={"/guide"} exact component={Guide} />
-        <Route path={"/keybinding"} exact component={Keybinding} />
+        <Route path={"/options"} exact component={Options} />
-        <Route path={"/savefile"} exact component={Savefile} />
       </Switch>
     </HashRouter>
   );

src/dom-components/Header.tsx

@@ -10,8 +10,7 @@ const Header = () => {
       <Link to="/game">start</Link>
       <Link to="/guide">guide</Link>
       <a href="https://discord.com/invite/W22Ga2R">discord</a>
-      <Link to="/keybinding">keybinding</Link>
+      <Link to="/options">options</Link>
-      <Link to="/savefile">savefile</Link>
     </div>
   );
 };

src/dom-components/Keybinding.tsx

@@ -2,7 +2,6 @@ import React, { useCallback, useEffect } from "react";
 import { formatKey } from "../helpers/keybinding-helpers";
 import "../static/css/keybinding.css";
 import { useStore } from "../store";
-import Header from "./Header";
 
 const Keybinding = () => {
   const setKeybindings = useStore((state) => state.setKeybindings);
@@ -73,8 +72,6 @@ const Keybinding = () => {
   }, [setKeybindings]);
   return (
     <>
-      <Header />
-      <br />
       <p className="keybinding-note">
         This is the keybindings page. To change a keybinding, just click on it
         and press the button you wish to bind it to after. In order for this to

src/dom-components/Options.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import Header from "./Header";
+import Keybinding from "./Keybinding";
+import Savefile from "./Savefile";
+
+const Options = () => {
+  return (
+    <>
+      <Header />
+      <Keybinding />
+      <hr />
+      <Savefile />
+    </>
+  );
+};
+
+export default Options;

src/dom-components/Savefile.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
 import "../static/css/savefile.css";
-import Header from "./Header";
 
 const Savefile = () => {
   const [textAreaValue, setTextAreaValue] = useState("");
@@ -20,7 +19,6 @@ const Savefile = () => {
 
   return (
     <>
-      <Header />
       <div className="savefile-wrapper">
         <p className="savefile-note">
           If you've saved the game during the playthrough, the text provided in

src/static/css/savefile.css

@@ -1,13 +1,17 @@
 .savefile-wrapper {
-  display: block;
+    display: block;
-  margin: 0 auto;
+    margin: 0 auto;
-  text-align: center;
+    text-align: center;
+    padding-left: 5em;
+    padding-right: 5em;
 }
 
 .savefile-note {
-  text-align: center;
+    text-align: center;
-  font-size: 1.7rem;
+    font-size: 1.7rem;
-  color: white;
+    color: white;
-  padding-left: 5em;
-  padding-right: 5em;
 }
+
+textarea {
+    width:70%;
+}