feat: Enhance user settings UI with improved logout button and layout adjustments

Author: medyo

src/features/settings/components/GeneralSettings/GeneralSettings.tsx

@@ -44,18 +44,20 @@ const UserInfo = ({ user }: UserInfoProps) => {
       {user?.imageURL && <img src={user.imageURL} className="userImage"></img>}
       <div className="userInfos">
         <div className="userName">{user.name}</div>
-        <div className="sub providerId">
+        <div className="sub">
           {providerId == 'github.com' ? (
-            <FaGithub />
+            <FaGithub size={18} />
           ) : providerId == 'google.com' ? (
-            <FcGoogle />
+            <FcGoogle size={18} />
           ) : null}
           Connected with <span className="capitalize">{providerName}</span>
         </div>
+        <div>
+          <Button className="logoutBtn" onClick={() => setShowLogout(true)} size="small">
+            Logout
+          </Button>
+        </div>
       </div>
-      <Button className="logoutBtn" onClick={() => setShowLogout(true)}>
-        Logout
-      </Button>
     </div>
   )
 }

src/features/settings/components/GeneralSettings/generalSettings.css

@@ -107,12 +107,13 @@ Select styles
   width: 50px;
   height: 50px;
   border-radius: 100%;
+  align-self: flex-start;
 }
 .userContent .userInfos {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
   width: auto;
   margin-left: 10px;
 }
@@ -123,14 +124,8 @@ Select styles
 .userContent .sub {
   font-size: 0.9em;
   opacity: 0.9;
-}
-.userContent .providerId {
-  font-size: medium;
-  margin-top: 6px;
   display: flex;
+  flex-direction: row;
   align-items: center;
-  gap: 8px;
-}
-.userContent .logoutBtn {
-  margin-left: auto;
+  column-gap: 4px;
 }