feat: add github oauth

frontend/components/containers/drawer.tsx

@@ -24,7 +24,7 @@ const Drawer = (props: DrawerContentComponentProps) => {
 
   return (
     <View pt={insets.top} flex={1}>
-      <View py="$4" px="$2">
+      <View py="$4" px="$3">
         <UserMenuButton />
       </View>
 

frontend/components/containers/user-menu-button.tsx

@@ -1,18 +1,11 @@
 import React from "react";
-import {
-  Avatar,
-  Button,
-  ListItem,
-  Separator,
-  Text,
-  useMedia,
-  View,
-} from "tamagui";
+import { Button, ListItem, Separator, Text, useMedia, View } from "tamagui";
 import MenuButton from "../ui/menu-button";
 import Icons from "../ui/icons";
 import { logout, setTeam, useTeamId } from "@/stores/auth";
 import { useUser } from "@/hooks/useUser";
 import TeamForm, { teamFormModal } from "@/pages/team/components/team-form";
+import Avatar from "../ui/avatar";
 
 const UserMenuButton = () => {
   const user = useUser();
@@ -31,16 +24,21 @@ const UserMenuButton = () => {
             borderWidth={0}
             justifyContent="flex-start"
             borderRadius="$10"
-            py={0}
-            px="$2"
+            p={0}
             gap="$1"
           >
-            <Avatar circular size="$3">
-              <Avatar.Fallback bg="$blue4" />
-            </Avatar>
+            <Avatar size="$4" src={user?.image} />
+
             <View flex={1}>
-              <Text textAlign='left' numberOfLines={1}>{user?.name}</Text>
-              <Text textAlign='left' numberOfLines={1} fontWeight="600" mt="$1.5">
+              <Text textAlign="left" numberOfLines={1}>
+                {user?.name}
+              </Text>
+              <Text
+                textAlign="left"
+                numberOfLines={1}
+                fontWeight="600"
+                mt="$1.5"
+              >
                 {team ? `${team.icon} ${team.name}` : "Personal"}
               </Text>
             </View>

frontend/components/ui/avatar.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { GetProps, Avatar as BaseAvatar } from "tamagui";
+import Icons from "./icons";
+
+type AvatarProps = GetProps<typeof BaseAvatar> & {
+  src?: string;
+  $image?: GetProps<typeof BaseAvatar.Image>;
+};
+
+const Avatar = ({ src, $image, ...props }: AvatarProps) => {
+  return (
+    <BaseAvatar circular {...props}>
+      {src ? <BaseAvatar.Image src={src} {...$image} /> : null}
+      <BaseAvatar.Fallback
+        bg="$blue4"
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Icons name="account" size={16} />
+      </BaseAvatar.Fallback>
+    </BaseAvatar>
+  );
+};
+
+export default Avatar;