From 2f75a9d2ac73ead010a0974f772d6c9f1512cda7 Mon Sep 17 00:00:00 2001 From: Jip Fr Date: Wed, 7 Feb 2024 18:25:37 +0100 Subject: [PATCH] Permissions page --- src/tabs/PermissionRequest.css | 124 +++++++++++++++++++++++++++++++++ src/tabs/PermissionRequest.tsx | 91 +++++++++++++++++++++--- 2 files changed, 204 insertions(+), 11 deletions(-) diff --git a/src/tabs/PermissionRequest.css b/src/tabs/PermissionRequest.css index d8f498d..0cf4e1a 100644 --- a/src/tabs/PermissionRequest.css +++ b/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; +} \ No newline at end of file diff --git a/src/tabs/PermissionRequest.tsx b/src/tabs/PermissionRequest.tsx index ec2984b..0216f71 100644 --- a/src/tabs/PermissionRequest.tsx +++ b/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 ( +
+
+
{props.icon}
+
+
{props.children}
+ {props.right ?
{props.right}
: null} +
+ ); +} + export default function PermissionRequest() { const { grantPermission } = usePermission(); @@ -14,20 +29,74 @@ export default function PermissionRequest() { return (
-

Permission

-

- Websites need to ask for permission
before they can use this extension +

+ We need some
browser permissions +

+

+ We don'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.

-
-

- The website hello world wants to
use the extension on their - page. -

+ +
+ } + right={ + + + + } + > +

Read the source code on GitHub

+

+ Don't trust us? Read the code and choose for yourself if its safe! +

+
+ +

Permission list

+
+ }> +

Read & change data from all sites

+

+ 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. +

+ + }> +

Read and write cookies

+

+ Some sources use cookies for authentication. We need to be able to read and set those cookies. This + won't be prompted to you, it's included in “Read & change data from all sites”. +

+ + }> +

Active tab

+

+ 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 +

+ +
+
- +
+ +