feat: Show auth provider icon in user info.

Author: zouhir96

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

@@ -1,4 +1,6 @@
 import React from 'react'
+import { FaGithub } from 'react-icons/fa'
+import { FcGoogle } from 'react-icons/fc'
 import Toggle from 'react-toggle'
 import 'react-toggle/style.css'
 import { Button, ChipsSet } from 'src/components/Elements'
@@ -34,6 +36,11 @@ const UserInfo = ({ user }: UserInfoProps) => {
       <div className="userInfos">
         <div className="userName">{user.name}</div>
         <div className="sub providerId">
+          {providerId == 'github.com' ? (
+            <FaGithub />
+          ) : providerId == 'google.com' ? (
+            <FcGoogle />
+          ) : null}
           Connected with <span className="capitalize">{providerName}</span>
         </div>
       </div>

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

@@ -98,7 +98,7 @@ Select styles
 
 .userContent {
   width: auto;
-  padding: 20px 10px;
+  padding: 20px 0px;
   display: flex;
   align-items: center;
   border-bottom: 1px solid var(--card-content-divider);
@@ -119,7 +119,18 @@ Select styles
 .userContent .userName {
   font-weight: 600;
 }
+
 .userContent .sub {
   font-size: 0.9em;
   opacity: 0.9;
 }
+.userContent .providerId {
+  font-size: medium;
+  margin-top: 6px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.userContent .logoutBtn {
+  margin-left: auto;
+}