feat(connect-kit/x-settings): add beta tag to storage widget

Crossbell-Box · Mar 8, 2023 · 8b7083b · 8b7083b
1 parent 386b382
commit 8b7083b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/packages/connect-kit/src/modals/x-settings-modal/components/storage-widget/index.module.css b/packages/connect-kit/src/modals/x-settings-modal/components/storage-widget/index.module.css
@@ -33,3 +33,13 @@
 .infinity {
 	font-size: 1.4em;
 }
+
+.beta {
+	background: #5b89f7;
+	color: #fff;
+	border-radius: 4px;
+	padding: 2px 6px;
+	font-size: 12px;
+	margin: 0 auto 0 6px;
+	cursor: pointer;
+}
diff --git a/packages/connect-kit/src/modals/x-settings-modal/components/storage-widget/index.tsx b/packages/connect-kit/src/modals/x-settings-modal/components/storage-widget/index.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import prettyBytes from "pretty-bytes";
 import { useCharacterMediaUsage } from "@crossbell/connect-kit";
+import { Tooltip } from "@mantine/core";
 
 import styles from "./index.module.css";
 
@@ -16,6 +17,22 @@ export function StorageWidget({ characterId }: StorageWidgetProps) {
 			<div className={styles.info}>
 				<span className={styles.title}>Unlimited Storage</span>
 
+				<Tooltip
+					multiline
+					width={223}
+					label="Our storage is in beta, providing unlimited storage. When officially launched, storage may be limited and payment required."
+					style={{
+						background: "rgba(94, 100, 115, 0.7)",
+						backdropFilter: "blur(5px)",
+						borderRadius: "6px",
+						padding: "8px 16px",
+						fontSize: "12px",
+						fontWeight: 400,
+					}}
+				>
+					<span className={styles.beta}>Beta</span>
+				</Tooltip>
+
 				<span className={styles.amount}>
 					{prettyBytes(mediaUsage ?? 0, { maximumFractionDigits: 2 })}/
 					<span className={styles.infinity}>∞</span>