From 571832047ac0be393cb5bcdc90010ed49dbbbba5 Mon Sep 17 00:00:00 2001
From: "m::r" <mainstreamer@outlook.com>
Date: Mon, 12 Jan 2026 01:15:41 +0000
Subject: [PATCH] feat(profile): reworked - moved to main screen, added quit
 button instead on gae screen

---
 src/components/flags/FlagsApi.js | 13 +++++++------
 src/components/flags/Profile.js  | 24 +++++++++++++++++++++++-
 src/components/home/Home.js      | 29 +++++++++++++++++++++--------
 3 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/src/components/flags/FlagsApi.js b/src/components/flags/FlagsApi.js
index 3b769d6..056a9b7 100644
--- a/src/components/flags/FlagsApi.js
+++ b/src/components/flags/FlagsApi.js
@@ -320,11 +320,11 @@ class FlagsApi extends React.Component {
                 
             </Container>
                 <div style={{'display' : 'flex', 'margin-top' : '25px', 'justify-content' : 'center'}}>
+                    <Button variant="outline-secondary" onClick={() => this.exitGame()}>
+                        QUIT
+                    </Button>&nbsp;
                     <Button variant="outline-secondary" onClick={() => this.restartGame()}>
                         RESTART
-                    </Button>&nbsp;
-                    <Button variant="outline-secondary" onClick={() => this.redirectToProfile()}>
-                        PROFILE
                     </Button>
                 </div>
         </div>
@@ -333,12 +333,13 @@ class FlagsApi extends React.Component {
     redirect = () => {
         this.gameOver();
         this.props.dispatch({type : 'reset'});
-        this.props.history.push('/main');
+        this.props.history.push('/');
     }
 
-    redirectToProfile = () => {
+    exitGame = () => {
         this.gameOver();
-        this.props.history.push('/profile');
+        this.props.dispatch({type : 'reset'});
+        this.props.history.push('/');
     }
 }
 
diff --git a/src/components/flags/Profile.js b/src/components/flags/Profile.js
index 4d825bc..d6e21d2 100644
--- a/src/components/flags/Profile.js
+++ b/src/components/flags/Profile.js
@@ -8,8 +8,10 @@ import ListGroupItem from "react-bootstrap/ListGroupItem";
 import Tab from "react-bootstrap/Tab";
 import Tabs from "react-bootstrap/Tabs";
 import Alert from "react-bootstrap/Alert";
+import { useHistory } from 'react-router-dom';
 
 const Profile = () => {
+    const history = useHistory();
     const [key, setKey] = useState('learn');
     const [user, setUser] = useState(null);
     const [statsData, setStatsData] = useState([]);
@@ -90,10 +92,30 @@ const Profile = () => {
         </Table>
     );
 
+    const handleClose = () => {
+        history.push('/');
+    };
+
     return (
         <div style={{ minHeight: '100vh', margin: '0px', padding: '0px' }}>
             <Card>
-                <div style={{ display: 'flex', alignItems: 'center', padding: '1rem' }}>
+                <div style={{ display: 'flex', alignItems: 'center', padding: '1rem', position: 'relative' }}>
+                    <button
+                        onClick={handleClose}
+                        style={{
+                            position: 'absolute',
+                            top: '10px',
+                            right: '10px',
+                            background: 'none',
+                            border: 'none',
+                            fontSize: '1.5rem',
+                            cursor: 'pointer',
+                            opacity: 0.5
+                        }}
+                        aria-label="Close"
+                    >
+                        &times;
+                    </button>
                     <Card.Img
                         variant="left"
                         src={user.telegramPhotoUrl}
diff --git a/src/components/home/Home.js b/src/components/home/Home.js
index 04076c1..2c0e823 100644
--- a/src/components/home/Home.js
+++ b/src/components/home/Home.js
@@ -65,19 +65,32 @@ const Home = () => {
                             <h1><span role="img" aria-label="checkered flag">🏁</span> Flags Quiz</h1>
                             <p>Test your geography knowledge and compete for the top spot!</p>
                             {isLoggedIn ? (
-                                <Button
-                                    variant="success"
-                                    size="lg"
-                                    onClick={handlePlay}
-                                >
-                                    Play
-                                </Button>
+                                <>
+                                    <Button
+                                        variant="outline-secondary"
+                                        size="lg"
+                                        onClick={handlePlay}
+                                        style={{ textTransform: 'uppercase' }}
+                                    >
+                                        Play
+                                    </Button>
+                                    {' '}
+                                    <Button
+                                        variant="outline-secondary"
+                                        size="lg"
+                                        onClick={() => history.push('/profile')}
+                                        style={{ textTransform: 'uppercase' }}
+                                    >
+                                        Profile
+                                    </Button>
+                                </>
                             ) : (
                                 <Button
-                                    variant="success"
+                                    variant="outline-secondary"
                                     size="lg"
                                     onClick={oauthLogin}
                                     disabled={isLoading}
+                                    style={{ textTransform: 'uppercase' }}
                                 >
                                     {isLoading ? 'Logging in...' : 'Login to Play'}
                                 </Button>