redo live dashboard UI w color and style updates

js/app/components/live-dashboard/bento-grid.tsx

···
   const isWeb = Platform.OS === "web";
 
   return (
-    <View style={[flex.values[1], gap.all[4], p[4]]}>
-      <View
-        style={[
-          layout.flex.column,
-          bg.gray[900],
-          { minWidth: isWeb ? 400 : "100%" },
-        ]}
-      >
+    <View style={[flex.values[1], gap.all[4], p[4], bg.black]}>
+      <View style={[layout.flex.column, { minWidth: isWeb ? 400 : "100%" }]}>
         <Header isLive={isLive} />
       </View>
       <View style={[flex.values[1], layout.flex.row, gap.all[4]]}>

js/app/components/live-dashboard/chat-panel.tsx

···
 import { useState } from "react";
 import { Text, View } from "react-native";
 import { useLiveUser } from "../../hooks/useLiveUser";
-
-const { flex, bg, r, borders, p, text, layout } = zero;
+const { flex, bg, r, borders, p, px, py, text, layout } = zero;
 
 export default function ChatPanel() {
   // Get real data from hooks
···
     <View
       style={[
         flex.values[1],
-        bg.gray[800],
-        r[3],
+        bg.neutral[900],
         borders.width.thin,
-        borders.color.gray[700],
+        borders.color.neutral[700],
         layout.flex.column,
+        r.lg,
+        { minWidth: 300, maxWidth: 600, flexShrink: 0 },
       ]}
     >
       <View
···
           layout.flex.row,
           layout.flex.spaceBetween,
           layout.flex.alignCenter,
-          p[4],
           borders.bottom.width.thin,
-          borders.bottom.color.gray[700],
+          borders.bottom.color.neutral[700],
+          p[4],
         ]}
       >
         <Text style={[text.white, { fontSize: 18, fontWeight: "600" }]}>
           Live Chat
         </Text>
-        <View style={[layout.flex.row, layout.flex.alignCenter, { gap: 8 }]}>
+        <View style={[layout.flex.row, layout.flex.alignCenter]}>
           <View
             style={[
               { width: 6, height: 6, borderRadius: 3 },
               isLive && isConnected ? bg.green[500] : bg.gray[500],
             ]}
           />
-          <Text style={[text.gray[400], { fontSize: 12 }]}>
+          <Text style={[text.gray[400], { fontSize: 12, marginLeft: 8 }]}>
             {messagesPerMinute} msg/min
           </Text>
         </View>
       </View>
-      <View style={[flex.values[1], p[2]]}>
-        <Chat canModerate={canModerate} shownMessages={50} />
-        <ChatBox
-          emojiData={emojiData}
-          chatBoxStyle={[
-            bg.gray[700],
-            borders.width.thin,
-            borders.color.gray[600],
-            r[2],
-            p[3],
-            !isConnected && { opacity: 0.6 },
-          ]}
-        />
+      <View style={[flex.values[1], px[2], { minHeight: 0 }]}>
+        <View style={[flex.values[1], { minHeight: 0 }]}>
+          <Chat canModerate={canModerate} shownMessages={50} />
+        </View>
+        <View style={[{ flexShrink: 0 }]}>
+          <ChatBox
+            emojiData={emojiData}
+            chatBoxStyle={[
+              bg.gray[700],
+              borders.width.thin,
+              borders.color.gray[600],
+              r.md,
+              p[3],
+              !isConnected && { opacity: 0.6 },
+            ]}
+          />
+        </View>
       </View>
     </View>
   );

js/app/components/live-dashboard/header.tsx

···
 import { useLiveUser } from "../../hooks/useLiveUser";
 import { useSegmentTiming } from "../../hooks/useSegmentTiming";
 
-const { flex, bg, r, borders, p, px, py, text, layout, gap } = zero;
+const { bg, r, borders, px, py, text, layout, gap } = zero;
 
 interface MetricItemProps {
   icon: any;
···
   return (
     <View
       style={[
-        bg.gray[800],
-        borders.bottom.width.thin,
-        borders.bottom.color.gray[700],
         px[4],
         py[3],
+        r.lg,
         layout.flex.row,
-        layout.flex.alignCenter,
         layout.flex.spaceBetween,
+        bg.neutral[900],
+        borders.width.thin,
+        borders.color.neutral[700],
       ]}
     >
       {/* Left side - Stream title and status */}

js/app/components/live-dashboard/livestream-panel/index.tsx

···
-import { useLivestream, useToast, zero } from "@streamplace/components";
+import {
+  Button,
+  Textarea,
+  useLivestream,
+  useToast,
+  zero,
+} from "@streamplace/components";
 import ThumbnailSelector from "components/thumbnail-selector";
 import ButtonSelector from "components/ui/button-selector";
 import {
···
 import { useEffect, useState } from "react";
 import {
   Platform,
-  Pressable,
   ScrollView,
   Text,
-  TextInput,
   useWindowDimensions,
   View,
 } from "react-native";
 import { useAppDispatch, useAppSelector } from "store/hooks";
 
-const { flex, p, px, py, mt, gap, layout, bg, borders, text, r, w } = zero;
+const {
+  flex,
+  p,
+  px,
+  py,
+  h,
+  gap,
+  layout,
+  bg,
+  borders,
+  mt,
+  pt,
+  pb,
+  text,
+  r,
+  w,
+  typography,
+} = zero;
 const isWeb = Platform.OS === "web";
 
 interface LivestreamPanelProps {
···
         <View
           style={[
             flex.values[1],
-            bg.gray[800],
-            r[3],
+            bg.neutral[900],
+            r.lg,
             borders.width.thin,
-            borders.color.gray[700],
+            borders.color.neutral[700],
             layout.flex.column,
           ]}
         >
···
             style={[
               layout.flex.row,
               layout.flex.spaceBetween,
-              layout.flex.alignCenter,
-              p[4],
+              layout.flex.align.center,
+              px[4],
+              pt[4],
+              pb[4],
               borders.bottom.width.thin,
-              borders.bottom.color.gray[700],
+              borders.bottom.color.neutral[700],
             ]}
           >
             <Text style={[text.white, { fontSize: 18, fontWeight: "600" }]}>
-              Live Chat
+              Stream settings
             </Text>
             <ButtonSelector
               values={[
                 { label: "Create", value: "create" },
                 { label: "Edit", value: "edit" },
               ]}
+              style={[{ marginVertical: -2 }]}
               selectedValue={mode}
               setSelectedValue={setSelectedMode}
               disabledValues={livestream ? [] : ["edit"]}
             />
           </View>
           {mode === "edit" && (
-            <Text
-              style={[px[4], text.white, { fontSize: 20, fontWeight: "bold" }]}
-            >
+            <Text style={[p[4], text.white, typography.universal["xl"]]}>
               Change your Current Livestream Title
             </Text>
           )}
           {mode === "edit" && noLivestream ? (
             <View style={[layout.flex.center, p[4]]}>
-              <Text style={[text.gray[400], { fontSize: 16 }]}>
+              <Text style={[text.neutral[400], { fontSize: 16 }]}>
                 No active livestream to edit. Start a livestream first!
               </Text>
             </View>
···
             <View
               style={[
                 { flexDirection: useTwoColumns ? "row" : "column" },
-                useTwoColumns ? gap.row[12] : gap.column[4],
+                useTwoColumns ? gap.row[12] : gap.all[8],
                 w.percent[100],
                 { alignSelf: "center" },
                 p[4],
···
               ]}
             >
               {/* Left column: labels and fields */}
-              <View
-                style={[
-                  flex.values[2],
-                  { minWidth: 0 },
-                  gap.column[3],
-                  w.percent[100],
-                ]}
-              >
+              <View style={[{ minWidth: 0 }, gap.column[3], w.percent[100]]}>
                 <View
                   style={[
                     layout.flex.row,
···
                 >
                   <Text
                     style={[
-                      text.gray[300],
+                      text.neutral[300],
                       { minWidth: 100, textAlign: "left", paddingBottom: 8 },
                     ]}
                   >
···
                 >
                   <Text
                     style={[
-                      text.gray[300],
+                      text.neutral[300],
                       { minWidth: 100, textAlign: "left", paddingBottom: 8 },
                     ]}
                   >
                     Title
                   </Text>
                   <View style={[flex.values[1]]}>
-                    <TextInput
+                    <Textarea
                       value={title}
                       onChangeText={setTitle}
                       style={[
                         p[2],
                         r[1],
-                        bg.gray[900],
+                        bg.neutral[800],
                         text.white,
                         w.percent[100],
                         { minHeight: 100, fontSize: 16 },
···
                     style={[
                       layout.flex.row,
                       layout.flex.alignCenter,
+                      mt[2],
                       w.percent[100],
-                      { marginTop: -16 },
                     ]}
                   >
                     <View style={[flex.values[1]]}>
-                      <Text style={[text.gray[400], { fontSize: 12 }]}>
+                      <Text style={[text.neutral[400], { fontSize: 12 }]}>
                         Updating will not send out notifications to viewers or
                         create a new social media post.
                       </Text>
···
                     gap.column[4],
                     { alignItems: "center" },
                     { justifyContent: "flex-start" },
-                    { marginTop: 12 },
+                    h.percent[100],
                   ]}
                 >
                   <Text
···
                   </View>
                 </View>
               )}
-              <View
+              <Button
+                disabled={disabled}
                 style={[
+                  bg.primary[500],
+                  r[1],
+                  py[2],
                   w.percent[100],
                   { alignItems: "center" },
-                  mode === "edit" ? { marginTop: -16 } : mt[4],
+                  { opacity: disabled ? 0.5 : 1 },
                 ]}
+                onPress={handleSubmit}
               >
-                <Pressable
-                  disabled={disabled}
-                  style={[
-                    bg.primary[500],
-                    r[1],
-                    px[4],
-                    py[2],
-                    w.percent[100],
-                    { alignItems: "center" },
-                    { opacity: disabled ? 0.5 : 1 },
-                  ]}
-                  onPress={handleSubmit}
+                <Text
+                  style={[text.white, { fontSize: 16, fontWeight: "bold" }]}
                 >
-                  <Text
-                    style={[text.white, { fontSize: 16, fontWeight: "bold" }]}
-                  >
-                    {buttonText}
-                  </Text>
-                </Pressable>
-              </View>
+                  {buttonText}
+                </Text>
+              </Button>
             </View>
           )}
         </View>

js/app/components/live-dashboard/stream-monitor.tsx

···
 import { useSegmentTiming } from "../../hooks/useSegmentTiming";
 import StreamScreen from "./live-selector";
 
-const { flex, bg, r, borders, layout, p, text, w, h } = zero;
+const { flex, bg, r, borders, layout, p, text, w, h, mt } = zero;
 
 interface StreamMonitorProps {
   userProfile?: any;
···
       style={[
         flex.values[2],
         bg.gray[800],
-        r[3],
+        r.lg,
+        bg.neutral[900],
         borders.width.thin,
-        borders.color.gray[700],
+        borders.color.neutral[700],
         layout.flex.column,
       ]}
     >
-      <View style={[flex.values[1], layout.flex.center, bg.gray[900]]}>
+      <View style={[flex.values[1], layout.flex.center, bg.neutral[900]]}>
         {isLive && userProfile ? (
           isStreamVisible ? (
             <Player src={userProfile.did} name={userProfile.handle} />
···
           layout.flex.spaceBetween,
           layout.flex.alignCenter,
           p[4],
-          borders.bottom.width.thin,
-          borders.bottom.color.gray[700],
+          borders.top.width.thin,
+          borders.top.color.gray[700],
         ]}
       >
-        <View style={[layout.flex.row, layout.flex.alignCenter, { gap: 12 }]}>
+        <View
+          style={[
+            layout.flex.row,
+            layout.flex.spaceBetween,
+            layout.flex.alignCenter,
+            flex.grow[1],
+            { gap: 12 },
+          ]}
+        >
           <Text style={[text.white, { fontSize: 18, fontWeight: "600" }]}>
             {ls?.record.title || "Stream Title"}
           </Text>
-          {isLive && userProfile && (
-            <TouchableOpacity
-              onPress={() => setIsStreamVisible(!isStreamVisible)}
-              style={{
-                padding: 4,
-                borderRadius: 4,
-                backgroundColor: "rgba(255, 255, 255, 0.1)",
-              }}
-            >
-              {isStreamVisible ? (
-                <EyeOff size={16} color="#9ca3af" />
-              ) : (
-                <Eye size={16} color="#9ca3af" />
-              )}
-            </TouchableOpacity>
-          )}
-          <View style={[w[2], h[2], r[1], bg[getConnectionColor()][500]]} />
-          <Text style={[text.gray[400], { fontSize: 14 }]}>
-            {isLive ? "LIVE" : "OFFLINE"}
-          </Text>
-          {isLive && segmentTiming.timeBetweenSegments && (
-            <Text style={[text.gray[500], { fontSize: 12 }]}>
-              {Math.round(segmentTiming.timeBetweenSegments)}ms
+          <View
+            style={[
+              layout.flex.row,
+              layout.flex.justify.end,
+              layout.flex.align.start,
+              { gap: 8, flexShrink: 0 },
+            ]}
+          >
+            {isLive && userProfile && (
+              <TouchableOpacity
+                onPress={() => setIsStreamVisible(!isStreamVisible)}
+                style={{
+                  padding: 4,
+                  borderRadius: 4,
+                  backgroundColor: "rgba(255, 255, 255, 0.1)",
+                }}
+              >
+                {isStreamVisible ? (
+                  <EyeOff size={16} color="#9ca3af" />
+                ) : (
+                  <Eye size={16} color="#9ca3af" />
+                )}
+              </TouchableOpacity>
+            )}
+            <View
+              style={[
+                w[3],
+                h[3],
+                r.full,
+                { marginTop: 3 },
+                bg[getConnectionColor()][500],
+              ]}
+            />
+            <Text style={[text.gray[400], { fontSize: 14 }]}>
+              {isLive ? "LIVE" : "OFFLINE"}
             </Text>
-          )}
+            {isLive && segmentTiming.timeBetweenSegments && (
+              <Text style={[text.gray[500], { fontSize: 12 }]}>
+                {Math.round(segmentTiming.timeBetweenSegments)}ms
+              </Text>
+            )}
+          </View>
         </View>
       </View>
     </View>

js/app/components/ui/button-selector.tsx

···
-import { Button, Text, XStack, YStack, YStackProps } from "tamagui";
+import {
+  Button,
+  Text,
+  useTheme,
+  View,
+  ViewProps,
+  zero,
+} from "@streamplace/components";
+
+const { gap, pt, w, bg, r, spacing, layout, colors } = zero;
 
 export default function ButtonSelector({
   text,
···
   selectedValue,
   setSelectedValue,
   disabledValues,
+  style,
   ...props
 }: {
   text?: string;
···
   selectedValue: string;
   setSelectedValue: (value: any) => void;
   disabledValues?: string[];
-} & YStackProps) {
+} & ViewProps) {
+  let theme = useTheme();
   return (
-    <YStack ai="flex-start" gap="$2" pt="$2" {...props}>
+    <View align="start" style={[gap.all[2], style as any]} {...props}>
       {text && (
-        <Text fontSize="$base" fontWeight="semibold">
+        <Text variant="body1" weight="semibold">
           {text}
         </Text>
       )}
-      <XStack
-        ai="center"
-        jc="space-around"
-        gap="$1"
-        w="100%"
-        bg="$background"
-        borderRadius="$xl"
+      <View
+        direction="row"
+        align="center"
+        justify="around"
+        style={[gap.all[1], w.percent[100], r.full]}
       >
-        {values.map(({ label, value }) => (
-          <Button
-            key={value}
-            onPress={() => setSelectedValue(value)}
-            f={1}
-            height="$2"
-            disabled={disabledValues?.includes(value)}
-            opacity={disabledValues?.includes(value) ? 0.5 : 1}
-            variant={selectedValue === value ? "outlined" : undefined}
-          >
-            <Text
-              color={
-                selectedValue === value
-                  ? "$color.foreground"
-                  : "$color.mutedForeground"
-              }
+        {values.map(({ label, value }) => {
+          const isSelected = selectedValue === value;
+          const isDisabled = disabledValues?.includes(value);
+
+          return (
+            <Button
+              key={value}
+              onPress={() => setSelectedValue(value)}
+              variant={isSelected ? "outline" : "ghost"}
+              size="pill"
+              disabled={isDisabled}
+              style={[
+                { flex: 1, maxHeight: 20 },
+                isSelected
+                  ? { backgroundColor: theme.theme.colors.primary }
+                  : { backgroundColor: theme.theme.colors.secondary },
+                isDisabled && { opacity: 0.5 },
+              ]}
             >
               {label}
-            </Text>
-          </Button>
-        ))}
-      </XStack>
-    </YStack>
+            </Button>
+          );
+        })}
+      </View>
+    </View>
   );
 }

js/components/src/components/chat/chat-message.tsx

···
 import { Linking, View } from "react-native";
 import { ChatMessageViewHydrated } from "streamplace";
 import { RichtextSegment, segmentize } from "../../lib/facet";
-import {
-  borders,
-  flex,
-  gap,
-  ml,
-  mr,
-  opacity,
-  pl,
-  w,
-} from "../../lib/theme/atoms";
+import { borders, flex, gap, ml, mr, opacity, pl } from "../../lib/theme/atoms";
 import { atoms, colors, layout } from "../ui";
 
 interface Facet {
···
             style={[
               gap.all[2],
               layout.flex.row,
-              w.percent[100],
+              { minWidth: 0, maxWidth: "100%" },
               borders.left.width.medium,
               borders.left.color.gray[700],
               ml[4],
···
               opacity[80],
             ]}
           >
-            <Text numberOfLines={1} style={[flex.shrink[1], mr[4]]}>
+            <Text
+              numberOfLines={1}
+              style={[
+                flex.shrink[1],
+                mr[4],
+                { minWidth: 0, overflow: "hidden" },
+              ]}
+            >
               <Text
                 style={{
                   color: getRgbColor((item.replyTo.chatProfile as any).color),
···
             </Text>
           </View>
         )}
-        <View style={[gap.all[2], layout.flex.row, w.percent[100]]}>
+        <View
+          style={[
+            gap.all[2],
+            layout.flex.row,
+            { minWidth: 0, maxWidth: "100%" },
+          ]}
+        >
           {showTime && (
             <Text
               style={{
···
               {formatTime(item.record.createdAt)}
             </Text>
           )}
-          <Text weight="bold" color="default" style={[flex.shrink[1]]}>
+          <Text
+            weight="bold"
+            color="default"
+            style={[flex.shrink[1], { minWidth: 0, overflow: "hidden" }]}
+          >
             <Text
               style={[
                 {

js/components/src/components/chat/chat.tsx

···
   useSetReplyToMessage,
   View,
 } from "../../";
-import { bg, flex, px, py, w } from "../../lib/theme/atoms";
+import { bg, flex, px, py } from "../../lib/theme/atoms";
 import { RenderChatMessage } from "./chat-message";
 import { ModView } from "./mod-view";
 
···
             padding: 1,
             gap: 4,
             zIndex: 10,
+            maxWidth: 120,
+            flexShrink: 0,
           },
         ]}
       >
···
           style={[
             py[1],
             px[2],
-            { position: "relative", borderRadius: 8 },
+            {
+              position: "relative",
+              borderRadius: 8,
+              minWidth: 0,
+              maxWidth: "100%",
+            },
             isHovered && bg.gray[950],
           ]}
           onPointerEnter={handleHoverIn}
           onPointerLeave={handleHoverOut}
         >
-          <Pressable>
+          <Pressable style={[{ minWidth: 0, maxWidth: "100%" }]}>
             <RenderChatMessage item={item} />
           </Pressable>
           <ActionsBar
···
 
   if (!chat)
     return (
-      <View style={[flex.shrink[1]]}>
+      <View style={[flex.shrink[1], { minWidth: 0, maxWidth: "100%" }]}>
         <Text>Loading chaat...</Text>
       </View>
     );
 
   return (
-    <View style={[flex.shrink[1]].concat(propsStyle || [])}>
+    <View
+      style={[flex.shrink[1], { minWidth: 0, maxWidth: "100%" }].concat(
+        propsStyle || [],
+      )}
+    >
       <FlatList
-        style={[flex.grow[1], flex.shrink[1], w.percent[100]]}
+        style={[
+          flex.grow[1],
+          flex.shrink[1],
+          { minWidth: 0, maxWidth: "100%" },
+        ]}
         data={chat.slice(0, shownMessages)}
         inverted={true}
         keyExtractor={keyExtractor}

js/components/src/lib/theme/tokens.ts

···
 
 export const borderRadius = {
   none: 0,
-  sm: 4,
+  sm: 3,
   md: 8,
   lg: 12,
   xl: 16,