chore: Better button colors, better upgrade request (#5302)

<img width="335" alt="image"
src="https://github.com/user-attachments/assets/94d621c1-527a-4608-8529-53971af26b8c"
/>
<img width="321" alt="image"
src="https://github.com/user-attachments/assets/fd232773-dad5-4fde-8748-1d13645a4adf"
/>


## Description

1. What is this PR about (link the issue and add a short description)

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: kof

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>
+      )}
     </>
   );
 };