From 6d2e3412d4c05126a17240167eed9e063893ef54 Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Mon, 17 Oct 2022 15:43:36 +0200
Subject: [PATCH] add close button in settings page

---
 src/renderer/components/svgs/bsm-icon.component.tsx    |  4 +++-
 .../components/svgs/icons/close-icon.component.tsx     |  9 +++++++++
 src/renderer/pages/settings-page.component.tsx         | 10 +++++++++-
 3 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 src/renderer/components/svgs/icons/close-icon.component.tsx

diff --git a/src/renderer/components/svgs/bsm-icon.component.tsx b/src/renderer/components/svgs/bsm-icon.component.tsx
index 634d43b6..81ee0bbc 100644
--- a/src/renderer/components/svgs/bsm-icon.component.tsx
+++ b/src/renderer/components/svgs/bsm-icon.component.tsx
@@ -23,10 +23,11 @@ import { SearchIcon } from "./icons/search-icon.component";
 import { CheckIcon } from "./icons/check-icon.component";
 import { ThreeDotsIcon } from "./icons/three-dots-icon.component";
 import { GitHubIcon } from "./icons/github-icon.component";
+import { CloseIcon } from "./icons/close-icon.component";
 
 export type BsmIconType = (
    "settings"|"trash"|"favorite"|"folder"|"bsNote"|"check"|"three-dots"|
-   "terminal"|"desktop"|"oculus"|"add"|"cross"|"task"|"github"|
+   "terminal"|"desktop"|"oculus"|"add"|"cross"|"task"|"github"|"close"|
    "copy"|"steam"|"edit"|"export"|"patreon"|"search"|
    "fr-FR-flag"|"es-ES-flag"|"en-US-flag"|"en-EN-flag"
 );
@@ -58,6 +59,7 @@ export const BsmIcon = memo(({className, icon, style}: {className?: string, icon
         if(icon === "check"){ return <CheckIcon className={className} style={style}/> }
         if(icon === "three-dots"){ return <ThreeDotsIcon className={className} style={style}/> }
         if(icon === "github"){ return <GitHubIcon className={className} style={style}/> }
+        if(icon === "close"){ return <CloseIcon className={className} style={style}/> }
         return <TrashIcon className={className} style={style}/>
     }
 
diff --git a/src/renderer/components/svgs/icons/close-icon.component.tsx b/src/renderer/components/svgs/icons/close-icon.component.tsx
new file mode 100644
index 00000000..9e6bcb13
--- /dev/null
+++ b/src/renderer/components/svgs/icons/close-icon.component.tsx
@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react'
+
+export function CloseIcon(props: {className?: string, style?: CSSProperties}) {
+  return (
+    <svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
+        <path fill="currentColor" d="m20 22.208-8.417 8.417q-.458.458-1.104.458-.646 0-1.104-.458-.458-.458-.458-1.104 0-.646.458-1.104L17.792 20l-8.417-8.417q-.458-.458-.458-1.104 0-.646.458-1.104.458-.458 1.104-.458.646 0 1.104.458L20 17.792l8.417-8.417q.458-.458 1.104-.458.646 0 1.104.458.458.458.458 1.104 0 .646-.458 1.104L22.208 20l8.417 8.417q.458.458.458 1.104 0 .646-.458 1.104-.458.458-1.104.458-.646 0-1.104-.458Z"/>
+    </svg>
+  )
+}
diff --git a/src/renderer/pages/settings-page.component.tsx b/src/renderer/pages/settings-page.component.tsx
index 5a5ce15f..d7d22494 100644
--- a/src/renderer/pages/settings-page.component.tsx
+++ b/src/renderer/pages/settings-page.component.tsx
@@ -18,6 +18,7 @@ import { ProgressBarService } from "renderer/services/progress-bar.service";
 import { ThemeService } from "renderer/services/theme.service";
 import { SupportersView } from "renderer/components/settings/supporters-view/supporters-view.component";
 import { LinkOpenerService } from "renderer/services/link-opener.service";
+import { useNavigate } from "react-router-dom";
 
 export function SettingsPage() {
 
@@ -50,6 +51,7 @@ export function SettingsPage() {
   const [installationFolder, setInstallationFolder] = useState(null);
   const [showSupporters, setShowSupporters] = useState(false);
   const [appVersion, setAppVersion] = useState("");
+  const nav = useNavigate();
 
   useEffect(() => {
     loadInstallationFolder();
@@ -129,7 +131,13 @@ export function SettingsPage() {
     return (
         <div className="w-full h-full flex justify-center overflow-y-scroll scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900 text-gray-800 dark:text-gray-200">
 
-            <div className="max-w-2xl w-full mt-10">
+            
+
+            <div className="max-w-2xl w-full">
+
+                <div className="inline-block sticky top-8 left-[calc(100%)] translate-x-12 grow-0 w-9 h-9">
+                    <BsmButton className="inline-block grow-0 bg-transparent sticky h-full w-full top-20 right-20 !m-0 rounded-full p-1" onClick={() => nav(-1)} icon="close" withBar={false}/>
+                </div>
 
                 <SettingContainer title="pages.settings.steam.title" description="pages.settings.steam.description">
                     <BsmButton onClick={deleteSteamSession} className="w-fit px-3 py-[2px] text-white rounded-md" withBar={false} text="pages.settings.steam.logout" typeColor="error" disabled={!sessionExist}/>