Add beta label and feedback link on the usage page

Author: gtsiolis

components/dashboard/src/components/PillLabel.tsx

@@ -17,7 +17,7 @@
 export default function PillLabel(props: { children?: React.ReactNode; type?: "info" | "warn"; className?: string }) {
     const infoStyle = "bg-blue-50 text-blue-500 dark:bg-blue-500 dark:text-blue-100";
     const warnStyle = "bg-orange-100 text-orange-700 dark:bg-orange-600 dark:text-orange-100";
-    const style = `px-3 py-1 text-sm uppercase rounded-xl ${props.type === "warn" ? warnStyle : infoStyle} ${
+    const style = `px-2 py-1 text-sm uppercase rounded-xl ${props.type === "warn" ? warnStyle : infoStyle} ${
         props.className
     }`;
     return <span className={style}>{props.children}</span>;

components/dashboard/src/components/UsageView.tsx

@@ -24,7 +24,7 @@ import { ReactComponent as UsageIcon } from "../images/usage-default.svg";
 import { BillingMode } from "@gitpod/gitpod-protocol/lib/billing-mode";
 import { toRemoteURL } from "../projects/render-utils";
 import { WorkspaceType } from "@gitpod/gitpod-protocol";
-import PillLabel from "../components/PillLabel";
+import PillLabel from "./PillLabel";
 
 interface UsageViewProps {
     attributionId: AttributionId;
@@ -180,15 +180,21 @@ function UsageView({ attributionId, billingMode }: UsageViewProps) {
                                         </div>
                                         <div className="flex flex-col truncate mt-8 text-sm">
                                             <div className="text-gray-400 dark:text-gray-500">
-                                                Usage is currently in{" "}
+                                                This feature is in{" "}
                                                 <PillLabel
                                                     type="warn"
-                                                    className="font-semibold mt-2 py-0.5 px-1 self-center"
+                                                    className="font-semibold mt-2 ml-0 py-0.5 px-1 self-center"
                                                 >
-                                                    Beta
-                                                </PillLabel>{" "}
-                                            </div>
-                                            <div>
+                                                    <span className="text-xs">Early Access</span>
+                                                </PillLabel>
+                                                <br />
+                                                <a
+                                                    href="https://www.gitpod.io/docs/references/gitpod-releases"
+                                                    className="gp-link"
+                                                >
+                                                    Learn more
+                                                </a>
+                                                &nbsp;·&nbsp;
                                                 <a
                                                     href="https://github.com/gitpod-io/gitpod/issues/12636"
                                                     className="gp-link"