@upstep/react-native 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@upstep/react-native",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Upstep feedback SDK for React Native",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -12,7 +12,7 @@
     }
   },
   "dependencies": {
-    "@upstep/types": "0.2.0"
+    "@upstep/types": "0.4.0"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=4",

package/src/FeedbackButton.tsx

@@ -8,14 +8,19 @@ interface Props {
 }
 
 export function FeedbackButton({ position = "bottom-right", label = "Feedback" }: Props) {
-  const { openSheet } = useUpstep();
+  const { openSheet, accentColor } = useUpstep();
 
   return (
     <TouchableOpacity
       onPress={openSheet}
-      style={[styles.btn, position === "bottom-left" ? styles.left : styles.right]}
+      style={[
+        styles.btn,
+        { backgroundColor: accentColor },
+        position === "bottom-left" ? styles.left : styles.right,
+      ]}
       activeOpacity={0.85}
     >
+      <Text style={styles.icon}>💬</Text>
       <Text style={styles.label}>{label}</Text>
     </TouchableOpacity>
   );
@@ -25,18 +30,21 @@ const styles = StyleSheet.create({
   btn: {
     position: "absolute",
     bottom: 24,
-    backgroundColor: "#6366f1",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
     borderRadius: 9999,
     paddingVertical: 12,
-    paddingHorizontal: 20,
+    paddingHorizontal: 18,
     shadowColor: "#000",
-    shadowOffset: { width: 0, height: 4 },
+    shadowOffset: { width: 0, height: 5 },
     shadowOpacity: 0.2,
-    shadowRadius: 6,
+    shadowRadius: 10,
     elevation: 6,
     zIndex: 100,
   },
   right: { right: 20 },
   left: { left: 20 },
+  icon: { fontSize: 14 },
   label: { color: "#fff", fontSize: 14, fontWeight: "600" },
 });

package/src/FeedbackContext.tsx

@@ -11,6 +11,8 @@ import type { Feedback, FeedbackType, UpstepConfig, VoteValue } from "@upstep/ty
 import { UpstepApiClient } from "./api";
 import type BottomSheet from "@gorhom/bottom-sheet";
 
+const DEFAULT_ACCENT = "#D97757";
+
 interface UpstepContextValue {
   client: UpstepApiClient;
   feedItems: Feedback[];
@@ -22,6 +24,10 @@ interface UpstepContextValue {
   /** Set / update the end-user id at runtime (e.g. after the user logs in). */
   identify: (userId: string | undefined) => void;
   sheetRef: React.RefObject<BottomSheet | null>;
+  /** Accent color from provider config (default applied). */
+  accentColor: string;
+  /** Theme mode from provider config (default "auto"). */
+  theme: "light" | "dark" | "auto";
 }
 
 const UpstepContext = createContext<UpstepContextValue | null>(null);
@@ -69,7 +75,13 @@ export function FeedbackProvider({
   const identify = useCallback((userId: string | undefined) => client.setUserId(userId), [client]);
 
   return (
-    <UpstepContext.Provider value={{ client, feedItems, loadFeed, submit, vote, openSheet, identify, sheetRef }}>
+    <UpstepContext.Provider
+      value={{
+        client, feedItems, loadFeed, submit, vote, openSheet, identify, sheetRef,
+        accentColor: config.accentColor ?? DEFAULT_ACCENT,
+        theme: config.theme ?? "auto",
+      }}
+    >
       {children}
     </UpstepContext.Provider>
   );

package/src/FeedbackSheet.tsx

@@ -5,8 +5,8 @@ import {
   TextInput,
   TouchableOpacity,
   StyleSheet,
-  ScrollView,
   ActivityIndicator,
+  useColorScheme,
 } from "react-native";
 import BottomSheet, { BottomSheetView, BottomSheetScrollView } from "@gorhom/bottom-sheet";
 import type { Feedback, FeedbackType } from "@upstep/types";
@@ -15,10 +15,37 @@ import { useUpstep } from "./FeedbackContext";
 type Tab = "submit" | "feed";
 
 const TYPES: FeedbackType[] = ["BUG", "FEATURE", "GENERAL"];
+const TYPE_LABELS: Record<FeedbackType, string> = {
+  BUG: "🐞 Bug", FEATURE: "✨ Feature", GENERAL: "💬 General",
+};
+
+interface Palette {
+  bg: string;
+  bgSoft: string;
+  text: string;
+  textSoft: string;
+  textFaint: string;
+  border: string;
+  handle: string;
+}
+
+const LIGHT: Palette = {
+  bg: "#ffffff", bgSoft: "#f6f5f2", text: "#1a1915",
+  textSoft: "#56544d", textFaint: "#9b9890", border: "#e8e6df", handle: "#dad7ce",
+};
+const DARK: Palette = {
+  bg: "#1c1b19", bgSoft: "#262522", text: "#f5f4f0",
+  textSoft: "#b4b1a8", textFaint: "#7d7a72", border: "#33312c", handle: "#48453f",
+};
 
 export function FeedbackSheet() {
-  const { feedItems, submit, vote, sheetRef } = useUpstep();
-  const snapPoints = useMemo(() => ["75%", "95%"], []);
+  const { feedItems, submit, vote, sheetRef, accentColor, theme } = useUpstep();
+  const scheme = useColorScheme();
+  const isDark = theme === "dark" || (theme === "auto" && scheme === "dark");
+  const p = isDark ? DARK : LIGHT;
+  const accent = accentColor;
+
+  const snapPoints = useMemo(() => ["80%"], []);
   const [tab, setTab] = useState<Tab>("submit");
   const [content, setContent] = useState("");
   const [type, setType] = useState<FeedbackType>("GENERAL");
@@ -31,7 +58,7 @@ export function FeedbackSheet() {
     try {
       await submit(content.trim(), type);
       setContent("");
-      setMsg("Thanks for your feedback!");
+      setMsg("Thanks — we got your feedback! 🎉");
     } catch {
       setMsg("Something went wrong. Please try again.");
     } finally {
@@ -45,25 +72,33 @@ export function FeedbackSheet() {
       index={-1}
       snapPoints={snapPoints}
       enablePanDownToClose
-      backgroundStyle={styles.sheet}
-      handleIndicatorStyle={styles.handle}
+      backgroundStyle={{ backgroundColor: p.bg, borderRadius: 24 }}
+      handleIndicatorStyle={{ backgroundColor: p.handle, width: 40, height: 4 }}
     >
       <BottomSheetView style={styles.header}>
-        <Text style={styles.title}>Share feedback</Text>
+        <Text style={[styles.title, { color: p.text }]}>Share your feedback</Text>
+        <Text style={[styles.subtitle, { color: p.textFaint }]}>
+          Tell us what to build next, or vote on ideas.
+        </Text>
       </BottomSheetView>
 
-      <View style={styles.tabs}>
-        {(["submit", "feed"] as Tab[]).map((t) => (
-          <TouchableOpacity
-            key={t}
-            onPress={() => setTab(t)}
-            style={[styles.tab, tab === t && styles.activeTab]}
-          >
-            <Text style={[styles.tabText, tab === t && styles.activeTabText]}>
-              {t === "submit" ? "Submit" : "Votes & Ideas"}
-            </Text>
-          </TouchableOpacity>
-        ))}
+      {/* Segmented control */}
+      <View style={[styles.segment, { backgroundColor: p.bgSoft }]}>
+        {(["submit", "feed"] as Tab[]).map((t) => {
+          const active = tab === t;
+          return (
+            <TouchableOpacity
+              key={t}
+              onPress={() => setTab(t)}
+              activeOpacity={0.8}
+              style={[styles.segmentBtn, active && { backgroundColor: p.bg, shadowOpacity: 0.08 }]}
+            >
+              <Text style={[styles.segmentText, { color: active ? p.text : p.textSoft }]}>
+                {t === "submit" ? "Give feedback" : "Vote on ideas"}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
       </View>
 
       {tab === "submit" ? (
@@ -72,28 +107,36 @@ export function FeedbackSheet() {
             value={content}
             onChangeText={setContent}
             placeholder="What's on your mind?"
-            placeholderTextColor="#9ca3af"
+            placeholderTextColor={p.textFaint}
             multiline
             maxLength={2000}
-            style={styles.textarea}
+            style={[styles.textarea, { borderColor: p.border, backgroundColor: p.bgSoft, color: p.text }]}
           />
           <View style={styles.typeRow}>
-            {TYPES.map((t) => (
-              <TouchableOpacity
-                key={t}
-                onPress={() => setType(t)}
-                style={[styles.typeBtn, type === t && styles.selectedTypeBtn]}
-              >
-                <Text style={[styles.typeBtnText, type === t && styles.selectedTypeBtnText]}>
-                  {t.charAt(0) + t.slice(1).toLowerCase()}
-                </Text>
-              </TouchableOpacity>
-            ))}
+            {TYPES.map((t) => {
+              const active = type === t;
+              return (
+                <TouchableOpacity
+                  key={t}
+                  onPress={() => setType(t)}
+                  activeOpacity={0.8}
+                  style={[
+                    styles.typeBtn,
+                    { borderColor: active ? accent : p.border, backgroundColor: active ? accent : p.bg },
+                  ]}
+                >
+                  <Text style={[styles.typeBtnText, { color: active ? "#fff" : p.textSoft }]}>
+                    {TYPE_LABELS[t]}
+                  </Text>
+                </TouchableOpacity>
+              );
+            })}
           </View>
           <TouchableOpacity
             onPress={handleSubmit}
             disabled={loading || !content.trim()}
-            style={[styles.submitBtn, (loading || !content.trim()) && styles.disabledBtn]}
+            activeOpacity={0.85}
+            style={[styles.submitBtn, { backgroundColor: accent }, (loading || !content.trim()) && styles.disabledBtn]}
           >
             {loading ? (
               <ActivityIndicator color="#fff" />
@@ -101,15 +144,18 @@ export function FeedbackSheet() {
               <Text style={styles.submitBtnText}>Send feedback</Text>
             )}
           </TouchableOpacity>
-          {msg ? <Text style={styles.msgText}>{msg}</Text> : null}
+          {msg ? <Text style={[styles.msgText, { color: accent }]}>{msg}</Text> : null}
         </BottomSheetView>
       ) : (
         <BottomSheetScrollView contentContainerStyle={styles.body}>
           {feedItems.length === 0 ? (
-            <Text style={styles.emptyText}>No feedback yet. Be the first!</Text>
+            <View style={styles.empty}>
+              <Text style={[styles.emptyTitle, { color: p.textSoft }]}>No ideas yet</Text>
+              <Text style={[styles.emptyText, { color: p.textFaint }]}>Be the first to share one.</Text>
+            </View>
           ) : (
             feedItems.map((f) => (
-              <FeedItem key={f.id} item={f} onVote={vote} />
+              <FeedItem key={f.id} item={f} onVote={vote} accent={accent} p={p} />
             ))
           )}
         </BottomSheetScrollView>
@@ -118,62 +164,76 @@ export function FeedbackSheet() {
   );
 }
 
-function FeedItem({ item, onVote }: { item: Feedback; onVote: (id: string, v: "UP" | "DOWN") => void }) {
+const BADGE_BG: Record<string, string> = { BUG: "#fdecec", FEATURE: "#e9f0fd" };
+const BADGE_FG: Record<string, string> = { BUG: "#d6453d", FEATURE: "#3b76d6" };
+
+function FeedItem({
+  item, onVote, accent, p,
+}: {
+  item: Feedback;
+  onVote: (id: string, v: "UP" | "DOWN") => void;
+  accent: string;
+  p: Palette;
+}) {
+  const voted = item.userVote === "UP";
   return (
-    <View style={styles.feedItem}>
-      <Text style={styles.feedContent}>{item.content}</Text>
-      <View style={styles.feedMeta}>
-        <View style={[styles.badge, item.type === "BUG" ? styles.badgeBug : item.type === "FEATURE" ? styles.badgeFeature : styles.badgeGeneral]}>
-          <Text style={[styles.badgeText, item.type === "BUG" ? { color: "#dc2626" } : item.type === "FEATURE" ? { color: "#2563eb" } : { color: "#6b7280" }]}>
-            {item.type}
+    <View style={[styles.feedItem, { borderColor: p.border, backgroundColor: p.bg }]}>
+      <TouchableOpacity
+        onPress={() => onVote(item.id, "UP")}
+        activeOpacity={0.8}
+        style={[
+          styles.vote,
+          { borderColor: voted ? accent : p.border, backgroundColor: voted ? `${accent}1a` : p.bgSoft },
+        ]}
+      >
+        <Text style={[styles.voteArrow, { color: accent }]}>▲</Text>
+        <Text style={[styles.voteCount, { color: p.text }]}>{item.upvotes}</Text>
+      </TouchableOpacity>
+      <View style={styles.feedMain}>
+        <Text style={[styles.feedContent, { color: p.text }]}>{item.content}</Text>
+        <View style={styles.feedMeta}>
+          <View style={[styles.badge, { backgroundColor: BADGE_BG[item.type] ?? p.bgSoft }]}>
+            <Text style={[styles.badgeText, { color: BADGE_FG[item.type] ?? p.textSoft }]}>{item.type}</Text>
+          </View>
+          <Text style={[styles.feedDate, { color: p.textFaint }]}>
+            {new Date(item.createdAt).toLocaleDateString()}
           </Text>
         </View>
-        <Text style={styles.feedDate}>{new Date(item.createdAt).toLocaleDateString()}</Text>
-      </View>
-      <View style={styles.voteRow}>
-        <TouchableOpacity style={styles.voteBtn} onPress={() => onVote(item.id, "UP")}>
-          <Text style={styles.voteBtnText}>▲ {item.upvotes}</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.voteBtn} onPress={() => onVote(item.id, "DOWN")}>
-          <Text style={styles.voteBtnText}>▼ {item.downvotes}</Text>
-        </TouchableOpacity>
       </View>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  sheet: { backgroundColor: "#fff", borderRadius: 16 },
-  handle: { backgroundColor: "#d1d5db", width: 36, height: 4 },
-  header: { paddingHorizontal: 20, paddingTop: 8, paddingBottom: 12, borderBottomWidth: 1, borderBottomColor: "#e5e7eb" },
-  title: { fontSize: 16, fontWeight: "700", color: "#111827" },
-  tabs: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: "#e5e7eb" },
-  tab: { flex: 1, paddingVertical: 12, alignItems: "center", borderBottomWidth: 2, borderBottomColor: "transparent" },
-  activeTab: { borderBottomColor: "#6366f1" },
-  tabText: { fontSize: 13, fontWeight: "500", color: "#6b7280" },
-  activeTabText: { color: "#6366f1" },
-  body: { padding: 16 },
-  textarea: { borderWidth: 1, borderColor: "#d1d5db", borderRadius: 8, padding: 10, fontSize: 14, minHeight: 100, textAlignVertical: "top", color: "#111827" },
-  typeRow: { flexDirection: "row", gap: 8, marginVertical: 10 },
-  typeBtn: { paddingVertical: 5, paddingHorizontal: 12, borderRadius: 9999, borderWidth: 1, borderColor: "#d1d5db" },
-  selectedTypeBtn: { backgroundColor: "#6366f1", borderColor: "#6366f1" },
-  typeBtnText: { fontSize: 12, color: "#374151" },
-  selectedTypeBtnText: { color: "#fff" },
-  submitBtn: { backgroundColor: "#6366f1", borderRadius: 8, padding: 12, alignItems: "center", marginTop: 8 },
+  header: { paddingHorizontal: 20, paddingTop: 4, paddingBottom: 4 },
+  title: { fontSize: 17, fontWeight: "700", letterSpacing: -0.2 },
+  subtitle: { fontSize: 12.5, marginTop: 3 },
+  segment: { flexDirection: "row", gap: 4, marginHorizontal: 20, marginTop: 16, padding: 4, borderRadius: 12 },
+  segmentBtn: {
+    flex: 1, paddingVertical: 9, alignItems: "center", borderRadius: 9,
+    shadowColor: "#000", shadowOffset: { width: 0, height: 1 }, shadowRadius: 3, shadowOpacity: 0,
+  },
+  segmentText: { fontSize: 13, fontWeight: "600" },
+  body: { padding: 20 },
+  textarea: { borderWidth: 1, borderRadius: 12, padding: 12, fontSize: 14, minHeight: 110, textAlignVertical: "top", lineHeight: 21 },
+  typeRow: { flexDirection: "row", gap: 7, marginVertical: 12 },
+  typeBtn: { flex: 1, paddingVertical: 9, alignItems: "center", borderRadius: 9, borderWidth: 1 },
+  typeBtnText: { fontSize: 12.5, fontWeight: "600" },
+  submitBtn: { borderRadius: 11, padding: 13, alignItems: "center", marginTop: 4 },
   disabledBtn: { opacity: 0.5 },
   submitBtnText: { color: "#fff", fontSize: 14, fontWeight: "600" },
-  msgText: { textAlign: "center", fontSize: 13, color: "#6b7280", marginTop: 8 },
-  emptyText: { textAlign: "center", color: "#9ca3af", fontSize: 14, paddingVertical: 32 },
-  feedItem: { paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: "#f3f4f6" },
-  feedContent: { fontSize: 14, color: "#1f2937", marginBottom: 6 },
-  feedMeta: { flexDirection: "row", alignItems: "center", gap: 8, marginBottom: 8 },
+  msgText: { textAlign: "center", fontSize: 13, fontWeight: "500", marginTop: 12 },
+  empty: { alignItems: "center", paddingVertical: 40 },
+  emptyTitle: { fontSize: 15, fontWeight: "600", marginBottom: 4 },
+  emptyText: { fontSize: 14 },
+  feedItem: { flexDirection: "row", gap: 12, padding: 14, borderWidth: 1, borderRadius: 14, marginBottom: 10 },
+  vote: { minWidth: 46, paddingVertical: 7, borderRadius: 11, borderWidth: 1, alignItems: "center", justifyContent: "center" },
+  voteArrow: { fontSize: 11, lineHeight: 13 },
+  voteCount: { fontSize: 14, fontWeight: "700", lineHeight: 17 },
+  feedMain: { flex: 1 },
+  feedContent: { fontSize: 13.5, lineHeight: 20, marginBottom: 8 },
+  feedMeta: { flexDirection: "row", alignItems: "center", gap: 7 },
   badge: { paddingHorizontal: 8, paddingVertical: 2, borderRadius: 9999 },
-  badgeBug: { backgroundColor: "#fee2e2" },
-  badgeFeature: { backgroundColor: "#dbeafe" },
-  badgeGeneral: { backgroundColor: "#f3f4f6" },
-  badgeText: { fontSize: 11, fontWeight: "500" },
-  feedDate: { fontSize: 11, color: "#9ca3af" },
-  voteRow: { flexDirection: "row", gap: 8 },
-  voteBtn: { flexDirection: "row", alignItems: "center", paddingHorizontal: 10, paddingVertical: 4, borderRadius: 9999, borderWidth: 1, borderColor: "#e5e7eb" },
-  voteBtnText: { fontSize: 12, color: "#374151" },
+  badgeText: { fontSize: 10.5, fontWeight: "700", letterSpacing: 0.2 },
+  feedDate: { fontSize: 11 },
 });