fixed styling

neu-cs4530 · Dec 1, 2024 · 0a9f491 · 0a9f491
1 parent 6a5e6d4
commit 0a9f491
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 2 deletions.
diff --git 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
@@ -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;
+}
diff --git 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>