More CSS tidyup largely relating to SC approach

Author: pimterry

src/app/(alternatives)/charles-alternative/page.tsx

@@ -22,12 +22,12 @@ export default async function CharlesAlternativePage() {
         video={{id: 'chrome'}}
       />
       <IntegrationCTA
-        $variant="cta"
+        variant="cta"
         title="One-click setup integrations for every tool you use"
         text={["HTTP Toolkit includes one-click automated setup to provide precisely targeted interception of individual mobile apps, browsers, terminal windows, Docker containers & more."]}
         button={{
-          $small: true,
-          $variant: 'secondary',
+          small: true,
+          variant: 'secondary',
           children: 'See all integrations',
           href: '/all-integrations',
         }}

src/app/(alternatives)/chrome-devtools-alternative/page.tsx

@@ -21,12 +21,12 @@ export default async function ChromeDevToolsAlternativePage() {
         video={{id: 'chrome'}}
       />
       <IntegrationCTA
-        $variant="cta"
+        variant="cta"
         title="One-click setup integrations for every tool you use"
         text={["HTTP Toolkit includes one-click automated setup to provide precisely targeted interception of individual browser windows, mobile apps, terminal sessions, Docker containers & more."]}
         button={{
-          $small: true,
-          $variant: 'secondary',
+          small: true,
+          variant: 'secondary',
           children: 'See all integrations',
           href: '/all-integrations',
         }}

src/app/(alternatives)/fiddler-alternative/page.tsx

@@ -21,12 +21,12 @@ export default async function FiddlerPage() {
         video={{id: 'chrome'}}
       />
       <IntegrationCTA
-        $variant="cta"
+        variant="cta"
         title="One-click setup integrations for every tool you use"
         text={["HTTP Toolkit includes one-click automated setup to provide precisely targeted interception of individual mobile apps, browsers, terminal windows, Docker containers & more."]}
         button={{
-          $small: true,
-          $variant: 'secondary',
+          small: true,
+          variant: 'secondary',
           children: 'See all integrations',
           href: '/all-integrations',
         }}

src/app/(integrations)/android/page.tsx

@@ -29,31 +29,31 @@ export default function AndroidIntegrationPage() {
         subtitle="what is http toolkit?"
         cards={[
           {
-            $variant: 'default',
+            variant: 'default',
             title: 'Get started instantly',
             text: 'No messing around with certificate files and wifi settings.\n\nClick the button, accept permissions, start capturing traffic, toggle off & on again in one tap.\n\nGet straight to the data with zero hassle.',
             icon: RocketLaunch,
           },
           {
-            $variant: 'default',
+            variant: 'default',
             title: "Flexible setup for every environment",
             text: 'Setup automatically using ADB or by scanning a QR code.\n\nIntercept the entire device, or target just a single app.\n\nSupports Android versions from Android Lollipop (v5 / API level 21+) through to the latest releases.',
             icon: Wrench,
           },
           {
-            $variant: 'default',
+            variant: 'default',
             title: 'Capture & inspect encrypted HTTPS',
             text: 'Immediately view HTTPS on any device for apps that trust user-installed certificates, like Chrome, or your own app with a tiny manifest change.\n\nOn emulators & rooted devices, easily intercept HTTPS from any app, with automatic injection of a system certificate authority and automatic certificate unpinning powered by built-in Frida integration.',
             icon: SealCheck,
           },
           {
-            $variant: 'default',
+            variant: 'default',
             title: 'See all your Android HTTP',
             text: 'Powered by Android\'s VPN APIs and built-in Frida support, HTTP Toolkit intercepts everything, even HTTP traffic from apps that try to ignore your system proxy settings.',
             icon: MagnifyingGlass,
           },
           {
-            $variant: 'highlighted',
+            variant: 'highlighted',
             title: 'Want the full details?',
             text: 'Take a look at the in-depth guide to Android HTTP debugging.',
             buttonText: 'Learn more',

src/app/(pricing)/get-pro/page.tsx

@@ -24,7 +24,7 @@ export default function PricingPage() {
         withDownload={false}
       >
         <Suspense>
-          <PricingPlans downloadButton={<DownloadButton />} $hideFree />
+          <PricingPlans downloadButton={<DownloadButton />} hideFree />
         </Suspense>
       </CTA>
     </>

src/app/(pricing)/layout.tsx

@@ -25,8 +25,8 @@ export default function PricingLayout({ children }: { children: React.ReactNode
         title="Frequently Asked Questions"
         text=""
         cta={{
-          $small: true,
-          $variant: 'secondary',
+          small: true,
+          variant: 'secondary',
           children: 'See more FAQs',
           icon: CaretRight,
           as: 'link',

src/app/(products)/http-toolkit-for-linux/page.tsx

@@ -17,7 +17,7 @@ export default async function ForLinuxPage() {
   return (
     <>
       <CTA
-        $bgVariant="right-bottom-to-top-left"
+        bgVariant="right-bottom-to-top-left"
         icon={LinuxLogo}
         heading="Intercept, debug & mock HTTP on Linux"
         excerpt="HTTP Toolkit lets you easily see and modify HTTP & HTTPS messages from applications, browsers, scripts & more on your Linux computer."

src/app/(products)/http-toolkit-for-mac/page.tsx

@@ -17,7 +17,7 @@ export default async function ForMacOsPage() {
   return (
     <>
       <CTA
-        $bgVariant="left-bottom-to-top-right"
+        bgVariant="left-bottom-to-top-right"
         icon={AppleLogo}
         heading="Intercept, debug & mock HTTP on macOS"
         excerpt="HTTP Toolkit lets you easily see and modify HTTP & HTTPS messages from applications, browsers, scripts & more on your Mac."

src/app/(products)/http-toolkit-for-windows/page.tsx

@@ -17,7 +17,7 @@ export default async function ForWindowsPage() {
   return (
     <>
       <CTA
-        $bgVariant="left-top-to-bottom-right"
+        bgVariant="left-top-to-bottom-right"
         icon={WindowsLogo}
         heading="Intercept, debug & mock HTTP on Windows"
         excerpt="HTTP Toolkit lets you easily see and modify HTTP & HTTPS messages from applications, browsers, scripts & more on your Windows computer."

src/app/(thank-you-pages)/app-purchase-thank-you/page.tsx

@@ -42,8 +42,8 @@ export default function AppPurchaseThankYouPage() {
               <StyledThankYouColumnContent>
                 <StyledTextContent>
                   <Stack>
-                    <Stack $gapxl="32px">
-                      <Stack $gapxl="24px">
+                    <Stack gapxl="32px">
+                      <Stack gapxl="24px">
                         <StyledHideElementOn data-hide-below="md">
                           <Heading fontSize="l" color="textGradient">
                             Thanks for your purchase!