feat: update ui for android

frontend/components/containers/drawer.tsx

@@ -4,7 +4,7 @@ import {
   DrawerContentScrollView,
   DrawerNavigationOptions as NavProps,
 } from "@react-navigation/drawer";
-import { Button, View } from "tamagui";
+import { Button, Text, View } from "tamagui";
 import {
   CommonActions,
   DrawerActions,
@@ -24,19 +24,25 @@ const Drawer = (props: DrawerContentComponentProps) => {
 
   return (
     <View pt={insets.top} flex={1}>
-      <View p="$4">
+      <View py="$4" px="$2">
         <UserMenuButton />
       </View>
 
       <DrawerContentScrollView
-        contentContainerStyle={{ padding: 18, paddingTop: 0 }}
+        contentContainerStyle={{
+          paddingTop: 0,
+          paddingLeft: 0,
+          paddingStart: 0,
+          paddingRight: 18,
+          paddingBottom: 18,
+        }}
         {...props}
       >
         <DrawerItemList {...props} />
       </DrawerContentScrollView>
 
       <View px="$4" py="$2">
-        <ThemeSwitcher />
+        <ThemeSwitcher $xs={{ alignSelf: "flex-start" }} />
       </View>
     </View>
   );
@@ -85,7 +91,11 @@ const DrawerItemList = ({
           onPress={onPress}
           icon={drawerIcon?.({ size: 16, color: "$color", focused }) as never}
           size="$4"
-          $xs={{ size: "$5", borderRadius: 999, borderWidth: 0 }}
+          $xs={{ size: "$5" }}
+          borderRadius={0}
+          borderTopRightRadius="$10"
+          borderBottomRightRadius="$10"
+          borderWidth={0}
         >
           {drawerLabel !== undefined
             ? drawerLabel

frontend/components/containers/server-stats-bar.tsx

@@ -61,6 +61,7 @@ const ServerStatsBar = ({ url }: Props) => {
   return (
     <ScrollView
       horizontal
+      flexGrow={0}
       contentContainerStyle={{
         flexDirection: "row",
         alignItems: "center",

frontend/components/containers/terminal.tsx

@@ -55,6 +55,7 @@ const Terminal = ({ client = "xtermjs", style, ...props }: TerminalProps) => {
         horizontal
         flexGrow={0}
         contentContainerStyle={{ flexDirection: "row" }}
+        $gtSm={{ display: "none" }}
       >
         <TerminalButton
           title={<Icons name="swap-horizontal" size={16} />}

frontend/components/containers/theme-switcher.tsx

@@ -12,21 +12,28 @@ const ThemeSwitcher = ({ iconSize = 18, ...props }: Props) => {
   const id = useId();
 
   return (
-    <XStack alignItems="center" gap="$2">
-      <Ionicons
-        name={theme === "light" ? "moon-outline" : "sunny-outline"}
-        size={iconSize}
-      />
-      <Label htmlFor={id} flex={1} cursor="pointer">
-        Dark Mode
-      </Label>
+    <XStack
+      alignItems="center"
+      gap="$4"
+      w="auto"
+      justifyContent="space-between"
+      {...props}
+    >
+      <XStack alignItems="center" gap="$2">
+        <Ionicons
+          name={theme === "light" ? "moon-outline" : "sunny-outline"}
+          size={iconSize}
+        />
+        <Label htmlFor={id} cursor="pointer">
+          Dark Mode
+        </Label>
+      </XStack>
       <Switch
         id={id}
         onPress={toggle}
         checked={theme === "dark"}
         size="$2"
         cursor="pointer"
-        {...props}
       >
         <Switch.Thumb animation="quicker" />
       </Switch>

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

@@ -7,7 +7,6 @@ import {
   Text,
   useMedia,
   View,
-  YGroup,
 } from "tamagui";
 import MenuButton from "../ui/menu-button";
 import Icons from "../ui/icons";
@@ -29,8 +28,11 @@ const UserMenuButton = () => {
         trigger={
           <Button
             bg="$colorTransparent"
+            borderWidth={0}
             justifyContent="flex-start"
-            p={0}
+            borderRadius="$10"
+            py={0}
+            px="$2"
             gap="$1"
           >
             <Avatar circular size="$3">
@@ -42,7 +44,7 @@ const UserMenuButton = () => {
                 {team ? `${team.icon} ${team.name}` : "Personal"}
               </Text>
             </View>
-            <Icons name="chevron-down" size={16} />
+            <Icons name="chevron-down" size={16} mr="$2" />
           </Button>
         }
       >
@@ -59,6 +61,7 @@ const UserMenuButton = () => {
           title="Logout"
         />
       </MenuButton>
+
       <TeamForm />
     </>
   );