#25 Add beta badge to new table dialog

atomicdata-dev · Jul 12, 2023 · dbed062 · dbed062
1 parent 0267822
commit dbed062
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/data-browser/src/components/BetaBadge.tsx b/data-browser/src/components/BetaBadge.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export function BetaBadge(): JSX.Element {
+  return <Badge>BETA</Badge>;
+}
+
+const Badge = styled.span`
+  background-color: ${p => p.theme.colors.main};
+  border-radius: 0.25rem;
+  color: white;
+  font-weight: bold;
+  padding-inline: 0.25rem;
+  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.25);
+`;
diff --git a/data-browser/src/components/NewInstanceButton/NewTableButton.tsx b/data-browser/src/components/NewInstanceButton/NewTableButton.tsx
@@ -21,6 +21,7 @@ import { useCreateAndNavigate } from './useCreateAndNavigate';
 import { NewInstanceButtonProps } from './NewInstanceButtonProps';
 import { stringToSlug } from '../../helpers/stringToSlug';
 import styled from 'styled-components';
+import { BetaBadge } from '../BetaBadge';
 
 const instanceOpts = {
   newResource: true,
@@ -83,9 +84,10 @@ export function NewTableButton({
         {children}
       </Base>
       <Dialog {...dialogProps}>
-        <DialogTitle>
+        <RelativeDialogTitle>
           <h1>New Table</h1>
-        </DialogTitle>
+          <BetaBadge />
+        </RelativeDialogTitle>
         <WiderDialogContent>
           <form
             onSubmit={(e: FormEvent) => {
@@ -121,3 +123,9 @@ export function NewTableButton({
 const WiderDialogContent = styled(DialogContent)`
   width: min(80vw, 20rem);
 `;
+
+const RelativeDialogTitle = styled(DialogTitle)`
+  display: flex;
+  align-items: flex-start;
+  gap: 1ch;
+`;