chore: Better button colors, better upgrade request

apps/builder/app/builder/features/topbar/domains.tsx

@@ -348,7 +348,7 @@ const DomainItem = ({
           <Button
             formAction={handleVerify}
             state={isCheckStateInProgress ? "pending" : undefined}
-            color="primary"
+            color="neutral"
             css={{ width: "100%", flexShrink: 0, mt: theme.spacing[3] }}
           >
             Check status
@@ -364,7 +364,7 @@ const DomainItem = ({
           <Button
             formAction={handleUpdateStatus}
             state={isCheckStateInProgress ? "pending" : undefined}
-            color="primary"
+            color="neutral"
             css={{ width: "100%", flexShrink: 0, mt: theme.spacing[3] }}
           >
             Check status
@@ -375,7 +375,7 @@ const DomainItem = ({
       <Button
         formAction={handleRemoveDomain}
         state={isRemoveInProgress ? "pending" : undefined}
-        color="neutral"
+        color="destructive"
         css={{ width: "100%", flexShrink: 0 }}
       >
         Remove domain

apps/builder/app/builder/features/topbar/entri.tsx

@@ -1,10 +1,18 @@
 import * as entri from "entrijs";
 import { useEffect, useState } from "react";
 import { useStore } from "@nanostores/react";
-import { globalCss, Button, Text, toast } from "@webstudio-is/design-system";
+import {
+  globalCss,
+  Button,
+  Text,
+  PanelBanner,
+  Flex,
+  Link,
+} from "@webstudio-is/design-system";
 import { trpcClient } from "~/shared/trpc/trpc-client";
 import { $userPlanFeatures } from "~/shared/nano-states";
 import { extractCname } from "./cname";
+import { UploadIcon } from "@webstudio-is/icons";
 
 // https://developers.entri.com/docs/install
 type DnsRecord = {
@@ -96,26 +104,42 @@ export const Entri = ({ domain, dnsRecords, onClose }: EntriProps) => {
     dnsRecords,
     onClose,
   });
+  const [requestUpgrade, setRequestUpgrade] = useState(false);
   return (
     <>
       {error !== undefined && <Text color="destructive">{error}</Text>}
       <Button
         disabled={isOpen}
-        color="neutral"
-        css={{ width: "100%", flexShrink: 0 }}
+        color="primary"
         type="button"
         onClick={() => {
           if (hasProPlan) {
             showDialog();
           } else {
-            toast.error(
-              "Please upgrade to the Pro plan or higher to use automatic domain configuration."
-            );
+            setRequestUpgrade(true);
           }
         }}
       >
-        Configure automatically
+        Setup automatically with Entri
       </Button>
+      {requestUpgrade && (
+        <PanelBanner>
+          <Text>
+            Please upgrade to the Pro plan or higher to use automatic domain
+            configuration.
+          </Text>
+          <Flex align="center" gap={1}>
+            <UploadIcon />
+            <Link
+              color="inherit"
+              target="_blank"
+              href="https://webstudio.is/pricing"
+            >
+              Upgrade to Pro
+            </Link>
+          </Flex>
+        </PanelBanner>
+      )}
     </>
   );
 };