[pat] Token UI polish

Co-authored-by: Huiwen <[email protected]>

Author: jeanp413

components/dashboard/src/components/Loader.tsx

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2022 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import { ReactComponent as Spinner } from "../icons/Spinner.svg";
+
+export function SpinnerLoader(props: { content?: string }) {
+    return (
+        <div className="flex items-center justify-center space-x-2 text-gray-400 text-sm pt-16 pb-40">
+            <Spinner className="h-4 w-4 animate-spin" />
+            {props.content && <span>{props.content}</span>}
+        </div>
+    );
+}
+
+interface SpinnerContentProps {
+    loading?: boolean;
+    content?: string;
+    children: React.ReactChild[] | React.ReactChild | React.ReactNode;
+}
+export function SpinnerOverlayLoader(props: SpinnerContentProps) {
+    return (
+        <div className="relative">
+            {props.loading && (
+                <div className="absolute h-full w-full">
+                    <div className="flex items-center justify-center space-x-2 text-gray-400 text-sm h-full">
+                        <Spinner className="h-4 w-4 animate-spin" />
+                        {props.content && <span>{props.content}</span>}
+                    </div>
+                </div>
+            )}
+            <div className={props.loading ? "opacity-40 select-none pointer-events-none" : ""}>{props.children}</div>
+        </div>
+    );
+}

components/dashboard/src/components/PillLabel.tsx

@@ -4,21 +4,27 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
+export type PillType = "info" | "warn" | "success";
+
+const PillClsMap: Record<PillType, string> = {
+    info: "bg-blue-50 text-blue-500 dark:bg-blue-500 dark:text-blue-100",
+    warn: "bg-orange-100 text-orange-700 dark:bg-orange-600 dark:text-orange-100",
+    success: "bg-green-100 text-green-700 dark:bg-green-600 dark:text-green-100",
+};
+
 /**
  * Renders a pill.
  *
  * **type**\
  * info: Renders a blue pile label (default).\
  * warn: Renders an orange pile label.
+ * success: Renders an green pile label.
  *
  * **className**\
  * Add additional css classes to style this component.
  */
-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-2 py-1 text-sm uppercase rounded-xl ${props.type === "warn" ? warnStyle : infoStyle} ${
-        props.className
-    }`;
+export default function PillLabel(props: { children?: React.ReactNode; type?: PillType; className?: string }) {
+    const type = props.type || "info";
+    const style = `px-2 py-1 text-sm uppercase rounded-xl ${PillClsMap[type]} ${props.className}`;
     return <span className={style}>{props.children}</span>;
 }