Merge pull request #16 from Zagrios/feature/close-button-settings/5

feature/add-close-button-settings
This commit is contained in:
MathieuG-P
2022-10-17 15:45:17 +02:00
committed by GitHub
3 changed files with 21 additions and 2 deletions
@@ -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}/>
}
@@ -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>
)
}
@@ -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}/>