HubSpot: improve colors and styles

plugins/hubspot/src/components/Button.tsx

@@ -1,5 +1,4 @@
 import cx from "classnames"
-import { Spinner } from "./Spinner"
 
 interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: "primary" | "secondary" | "destructive"
@@ -8,6 +7,6 @@ interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 
 export const Button = ({ variant = "primary", children, className, isLoading = false, disabled, ...rest }: Props) => (
     <button className={cx(`framer-button-${variant}`, className)} disabled={isLoading || disabled} {...rest}>
-        {isLoading ? <Spinner inheritColor={variant === "secondary"} className="mx-auto" inline /> : children}
+        {isLoading ? <div className="framer-spinner" /> : children}
     </button>
 )

plugins/hubspot/src/components/CenteredSpinner.tsx

@@ -1,8 +1,7 @@
 import cx from "classnames"
-import { Spinner, type SpinnerProps } from "./Spinner"
 
-export const CenteredSpinner = ({ className, size }: { className?: string; size?: SpinnerProps["size"] }) => (
+export const CenteredSpinner = ({ className, large = false }: { className?: string; large?: boolean }) => (
     <div className={cx("flex items-center justify-center m-auto", className)}>
-        <Spinner inheritColor inline size={size} />
+        <div className={large ? "framer-spinner-large" : "framer-spinner"} />
     </div>
 )

plugins/hubspot/src/components/CheckboxTextField.tsx

@@ -27,13 +27,7 @@ export function CheckboxTextfield({ value, disabled, checked: initialChecked, on
             onClick={toggle}
             role="button"
         >
-            <input
-                type="checkbox"
-                disabled={disabled}
-                checked={checked}
-                onChange={toggle}
-                className="checked:bg-hs-orange! focus:ring-1 focus:ring-hs-orange border-none!"
-            />
+            <input type="checkbox" disabled={disabled} checked={checked} onChange={toggle} />
             <input
                 className="bg-transparent w-full shrink pointer-events-none select-none"
                 type="text"

plugins/hubspot/src/components/Logo.tsx

@@ -1,5 +1,5 @@
 export const Logo = () => (
-    <div className="w-[30px] h-[30px] flex justify-center items-center bg-hs-orange rounded-lg">
+    <div className="w-[30px] h-[30px] flex justify-center items-center bg-tint rounded-lg">
         <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28">
             <path
                 d="M 18.439 19.068 C 16.921 19.068 15.69 17.831 15.69 16.307 C 15.69 14.781 16.921 13.546 18.439 13.546 C 19.958 13.546 21.188 14.781 21.188 16.307 C 21.188 17.832 19.958 19.068 18.439 19.068 M 19.262 10.991 L 19.262 8.534 C 19.901 8.231 20.347 7.583 20.347 6.83 L 20.347 6.773 C 20.347 5.734 19.501 4.885 18.467 4.885 L 18.411 4.885 C 17.377 4.885 16.53 5.734 16.53 6.773 L 16.53 6.83 C 16.53 7.583 16.977 8.231 17.616 8.534 L 17.616 10.991 C 16.689 11.133 15.815 11.519 15.081 12.111 L 8.367 6.865 C 8.411 6.695 8.442 6.519 8.443 6.334 C 8.443 5.156 7.495 4.201 6.323 4.2 C 5.152 4.199 4.201 5.151 4.2 6.328 C 4.199 7.505 5.147 8.459 6.318 8.461 C 6.7 8.461 7.054 8.353 7.364 8.175 L 13.968 13.337 C 13.387 14.215 13.076 15.249 13.077 16.307 C 13.077 17.456 13.438 18.52 14.05 19.394 L 12.04 21.413 C 11.879 21.362 11.711 21.334 11.542 21.332 C 10.58 21.332 9.8 22.116 9.8 23.082 C 9.8 24.049 10.58 24.832 11.542 24.832 C 12.505 24.832 13.285 24.048 13.285 23.082 C 13.283 22.912 13.256 22.743 13.205 22.581 L 15.191 20.586 C 16.125 21.305 17.266 21.693 18.438 21.693 C 21.4 21.693 23.8 19.282 23.8 16.307 C 23.8 13.614 21.83 11.39 19.261 10.991"

plugins/hubspot/src/components/SegmentedControls.tsx

@@ -20,12 +20,12 @@ export const SegmentedControls = ({ options, value, onValueChange, disabled, tit
     const segmentWidth = 130 / options.length
 
     return (
-        <div className="relative bg-tertiary w-[134px] h-[32px] p-0.5 rounded-lg flex items-center justify-center gap-1 font-semibold text-xs select-none">
+        <div className="relative bg-tertiary w-[134px] h-[30px] p-0.5 rounded-lg flex items-center justify-center font-semibold text-xs select-none">
             <motion.div
                 style={{
                     width: `${segmentWidth}px`,
                 }}
-                className="absolute top-[2px] left-[2px] h-[28px] bg-white dark:bg-[#555555] rounded-md segment-control-shadow"
+                className="absolute top-[2px] left-[2px] h-[26px] bg-white dark:bg-[#555555] rounded-md segment-control-shadow pointer-events-none"
                 initial={false}
                 animate={{ x: `${selectedIndex * segmentWidth}px` }}
                 transition={{ type: "spring", stiffness: 700, damping: 50 }}
@@ -40,11 +40,14 @@ export const SegmentedControls = ({ options, value, onValueChange, disabled, tit
                                   onValueChange(option.value)
                               }
                     }
-                    className={cx("relative grow text-center z-10", {
-                        "text-tint dark:text-white cursor-default": value === option.value,
-                        "text-tertiary hover:text-tertiary cursor-pointer": value !== option.value,
-                        "opacity-50": disabled,
-                    })}
+                    className={cx(
+                        "relative flex-1 text-center z-10 h-full flex items-center justify-center cursor-pointer transition-colors",
+                        {
+                            "text-tint dark:text-white": value === option.value,
+                            "text-tertiary hover:text-tertiary": value !== option.value,
+                            "opacity-50": disabled,
+                        }
+                    )}
                     title={title}
                 >
                     {option.label}

plugins/hubspot/src/globals.css

@@ -14,7 +14,6 @@
     --background-color-tint-dimmed: var(--framer-color-tint-dimmed);
     --background-color-tint-dark: var(--framer-color-tint-dark);
     --background-color-black-dimmed: rgba(0, 0, 0, 0.5);
-    --background-color-hs-orange: #ff5c35;
     --background-color-framer-red: #ff3366;
     --background-color-framer-blue: #0099ff;
 
@@ -23,7 +22,6 @@
     --color-tertiary: var(--framer-color-text-tertiary);
     --color-inverted: var(--framer-color-text-inverted);
     --color-tint: var(--framer-color-tint);
-    --color-hs-orange: #ff5c35;
     --color-framer-red: #ff3366;
 
     --border-color-divider: var(--framer-color-divider);
@@ -138,3 +136,23 @@ main {
     flex-direction: column;
     gap: 15px;
 }
+
+#root {
+    --framer-color-tint: #ff5c35;
+    --framer-color-tint-dark: #f25730;
+    --framer-color-tint-extra-dark: #e34e29;
+}
+
+[data-framer-theme="light"] .framer-button-primary {
+    --framer-color-tint: #111;
+    --framer-color-tint-dark: #333;
+    --framer-color-tint-extra-dark: #444;
+    --framer-color-text-reversed: #fff;
+}
+
+[data-framer-theme="dark"] .framer-button-primary {
+    --framer-color-tint: #fff;
+    --framer-color-tint-dark: #ddd;
+    --framer-color-tint-extra-dark: #c5c5c5;
+    --framer-color-text-reversed: #000;
+}

plugins/hubspot/src/pages/cms/hubdb/MapFields.tsx

@@ -99,7 +99,7 @@ export default function MapHubDBFieldsPage({ hubDbPluginContext }: PageProps) {
 
     const isAllowedToManage = useIsAllowedTo("ManagedCollection.setFields", ...syncMethods)
 
-    if (isLoadingTable) return <CenteredSpinner size="medium" />
+    if (isLoadingTable) return <CenteredSpinner large />
 
     if (!tableId) return <div>Expected `tableId` query param</div>
 

plugins/hubspot/src/pages/cms/hubdb/index.tsx

@@ -31,7 +31,7 @@ export default function HubDBPage() {
         navigate(`/cms/hubdb/map?tableId=${selectedTableId}`)
     }
 
-    if (isLoading) return <CenteredSpinner size="medium" />
+    if (isLoading) return <CenteredSpinner large />
 
     if (!tables) return null