From 96db43215d705a9d477a20664dd2ddb89512fb5c Mon Sep 17 00:00:00 2001
From: martin-mfg <2026226+martin-mfg@users.noreply.github.com>
Date: Tue, 9 Dec 2025 20:39:03 +0100
Subject: [PATCH] rounder buttons, step 1 layout

---
 .../frontend/src/components/Generic/Button.js |  2 +-
 .../frontend/src/pages/Home/stages/Login.js   | 34 ++++++++++---------
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/frontend/frontend/src/components/Generic/Button.js b/frontend/frontend/src/components/Generic/Button.js
index d6f18202..f245c95d 100644
--- a/frontend/frontend/src/components/Generic/Button.js
+++ b/frontend/frontend/src/components/Generic/Button.js
@@ -11,7 +11,7 @@ const Button = (props) => {
       {...props}
       className={classnames(
         props.className,
-        'border-0 py-2 px-6 inline-flex focus:outline-none rounded-sm text-lg',
+        'border-0 py-2 px-6 inline-flex focus:outline-none rounded-s text-lg',
       )}
     >
       {props.children}
diff --git a/frontend/frontend/src/pages/Home/stages/Login.js b/frontend/frontend/src/pages/Home/stages/Login.js
index 358acc58..9aacd292 100644
--- a/frontend/frontend/src/pages/Home/stages/Login.js
+++ b/frontend/frontend/src/pages/Home/stages/Login.js
@@ -99,7 +99,7 @@ const LoginStage = ({ setCurrItem }) => {
 
   return (
     <div className="h-full flex flex-wrap">
-      <div className={classnames(deleteModal ? 'opacity-25' : '', 'flex')}>
+      <div className={classnames(deleteModal ? 'opacity-25' : '', 'md:flex')}>
         <div className="lg:block lg:w-3/5 lg:p-8">
           <div
             className={classnames(
@@ -146,6 +146,23 @@ const LoginStage = ({ setCurrItem }) => {
                   )}
                 </div>
 
+                {/* Delete Account Button */}
+                <div className="mt-6 flex items-center gap-4">
+                  <Button
+                    className="h-12 flex justify-center items-center w-[320px] text-black border border-black bg-white hover:bg-gray-100"
+                    onClick={openDeleteModal}
+                  >
+                    <span className="xl:text-lg text-red-600">
+                      Delete Account
+                    </span>
+                  </Button>
+                  <p className="text-sm text-gray-600 flex-1">
+                    This will delete your GitHub Trends account and then
+                    redirect you to a GitHub screen where you can revoke your
+                    access token.
+                  </p>
+                </div>
+
                 {/* Logout Button */}
                 <div className="mt-6 flex items-center gap-4">
                   <Button
@@ -158,21 +175,6 @@ const LoginStage = ({ setCurrItem }) => {
                     Log out from GitHub Trends.
                   </p>
                 </div>
-
-                {/* Delete Account Button */}
-                <div className="mt-6 flex items-center gap-4">
-                  <Button
-                    className="h-12 flex justify-center items-center w-[320px] text-black border border-black bg-white hover:bg-gray-100"
-                    onClick={openDeleteModal}
-                  >
-                    <span className="xl:text-lg">Delete Account</span>
-                  </Button>
-                  <p className="text-sm text-gray-600 flex-1">
-                    This will delete your GitHub Trends account and then
-                    redirect you to a GitHub screen where you can revoke your
-                    access token.
-                  </p>
-                </div>
               </>
             ) : (
               <>