@buoy-gg/impersonate 1.0.3-beta.0

package/lib/module/impersonate/components/DataNukeSettings.js

@@ -0,0 +1,710 @@
+"use strict";
+
+/**
+ * DataNukeSettings Component
+ *
+ * Settings panel for configuring what data to clear on impersonation change.
+ * Features Save/Discard/Restore pattern for reliable persistence.
+ */
+
+import React, { useState, useEffect, useMemo } from "react";
+import { View, Text, TextInput, StyleSheet, Switch, ScrollView, TouchableOpacity } from "react-native";
+import { CollapsibleSection, buoyColors, Settings, AlertTriangle, Info, Zap, RefreshCw, Check, X, Copy, Eye, copyToClipboard } from "@buoy-gg/shared-ui";
+import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const DEFAULT_HEADER_KEY = "x-impersonate-user-id";
+const DEFAULT_SHOW_BANNER = true;
+const DEFAULT_DATA_NUKE_SETTINGS = {
+  reactQuery: true,
+  redux: true,
+  asyncStorage: false,
+  mmkv: false
+};
+
+/**
+ * Detection status for auto-clear integrations
+ */
+
+function ToggleRow({
+  label,
+  description,
+  value,
+  onChange,
+  recommended,
+  dangerous,
+  detected
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.toggleRow,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.toggleInfo,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.toggleHeader,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.toggleLabel, dangerous && styles.dangerousLabel],
+          children: label
+        }), detected !== undefined && /*#__PURE__*/_jsxs(View, {
+          style: [styles.detectedBadge, detected ? styles.detectedBadgeActive : styles.detectedBadgeInactive],
+          children: [detected ? /*#__PURE__*/_jsx(Check, {
+            size: 10,
+            color: buoyColors.success
+          }) : /*#__PURE__*/_jsx(X, {
+            size: 10,
+            color: buoyColors.textMuted
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.detectedText, detected ? styles.detectedTextActive : styles.detectedTextInactive],
+            children: detected ? "Detected" : "Not Detected"
+          })]
+        }), recommended && detected !== false && /*#__PURE__*/_jsxs(View, {
+          style: styles.recommendedBadge,
+          children: [/*#__PURE__*/_jsx(Zap, {
+            size: 10,
+            color: buoyColors.primary
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.recommendedText,
+            children: "Recommended"
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.toggleDescription,
+        children: description
+      })]
+    }), /*#__PURE__*/_jsx(Switch, {
+      value: value,
+      onValueChange: onChange,
+      trackColor: {
+        false: buoyColors.border,
+        true: dangerous ? buoyColors.warning + "50" : buoyColors.primary + "50"
+      },
+      thumbColor: value ? dangerous ? buoyColors.warning : buoyColors.primary : buoyColors.textMuted
+    })]
+  });
+}
+export function DataNukeSettings({
+  headerKey,
+  settings,
+  showBanner,
+  onSave,
+  onShowBannerChange,
+  detectionStatus
+}) {
+  // Local state for editing
+  const [localHeaderKey, setLocalHeaderKey] = useState(headerKey);
+  const [localSettings, setLocalSettings] = useState(settings);
+  const [localShowBanner, setLocalShowBanner] = useState(showBanner);
+  const [copySuccess, setCopySuccess] = useState(false);
+
+  // Sync local state when props change (e.g., after async load from storage)
+  useEffect(() => {
+    setLocalHeaderKey(headerKey);
+  }, [headerKey]);
+  useEffect(() => {
+    setLocalSettings(settings);
+  }, [settings]);
+  useEffect(() => {
+    setLocalShowBanner(showBanner);
+  }, [showBanner]);
+
+  // Check if there are unsaved changes
+  // Note: showBanner is not included here because it applies immediately
+  const hasChanges = useMemo(() => {
+    return localHeaderKey !== headerKey || localSettings.reactQuery !== settings.reactQuery || localSettings.redux !== settings.redux || localSettings.asyncStorage !== settings.asyncStorage || localSettings.mmkv !== settings.mmkv;
+  }, [localHeaderKey, localSettings, headerKey, settings]);
+
+  // Check if current values differ from defaults
+  const isDefault = useMemo(() => {
+    return localHeaderKey === DEFAULT_HEADER_KEY && localShowBanner === DEFAULT_SHOW_BANNER && localSettings.reactQuery === DEFAULT_DATA_NUKE_SETTINGS.reactQuery && localSettings.redux === DEFAULT_DATA_NUKE_SETTINGS.redux && localSettings.asyncStorage === DEFAULT_DATA_NUKE_SETTINGS.asyncStorage && localSettings.mmkv === DEFAULT_DATA_NUKE_SETTINGS.mmkv;
+  }, [localHeaderKey, localShowBanner, localSettings]);
+  const handleSave = () => {
+    onSave(localHeaderKey.trim() || DEFAULT_HEADER_KEY, localSettings, localShowBanner);
+  };
+  const handleDiscard = () => {
+    setLocalHeaderKey(headerKey);
+    setLocalSettings(settings);
+    setLocalShowBanner(showBanner);
+  };
+  const handleRestoreDefaults = () => {
+    setLocalHeaderKey(DEFAULT_HEADER_KEY);
+    setLocalSettings(DEFAULT_DATA_NUKE_SETTINGS);
+    setLocalShowBanner(DEFAULT_SHOW_BANNER);
+    onShowBannerChange(DEFAULT_SHOW_BANNER); // Apply banner change immediately
+  };
+  const updateLocalSetting = (key, value) => {
+    setLocalSettings(prev => ({
+      ...prev,
+      [key]: value
+    }));
+  };
+
+  // Config object for DataViewer and copying
+  const configData = useMemo(() => ({
+    defaults: {
+      headerKey: localHeaderKey,
+      showBanner: localShowBanner,
+      dataNukeSettings: {
+        reactQuery: localSettings.reactQuery,
+        redux: localSettings.redux,
+        asyncStorage: localSettings.asyncStorage,
+        mmkv: localSettings.mmkv
+      }
+    }
+  }), [localHeaderKey, localShowBanner, localSettings]);
+  const handleCopyConfig = async () => {
+    // Format as JS object literal (not JSON) for direct paste into createImpersonateTool()
+    const configString = `defaults: {
+  headerKey: '${localHeaderKey}',
+  showBanner: ${localShowBanner},
+  dataNukeSettings: {
+    reactQuery: ${localSettings.reactQuery},
+    redux: ${localSettings.redux},
+    asyncStorage: ${localSettings.asyncStorage},
+    mmkv: ${localSettings.mmkv},
+  },
+},`;
+    try {
+      await copyToClipboard(configString);
+      setCopySuccess(true);
+      setTimeout(() => setCopySuccess(false), 2000);
+    } catch {
+      // Silently fail - user will notice copy didn't work
+    }
+  };
+  return /*#__PURE__*/_jsxs(ScrollView, {
+    style: styles.container,
+    contentContainerStyle: styles.contentContainer,
+    children: [hasChanges && /*#__PURE__*/_jsx(View, {
+      style: styles.actionBar,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.actionBarContent,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.unsavedText,
+          children: "Unsaved changes"
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.actionButtons,
+          children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: styles.discardButton,
+            onPress: handleDiscard,
+            children: [/*#__PURE__*/_jsx(X, {
+              size: 14,
+              color: buoyColors.textSecondary
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.discardButtonText,
+              children: "Discard"
+            })]
+          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: styles.saveButton,
+            onPress: handleSave,
+            children: [/*#__PURE__*/_jsx(Check, {
+              size: 14,
+              color: "#fff"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.saveButtonText,
+              children: "Save"
+            })]
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsx(CollapsibleSection, {
+      title: "Header Configuration",
+      icon: Settings,
+      defaultOpen: true,
+      variant: "bordered",
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.sectionContent,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.inputLabel,
+          children: "Header Key"
+        }), /*#__PURE__*/_jsx(TextInput, {
+          style: styles.input,
+          value: localHeaderKey,
+          onChangeText: setLocalHeaderKey,
+          placeholder: "x-impersonate-user-id",
+          placeholderTextColor: buoyColors.textMuted,
+          autoCapitalize: "none",
+          autoCorrect: false
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.inputFooter,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.helperText,
+            children: "The HTTP header key used for impersonation. Value will be the user ID."
+          }), localHeaderKey !== DEFAULT_HEADER_KEY && /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: () => setLocalHeaderKey(DEFAULT_HEADER_KEY),
+            style: styles.resetLink,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.resetLinkText,
+              children: "Reset to default"
+            })
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsx(CollapsibleSection, {
+      title: "Display",
+      icon: Eye,
+      defaultOpen: true,
+      variant: "bordered",
+      children: /*#__PURE__*/_jsx(View, {
+        style: styles.sectionContent,
+        children: /*#__PURE__*/_jsx(View, {
+          style: styles.togglesCard,
+          children: /*#__PURE__*/_jsx(ToggleRow, {
+            label: "Floating Banner",
+            description: "Show a floating banner when impersonation is active",
+            value: localShowBanner,
+            onChange: value => {
+              setLocalShowBanner(value);
+              onShowBannerChange(value); // Apply immediately
+            },
+            recommended: true
+          })
+        })
+      })
+    }), /*#__PURE__*/_jsx(CollapsibleSection, {
+      title: "Data Clearing",
+      icon: AlertTriangle,
+      defaultOpen: true,
+      variant: "bordered",
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.sectionContent,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.sectionDescription,
+          children: "Choose what data to clear when impersonation starts or stops. This ensures you see fresh data for the impersonated user."
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.togglesCard,
+          children: [/*#__PURE__*/_jsx(ToggleRow, {
+            label: "React Query",
+            description: "Clear query cache and cancel pending queries",
+            value: localSettings.reactQuery,
+            onChange: v => updateLocalSetting("reactQuery", v),
+            recommended: true,
+            detected: detectionStatus?.reactQuery
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.divider
+          }), /*#__PURE__*/_jsx(ToggleRow, {
+            label: "Redux",
+            description: "Reset Redux store to initial state",
+            value: localSettings.redux,
+            onChange: v => updateLocalSetting("redux", v),
+            recommended: true,
+            detected: detectionStatus?.redux
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.advancedSection,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.advancedLabel,
+            children: "Storage Options"
+          }), /*#__PURE__*/_jsxs(View, {
+            style: [styles.togglesCard, styles.dangerousCard],
+            children: [/*#__PURE__*/_jsx(ToggleRow, {
+              label: "AsyncStorage",
+              description: "Clear app data (preserves @buoy/* keys)",
+              value: localSettings.asyncStorage,
+              onChange: v => updateLocalSetting("asyncStorage", v),
+              dangerous: true,
+              detected: detectionStatus?.asyncStorage
+            }), /*#__PURE__*/_jsx(View, {
+              style: styles.divider
+            }), /*#__PURE__*/_jsx(ToggleRow, {
+              label: "MMKV",
+              description: "Clear MMKV storage (preserves @buoy/* keys)",
+              value: localSettings.mmkv,
+              onChange: v => updateLocalSetting("mmkv", v),
+              dangerous: true,
+              detected: detectionStatus?.mmkv
+            })]
+          })]
+        }), (localSettings.asyncStorage || localSettings.mmkv) && /*#__PURE__*/_jsxs(View, {
+          style: styles.warningCard,
+          children: [/*#__PURE__*/_jsx(AlertTriangle, {
+            size: 16,
+            color: buoyColors.warning
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.warningContent,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.warningTitle,
+              children: "Storage Clearing Enabled"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.warningText,
+              children: "This will remove app data like settings and cached content. Auth tokens managed by @buoy/* are preserved."
+            })]
+          })]
+        })]
+      })
+    }), !isDefault && /*#__PURE__*/_jsxs(TouchableOpacity, {
+      style: styles.restoreButton,
+      onPress: handleRestoreDefaults,
+      children: [/*#__PURE__*/_jsx(RefreshCw, {
+        size: 14,
+        color: buoyColors.textSecondary
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.restoreButtonText,
+        children: "Restore Defaults"
+      })]
+    }), /*#__PURE__*/_jsx(CollapsibleSection, {
+      title: "How It Works",
+      icon: Info,
+      defaultOpen: false,
+      variant: "bordered",
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.sectionContent,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.infoText,
+          children: "When impersonation is enabled, the configured header is automatically added to all outgoing fetch and XMLHttpRequest calls."
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.infoText, styles.infoTextSpaced],
+          children: "Your backend should check for this header and return data for the specified user ID instead of the authenticated user."
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.codeBlock,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.codeComment,
+            children: "// Example request header"
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: styles.codeText,
+            children: [localHeaderKey || "x-impersonate-user-id", ": ", /*#__PURE__*/_jsx(Text, {
+              style: styles.codeValue,
+              children: "user_123"
+            })]
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsx(CollapsibleSection, {
+      title: "Export Configuration",
+      icon: Copy,
+      defaultOpen: false,
+      variant: "bordered",
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.sectionContent,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.infoText,
+          children: "Copy current settings to use in createImpersonateTool()."
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.dataViewerContainer,
+          children: /*#__PURE__*/_jsx(DataViewer, {
+            title: "",
+            data: configData,
+            showTypeFilter: false,
+            initialExpanded: true
+          })
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.copyButton,
+          onPress: handleCopyConfig,
+          children: copySuccess ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Check, {
+              size: 14,
+              color: buoyColors.success
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.copyButtonText, styles.copySuccessText],
+              children: "Copied!"
+            })]
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Copy, {
+              size: 14,
+              color: buoyColors.primary
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.copyButtonText,
+              children: "Copy Config"
+            })]
+          })
+        })]
+      })
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  contentContainer: {
+    padding: 16,
+    gap: 12,
+    paddingBottom: 32
+  },
+  actionBar: {
+    backgroundColor: buoyColors.primary + "15",
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: buoyColors.primary + "30",
+    padding: 12
+  },
+  actionBarContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  unsavedText: {
+    fontSize: 13,
+    fontWeight: "500",
+    color: buoyColors.primary
+  },
+  actionButtons: {
+    flexDirection: "row",
+    gap: 8
+  },
+  saveButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    backgroundColor: buoyColors.primary,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 6
+  },
+  saveButtonText: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: "#fff"
+  },
+  discardButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    backgroundColor: buoyColors.hover,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: buoyColors.border
+  },
+  discardButtonText: {
+    fontSize: 13,
+    fontWeight: "500",
+    color: buoyColors.textSecondary
+  },
+  restoreButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    paddingVertical: 12,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    borderStyle: "dashed"
+  },
+  restoreButtonText: {
+    fontSize: 13,
+    color: buoyColors.textSecondary
+  },
+  sectionContent: {
+    paddingTop: 8
+  },
+  sectionDescription: {
+    fontSize: 13,
+    color: buoyColors.textSecondary,
+    lineHeight: 18,
+    marginBottom: 14
+  },
+  togglesCard: {
+    backgroundColor: buoyColors.card,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    padding: 4
+  },
+  dangerousCard: {
+    borderColor: buoyColors.warning + "30"
+  },
+  advancedSection: {
+    marginTop: 16
+  },
+  advancedLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: buoyColors.textMuted,
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+    marginBottom: 8,
+    marginLeft: 2
+  },
+  inputLabel: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: buoyColors.textSecondary,
+    marginBottom: 8
+  },
+  input: {
+    height: 42,
+    backgroundColor: buoyColors.hover,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    paddingHorizontal: 14,
+    fontSize: 14,
+    color: buoyColors.text,
+    fontFamily: "monospace"
+  },
+  inputFooter: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    marginTop: 8,
+    gap: 12
+  },
+  helperText: {
+    flex: 1,
+    fontSize: 12,
+    color: buoyColors.textMuted,
+    lineHeight: 16
+  },
+  resetLink: {
+    paddingVertical: 2
+  },
+  resetLinkText: {
+    fontSize: 12,
+    color: buoyColors.primary,
+    fontWeight: "500"
+  },
+  toggleRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: 12,
+    paddingHorizontal: 12
+  },
+  toggleInfo: {
+    flex: 1,
+    marginRight: 12
+  },
+  toggleHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginBottom: 3
+  },
+  toggleLabel: {
+    fontSize: 14,
+    fontWeight: "500",
+    color: buoyColors.text
+  },
+  dangerousLabel: {
+    color: buoyColors.warning
+  },
+  recommendedBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: buoyColors.primary + "15",
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4
+  },
+  recommendedText: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: buoyColors.primary
+  },
+  detectedBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4
+  },
+  detectedBadgeActive: {
+    backgroundColor: buoyColors.success + "15"
+  },
+  detectedBadgeInactive: {
+    backgroundColor: buoyColors.textMuted + "15"
+  },
+  detectedText: {
+    fontSize: 10,
+    fontWeight: "600"
+  },
+  detectedTextActive: {
+    color: buoyColors.success
+  },
+  detectedTextInactive: {
+    color: buoyColors.textMuted
+  },
+  toggleDescription: {
+    fontSize: 12,
+    color: buoyColors.textMuted,
+    lineHeight: 16
+  },
+  divider: {
+    height: 1,
+    backgroundColor: buoyColors.border,
+    marginHorizontal: 12
+  },
+  warningCard: {
+    marginTop: 14,
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 12,
+    backgroundColor: buoyColors.warning + "10",
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: buoyColors.warning + "25",
+    padding: 14
+  },
+  warningContent: {
+    flex: 1
+  },
+  warningTitle: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: buoyColors.warning,
+    marginBottom: 4
+  },
+  warningText: {
+    fontSize: 12,
+    color: buoyColors.textSecondary,
+    lineHeight: 17
+  },
+  infoText: {
+    fontSize: 13,
+    color: buoyColors.textSecondary,
+    lineHeight: 19
+  },
+  infoTextSpaced: {
+    marginTop: 10
+  },
+  codeBlock: {
+    marginTop: 14,
+    backgroundColor: buoyColors.base,
+    borderRadius: 8,
+    padding: 14
+  },
+  codeComment: {
+    fontSize: 12,
+    color: buoyColors.textMuted,
+    fontFamily: "monospace",
+    marginBottom: 6
+  },
+  codeText: {
+    fontSize: 13,
+    color: buoyColors.text,
+    fontFamily: "monospace"
+  },
+  codeValue: {
+    color: buoyColors.primary
+  },
+  dataViewerContainer: {
+    marginTop: 12,
+    borderRadius: 8,
+    overflow: "hidden",
+    borderWidth: 1,
+    borderColor: buoyColors.border
+  },
+  copyButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    marginTop: 14,
+    backgroundColor: buoyColors.primary + "15",
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: buoyColors.primary + "30"
+  },
+  copyButtonText: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: buoyColors.primary
+  },
+  copySuccessText: {
+    color: buoyColors.success
+  }
+});