Add beta label on usage left sidebar

Author: gtsiolis

components/dashboard/src/teams/TeamUsage.tsx

@@ -24,6 +24,7 @@ import { ReactComponent as Spinner } from "../icons/Spinner.svg";
 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 PillLabel from "../components/PillLabel";
 
 function TeamUsage() {
     const { teams } = useContext(TeamsContext);
@@ -177,11 +178,29 @@ function TeamUsage() {
                                     {getBillingHistory()}
                                 </div>
                                 {!isLoading && (
-                                    <div className="flex flex-col truncate">
-                                        <div className="text-base text-gray-500">Total usage</div>
-                                        <div className="flex text-lg text-gray-600 font-semibold">
-                                            <CreditsSvg className="my-auto mr-1" />
-                                            <span>{totalCreditsUsed} Credits</span>
+                                    <div>
+                                        <div className="flex flex-col truncate">
+                                            <div className="text-base text-gray-500">Total usage</div>
+                                            <div className="flex text-lg text-gray-600 font-semibold">
+                                                <CreditsSvg className="my-auto mr-1" />
+                                                <span>{totalCreditsUsed} Credits</span>
+                                            </div>
+                                        </div>
+                                        <div className="flex flex-col truncate">
+                                            <div className="text-sm text-gray-500">
+                                                Usage is currently in{" "}
+                                                <PillLabel
+                                                    type="warn"
+                                                    className="font-semibold mt-2 py-0.5 px-1 self-center"
+                                                >
+                                                    Beta
+                                                </PillLabel>{" "}
+                                            </div>
+                                            <div>
+                                                <a href="#" className="gp-link">
+                                                    Send feedback
+                                                </a>
+                                            </div>
                                         </div>
                                     </div>
                                 )}