@lotics/ui 5.7.0 → 5.9.0

package/src/gantt/gantt_view.tsx

@@ -163,8 +163,8 @@ export function GanttView<T = unknown>(props: GanttViewProps<T>) {
 const styles = StyleSheet.create({
   root: { flex: 1, backgroundColor: colors.white },
   toolbar: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 14, paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: colors.border },
-  zoomSwitch: { flexDirection: "row", backgroundColor: colors.zinc[100], borderRadius: 8, padding: 2 },
-  zoomBtn: { paddingHorizontal: 12, paddingVertical: 5, borderRadius: 6 },
+  zoomSwitch: { flexDirection: "row", backgroundColor: colors.zinc[100], borderRadius: 10, padding: 2 },
+  zoomBtn: { paddingHorizontal: 12, paddingVertical: 5, borderRadius: 8 },
   zoomBtnActive: { backgroundColor: colors.white },
   headerCell: { borderBottomWidth: 1, borderBottomColor: colors.border },
   labelRow: { flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 12, borderBottomWidth: 1, borderBottomColor: colors.zinc[100] },

package/src/icon_button.tsx

@@ -1,7 +1,9 @@
-import { GestureResponderEvent, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
+import { ActivityIndicator, GestureResponderEvent, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { Icon, IconName } from "./icon";
 import { colors } from "./colors";
 import { PressableHighlight } from "./pressable_highlight";
+import { type ButtonColor } from "./button";
+import { getButtonIconColor } from "./button_colors";
 import { Ref, useCallback } from "react";
 import { TooltipSide } from "./tooltip";
 
@@ -9,16 +11,27 @@ interface IconButtonBase {
   ref?: Ref<View>;
   testID?: string;
   icon: IconName;
-  color?: "none" | "primary" | "secondary" | "white";
-  /** `md` (28px, 18px glyph) for toolbars; `sm` (24px, 14px glyph) for
-   * inline affordances sitting next to body/sm text — e.g. the ⓘ in a
-   * CardHeader. Both keep a 40px touch target via hitSlop. */
-  size?: "md" | "sm";
+  /** Matches `Button`'s palette so an icon-only action migrates 1:1 — a filled
+   *  disc for primary/secondary/danger, a ghost for muted/danger-secondary/none. */
+  color?: ButtonColor | "none" | "white";
+  /** `lg` (40px, 20px glyph) for a circular primary action at the system control
+   * height — a composer send, a drawer/popover back or close; `md` (28px, 18px
+   * glyph) for toolbars; `sm` (24px, 14px glyph) for inline affordances next to
+   * body/sm text (e.g. the ⓘ in a CardHeader). md/sm keep a 40px touch target via
+   * hitSlop; `lg` is already 40. */
+  size?: "lg" | "md" | "sm";
   iconColor?: string;
+  /** Floating variant: a white fill + hairline border + soft shadow, so the
+   *  button reads as a distinct, tappable target sitting ON TOP of imagery or a
+   *  colored surface (a tile's remove ✕, an overlay's retry). */
+  elevated?: boolean;
   tooltipSide?: TooltipSide;
   onPress?: (event: GestureResponderEvent) => void;
   style?: StyleProp<ViewStyle>;
   disabled?: boolean;
+  /** Show a spinner in place of the icon (and block press) — for an icon action
+   *  that triggers async work, e.g. a delete. */
+  loading?: boolean;
 }
 
 /**
@@ -39,10 +52,12 @@ export function IconButton(props: IconButtonProps) {
     onPress,
     color = "none",
     size = "md",
+    elevated,
     tooltip,
     tooltipSide,
     accessibilityLabel,
     disabled,
+    loading,
     style,
   } = props;
 
@@ -53,6 +68,11 @@ export function IconButton(props: IconButtonProps) {
     [onPress],
   );
 
+  const disabledOrLoading = disabled || loading;
+  const tint =
+    iconColor ??
+    (color === "none" ? colors.zinc[700] : color === "white" ? colors.white : getButtonIconColor(color));
+
   return (
     <PressableHighlight
       ref={ref}
@@ -61,18 +81,18 @@ export function IconButton(props: IconButtonProps) {
       tooltipSide={tooltipSide}
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel ?? tooltip}
-      style={[styles.button, styles[size], styles[color], disabled && styles.disabled, style]}
+      style={[styles.button, styles[size], styles[color], elevated && styles.elevated, disabledOrLoading && styles.disabled, style]}
       onPress={handlePress}
-      disabled={disabled}
+      disabled={disabledOrLoading}
       // 40px touch target regardless of visual size (28 + 2×6 / 24 + 2×8)
       // without shifting surrounding layouts.
-      hitSlop={size === "sm" ? 8 : 6}
+      hitSlop={size === "lg" ? 0 : size === "sm" ? 8 : 6}
     >
-      <Icon
-        size={size === "sm" ? 14 : 18}
-        name={icon}
-        color={iconColor || (color === "white" || color === "primary" ? colors.white : colors.zinc[700])}
-      />
+      {loading ? (
+        <ActivityIndicator size="small" color={tint} />
+      ) : (
+        <Icon size={size === "sm" ? 14 : size === "lg" ? 20 : 18} name={icon} color={tint} />
+      )}
     </PressableHighlight>
   );
 }
@@ -85,6 +105,10 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     borderRadius: 999,
   },
+  lg: {
+    width: 40,
+    height: 40,
+  },
   md: {
     width: 28,
     height: 28,
@@ -103,5 +127,16 @@ const styles = StyleSheet.create({
   secondary: {
     backgroundColor: colors.zinc[100],
   },
+  danger: {
+    backgroundColor: colors.red[100],
+  },
+  muted: {},
+  "danger-secondary": {},
   white: {},
+  elevated: {
+    backgroundColor: colors.white,
+    borderWidth: 1,
+    borderColor: colors.zinc[200],
+    ...({ boxShadow: "0 1px 3px rgba(0, 0, 0, 0.18)" } as object),
+  },
 });

package/src/image_gallery.tsx

@@ -36,8 +36,6 @@ export interface ImageGalleryProps {
   emptyText?: string;
   /** Optional max width. Omit to fill the container. */
   maxWidth?: number;
-  /** Hint shown in the full-screen zoom modal. Pass a translated string. */
-  captionHint?: string;
   /** "bottom" stacks thumbnails under the main image; "right" puts the main
    *  image (~60% of the width) and the thumbnail grid side by side. */
   thumbnailPosition?: "bottom" | "right";
@@ -55,7 +53,6 @@ export function ImageGallery({
   loading = false,
   emptyText = "No images.",
   maxWidth,
-  captionHint = "ESC to close · ←/→ to navigate",
   thumbnailPosition = "bottom",
   mainAspectRatio = 4 / 3,
   mainFraction = 0.6,
@@ -157,7 +154,6 @@ export function ImageGallery({
         files={images}
         activeIndex={zoomIdx}
         onIndexChange={setZoomIdx}
-        captionHint={captionHint}
         rotation={rotation}
         rotatable={rotatable}
       />

package/src/inline_edit.tsx

@@ -5,7 +5,7 @@ import { IconButton } from "./icon_button";
 import { ActivityIndicator } from "./activity_indicator";
 import { PressableHighlight } from "./pressable_highlight";
 import { colors } from "./colors";
-import { ACTIVE_RING } from "./control_surface";
+import { ACTIVE_RING, CONTROL_RADIUS } from "./control_surface";
 import { fontFamilyRegular, getInputTextStyle } from "./text_utils";
 
 /** The kit's standard control height (TextInputField, NumberInput, Picker, …).
@@ -221,7 +221,7 @@ const viewTextStyle = [getInputTextStyle(), { flex: 1, fontFamily: fontFamilyReg
 const styles = StyleSheet.create({
   view: {
     minHeight: INLINE_CONTROL_HEIGHT,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     borderWidth: 1,
     borderColor: "transparent",
     paddingHorizontal: 8,

package/src/link_button.tsx

@@ -1,6 +1,7 @@
 import { StyleSheet } from "react-native";
 import { Text } from "./text";
 import { PressableHighlight } from "./pressable_highlight";
+import { CONTROL_RADIUS } from "./control_surface";
 
 export interface LinkButtonProps {
   title: string;
@@ -44,7 +45,7 @@ const styles = StyleSheet.create({
     paddingVertical: 6,
     paddingHorizontal: 8,
     marginHorizontal: -8,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     alignSelf: "flex-start",
   },
 });

package/src/menu_button.tsx

@@ -2,6 +2,7 @@ import { Ref } from "react";
 import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { Icon, IconName } from "./icon";
 import { PressableHighlight } from "./pressable_highlight";
 export interface MenuButtonProps {
@@ -126,7 +127,7 @@ const styles = StyleSheet.create({
     gap: 8,
     height: 40,
     paddingHorizontal: 8,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
   },
   textContainer: {
     flex: 1,

package/src/menu_list_item.tsx

@@ -2,6 +2,7 @@ import { Ref } from "react";
 import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { Icon, IconName } from "./icon";
 import { PressableHighlight } from "./pressable_highlight";
 import type { TextColor } from "./text_utils";
@@ -111,7 +112,7 @@ const styles = StyleSheet.create({
     gap: 8,
     paddingHorizontal: 8,
     paddingVertical: 8,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
   },
   textContainer: {
     flex: 1,

package/src/number_input.tsx

@@ -1,5 +1,6 @@
 import type { KeyboardEvent } from "react";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { fontFamilyRegular, inputTextStyleWeb } from "./text_utils";
 import { useFormField } from "./form_field";
 
@@ -50,7 +51,7 @@ export function NumberInput(props: NumberInputProps) {
         height: 40,
         paddingLeft: 8,
         paddingRight: 8,
-        borderRadius: 8,
+        borderRadius: CONTROL_RADIUS,
         borderWidth: 1,
         borderStyle: "solid",
         borderColor: colors.border,

package/src/pdfjs_worker.d.ts

@@ -0,0 +1,5 @@
+// The pdf.js worker entry is imported only for its side effect: it assigns
+// `globalThis.pdfjsWorker`, which lets pdf.js run on the main thread (no Web
+// Worker, no worker-URL resolution) — portable across Vite (apps) and Metro
+// (frontend). The file ships no types; declare it as a side-effect module.
+declare module "pdfjs-dist/build/pdf.worker.min.mjs";

package/src/picker.tsx

@@ -2,7 +2,7 @@ import { Picker as RNPicker } from "@react-native-picker/picker";
 import { StyleSheet, View, Pressable, StyleProp, ViewStyle, TextStyle } from "react-native";
 import { useState, useCallback, useMemo, useEffect, useRef } from "react";
 import { colors } from "./colors";
-import { ACTIVE_RING } from "./control_surface";
+import { ACTIVE_RING, CONTROL_RADIUS } from "./control_surface";
 import { Text } from "./text";
 import { fontFamilyRegular, getInputTextStyle } from "./text_utils";
 import { Icon } from "./icon";
@@ -310,7 +310,7 @@ const styles = StyleSheet.create({
     height: 40,
     paddingHorizontal: 6,
     paddingRight: 28,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     borderWidth: 1,
     borderColor: colors.border,
     fontFamily: fontFamilyRegular,
@@ -324,7 +324,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 6,
     borderWidth: 1,
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     cursor: "auto",
     height: 40,
   },

package/src/popover_header.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { View, StyleSheet } from "react-native";
-import { Button } from "./button";
+import { IconButton } from "./icon_button";
 import { Text } from "./text";
 import { usePopoverNav } from "./popover_nav";
 
@@ -18,7 +18,7 @@ export function PopoverHeader(props: PopoverHeaderProps) {
   return (
     <View style={styles.container}>
       {canGoBack && (
-        <Button icon="chevron-left" color="secondary" accessibilityLabel={backLabel} onPress={goBack} />
+        <IconButton icon="chevron-left" size="lg" color="secondary" accessibilityLabel={backLabel} onPress={goBack} />
       )}
       <Text size="sm" weight="medium" style={{ flex: 1 }}>
         {title}

package/src/radio_picker.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useRef } from "react";
 import { View } from "react-native";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { Text } from "./text";
 import { PressableHighlight } from "./pressable_highlight";
 import { Icon } from "./icon";
@@ -120,7 +121,7 @@ function RadioOption<T extends string | number | symbol>(
         flexDirection: "row",
         alignItems: "center",
         padding: compact ? 8 : 12,
-        borderRadius: 8,
+        borderRadius: CONTROL_RADIUS,
         gap: compact ? 8 : 16,
       }}
       onPress={handlePress}

package/src/range_slider.tsx

@@ -24,7 +24,7 @@ export interface RangeSliderProps {
 type Thumb = "low" | "high";
 
 /**
- * A short human summary of a range selection for a `FilterPill` preview —
+ * A short human summary of a range selection for a `FilterChip` preview —
  * "5tr–10tr", or "≥ 5tr" / "≤ 10tr" when one end sits at its bound, and
  * `undefined` at the full range (no active filter). Mirrors `columnFilterSummary`.
  */

package/src/review_card.tsx

@@ -79,7 +79,7 @@ export function ReviewCard(props: ReviewCardProps) {
         <Text size="sm" weight="medium" color="muted" numberOfLines={1}>
           {accepted ? props.acceptedLabel ?? "Accepted" : props.dismissedLabel ?? "Dismissed"}
         </Text>
-        {props.onUndo ? <Button title="Undo" color="muted" shape="rounded" onPress={props.onUndo} /> : null}
+        {props.onUndo ? <Button title="Undo" color="muted" onPress={props.onUndo} /> : null}
       </View>
     );
   }
@@ -132,7 +132,7 @@ export function ReviewCard(props: ReviewCardProps) {
         <View style={styles.footer}>
           {actions.map((a, i) => {
             const kind = a.kind ?? (i === actions.length - 1 ? "primary" : "muted");
-            return <Button key={a.label} title={a.label} color={kind} shape="rounded" onPress={a.onPress} />;
+            return <Button key={a.label} title={a.label} color={kind} onPress={a.onPress} />;
           })}
         </View>
       ) : null}

package/src/scan_field.tsx

@@ -1,5 +1,6 @@
 import { StyleSheet, View } from "react-native";
 import { colors, solid } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { Text } from "./text";
 import { TextInputField } from "./text_input_field";
 
@@ -52,7 +53,7 @@ export function ScanField(props: ScanFieldProps) {
 
 const styles = StyleSheet.create({
   field: {
-    borderRadius: 10,
+    borderRadius: CONTROL_RADIUS,
     backgroundColor: colors.white,
   },
 });

package/src/scored_option.tsx

@@ -94,7 +94,6 @@ export function ScoredOption(props: ScoredOptionProps) {
             title={selected ? "Selected" : selectLabel ?? "Choose"}
             icon={selected ? "check" : undefined}
             color={selected ? "secondary" : "primary"}
-            shape="rounded"
             onPress={onSelect}
           />
         </View>

package/src/search_input.tsx

@@ -9,6 +9,7 @@ import {
   type ViewStyle,
 } from "react-native";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { TextInputField } from "./text_input_field";
 
 type SearchInputProps = Omit<
@@ -57,7 +58,7 @@ export function SearchInput(props: SearchInputProps) {
 
 const styles = StyleSheet.create({
   // Search reads as a view-control by its leading search glyph + white fill —
-  // NOT by a distinct shape. It shares the rounded-8 radius of every other
+  // NOT by a distinct shape. It shares the kit-wide `CONTROL_RADIUS` of every other
   // input/picker (TextInputField, Combobox, the date filter), so a toolbar of
   // controls reads as one consistent band. The white fill still pops against
   // the zinc-50 canvas where most toolbars live; a zinc-300 border (one step up
@@ -65,7 +66,7 @@ const styles = StyleSheet.create({
   // the fill alone would vanish. 40px (TextInputField default) — the system
   // control height every band aligns to.
   search: {
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     backgroundColor: colors.white,
     // A thin 1px resting border (TextInputField's default width) — interaction
     // emphasis comes from the input's own focus outline, so it stays quiet at

package/src/segmented_control.tsx

@@ -3,6 +3,7 @@ import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
 import { PressableHighlight } from "./pressable_highlight";
 import { Text } from "./text";
 import { colors, withAlpha } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 
 export interface SegmentOption<T extends string> {
   label: string;
@@ -183,7 +184,7 @@ const styles = StyleSheet.create({
     height: 40,
     gap: 2,
     padding: 3,
-    borderRadius: 10,
+    borderRadius: CONTROL_RADIUS,
     backgroundColor: colors.zinc["100"],
   },
   trackDisabled: {

package/src/status_badge.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef } from "react";
 import { View, StyleSheet, Animated, Easing } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 
 interface StatusBadgeProps {
   enabled: boolean;
@@ -69,7 +70,7 @@ const styles = StyleSheet.create({
     gap: 8,
     paddingVertical: 4,
     paddingHorizontal: 8,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
   },
   dotWrapper: {
     width: 10,

package/src/stepper.tsx

@@ -155,8 +155,9 @@ export function Step(props: StepProps) {
 
 // The node — status drives fill, never size. Monochrome: reached fills with ink,
 // the current step is a ring around white (pulsing when live), what's ahead is a
-// faint grey ring, the terminal is a checked fill.
-function Marker({ status, color, live }: { status: StepStatus; color: string; live: boolean }) {
+// faint grey ring, the terminal is a checked fill. Exported so `AgentRun` reuses
+// the exact same dot in its flat activity rows.
+export function Marker({ status, color, live }: { status: StepStatus; color: string; live: boolean }) {
   if (status === "done") {
     // A passed step: filled in the accent ink with a white check.
     return (

package/src/switch_button.tsx

@@ -3,6 +3,7 @@ import { Text } from "./text";
 import { Switch, type SwitchProps } from "./switch";
 import { PressableHighlight } from "./pressable_highlight";
 import { Icon, type IconName } from "./icon";
+import { CONTROL_RADIUS } from "./control_surface";
 
 export interface SwitchButtonProps extends SwitchProps {
   icon?: IconName;
@@ -22,7 +23,7 @@ export function SwitchButton(props: SwitchButtonProps) {
         paddingVertical: 4,
         paddingLeft: 8,
         paddingRight: 6,
-        borderRadius: 8,
+        borderRadius: CONTROL_RADIUS,
       }}
       onPress={() => onChange?.(!value)}
       tooltip={tooltip}

package/src/switcher.tsx

@@ -7,6 +7,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "./popover";
 import { Stack } from "./stack";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { CONTROL_HEIGHT, CONTROL_RADIUS } from "./control_surface";
 
 export interface SwitcherItem {
   id: string;
@@ -100,9 +101,9 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 6,
+    height: CONTROL_HEIGHT,
     paddingHorizontal: 10,
-    paddingVertical: 6,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
   },
   popoverBody: {
     minWidth: 220,

package/src/tabs.tsx

@@ -3,6 +3,7 @@ import { View } from "react-native";
 import { PressableHighlight } from "./pressable_highlight";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 
 export interface TabOption<T extends string> {
   label: string;
@@ -138,7 +139,7 @@ function TabButton<T extends string>(props: TabButtonProps<T>) {
             style={{
               paddingVertical: 8,
               paddingHorizontal: 16,
-              borderRadius: 8,
+              borderRadius: CONTROL_RADIUS,
               backgroundColor: pressed
                 ? colors.zinc["100"]
                 : hovered

package/src/tag_input.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useRef, useState } from "react";
 import { Pressable, ScrollView, StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { Text } from "./text";
 import { Icon } from "./icon";
 import { TextInputField } from "./text_input_field";
@@ -161,7 +162,7 @@ const styles = StyleSheet.create({
     paddingVertical: 5,
     borderWidth: 1,
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     backgroundColor: colors.background,
   },
   chip: {

package/src/text_input_field.tsx

@@ -5,6 +5,7 @@ import {
   View,
 } from "react-native";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { Ref, useCallback } from "react";
 import { Icon, IconName } from "./icon";
 import { IconButton } from "./icon_button";
@@ -163,7 +164,7 @@ export function TextInputField(props: TextInputFieldProps) {
 
 const styles = StyleSheet.create({
   input: {
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     borderWidth: 1,
     borderColor: colors.border,
     height: 40,

package/src/time_field.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Pressable, ScrollView, StyleSheet, View } from "react-native";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { Text } from "./text";
 import { Icon } from "./icon";
 import { Popover, PopoverContent } from "./popover";
@@ -266,7 +267,7 @@ const styles = StyleSheet.create({
     height: 40,
     paddingHorizontal: 8,
     gap: 2,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     borderWidth: 1,
     borderColor: colors.border,
     backgroundColor: colors.background,

package/src/time_picker.tsx

@@ -1,6 +1,7 @@
 import type { KeyboardEvent } from "react";
 import { colors } from "@lotics/ui/colors";
 import { fontFamilyRegular, inputTextStyleWeb } from "@lotics/ui/text_utils";
+import { CONTROL_RADIUS } from "./control_surface";
 export interface TimePickerProps {
   value?: string;
   onValueChange: (value: string) => void;
@@ -31,7 +32,7 @@ export function TimePicker(props: TimePickerProps) {
         height: 40,
         paddingLeft: 8,
         paddingRight: 8,
-        borderRadius: 8,
+        borderRadius: CONTROL_RADIUS,
         borderWidth: 1,
         borderStyle: "solid",
         borderColor: colors.border,

package/src/triage_row.tsx

@@ -74,9 +74,9 @@ export function TriageRow(props: TriageRowProps) {
         </Text>
       ) : (
         <View style={styles.footer}>
-          {props.onOverride ? <Button title="Reclassify" color="muted" shape="rounded" onPress={props.onOverride} /> : null}
-          {props.onDismiss ? <Button title="Dismiss" color="muted" shape="rounded" onPress={props.onDismiss} /> : null}
-          {props.onAccept ? <Button title="Accept" color="primary" shape="rounded" onPress={props.onAccept} /> : null}
+          {props.onOverride ? <Button title="Reclassify" color="muted" onPress={props.onOverride} /> : null}
+          {props.onDismiss ? <Button title="Dismiss" color="muted" onPress={props.onDismiss} /> : null}
+          {props.onAccept ? <Button title="Accept" color="primary" onPress={props.onAccept} /> : null}
         </View>
       )}
     </View>