add "experimental" badge to header

gnosisguild · Jan 3, 2024 · 84fac82 · 84fac82
1 parent 1496adb
commit 84fac82
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -3,6 +3,6 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   }
 }
diff --git a/packages/app/src/components/views/Header/Header.tsx b/packages/app/src/components/views/Header/Header.tsx
@@ -25,6 +25,13 @@ const useStyles = makeStyles((theme) => ({
   grow: {
     flexGrow: 1,
   },
+  badge: {
+    marginLeft: theme.spacing(2),
+  },
+  warning: {
+    color: theme.palette.warning.main,
+    textTransform: "uppercase",
+  },
 }))
 
 export const Header = () => {
@@ -40,7 +47,14 @@ export const Header = () => {
           Roles
         </Typography>
       </HeaderBox>
-      <HeaderBox className={classes.grow} />
+      <HeaderBox className={classes.grow}>
+        <div className={classes.badge}>
+          <Typography className={classes.warning}>Experimental</Typography>
+          <Typography variant="body2">
+            Use this app with caution and carefully review all applied permissions
+          </Typography>
+        </div>
+      </HeaderBox>
       <ChainPicker />
       <HeaderAddressBox address={module} emptyText="No Safe Attached" />
       <ConnectWalletBox />