Permissions page

src/tabs/PermissionRequest.css

@@ -1 +1,125 @@
 @import url("../font.css");
+
+html {
+  font-size: 16px;
+}
+
+body {
+  background-color: #0A0A10;
+  color: white;
+  padding-bottom: 50px;
+}
+
+.container {
+  width: 90%;
+  margin: 100px auto;
+  max-width: 628px;
+}
+
+h1 {
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+h2 {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-top: 4rem;
+  margin-bottom: 1rem;
+}
+
+.text-color {
+  color: #7C7C97;
+}
+
+.paragraph {
+  font-size: 1rem;
+  margin-top: 20px;
+  max-width: 500px;
+  line-height: 1.3;
+}
+
+.card-list {
+  margin: 1rem 0;
+}
+
+.card-list>*+* {
+  margin-top: 1rem;
+}
+
+.card {
+  padding: 20px;
+  border: 1px solid #272A37;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 1rem;
+  border-radius: 11px;
+}
+
+
+.card .icon-circle {
+  width: 2rem;
+  height: 2rem;
+  background-color: rgba(39, 42, 55, 0.35);
+  border: 1px solid #272A37;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.card.purple, .card.purple .icon-circle {
+  border-color: #49277C;
+}
+
+.card.purple .icon-circle {
+  background-color: rgba(51, 27, 87, .4);
+}
+
+.card svg {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+}
+
+.card h3 {
+  font-size: 1rem;
+  font-weight: bold;
+  color: white;
+  margin-top: 0;
+}
+
+.card .paragraph {
+  margin-top: 0.5rem;
+}
+
+.card .center-y {
+  display: flex;
+  align-items: center;
+}
+
+.card button {
+  padding: 1rem;
+  border-radius: 10px;
+  border: 0;
+  font-size: 1rem;
+  font-weight: bold;
+  background-color: #222033;
+  color: white;
+}
+
+.card:not(.purple) svg {
+  color: #7C7C97;
+}
+
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100px;
+  background: linear-gradient(to top, #0A0A10 30%, transparent);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/tabs/PermissionRequest.tsx

@@ -1,9 +1,24 @@
+/* eslint-disable react/no-unescaped-entities */
 import { useCallback } from 'react';
 
+import { Button } from '~components/Button';
+import { Icon } from '~components/Icon';
 import { usePermission } from '~hooks/usePermission';
 
 import './PermissionRequest.css';
 
+function Card(props: { purple?: boolean; children: React.ReactNode; icon?: React.ReactNode; right?: React.ReactNode }) {
+  return (
+    <div className={['card', props.purple ? 'purple' : ''].join(' ')}>
+      <div>
+        <div className="icon-circle">{props.icon}</div>
+      </div>
+      <div>{props.children}</div>
+      {props.right ? <div className="center-y">{props.right}</div> : null}
+    </div>
+  );
+}
+
 export default function PermissionRequest() {
   const { grantPermission } = usePermission();
 
@@ -14,20 +29,74 @@ export default function PermissionRequest() {
   return (
     <div className="container">
       <div className="inner-container">
-        <h1 className="color-white">Permission</h1>
-        <p className="text-color" style={{ fontSize: 13 }}>
-          Websites need to ask for permission <br /> before they can use this extension
+        <h1 className="color-white">
+          We need some <br /> browser permissions
+        </h1>
+        <p className="text-color paragraph">
+          We don&apos;t like it either, but the movie-web extension needs quite a few permissions to function. Listed
+          below is an explanation for all permissions we need.
         </p>
-        <div className="permission-card">
-          <p className="text-color" style={{ textAlign: 'center' }}>
-            The website <span className="color-white">hello world</span> wants to <br /> use the extension on their
-            page.
-          </p>
+
+        <div className="card-list" style={{ marginTop: '2.5rem' }}>
+          <Card
+            purple
+            icon={<Icon name="github" />}
+            right={
+              <a href="https://github.com/movie-web/extension" target="_blank" rel="noreferrer">
+                <button type="button">Read source code</button>
+              </a>
+            }
+          >
+            <h3>Read the source code on GitHub</h3>
+            <p className="text-color paragraph">
+              Don&apos;t trust us? Read the code and choose for yourself if its safe!
+            </p>
+          </Card>
         </div>
+
+        <h2>Permission list</h2>
+        <div className="card-list">
+          <Card icon={<Icon name="windows" />}>
+            <h3>Read & change data from all sites</h3>
+            <p className="text-color paragraph">
+              To be able to gather content from the sources. We need to be able to reach those sources. Unfortunately
+              that requires us to request the permissions from all sites.
+            </p>
+          </Card>
+          <Card icon={<Icon name="cookie" />}>
+            <h3>Read and write cookies</h3>
+            <p className="text-color paragraph">
+              Some sources use cookies for authentication. We need to be able to read and set those cookies. This
+              won&apos;t be prompted to you, it&apos;s included in “Read & change data from all sites”.
+            </p>
+          </Card>
+          <Card icon={<Icon name="shield" />}>
+            <h3>Active tab</h3>
+            <p className="text-color paragraph">
+              Talk late over pleasantries that never meant much to me But it was meaning everything to you A cold pause
+              right before you go She adores you, run towards you, calls on the landline That coat wasn't always real
+              you loved just How the fabric feels but I was somebody else A boy in a belt who knew tearjerker you are
+              you've been shaking me out I said one day passes by but I will stay the same When you look me in the eyes
+              dear What will you do? When you notice there is nothing For you to hold on to Last night I broke down when
+              you said I thought you were better than that Kept my head above the wash now I'm hoping that we never go
+              back I'm hoping that we never go back Stood tall on a shallow reef right there beside The public beach
+              hoping I was something sharks would eat You said, "Sugar how you holding up? I said, "Hey, my body's gone
+              but I'm feelin' you still" Always on the move Ground controller Oh, beam me up I've have enough I'm ready
+              to lose How's it going? Oh, hi hello I'd like to know if there's ever be One day that passes by when I
+              don't stay the same When you look me in the eyes dear What will you do? When you notice there is nothing
+              For you to hold on to Last night I broke down when you said I thought you were better than that Kept my
+              head above the wash now I'm hoping that we never go back Tearjerker you made me fell I'm hopping that we
+              never go back
+            </p>
+          </Card>
+        </div>
+
         <div className="footer">
-          <button type="button" className="grant-permission-btn" onClick={grant}>
-            Grant Permission
-          </button>
+          <div style={{ width: '250px' }}>
+            <Button full onClick={grant}>
+              Grant Permission
+            </Button>
+          </div>
         </div>
       </div>
     </div>