Fix some styling

src/components/BottomLabel.css

@@ -1,6 +1,6 @@
 .bottom-label {
   position: absolute;
-  bottom: .25rem;
+  bottom: 1rem;
   display: flex;
   align-items: center;
   gap: .5rem;
@@ -19,8 +19,8 @@
 }
 
 .dot {
-  width: 2px;
+  width: 3px;
-  height: 2px;
+  height: 3px;
   background: currentColor;
   border-radius: 100px;
 }

src/components/DisabledScreen.css

@@ -5,11 +5,11 @@
   font-size: 16px;
 }
 
-.disabled svg {
+.disabled .icon {
-  display: block;
+  font-size: 1.5rem;
-  width: 1.5rem;
+  margin-bottom: 1rem;
-  height: 1.5rem;
+  text-align: center;
-  margin: 0 auto;
+  display: inline-block;
   color: #B44868;
 }
 

src/components/DisabledScreen.tsx

@@ -4,7 +4,9 @@ import { Icon } from './Icon';
 export function DisabledScreen() {
   return (
     <div className="disabled">
+      <div className="icon">
         <Icon name="warningCircle" />
+      </div>
       <p>
         The <strong>movie-web extension</strong> can not be used on this page
       </p>

src/components/SetupScreen.tsx

@@ -1,9 +1,9 @@
 import { useCallback } from 'react';
 
 import { Button } from '~components/Button';
+import { Icon } from '~components/Icon';
 
 import './SetupScreen.css';
-import { Icon } from '~components/Icon';
 
 export function SetupScreen() {
   const open = useCallback(() => {

src/tabs/PermissionGrant.css

@@ -15,7 +15,7 @@ body {
   background-color: #0A0A10;
 }
 
-.container {
+.container.permission-grant {
   height: 100%;
   width: 100%;
   display: flex;
@@ -23,14 +23,14 @@ body {
   justify-content: center;
 }
 
-.inner-container {
+.permission-grant .inner-container {
   width: 400px;
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }
 
-.permission-card {
+.permission-grant .permission-card {
   display: flex;
   align-items: center;
   flex-direction: column;
@@ -42,30 +42,30 @@ body {
   border: 1px solid #272A37;
 }
 
-h1 {
+.permission-grant h1 {
   font-size: 1.25rem;
   margin-bottom: 0.5rem;
 }
 
-.permission-card>p {
+.permission-grant .permission-card > p {
   font-size: 1rem;
   margin-top: .5rem;
   margin-bottom: 1rem;
 }
 
-.color-white {
+.permission-grant .color-white {
   color: #ffffff;
 }
 
-.text-color {
+.permission-grant .text-color {
   color: #73739d;
 }
 
-.buttons {
+.permission-grant .buttons {
   width: 100%;
   margin-top: 2rem;
 }
 
-.buttons>*+* {
+.permission-grant .buttons>*+* {
   margin-top: 1rem;
 }

src/tabs/PermissionGrant.tsx

@@ -1,20 +1,16 @@
 import { Button } from '~components/Button';
-import { useDomainWhitelist } from '~hooks/useDomainWhitelist';
 import { usePermission } from '~hooks/usePermission';
 import { makeUrlIntoDomain } from '~utils/domains';
 
 import './PermissionGrant.css';
 
 export default function PermissionGrant() {
-  const { domainWhitelist } = useDomainWhitelist();
+  const { grantPermission } = usePermission();
-  const { hasPermission, grantPermission } = usePermission();
 
   const queryParams = new URLSearchParams(window.location.search);
   const redirectUrl = queryParams.get('redirectUrl') ?? 'https://movie-web.app';
   const domain = makeUrlIntoDomain(redirectUrl);
 
-  const permissionsGranted = domainWhitelist.includes(domain) && hasPermission;
-
   const redirectBack = () => {
     chrome.tabs.getCurrent((tab) => {
       chrome.tabs.update(tab.id, { url: redirectUrl });
@@ -28,7 +24,7 @@ export default function PermissionGrant() {
   };
 
   return (
-    <div className="container">
+    <div className="permission-grant container">
       <div className="inner-container">
         <div className="permission-card">
           <h1 className="color-white">Permission</h1>

src/tabs/PermissionRequest.css

@@ -10,45 +10,45 @@ body {
   padding-bottom: 50px;
 }
 
-.container {
+.permission-request.container {
   width: 90%;
   margin: 100px auto;
   max-width: 628px;
 }
 
-h1 {
+.permission-request h1 {
   font-size: 2rem;
   font-weight: bold;
 }
 
-h2 {
+.permission-request h2 {
   font-size: 1.5rem;
   font-weight: bold;
   margin-top: 4rem;
   margin-bottom: 1rem;
 }
 
-.text-color {
+.permission-request .text-color {
   color: #7C7C97;
 }
 
-.paragraph {
+.permission-request .paragraph {
   font-size: 1rem;
   margin-top: 20px;
   max-width: 500px;
   line-height: 1.3;
 }
 
-.card-list {
+.permission-request .card-list {
   margin: 1rem 0;
 }
 
-.card-list>*+* {
+.permission-request .card-list>*+* {
   margin-top: 1rem;
 }
 
-.card {
+.permission-request .card {
-  padding: 20px;
+  padding: 25px 20px;
   border: 1px solid #272A37;
   display: grid;
   grid-template-columns: auto 1fr auto;
@@ -57,9 +57,10 @@ h2 {
 }
 
 
-.card .icon-circle {
+.permission-request .card .icon-circle {
   width: 2rem;
   height: 2rem;
+  font-size: 1rem;
   background-color: rgba(39, 42, 55, 0.35);
   border: 1px solid #272A37;
   border-radius: 50%;
@@ -68,37 +69,37 @@ h2 {
   align-items: center;
 }
 
-.card.purple, .card.purple .icon-circle {
+.permission-request .card.purple, .permission-request .card.purple .icon-circle {
   border-color: #49277C;
 }
 
-.card.purple .icon-circle {
+.permission-request .card.purple .icon-circle {
   background-color: rgba(51, 27, 87, .4);
 }
 
-.card svg {
+.permission-request .card .icon-circle > div {
   display: block;
   width: 1rem;
   height: 1rem;
 }
 
-.card h3 {
+.permission-request .card h3 {
   font-size: 1rem;
   font-weight: bold;
   color: white;
-  margin-top: 0;
+  margin-top: 5px;
 }
 
-.card .paragraph {
+.permission-request .card .paragraph {
   margin-top: 0.5rem;
 }
 
-.card .center-y {
+.permission-request .card .center-y {
   display: flex;
   align-items: center;
 }
 
-.card button {
+.permission-request .card button {
   padding: 1rem;
   border-radius: 10px;
   border: 0;
@@ -108,11 +109,11 @@ h2 {
   color: white;
 }
 
-.card:not(.purple) svg {
+.permission-request .card:not(.purple) .icon-circle {
   color: #7C7C97;
 }
 
-.footer {
+.permission-request .footer {
   position: fixed;
   bottom: 0;
   left: 0;

src/tabs/PermissionRequest.tsx

@@ -26,7 +26,7 @@ export default function PermissionRequest() {
   }, [grantPermission]);
 
   return (
-    <div className="container">
+    <div className="container permission-request">
       <div className="inner-container">
         <h1 className="color-white">
           We need some <br /> browser permissions
@@ -41,9 +41,9 @@ export default function PermissionRequest() {
             purple
             icon={<Icon name="github" />}
             right={
-              <a href="https://github.com/movie-web/extension" target="_blank" rel="noreferrer">
+              <Button type="secondary" href="https://github.com/movie-web/extension">
-                <button type="button">Read source code</button>
+                Read source code
-              </a>
+              </Button>
             }
           >
             <h3>Read the source code on GitHub</h3>
@@ -54,7 +54,7 @@ export default function PermissionRequest() {
         </div>
 
         <h2>Permission list</h2>
-        <div className="card-list">
+        <div className="card-list" style={{ paddingBottom: '10rem' }}>
           <Card icon={<Icon name="windows" />}>
             <h3>Read & change data from all sites</h3>
             <p className="text-color paragraph">