Added button and beginning of setup screen

src/components/Button.css

@@ -0,0 +1,41 @@
+.button {
+  padding: 1rem;
+  border-radius: 10px;
+  border: 0;
+  font-size: 1rem;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 100ms ease-in-out, color 100ms ease-in-out, transform 100ms ease-in-out;
+}
+
+.button.full {
+  width: 100%;
+}
+
+.button, .button:focus, .button:active, .button:visited {
+  text-decoration: none;
+}
+
+.button:active {
+  transform: scale(1.05);
+}
+
+.button.button-secondary {
+  background-color: #222033;
+  color: white;
+}
+
+.button.button-secondary:hover {
+  background-color: #2c2941;
+  color: white;
+}
+
+.button.button-primary {
+  background-color: #4F328A;
+  color: white;
+}
+
+.button.button-primary:hover {
+  background-color: #5E3F9D;
+  color: white;
+}

src/components/Button.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+
+import './Button.css';
+
+export interface ButtonProps {
+  type?: 'primary' | 'secondary';
+  href?: string;
+  children?: ReactNode;
+  onClick?: () => void;
+  full?: boolean;
+  className?: string;
+}
+
+export function Button(props: ButtonProps) {
+  const classes = `button button-${props.type ?? 'primary'} ${props.className ?? ''} ${props.full ? 'full' : ''}`;
+  if (props.href)
+    return (
+      <a href={props.href} className={classes} target="_blank" rel="noreferrer">
+        {props.children}
+      </a>
+    );
+  return (
+    <button className={classes} type="button" onClick={props.onClick}>
+      {props.children}
+    </button>
+  );
+}

src/components/PermissionMissingScreen.tsx

@@ -1,22 +0,0 @@
-import { useCallback } from 'react';
-
-import { Icon } from '~components/Icon';
-
-import '~tabs/PermissionGrant.css';
-
-export function PermissionMissingScreen() {
-  const open = useCallback(() => {
-    const url = (chrome || browser).runtime.getURL(`/tabs/PermissionRequest.html`);
-    (chrome || browser).tabs.create({ url });
-  }, []);
-
-  return (
-    <div className="disabled">
-      <Icon name="warningCircle" />
-      <p style={{ paddingBottom: 25, paddingTop: 10 }}>The extension is missing permissions it needs to function</p>
-      <button type="button" className="grant-permission-btn" onClick={open}>
-        Grant Permission
-      </button>
-    </div>
-  );
-}

src/components/SetupScreen.tsx

@@ -0,0 +1,24 @@
+import { useCallback } from 'react';
+
+import { Button } from '~components/Button';
+
+import './SetupScreen.css';
+
+export function SetupScreen() {
+  const open = useCallback(() => {
+    const url = (chrome || browser).runtime.getURL(`/tabs/PermissionRequest.html`);
+    (chrome || browser).tabs.create({ url });
+  }, []);
+
+  return (
+    <div className="disabled">
+      <h1 className="title">Le&apos;s get this set up!</h1>
+      <p style={{ paddingBottom: 25, paddingTop: 10 }}>
+        To get started, we need to setup some things first. Click the button below to continue.
+      </p>
+      <Button onClick={open} full>
+        Continue
+      </Button>
+    </div>
+  );
+}