Merge pull request #62 from RookCookCo/Edit-Preferences-Button

Moved Preferences Button and Fixed CSS
RookCookCo · Aug 13, 2024 · d22505b · d22505b
2 parents a6c5f41 + 246e5b6
commit d22505b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 20 deletions.
diff --git a/mernRC/src/Component CSS/UserProfile.css b/mernRC/src/Component CSS/UserProfile.css
@@ -93,6 +93,18 @@
     font-weight: bold;
 }
 
+.preferencesButton {
+    position: absolute;
+    left: 20px;
+    top: 190px; /* Adjust this to position the button correctly under the profile pic */
+    background-color: #A1002D;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
 .changePicButton {
     position: absolute;
     left: 260px;

diff --git a/mernRC/src/Components/UserProfile.js b/mernRC/src/Components/UserProfile.js
@@ -90,27 +90,7 @@ const UserProfile = ({ user, handleLogout }) => {
                             </button>
                             <button 
                                 className="preferencesButton" 
-                                style={{
-                                    width: '100px',
-                                    height: '40px',
-                                    fontSize: '16px',
-                                    backgroundColor: '#A1002D', 
-                                    color: '#fff',
-                                    fontWeight: 'bold',
-                                    border: 'none',
-                                    borderRadius: '4px',
-                                    cursor: 'pointer',
-                                    outline: 'none',
-                                    transition: 'transform 0.3s ease',
-                                    position: 'relative', // Allow the button to be moved within its container
-                                    left: '174px', // Move the button to the right
-                                    top:'-65px',
-                                    // right: '20px', // Use this instead of left to move the button to the left
-                                }}
-                                onMouseEnter={(e) => e.target.style.transform = 'scale(1.1)'} 
-                                onMouseLeave={(e) => e.target.style.transform = 'scale(1)'}
                                 onClick={() => setShowPreferencesPanel(true)}>
-
                                 Preferences
                             </button>
                             <button