Merge branch 'zouhir-auth' into feat-streaks

Author: medyo

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

@@ -26,13 +26,16 @@ interface UserInfoProps {
 
 const UserInfo = ({ user }: UserInfoProps) => {
   const { logout, providerId } = useAuth()
+  const providerName = providerId?.split('.')[0] || 'Unknown'
 
   return (
     <div className="userContent">
       {user?.imageURL && <img src={user.imageURL} className="userImage"></img>}
       <div className="userInfos">
         <div className="userName">{user.name}</div>
-        <div className="providerId">Logged using {providerId}</div>
+        <div className="sub providerId">
+          Connected with <span className="capitalize">{providerName}</span>
+        </div>
       </div>
       <Button onClick={logout} size="small">
         Logout

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

@@ -104,23 +104,22 @@ Select styles
   border-bottom: 1px solid var(--card-content-divider);
 }
 .userContent .userImage {
-  width: 60px;
-  height: 60px;
+  width: 50px;
+  height: 50px;
   border-radius: 100%;
 }
 .userContent .userInfos {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
   width: auto;
   margin-left: 10px;
 }
 .userContent .userName {
-  font-size: larger;
   font-weight: 600;
 }
-.userContent .userEmail {
-  font-size: medium;
-  margin-top: 6px;
-}
-.userContent .logoutBtn {
-  margin-left: auto;
+.userContent .sub {
+  font-size: 0.9em;
+  opacity: 0.9;
 }