Added button and beginning of setup screen

src/Popup.css

@@ -3,12 +3,15 @@
 html {
   min-height: 300px;
   min-width: 300px;
+  height: 100%;
 }
 
 body {
   min-height: 300px;
   min-width: 300px;
   margin: 0;
+  height: 100%;
+  max-height: 100%;
 }
 
 .popup {
@@ -18,3 +21,8 @@ body {
   justify-content: center;
   align-items: center;
 }
+
+#__plasmo {
+  height: 100%;
+  background-color: #0a0a10;
+}

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>
+  );
+}

src/font.css

@@ -12,8 +12,9 @@
   src: url(data-base64:~assets/inter/bold.ttf);
 }
 
-body {
+body, html {
   font-family: "Inter", Arial, Helvetica, sans-serif;
+  font-size: 13px;
 }
 
 * {
@@ -23,4 +24,5 @@ body {
 
 button {
   font-family: inherit;
+  font-size: inherit;
 }

src/popup.tsx

@@ -1,7 +1,7 @@
 import { BottomLabel, TopRightLabel } from '~components/BottomLabel';
 import { DisabledScreen } from '~components/DisabledScreen';
 import { Frame } from '~components/Frame';
-import { PermissionMissingScreen } from '~components/PermissionMissingScreen';
+import { SetupScreen } from '~components/SetupScreen';
 import { ToggleButton } from '~components/ToggleButton';
 import { useDomain } from '~hooks/useDomain';
 import { useToggleWhitelistDomain } from '~hooks/useDomainWhitelist';
@@ -21,7 +21,7 @@ function IndexPopup() {
   return page === 'perm' ? (
     <Frame>
       <div className="popup">
-        <PermissionMissingScreen />
+        <SetupScreen />
         <TopRightLabel />
       </div>
     </Frame>