fix: refactor UserInfo component layout and enhance description styling

Author: medyo

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

@@ -119,21 +119,19 @@ Select styles
     display: flex;
     flex-direction: column;
     gap: 8px;
-  }
-  .userInfos {
     flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    width: auto;
-    margin-left: 10px;
   }
+
   .userName {
     font-weight: 600;
   }
   .actions {
     margin-top: 6px;
   }
+  .description {
+    font-size: 0.9em;
+    opacity: 0.9;
+  }
   .sub {
     font-size: 0.9em;
     opacity: 0.9;

src/features/settings/components/UserSettings/UserInfo.tsx

@@ -17,18 +17,20 @@ export const UserInfo = () => {
   if (!user) {
     return (
       <div className="userContent">
-        <AvatarPlaceholder className="userImage" />
-        <div className="userInfos">
-          <div className="userName">
-            Join <b>Hackertab</b>
-          </div>
-          <div className="sub">
-            Create a free account on <b>Hackertab</b> to sync, save bookmarks, and earn rewards.
-          </div>
-          <div className="actions">
-            <Button className="logoutBtn" onClick={() => openAuthModal()} size="small">
-              Connect
-            </Button>
+        <div className="userDetails">
+          <AvatarPlaceholder className="userImage" />
+          <div className="userInfo">
+            <div className="userName">
+              Join <b>Hackertab</b>
+            </div>
+            <div className="description">
+              Create a free account on <b>Hackertab</b> to sync, save bookmarks, and earn rewards.
+            </div>
+            <div className="actions">
+              <Button className="logoutBtn" onClick={() => openAuthModal()} size="small">
+                Connect
+              </Button>
+            </div>
           </div>
         </div>
       </div>