From 1ff2152cacbbd763dac9e201023d87c6a94e6122 Mon Sep 17 00:00:00 2001 From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com> Date: Tue, 19 May 2026 14:00:33 -0400 Subject: [PATCH 01/16] Hubspot prerelease icons --- plugins/hubspot/src/components/Icons.tsx | 300 +++++++++++++++++----- plugins/hubspot/src/pages/canvas/Menu.tsx | 10 +- plugins/hubspot/src/utils.ts | 5 + 3 files changed, 253 insertions(+), 62 deletions(-) diff --git a/plugins/hubspot/src/components/Icons.tsx b/plugins/hubspot/src/components/Icons.tsx index 6f1db2ec2..2bf994067 100644 --- a/plugins/hubspot/src/components/Icons.tsx +++ b/plugins/hubspot/src/components/Icons.tsx @@ -1,62 +1,214 @@ import cx from "classnames" +import { useIsPrerelease } from "../utils" -export const FormsIcon = () => ( - - - -) +export const FormsIcon = () => { + const isPrerelease = useIsPrerelease() -export const MeetingsIcon = () => ( - - - -) + return isPrerelease ? ( + + + + + ) : ( + + + + ) +} -export const ChartIcon = () => ( - - - -) +export const MeetingsIcon = () => { + const isPrerelease = useIsPrerelease() -export const PersonIcon = () => ( - - - -) + return isPrerelease ? ( + + + + + + + + + + ) : ( + + + + ) +} -export const MessageIcon = () => ( - - - - -) +export const ChartIcon = () => { + const isPrerelease = useIsPrerelease() -export const LightningIcon = () => ( - - - -) + return isPrerelease ? ( + + + + ) : ( + + + + ) +} + +export const PersonIcon = () => { + const isPrerelease = useIsPrerelease() + + return isPrerelease ? ( + + + + + ) : ( + + + + ) +} + +export const MessageIcon = () => { + const isPrerelease = useIsPrerelease() + + return isPrerelease ? ( + + + + ) : ( + + + + + ) +} + +export const LightningIcon = () => { + const isPrerelease = useIsPrerelease() + + return isPrerelease ? ( + + ) : ( + + + + ) +} export const CaretLeftIcon = () => ( @@ -72,14 +224,42 @@ export const CaretLeftIcon = () => ( ) -export const DatabaseIcon = () => ( - - - -) +export const DatabaseIcon = () => { + const isPrerelease = useIsPrerelease() + + return isPrerelease ? ( + + ) : ( + + + + ) +} export const IconChevron = ({ className }: { className?: string }) => ( void }) => { const [, navigate] = useLocation() + const isPrerelease = useIsPrerelease() return (

{title}

+ {title} ) } diff --git a/plugins/hubspot/src/utils.ts b/plugins/hubspot/src/utils.ts index 534406ebc..10463c402 100644 --- a/plugins/hubspot/src/utils.ts +++ b/plugins/hubspot/src/utils.ts @@ -1,4 +1,5 @@ import type { ProtectedMethod } from "framer-plugin" +import { useMemo } from "react" export function assert(condition: unknown, ...msg: unknown[]): asserts condition { if (condition) return @@ -31,3 +32,7 @@ export const syncMethods = [ "ManagedCollection.addItems", "ManagedCollection.setPluginData", ] as const satisfies ProtectedMethod[] + +export const useIsPrerelease = () => { + return useMemo(() => document.body.getAttribute("data-framer-styles") === "prerelease", []) +} From 38862c51e1d8654543ec610f3187d977a015eaed Mon Sep 17 00:00:00 2001 From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com> Date: Tue, 19 May 2026 14:12:36 -0400 Subject: [PATCH 02/16] Tile button style --- plugins/hubspot/src/components/MenuOption.tsx | 10 ++++++++-- plugins/hubspot/src/globals.css | 12 ++++++++++++ plugins/hubspot/src/pages/canvas/Menu.tsx | 4 ++-- 3 files changed, 22 insertions(+), 4 deletions(-) diff --git a/plugins/hubspot/src/components/MenuOption.tsx b/plugins/hubspot/src/components/MenuOption.tsx index 574694c62..df44e874e 100644 --- a/plugins/hubspot/src/components/MenuOption.tsx +++ b/plugins/hubspot/src/components/MenuOption.tsx @@ -1,5 +1,6 @@ import cx from "classnames" import { useLocation } from "wouter" +import { useIsPrerelease } from "../utils" interface Props { icon: React.ReactElement @@ -11,10 +12,15 @@ interface Props { export const MenuOption = ({ icon, title, to, className, onClick }: Props) => { const [, navigate] = useLocation() + const isPrerelease = useIsPrerelease() return ( ) } diff --git a/plugins/hubspot/src/globals.css b/plugins/hubspot/src/globals.css index aeab34fe7..6e6c85554 100644 --- a/plugins/hubspot/src/globals.css +++ b/plugins/hubspot/src/globals.css @@ -115,6 +115,10 @@ 0px 1px 0px 0px rgba(0, 0, 0, 0.05); } +@utility tile-border { + box-shadow: inset 0 0 0 1px var(--color-tile-border); +} + @layer base { h6 { @apply font-semibold text-primary leading-[1.2]; @@ -137,3 +141,11 @@ main { flex-direction: column; gap: 15px; } + +body { + --color-tile-border: rgba(0, 0, 0, 0.05); +} + +body[data-framer-theme="dark"] { + --color-tile-border: rgba(255, 255, 255, 0.07); +} diff --git a/plugins/hubspot/src/pages/canvas/Menu.tsx b/plugins/hubspot/src/pages/canvas/Menu.tsx index 83c15d900..bb274bc76 100644 --- a/plugins/hubspot/src/pages/canvas/Menu.tsx +++ b/plugins/hubspot/src/pages/canvas/Menu.tsx @@ -34,8 +34,8 @@ const MenuOption = ({ return ( ) diff --git a/plugins/hubspot/src/components/CenteredSpinner.tsx b/plugins/hubspot/src/components/CenteredSpinner.tsx index 134ffdc18..65f639d96 100644 --- a/plugins/hubspot/src/components/CenteredSpinner.tsx +++ b/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 }: { className?: string }) => (
- +
) diff --git a/plugins/hubspot/src/components/Spinner.tsx b/plugins/hubspot/src/components/Spinner.tsx deleted file mode 100644 index 594ad9d98..000000000 --- a/plugins/hubspot/src/components/Spinner.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import cx from "classnames" -import styles from "./spinner.module.css" - -export interface SpinnerProps { - /** Size of the spinner */ - size?: "normal" | "medium" | "large" - /** Set the spinner to have a static position inline with other content */ - inline?: boolean - className?: string - inheritColor?: boolean -} - -function styleForSize(size: SpinnerProps["size"]) { - switch (size) { - case "normal": - return styles.normalStyle - case "medium": - return styles.mediumStyle - case "large": - return styles.largeStyle - } -} - -function spinnerClassNames(size: SpinnerProps["size"] = "normal") { - return cx(styles.spin, styles.baseStyle, styleForSize(size)) -} - -export const Spinner = ({ size, inline = false, inheritColor, className, ...rest }: SpinnerProps) => { - return ( -
- ) -} diff --git a/plugins/hubspot/src/components/spinner.module.css b/plugins/hubspot/src/components/spinner.module.css deleted file mode 100644 index a0d1a7ac3..000000000 --- a/plugins/hubspot/src/components/spinner.module.css +++ /dev/null @@ -1,60 +0,0 @@ -.baseStyle { - --spinner-translate: 0; - background-color: #fff; -} - -.buttonWithDepthSpinner { - background-color: currentColor; -} - -.normalStyle { - width: 12px; - height: 12px; - -webkit-mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAApNJREFUSA2tlUtLlFEYgEe7mtFFQ8NLFBG1SJAwahtiLVy5ceVSEPQH1LZf0Lp9FO1bdYNyI7gyBFcS2kAzilYq3sfxeYZ55Zv6FGfohWfOd97vnPd23u9MXeZoaeb1Q7gPHXAFzsAS5GACxiEPqVKXqs1kmtAPQi+cAtedToz1PJ8ExxPwDl7CAlRImoN7rBiF86ABHTiGAzMIh8n3O+ifwWc4EL0n5TGTYQijvjNSxbUadozInUeGZ3nuh1WYgpIkM+hGMwYajAgdrfUn+AaLoLTCAxiAOxCZxL4RdB+gZMjxEjwHo4hS8Jh5DR9hz0mKaNizegoNEI7Wee6FXJTISG6AUgDr+QImoAiHie+mwZJow/PRps4uwnsnRj8Epqc4voVJJ8eULOtW4BFYYjPpgjc+3IWI2sh/wFeoVl6xYQ48dDGLfjOwc/ygQqz595hUMVouS9QHBm4l6k3HWpnBLqicgVrlCxujSbR1Swd+UDpQYRS/oVaZZ2MWwlZBB9Zdxf+QTYw8SRgq6sAvz7vH6JULEB9USVHFjzZskgPRQR4ayxoXXIdaHdg9HrB2rErByWxZERnYtrWUzD0esDbtTmXPhzXwHrKLxEUbYGbVyDkWWwkdadfqbPmwDXZSCyh2VAf8BM/nOOJH5Y0QopMt2I5U/KO4DZZJB47XwEX+ex0mGroMV8sLwp56gyuGwiyW4SZ4c8bt2cZzO7jBNeqtsRHbeZ1g9krsMbhfYPv/c5gecA+4yAVuitFszE5Hjva872OMdXagF19JIoOYWyozMTI3J0tmA6gLvXPfO1cc/XOqOLe/HbjwD8yCXRD3VNJROEgatiRZMJsKsbZHia3nAdphtq8fkiWyXJbBe8uM1aXKPouNnz2Bm1kwAAAAAElFTkSuQmCC"); - mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAApNJREFUSA2tlUtLlFEYgEe7mtFFQ8NLFBG1SJAwahtiLVy5ceVSEPQH1LZf0Lp9FO1bdYNyI7gyBFcS2kAzilYq3sfxeYZ55Zv6FGfohWfOd97vnPd23u9MXeZoaeb1Q7gPHXAFzsAS5GACxiEPqVKXqs1kmtAPQi+cAtedToz1PJ8ExxPwDl7CAlRImoN7rBiF86ABHTiGAzMIh8n3O+ifwWc4EL0n5TGTYQijvjNSxbUadozInUeGZ3nuh1WYgpIkM+hGMwYajAgdrfUn+AaLoLTCAxiAOxCZxL4RdB+gZMjxEjwHo4hS8Jh5DR9hz0mKaNizegoNEI7Wee6FXJTISG6AUgDr+QImoAiHie+mwZJow/PRps4uwnsnRj8Epqc4voVJJ8eULOtW4BFYYjPpgjc+3IWI2sh/wFeoVl6xYQ48dDGLfjOwc/ygQqz595hUMVouS9QHBm4l6k3HWpnBLqicgVrlCxujSbR1Swd+UDpQYRS/oVaZZ2MWwlZBB9Zdxf+QTYw8SRgq6sAvz7vH6JULEB9USVHFjzZskgPRQR4ayxoXXIdaHdg9HrB2rErByWxZERnYtrWUzD0esDbtTmXPhzXwHrKLxEUbYGbVyDkWWwkdadfqbPmwDXZSCyh2VAf8BM/nOOJH5Y0QopMt2I5U/KO4DZZJB47XwEX+ex0mGroMV8sLwp56gyuGwiyW4SZ4c8bt2cZzO7jBNeqtsRHbeZ1g9krsMbhfYPv/c5gecA+4yAVuitFszE5Hjva872OMdXagF19JIoOYWyozMTI3J0tmA6gLvXPfO1cc/XOqOLe/HbjwD8yCXRD3VNJROEgatiRZMJsKsbZHia3nAdphtq8fkiWyXJbBe8uM1aXKPouNnz2Bm1kwAAAAAElFTkSuQmCC"); - -webkit-mask-size: 12px; - mask-size: 12px; -} - -.mediumStyle { - width: 24px; - height: 24px; - -webkit-mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAAEgBckRAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAMKADAAQAAAABAAAAMAAAAAD4/042AAAIYUlEQVRoBc2ZWYiVZRjHZ8x1NLdcyn3FiIoKJSsqU6LowqiMSioRpJUIjEIwtAW6aBEv1AK7yMSLLoQ2tEVbKMlAwsqF3Mol3EYTx93R6fd7x+f4nTNnHOfMqPPAf573e95nfbfv/c6UlWWopqZmR+axrAzBnhDQbguGtVJQXl7eKzpon6B9Wu2lIazD6RyRFfI8IblC+BIPk+2EPwfraDsRgqWgbTyH8GAI6BwYwrUhDE7nSGP8G4IM72zHgYwgmp1TA9M5IaE9xXZ5COQID8HMrDWwT8t2PjMiu+CpQ8WNtCsQdlJYQFU+o3ONvBWNd+FVKPdVUB/Rv46+bhaxAeRPW31WtSmmcIuI9FF9evR1BRPB0MKi38CoPTgOjgGnXnx7JiWaBYSX8aASdAR5DvNU6fwRHAPVQHoHdAG9gcN8lhBsAfvB8rPS2hayfmAQ6JAkNsBWMKZQOZ7pGwGu9bmcxmp4R4oaHgrFOHo3Ia8yN0dkRjGlApmjV6GBi3hZQWexRw3KnGnH+ykfGiCLbquBEzO6AWW7XbXrWlHsQzROUFRu7dubJfoe57kNutuMIL0PWtMxG1yWJPyh3R88TbMtyp8oz009HRq71E3RuoQjeALlufBEOYMQBMdBBe1twF2nMxH6O2k7b46ycp0ehtehMMh14Hg7D+5UjYUlOVVTwUqwCUgOmvAIMEibM3wfwTwaEuUC4PhzJDcADVSegOL38PMi7AegaECDSRuwr91OdP6KoAvQ+e90PAAvifB1PYYmLtZ4Jt1Bw6FwsvY2xTn20p/AVW01I3X8MnD2T4NHQJPIYYHSttGRASqBY14Dak94Gk2kCFBjOEtxkRvgNBm4k0om/PXE+FbgiJxyazo8C4H8OAofw0sibEdgOBa4WNrhe0l2mXZHOAucAtXAap6FN0g4vg6lUUBbMz+C7WJ4bmfaToTyYBqvgJNAZbmGWW4CAXVSQvBDOF4Ez1Gugpwk0yCYx8XD4GoQAbOOPX+W4dTXamlEEF8ys8BG4BzNBF6aXIGlEw6mAR2eBKfAaRDUnoYvVt+T3UG9I1EnC5T7kNZfIM6U+rL0ENSxer2wc1HsLVTOc4KS4/0HcOLcFwEnzuV3OdDGeZBsG0hY1UB4HuVKo/NGepYAd7UG8rvJ6hd4vYTdFXR2ABEIk/LNYZACoGSnQofMTeI6HgQ/L8LeAFcB/VjVcez/gacH+Q/Ate6QnGyMc/S9fR+F7QYGMMlOBDVQukJ6wFmmAU6h3BfeaMLuMEYe+QYwULobGWUmiJ1Y/5UfpYaIIFvQ0WcMdWrcjsDsDfICaCpFAK8l3X2IM8bhieXXlCDbMbYCV2EfG655KzBYc5A3Cv1KXWzEpckV1BzkRDvJUisDmL3UXAFclQ6PdMQAjrvOmyvAAHxZgf4qHfcjwCo8MdPapd0UGoixFZj8BgN8AKzC1fQqKJlIsAfGOtav7/v00v+OBwOk1YTSPbRLpXEYGiBlr5NYmvNpG0Q8RhDfCY0ibCZi4NBE9ut1kAJQynLa+4ATY5AZGIyFnxehOwVFT2En1+y/AIly7wOfUPwQ5oRHIIPNIYFN8DxC1+TuA/2A+tqp/xP6m+GJ8gIowfBtmL9QqBxG8jhSgtsfOsoM8inO98BzVCeAPQS5DebrMxsgnBVzXIXuApy7UPKoaIDQINAo2uOBY2uWaaVl2l4OvsGxx03zEsG7gSfBYlAF3KhxvclecRAn8ucALwbesypAZ+DVpx1Ii62UDM85QlmHBHGUJoHpwPe7QbUvBsR1rr07kQ0B+pFczVnbkPvmPcqou2YapAYLIPGReFkI3NsR0OQNGPaFxdCV+kzCu94C8CZwmbjXtdNGshApeMSQV1LI8dRbzx+VihKJT6BjLohgJmzQSDYK8ON6HviZYG6QBgnf+jRhP+T8PvA5EH6jQOUW4karQ3bmEc6vRPAlcJnYH1OdTX46Di2u2Yi4Xqq7AguQoqAYMGdzK3GdxRzlFYCTR+l5C4SRzoTPvlXvxYEnwwUjcvDEd7nKJWMHme9uctifFaQ2hs/QeBFE0pG4/DWM5ifFi/SHfPyg7g2igOyM7CIf7/G1Gwfl+2k/DzyHVYwTQP4gyqvgF5UcZfJyAw8D2ZViuw991ejs80cQN9Iy4OsxO+q2J6F0zm8zdC4okZ97YziIGTBeDPJvblCXjkebr13JURefXerkTYYcfEkepOllMUsWMcACbgbubJN2CcUsLKbdUsh3iftBMvGgHhbQE5h8zEAorA2tFsAPk4OrpJA6WoDT0ynTYzGSp4BHZ0ugdiRhrpFb5FTtEbUOOPqFGBFaLYD7grMAZyHg8yEL8K1r8l4D3AuByWwe98MlJXIwRz9HTTj2pzKxw0+/lTRWAAvIzoLH61RwqWkUCfgLV8yAXHg/2p02LFW6B/w+NmlPojiRaKb/XMy0cbGJvMYR072Yzce2q8QPnRNx4vgZ5kaZDVxvkoVIMSvvYbCmVnRh/5KLF8k7C6LEwB5F/hW5pJtvrgCVMXRdvQ4GAw3CiGYqRON5GK9X0NxE/L74NHEvcg5cduTN5T/gv49tJ8orIIQ4Gkp7GnCt6UiSh6GONwK/sv+Gl0zE8vo+Gvii0n8kbgwpZF8Tq7JWdPZv0QKiG+e30H4CODPhMApyHUoGsM8PDmfGwg6cefYdI3mfcZ/J+wNn2FHW1qWgffhPSyPTt4LEN/NclM5ZQFhQiPvCO5PBLSCSNqjPwWnmEgqdSDD7rJ52UtY+ivC3E0fcN/A56bwKyHqgGEduDLgLFK7VKEReLOGsPBJHNf23bhV8NUnHzCpvkBpdQDGPFOXbcTgYAjz2ugGP5CjQe72j6SZ0HW8VjU0Wmzr0PxUW1kdl6s26AAAAAElFTkSuQmCC"); - mask: url("data:image/png;base64,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"); - -webkit-mask-size: 24px; - mask-size: 24px; -} - -.largeStyle { - width: 30px; - height: 30px; - -webkit-mask: url("data:image/png;base64,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"); - mask: url("data:image/png;base64,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"); - -webkit-mask-size: 30px; - mask-size: 30px; -} - -.centeredStyle { - --spinner-translate: -50%; - position: absolute; - top: 50%; - left: 50%; - transform: translate(var(--spinner-translate), var(--spinner-translate)); -} - -.spin { - animation-duration: 800ms; - animation-iteration-count: infinite; - animation-name: spin; - animation-timing-function: linear; -} - -@keyframes spin { - 0% { - transform: translate(var(--spinner-translate), var(--spinner-translate)) rotate(0deg); - } - - 100% { - transform: translate(var(--spinner-translate), var(--spinner-translate)) rotate(360deg); - } -} diff --git a/plugins/hubspot/src/pages/cms/hubdb/MapFields.tsx b/plugins/hubspot/src/pages/cms/hubdb/MapFields.tsx index 889c86348..b132e5fbb 100644 --- a/plugins/hubspot/src/pages/cms/hubdb/MapFields.tsx +++ b/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 + if (isLoadingTable) return if (!tableId) return
Expected `tableId` query param
diff --git a/plugins/hubspot/src/pages/cms/hubdb/index.tsx b/plugins/hubspot/src/pages/cms/hubdb/index.tsx index 58a27376a..992b2fc6e 100644 --- a/plugins/hubspot/src/pages/cms/hubdb/index.tsx +++ b/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 + if (isLoading) return if (!tables) return null From 5644de375eb17237db047f4be7b952b2232c8167 Mon Sep 17 00:00:00 2001 From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com> Date: Tue, 19 May 2026 14:53:02 -0400 Subject: [PATCH 08/16] Accent color --- .../src/components/CheckboxTextField.tsx | 8 +------ plugins/hubspot/src/components/Logo.tsx | 2 +- plugins/hubspot/src/globals.css | 22 +++++++++++++++++-- 3 files changed, 22 insertions(+), 10 deletions(-) diff --git a/plugins/hubspot/src/components/CheckboxTextField.tsx b/plugins/hubspot/src/components/CheckboxTextField.tsx index 6f2fa4dfc..e3ba0e424 100644 --- a/plugins/hubspot/src/components/CheckboxTextField.tsx +++ b/plugins/hubspot/src/components/CheckboxTextField.tsx @@ -27,13 +27,7 @@ export function CheckboxTextfield({ value, disabled, checked: initialChecked, on onClick={toggle} role="button" > - + ( -
+
Date: Tue, 19 May 2026 15:01:08 -0400 Subject: [PATCH 09/16] Design consistency --- plugins/hubspot/src/App.tsx | 6 +++--- plugins/hubspot/src/components/Layout.tsx | 5 ++--- plugins/hubspot/src/router.tsx | 6 +++--- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/plugins/hubspot/src/App.tsx b/plugins/hubspot/src/App.tsx index a890de3e9..8d94fafd8 100644 --- a/plugins/hubspot/src/App.tsx +++ b/plugins/hubspot/src/App.tsx @@ -41,7 +41,7 @@ const routes: Route[] = [ element: AccountPage, title: "Account", size: { - height: 197, + height: 204, }, }, { @@ -49,7 +49,7 @@ const routes: Route[] = [ element: ChatPage, title: "Chat", size: { - height: 395, + height: 401, }, }, { @@ -71,7 +71,7 @@ const routes: Route[] = [ element: TrackingPage, title: "Tracking", size: { - height: 172, + height: 179, }, children: [ { diff --git a/plugins/hubspot/src/components/Layout.tsx b/plugins/hubspot/src/components/Layout.tsx index a0b8d4079..ff29a8a4f 100644 --- a/plugins/hubspot/src/components/Layout.tsx +++ b/plugins/hubspot/src/components/Layout.tsx @@ -1,5 +1,4 @@ import cx from "classnames" -import { motion } from "motion/react" import React from "react" import { CaretLeftIcon } from "./Icons" @@ -15,10 +14,10 @@ interface TitleProps { goBack: () => void } -const Title = ({ title, animateForward, goBack }: TitleProps) => ( +const Title = ({ title, animateForwa, goBack }: TitleProps) => ( -
+
{ void framer.showUI({ - width: size?.width ?? 260, - height: size?.height ?? 345, + width: size?.width ?? DEFAULT_PLUGIN_WIDTH, + height: size?.height ?? DEFAULT_PLUGIN_HEIGHT, }) }, [size]) From 39e142aaca6d9b6f89f7c67953cfd8917c3ad36a Mon Sep 17 00:00:00 2001 From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com> Date: Tue, 19 May 2026 15:13:45 -0400 Subject: [PATCH 10/16] Add hero section to collection view --- plugins/hubspot/src/App.tsx | 4 ++-- plugins/hubspot/src/components/HeroSection.tsx | 15 +++++++++++++++ plugins/hubspot/src/pages/canvas/Menu.tsx | 12 ++---------- plugins/hubspot/src/pages/cms/Menu.tsx | 2 ++ 4 files changed, 21 insertions(+), 12 deletions(-) create mode 100644 plugins/hubspot/src/components/HeroSection.tsx diff --git a/plugins/hubspot/src/App.tsx b/plugins/hubspot/src/App.tsx index 8d94fafd8..057d79e49 100644 --- a/plugins/hubspot/src/App.tsx +++ b/plugins/hubspot/src/App.tsx @@ -78,7 +78,7 @@ const routes: Route[] = [ path: "/learn-more", element: LearnMoreTrackingPage, size: { - height: 184, + height: 201, }, }, ], @@ -89,7 +89,7 @@ const routes: Route[] = [ path: "/cms", element: CMSMenuPage, size: { - height: 141, + height: 320, }, children: [ { diff --git a/plugins/hubspot/src/components/HeroSection.tsx b/plugins/hubspot/src/components/HeroSection.tsx new file mode 100644 index 000000000..b5d66bd1b --- /dev/null +++ b/plugins/hubspot/src/components/HeroSection.tsx @@ -0,0 +1,15 @@ +import { Logo } from "./Logo" + +interface Props { + description: string +} + +export const HeroSection = ({ description }: Props) => ( +
+ +
+
Welcome to HubSpot
+

{description}

+
+
+) diff --git a/plugins/hubspot/src/pages/canvas/Menu.tsx b/plugins/hubspot/src/pages/canvas/Menu.tsx index bb274bc76..0250ee89a 100644 --- a/plugins/hubspot/src/pages/canvas/Menu.tsx +++ b/plugins/hubspot/src/pages/canvas/Menu.tsx @@ -3,8 +3,8 @@ import { framer } from "framer-plugin" import { useEffect } from "react" import { useLocation } from "wouter" import { useAccountQuery, useFormsQuery, useInboxesQuery, useMeetingsQuery, useUserQuery } from "../../api" +import { HeroSection } from "../../components/HeroSection" import { ChartIcon, FormsIcon, LightningIcon, MeetingsIcon, MessageIcon, PersonIcon } from "../../components/Icons" -import { Logo } from "../../components/Logo" import { useIsPrerelease } from "../../utils" const queryHooks = { @@ -68,15 +68,7 @@ export default function MenuPage() { return (
-
- -
-
Welcome to HubSpot
-

- View forms, monitor site traffic, embed widgets and much more. -

-
-
+
} /> } /> diff --git a/plugins/hubspot/src/pages/cms/Menu.tsx b/plugins/hubspot/src/pages/cms/Menu.tsx index 7e77c8946..e4c209397 100644 --- a/plugins/hubspot/src/pages/cms/Menu.tsx +++ b/plugins/hubspot/src/pages/cms/Menu.tsx @@ -1,9 +1,11 @@ +import { HeroSection } from "../../components/HeroSection" import { DatabaseIcon, FormsIcon } from "../../components/Icons" import { MenuOption } from "../../components/MenuOption" export default function MenuPage() { return (
+
} /> } /> From f3ec7704f165db39bb82e11ea589bc8da0bdb220 Mon Sep 17 00:00:00 2001 From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com> Date: Tue, 19 May 2026 15:21:54 -0400 Subject: [PATCH 11/16] Increase animation speed --- plugins/hubspot/src/App.tsx | 2 +- plugins/hubspot/src/router.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/hubspot/src/App.tsx b/plugins/hubspot/src/App.tsx index 057d79e49..87db6911f 100644 --- a/plugins/hubspot/src/App.tsx +++ b/plugins/hubspot/src/App.tsx @@ -47,7 +47,7 @@ const routes: Route[] = [ { path: "/chat", element: ChatPage, - title: "Chat", + title: "Chats", size: { height: 401, }, diff --git a/plugins/hubspot/src/router.tsx b/plugins/hubspot/src/router.tsx index 5e09153b0..9cd58174a 100644 --- a/plugins/hubspot/src/router.tsx +++ b/plugins/hubspot/src/router.tsx @@ -117,7 +117,7 @@ function useRoutes({ routes, hubDbPluginContext, blogPluginContext }: UseRoutesP transition: { x: { ease: [0.25, 0.1, 0.25, 1], - duration: 0.3, + duration: 0.2, }, opacity: { duration: 0.2, From b6041d120cff7b2181de88dee2eacecee8cb9eb5 Mon Sep 17 00:00:00 2001 From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com> Date: Tue, 19 May 2026 15:43:06 -0400 Subject: [PATCH 12/16] Secondary buttons, clean up animation --- plugins/hubspot/src/components/Button.tsx | 7 ++----- plugins/hubspot/src/components/Layout.tsx | 8 +++----- plugins/hubspot/src/pages/Auth.tsx | 2 +- plugins/hubspot/src/pages/canvas/Chat.tsx | 2 +- plugins/hubspot/src/pages/canvas/Meetings.tsx | 5 +---- plugins/hubspot/src/pages/canvas/forms/index.tsx | 5 +---- .../canvas/tracking/components/ToggleTrackingButton.tsx | 1 - plugins/hubspot/src/pages/cms/Blog.tsx | 1 - plugins/hubspot/src/pages/cms/hubdb/MapFields.tsx | 1 - plugins/hubspot/src/router.tsx | 7 +------ 10 files changed, 10 insertions(+), 29 deletions(-) diff --git a/plugins/hubspot/src/components/Button.tsx b/plugins/hubspot/src/components/Button.tsx index cb074c867..b47af1465 100644 --- a/plugins/hubspot/src/components/Button.tsx +++ b/plugins/hubspot/src/components/Button.tsx @@ -1,12 +1,9 @@ -import cx from "classnames" - interface Props extends React.ButtonHTMLAttributes { - variant?: "primary" | "secondary" | "destructive" isLoading?: boolean } -export const Button = ({ variant = "primary", children, className, isLoading = false, disabled, ...rest }: Props) => ( - ) diff --git a/plugins/hubspot/src/components/Layout.tsx b/plugins/hubspot/src/components/Layout.tsx index ff29a8a4f..ebeb5fc50 100644 --- a/plugins/hubspot/src/components/Layout.tsx +++ b/plugins/hubspot/src/components/Layout.tsx @@ -10,11 +10,10 @@ const PageDivider = () => ( interface TitleProps { title: string - animateForward?: boolean goBack: () => void } -const Title = ({ title, animateForwa, goBack }: TitleProps) => ( +const Title = ({ title, goBack }: TitleProps) => (
@@ -33,14 +32,13 @@ interface Props { children: React.ReactNode className?: string title?: string - animateForward?: boolean showTopDivider?: boolean goBack: () => void } -export const Layout = ({ children, className, title, showTopDivider = true, animateForward, goBack }: Props) => ( +export const Layout = ({ children, className, title, showTopDivider = true, goBack }: Props) => (
- {title && } + {title && <Title title={title} goBack={goBack} />} {showTopDivider && <PageDivider />} <div className="col-lg w-full h-full">{children}</div> </div> diff --git a/plugins/hubspot/src/pages/Auth.tsx b/plugins/hubspot/src/pages/Auth.tsx index fc2b68acb..4577854de 100644 --- a/plugins/hubspot/src/pages/Auth.tsx +++ b/plugins/hubspot/src/pages/Auth.tsx @@ -64,7 +64,7 @@ export default function AuthPage() { </p> </div> </div> - <Button className="w-full" onClick={login} isLoading={isLoading} variant="secondary"> + <Button className="w-full" onClick={login} isLoading={isLoading}> Log In </Button> </main> diff --git a/plugins/hubspot/src/pages/canvas/Chat.tsx b/plugins/hubspot/src/pages/canvas/Chat.tsx index aa8b7c991..93165e777 100644 --- a/plugins/hubspot/src/pages/canvas/Chat.tsx +++ b/plugins/hubspot/src/pages/canvas/Chat.tsx @@ -144,7 +144,7 @@ export default function ChatPage() { </div> <hr /> <button - className="framer-button-primary w-full" + className="w-full" onClick={() => { window.open(`https://app-eu1.hubspot.com/chatflows/${account.portalId}/`, "_blank") }} diff --git a/plugins/hubspot/src/pages/canvas/Meetings.tsx b/plugins/hubspot/src/pages/canvas/Meetings.tsx index e63a91ce5..ac513da54 100644 --- a/plugins/hubspot/src/pages/canvas/Meetings.tsx +++ b/plugins/hubspot/src/pages/canvas/Meetings.tsx @@ -41,10 +41,7 @@ export default function MeetingsPage() { <div className="col-lg sticky top-0 left-0"> <hr /> - <button - className="framer-button-primary" - onClick={() => window.open(`https://${uiDomain}/meetings/${portalId}`, "_blank")} - > + <button onClick={() => window.open(`https://${uiDomain}/meetings/${portalId}`, "_blank")}> View Meetings </button> </div> diff --git a/plugins/hubspot/src/pages/canvas/forms/index.tsx b/plugins/hubspot/src/pages/canvas/forms/index.tsx index eb3f643d9..f71a3946e 100644 --- a/plugins/hubspot/src/pages/canvas/forms/index.tsx +++ b/plugins/hubspot/src/pages/canvas/forms/index.tsx @@ -47,10 +47,7 @@ export default function FormsPage() { <div className="col-lg sticky top-0 left-0 pb-[15px]"> <hr /> - <button - className="framer-button-primary" - onClick={() => window.open(`https://${uiDomain}/forms/${portalId}`, "_blank")} - > + <button onClick={() => window.open(`https://${uiDomain}/forms/${portalId}`, "_blank")}> View Forms </button> </div> diff --git a/plugins/hubspot/src/pages/canvas/tracking/components/ToggleTrackingButton.tsx b/plugins/hubspot/src/pages/canvas/tracking/components/ToggleTrackingButton.tsx index a132dca13..ea342695a 100644 --- a/plugins/hubspot/src/pages/canvas/tracking/components/ToggleTrackingButton.tsx +++ b/plugins/hubspot/src/pages/canvas/tracking/components/ToggleTrackingButton.tsx @@ -41,7 +41,6 @@ export const ToggleTrackingButton = ({ className }: { className?: string }) => { return ( <Button - variant={isTrackingEnabled ? "secondary" : "primary"} onClick={toggleTracking} isLoading={isLoadingUser} className={className} diff --git a/plugins/hubspot/src/pages/cms/Blog.tsx b/plugins/hubspot/src/pages/cms/Blog.tsx index c191044f3..473f0d4c6 100644 --- a/plugins/hubspot/src/pages/cms/Blog.tsx +++ b/plugins/hubspot/src/pages/cms/Blog.tsx @@ -98,7 +98,6 @@ export default function Blog({ blogPluginContext }: PageProps) { /> <div className="sticky left-0 bottom-0 flex justify-between bg-primary pt-[15px] border-t border-divider items-center max-w-full"> <Button - variant="secondary" className="w-full" isLoading={isSyncing} disabled={!isAllowedToManage} diff --git a/plugins/hubspot/src/pages/cms/hubdb/MapFields.tsx b/plugins/hubspot/src/pages/cms/hubdb/MapFields.tsx index b132e5fbb..653633f19 100644 --- a/plugins/hubspot/src/pages/cms/hubdb/MapFields.tsx +++ b/plugins/hubspot/src/pages/cms/hubdb/MapFields.tsx @@ -150,7 +150,6 @@ export default function MapHubDBFieldsPage({ hubDbPluginContext }: PageProps) { /> <div className="sticky left-0 bottom-0 flex justify-between bg-primary pt-[15px] border-t border-divider items-center max-w-full"> <Button - variant="secondary" className="w-full" isLoading={isSyncing} disabled={!isAllowedToManage} diff --git a/plugins/hubspot/src/router.tsx b/plugins/hubspot/src/router.tsx index 9cd58174a..1d292d163 100644 --- a/plugins/hubspot/src/router.tsx +++ b/plugins/hubspot/src/router.tsx @@ -128,12 +128,7 @@ function useRoutes({ routes, hubDbPluginContext, blogPluginContext }: UseRoutesP return { page: ( <motion.div {...(animationProps as MotionProps)} className="w-full h-full"> - <Layout - title={pageTitle} - animateForward={animationDirection === 1} - showTopDivider={showTopDivider} - goBack={goBack} - > + <Layout title={pageTitle} showTopDivider={showTopDivider} goBack={goBack}> <PageErrorBoundaryFallback> <Element params={params} From f91618c140adcc2e1f4524d923e8b5cd34fa0fc5 Mon Sep 17 00:00:00 2001 From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com> Date: Tue, 19 May 2026 15:52:14 -0400 Subject: [PATCH 13/16] Top divider --- plugins/hubspot/src/App.tsx | 1 - plugins/hubspot/src/components/Layout.tsx | 48 ++++++++--------------- plugins/hubspot/src/router.tsx | 22 ++++++----- 3 files changed, 30 insertions(+), 41 deletions(-) diff --git a/plugins/hubspot/src/App.tsx b/plugins/hubspot/src/App.tsx index 87db6911f..e964c6076 100644 --- a/plugins/hubspot/src/App.tsx +++ b/plugins/hubspot/src/App.tsx @@ -103,7 +103,6 @@ const routes: Route[] = [ { path: "/hubdb", element: HubDBPage, - showTopDivider: false, size: { width: 320, height: 305, diff --git a/plugins/hubspot/src/components/Layout.tsx b/plugins/hubspot/src/components/Layout.tsx index ebeb5fc50..8280db0e2 100644 --- a/plugins/hubspot/src/components/Layout.tsx +++ b/plugins/hubspot/src/components/Layout.tsx @@ -1,45 +1,31 @@ import cx from "classnames" -import React from "react" import { CaretLeftIcon } from "./Icons" -const PageDivider = () => ( - <div className="px-[15px]"> - <hr /> - </div> -) - -interface TitleProps { - title: string - goBack: () => void -} - -const Title = ({ title, goBack }: TitleProps) => ( - <React.Fragment> - <PageDivider /> - <div className="relative flex gap-[5px] items-center justify-center overflow-hidden min-h-[48px]"> - <div - onClick={goBack} - className="absolute left-0 flex items-center justify-center h-full w-10 cursor-pointer" - > - <CaretLeftIcon /> - </div> - <h6>{title}</h6> - </div> - </React.Fragment> -) - interface Props { children: React.ReactNode className?: string title?: string - showTopDivider?: boolean goBack: () => void } -export const Layout = ({ children, className, title, showTopDivider = true, goBack }: Props) => ( +export const Layout = ({ children, className, title, goBack }: Props) => ( <div className={cx("flex flex-col w-full h-full", className)}> - {title && <Title title={title} goBack={goBack} />} - {showTopDivider && <PageDivider />} + {title && ( + <> + <div className="relative flex gap-[5px] items-center justify-center overflow-hidden min-h-[48px]"> + <div + onClick={goBack} + className="absolute left-0 flex items-center justify-center h-full w-10 cursor-pointer" + > + <CaretLeftIcon /> + </div> + <h6>{title}</h6> + </div> + <div className="px-[15px]"> + <hr /> + </div> + </> + )} <div className="col-lg w-full h-full">{children}</div> </div> ) diff --git a/plugins/hubspot/src/router.tsx b/plugins/hubspot/src/router.tsx index 1d292d163..070cf4948 100644 --- a/plugins/hubspot/src/router.tsx +++ b/plugins/hubspot/src/router.tsx @@ -24,7 +24,6 @@ export interface Route { element: React.ComponentType<PageProps> title?: string | (() => string) children?: Route[] - showTopDivider?: boolean size?: PluginSize } @@ -87,7 +86,7 @@ function useRoutes({ routes, hubDbPluginContext, blogPluginContext }: UseRoutesP for (const { match, route } of matches) { const [isMatch, params] = match - const { title, showTopDivider, size, element: Element } = route + const { title, size, element: Element } = route if (!isMatch) continue @@ -128,7 +127,7 @@ function useRoutes({ routes, hubDbPluginContext, blogPluginContext }: UseRoutesP return { page: ( <motion.div {...(animationProps as MotionProps)} className="w-full h-full"> - <Layout title={pageTitle} showTopDivider={showTopDivider} goBack={goBack}> + <Layout title={pageTitle} goBack={goBack}> <PageErrorBoundaryFallback> <Element params={params} @@ -179,12 +178,17 @@ export function Router({ routes, hubDbPluginContext, blogPluginContext }: Router }, [size]) return ( - <div className="relative w-full h-full overflow-hidden"> - <AnimatePresence> - <SizePreserver size={size} key={location.pathname}> - {cloneElement(page, { key: location.pathname })} - </SizePreserver> - </AnimatePresence> + <div className="relative flex flex-col w-full h-full overflow-hidden"> + <div className="px-[15px] shrink-0"> + <hr /> + </div> + <div className="relative flex-1 min-h-0 overflow-hidden"> + <AnimatePresence> + <SizePreserver size={size} key={location.pathname}> + {cloneElement(page, { key: location.pathname })} + </SizePreserver> + </AnimatePresence> + </div> </div> ) } From 37b62c926e47904b9000be9169ee10192978769d Mon Sep 17 00:00:00 2001 From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com> Date: Tue, 19 May 2026 15:59:45 -0400 Subject: [PATCH 14/16] Primary tracking button --- .../pages/canvas/tracking/components/ToggleTrackingButton.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/plugins/hubspot/src/pages/canvas/tracking/components/ToggleTrackingButton.tsx b/plugins/hubspot/src/pages/canvas/tracking/components/ToggleTrackingButton.tsx index ea342695a..36a9f2526 100644 --- a/plugins/hubspot/src/pages/canvas/tracking/components/ToggleTrackingButton.tsx +++ b/plugins/hubspot/src/pages/canvas/tracking/components/ToggleTrackingButton.tsx @@ -1,4 +1,5 @@ import { type CustomCode, framer, useIsAllowedTo } from "framer-plugin" +import cx from "classnames" import { useEffect, useState } from "react" import { useUserQuery } from "../../../../api" import { Button } from "../../../../components/Button" @@ -43,7 +44,7 @@ export const ToggleTrackingButton = ({ className }: { className?: string }) => { <Button onClick={toggleTracking} isLoading={isLoadingUser} - className={className} + className={cx(className, !isTrackingEnabled && "framer-button-primary")} disabled={!isAllowedToSetCustomCode} title={isAllowedToSetCustomCode ? undefined : "Insufficient permissions"} > From 33b4751f0a09b3b08d99aabdef2925267912ebfb Mon Sep 17 00:00:00 2001 From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com> Date: Tue, 19 May 2026 16:01:08 -0400 Subject: [PATCH 15/16] Button variant --- plugins/hubspot/src/components/Button.tsx | 10 ++++++++-- .../tracking/components/ToggleTrackingButton.tsx | 4 ++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/plugins/hubspot/src/components/Button.tsx b/plugins/hubspot/src/components/Button.tsx index b47af1465..09791bec5 100644 --- a/plugins/hubspot/src/components/Button.tsx +++ b/plugins/hubspot/src/components/Button.tsx @@ -1,9 +1,15 @@ +import cx from "classnames" + interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> { isLoading?: boolean } -export const Button = ({ children, className, isLoading = false, disabled, ...rest }: Props) => ( - <button className={className} disabled={isLoading || disabled} {...rest}> +export const Button = ({ variant = "secondary", children, className, isLoading = false, disabled, ...rest }: Props) => ( + <button + className={cx(variant === "primary" && "framer-button-primary", className)} + disabled={isLoading || disabled} + {...rest} + > {isLoading ? <div className="framer-spinner" /> : children} </button> ) diff --git a/plugins/hubspot/src/pages/canvas/tracking/components/ToggleTrackingButton.tsx b/plugins/hubspot/src/pages/canvas/tracking/components/ToggleTrackingButton.tsx index 36a9f2526..a132dca13 100644 --- a/plugins/hubspot/src/pages/canvas/tracking/components/ToggleTrackingButton.tsx +++ b/plugins/hubspot/src/pages/canvas/tracking/components/ToggleTrackingButton.tsx @@ -1,5 +1,4 @@ import { type CustomCode, framer, useIsAllowedTo } from "framer-plugin" -import cx from "classnames" import { useEffect, useState } from "react" import { useUserQuery } from "../../../../api" import { Button } from "../../../../components/Button" @@ -42,9 +41,10 @@ export const ToggleTrackingButton = ({ className }: { className?: string }) => { return ( <Button + variant={isTrackingEnabled ? "secondary" : "primary"} onClick={toggleTracking} isLoading={isLoadingUser} - className={cx(className, !isTrackingEnabled && "framer-button-primary")} + className={className} disabled={!isAllowedToSetCustomCode} title={isAllowedToSetCustomCode ? undefined : "Insufficient permissions"} > From 16341a720a6e279f8eb652968e9bdbf08bc619cc Mon Sep 17 00:00:00 2001 From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com> Date: Tue, 19 May 2026 16:01:46 -0400 Subject: [PATCH 16/16] Fix type --- plugins/hubspot/src/components/Button.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/plugins/hubspot/src/components/Button.tsx b/plugins/hubspot/src/components/Button.tsx index 09791bec5..f407f323f 100644 --- a/plugins/hubspot/src/components/Button.tsx +++ b/plugins/hubspot/src/components/Button.tsx @@ -1,6 +1,7 @@ import cx from "classnames" interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> { + variant?: "primary" | "secondary" isLoading?: boolean }