From 0a9f491fe3c958e4cc468855e776d6e78d8620a0 Mon Sep 17 00:00:00 2001
From: Kristen Liu <kristenyliu@gmail.com>
Date: Sat, 30 Nov 2024 22:28:06 -0500
Subject: [PATCH] fixed styling

---
 .../main/answerPage/questionBody/index.css    |  5 ++++-
 .../main/profile/accountInfo/index.css        | 22 +++++++++++++++++++
 .../main/profile/accountInfo/index.tsx        |  4 +++-
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/client/src/components/main/answerPage/questionBody/index.css b/client/src/components/main/answerPage/questionBody/index.css
index 8ba8294..3062fc1 100644
--- a/client/src/components/main/answerPage/questionBody/index.css
+++ b/client/src/components/main/answerPage/questionBody/index.css
@@ -36,12 +36,14 @@
 
 .save-button {
   background-color: #BABDE2;
+  position: relative;
   color: white;
   border: none;
   padding: 5px 10px;
   border-radius: 4px;
   cursor: pointer;
-  margin-right: 10px;
+  margin-left: 10px;
+  top: -8px;
   transition: background-color 0.3s ease, transform 0.3s ease;
 }
 
@@ -77,4 +79,5 @@ textarea:focus {
   display: flex;
   flex-direction: column;
   margin-left: 5%;
+  align-items: flex-start; 
 }
diff --git a/client/src/components/main/profile/accountInfo/index.css b/client/src/components/main/profile/accountInfo/index.css
index 77dc86e..cf38e28 100644
--- a/client/src/components/main/profile/accountInfo/index.css
+++ b/client/src/components/main/profile/accountInfo/index.css
@@ -86,3 +86,25 @@
 .go-back-button:active {
   background-color: #466694;
 }
+
+.moderator-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 20px;
+  font-size: 13px;
+  font-weight: bold;
+  color: white;
+  background-color: #4A7DAA; 
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin: 20px 0;
+  transition: background-color 0.3s ease;
+}
+
+.moderator-button:hover {
+  background-color: #3A5F85;
+}
\ No newline at end of file
diff --git a/client/src/components/main/profile/accountInfo/index.tsx b/client/src/components/main/profile/accountInfo/index.tsx
index 8f2e4b5..cb5399d 100644
--- a/client/src/components/main/profile/accountInfo/index.tsx
+++ b/client/src/components/main/profile/accountInfo/index.tsx
@@ -101,7 +101,9 @@ const AccountInfo = () => {
             <p className='username-info'>{userData.status}</p>
           </div>
           {qualifyModerator && userData.status !== 'moderator' && (
-            <button onClick={updateUserStatus}>become a moderator</button>
+            <button className='moderator-button' onClick={updateUserStatus}>
+              become a moderator
+            </button>
           )}
         </div>
       </div>