From bfa815aba083276e96ecb89388b50c6d1b3080d8 Mon Sep 17 00:00:00 2001
From: lelenium <lelenium@protonmail.com>
Date: Fri, 9 Apr 2021 13:56:04 +0200
Subject: [PATCH] merged keybindings and savefile into options, css

---
 src/App.tsx                       |  7 +++----
 src/dom-components/Header.tsx     |  3 +--
 src/dom-components/Keybinding.tsx |  3 ---
 src/dom-components/Options.tsx    | 17 +++++++++++++++++
 src/dom-components/Savefile.tsx   |  2 --
 src/static/css/savefile.css       | 20 ++++++++++++--------
 6 files changed, 33 insertions(+), 19 deletions(-)
 create mode 100644 src/dom-components/Options.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 45ea1f8..2d73d48 100644
--- a/src/App.tsx
+++ b/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={"/savefile"} exact component={Savefile} />
+        <Route path={"/options"} exact component={Options} />
       </Switch>
     </HashRouter>
   );
diff --git a/src/dom-components/Header.tsx b/src/dom-components/Header.tsx
index 80c5334..4cf6564 100644
--- a/src/dom-components/Header.tsx
+++ b/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="/savefile">savefile</Link>
+      <Link to="/options">options</Link>
     </div>
   );
 };
diff --git a/src/dom-components/Keybinding.tsx b/src/dom-components/Keybinding.tsx
index d558bee..bdbec1d 100644
--- a/src/dom-components/Keybinding.tsx
+++ b/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
diff --git a/src/dom-components/Options.tsx b/src/dom-components/Options.tsx
new file mode 100644
index 0000000..4019690
--- /dev/null
+++ b/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;
diff --git a/src/dom-components/Savefile.tsx b/src/dom-components/Savefile.tsx
index c3ca4c5..4037473 100644
--- a/src/dom-components/Savefile.tsx
+++ b/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
diff --git a/src/static/css/savefile.css b/src/static/css/savefile.css
index ffbac74..3411a5c 100644
--- a/src/static/css/savefile.css
+++ b/src/static/css/savefile.css
@@ -1,13 +1,17 @@
 .savefile-wrapper {
-  display: block;
-  margin: 0 auto;
-  text-align: center;
+    display: block;
+    margin: 0 auto;
+    text-align: center;
+    padding-left: 5em;
+    padding-right: 5em;
 }
 
 .savefile-note {
-  text-align: center;
-  font-size: 1.7rem;
-  color: white;
-  padding-left: 5em;
-  padding-right: 5em;
+    text-align: center;
+    font-size: 1.7rem;
+    color: white;
 }
+
+textarea {
+    width:70%;
+}
\ No newline at end of file