Merge pull request #62 from supertokens/areeb/1005-paid-feature-banner

feat: Added paid feature badge

CHANGELOG.md

@@ -7,7 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [unreleased]
 
-## [0.3.06] - 2022-12-26
+## [0.3.1] - 2023-01-06
+
+-   Add a banner to indicate beta status
+
+## [0.3.0] - 2022-12-26
 
 -   Fixes an issue with user details if the user does not exist
 

build/asset-manifest.json

@@ -8,13 +8,13 @@
     "static/media/favicon.ico": "/static/media/favicon.ico",
     "static/media/logo.svg": "/static/media/logo.svg",
     "static/media/lock.svg": "/static/media/lock.svg",
-    "static/media/checkmark-green.svg": "/static/media/checkmark-green.svg",
     "static/media/provider-apple.svg": "/static/media/provider-apple.svg",
+    "static/media/checkmark-green.svg": "/static/media/checkmark-green.svg",
     "static/media/provider-google.svg": "/static/media/provider-google.svg",
     "static/media/no-users-graphic.svg": "/static/media/no-users-graphic.svg",
     "static/media/eye-stroke.svg": "/static/media/eye-stroke.svg",
-    "static/media/people-restricted.svg": "/static/media/people-restricted.svg",
     "static/media/mail-opened.svg": "/static/media/mail-opened.svg",
+    "static/media/people-restricted.svg": "/static/media/people-restricted.svg",
     "static/media/form-field-error-icon.svg": "/static/media/form-field-error-icon.svg",
     "static/media/provider-github.svg": "/static/media/provider-github.svg",
     "static/media/mail.svg": "/static/media/mail.svg",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "dashboard",
-	"version": "0.3.0",
+	"version": "0.3.1",
 	"private": true,
 	"dependencies": {
 		"@babel/core": "^7.16.0",

src/ui/pages/usersList/UsersList.scss

@@ -29,6 +29,17 @@ $container-width: 829;
 	font-weight: 500;
 }
 
+.users-list-title .pill.paid-feature-badge {
+	display: inline-block;
+	line-height: 1.1;
+	font-size: 14px;
+	background-color: var(--color-badge-bg);
+	color: var(--color-badge);
+	border-radius: 6px;
+	margin-top: 0;
+	vertical-align: middle;
+}
+
 .users-list-subtitle {
 	color: var(--color-secondary-text);
 	margin-bottom: 48px;

src/ui/pages/usersList/UsersList.tsx

@@ -159,7 +159,9 @@ export const UsersList: React.FC<UserListProps> = ({
 				src={LOGO_ICON_LIGHT}
 				alt="Auth Page"
 			/>
-			<h1 className="users-list-title">User Management</h1>
+			<h1 className="users-list-title">
+				User Management <span className="pill paid-feature-badge">Beta</span>
+			</h1>
 			<p className="text-small users-list-subtitle">
 				One place to manage all your users, revoke access and edit information according to your needs.
 			</p>

src/ui/styles/variables.css

@@ -34,6 +34,7 @@ body {
 	--color-success-bg: rgb(241, 250, 247);
 	--color-success-shadow: rgba(4, 84, 62, 0.16);
 	--color-link: rgb(0, 122, 255);
+	--color-badge-bg: rgba(255, 242, 202);
 
 	/* Border Colors */
 	--color-border: rgb(229, 229, 229);
@@ -46,6 +47,7 @@ body {
 	--color-error: rgb(158, 37, 38);
 	--color-info: rgb(31, 90, 219);
 	--color-success: rgb(4, 84, 62);
+	--color-badge: rgba(220, 141, 13);
 
 	/* Recipe Pill Colors */
 	--color-emailpassword-bg: rgb(221, 252, 247);

src/version.ts

@@ -13,4 +13,4 @@
  * under the License.
  */
 
-export const package_version = "0.3.0";
+export const package_version = "0.3.1";