Merge branch 'perms' of https://github.com/movie-web/extension into perms

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,23 @@
 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 +28,63 @@ export default function PermissionRequest() {
   return (
     <div className="container">
       <div className="inner-container">
-        <h1 className="color-white">Permission</h1>
+        <h1 className="color-white">
-        <p className="text-color" style={{ fontSize: 13 }}>
+          We need some <br /> browser permissions
-          Websites need to ask for permission <br /> before they can use this extension
+        </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' }}>
+        <div className="card-list" style={{ marginTop: '2.5rem' }}>
-            The website <span className="color-white">hello world</span> wants to <br /> use the extension on their
+          <Card
-            page.
+            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">
+              To determine which site has access to the extension or not, we need to know what tab you&apos;re currently
+              using. This permission is given to all extensions by default, so your browser won&apos;t prompt you for
+              it.
+            </p>
+          </Card>
+        </div>
+
         <div className="footer">
-          <button type="button" className="grant-permission-btn" onClick={grant}>
+          <div style={{ width: '250px' }}>
+            <Button full onClick={grant}>
               Grant Permission
-          </button>
+            </Button>
+          </div>
         </div>
       </div>
     </div>