Permission page

⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡠⠔⠠⢄⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠤⠒⠁⠐⠛⠫⡉⠁
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡀⠔⠊⠁⢀⣠⣶⠯⠋⠉⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⠔⠊⠁⠀⢀⣠⣶⠟⠉⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢀⠈⠍⢑⡨⣴⣶⣈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡠⠔⠉⠀⠀⠀⢀⠔⠙⠛⠁⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⢤⣼⠃⠀⠈⠈⣰⣿⣿⣿⣧⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣤⣴⣾⡄⠀⠀⠀⣠⠔⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣘⣿⠇⠀⠀⠰⢚⣽⣿⡿⠿⣿⡆⠀⠀⠀⠀⠀⣀⣠⣴⣶⣿⣿⣿⣿⣿⣿⣿⣀⠤⠜⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢀⢽⡏⠀⢠⣴⣶⣿⣿⠙⡇⠐⣸⣁⣠⣤⣶⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢀⠊⠀⢀⣿⣿⠿⠉⠉⠀⠀⠀⠈⠙⢿⣿⣿⣿⣿⣿⣿⢿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠠⠂⠀⠀⡼⢿⣍⠀⠀⠀⠀⠀⣠⠂⠀⢈⢿⣿⣿⣿⢟⣵⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⡔⠁⠀⠀⢰⣿⣿⣿⣷⣄⠀⢀⣼⣁⠀⠀⣼⣈⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡏⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⢀⠎⠀⠀⠀⠠⠛⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣦⣿⡇⣮⢿⣿⣿⣿⣿⣿⣿⣿⣿⣧⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢀⠁⠀⣼⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⢿⣧⢻⣿⣿⣿⣿⣿⣿⣿⣿⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠠⣀⠀⠀⡠⠔⠺⡿⠿⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢸⣿⢸⣿⣿⣿⣿⣿⣿⣿⣿⣧⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠉⠁⠀⠀⠀⠀⠀⠀⠈⠛⢿⣿⣿⣿⣿⣿⣿⣿⢸⣣⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⣿⣿⣿⣿⣯⠰⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⣿⣿⣿⣿⣿⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⣿⣿⣿⡿⠿⠿⠿⠟⠉⠉⠀⠙⠿⠿⠋⠉⠛⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠛⠉⠛⠛⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

src/components/Button.css

@@ -1,6 +1,6 @@
 .button {
   padding: 1rem;
-  border-radius: 10px;
+  border-radius: 12px;
   border: 0;
   font-size: 1rem;
   text-align: center;

src/tabs/PermissionGrant.css

@@ -2,6 +2,7 @@
 
 html {
   height: 100%;
+  font-size: 16px;
 }
 
 body {
@@ -11,7 +12,7 @@ body {
 
 #__plasmo {
   height: 100%;
-  background-color: #0a0a10;
+  background-color: #0A0A10;
 }
 
 .container {
@@ -32,18 +33,24 @@ body {
 .permission-card {
   display: flex;
   align-items: center;
+  flex-direction: column;
   justify-content: center;
-  background-color: #0f0f1b;
+  border-radius: 20px;
-  border-radius: 10px;
+  padding: 40px;
-  height: 125px;
+  padding-top: 50px;
-  padding-right: 40px;
-  padding-left: 40px;
   font-size: 14px;
-  border: 1px solid #20202d;
+  border: 1px solid #272A37;
 }
 
-.footer {
+h1 {
-  display: flex;
+  font-size: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.permission-card>p {
+  font-size: 1rem;
+  margin-top: .5rem;
+  margin-bottom: 1rem;
 }
 
 .color-white {
@@ -54,44 +61,11 @@ body {
   color: #73739d;
 }
 
-.go-back-btn,
+.buttons {
-.grant-permission-btn {
+  width: 100%;
-  color: #ffffff;
+  margin-top: 2rem;
-  padding: 10px 20px;
-  border-radius: 10px;
-  border: 1px solid #0000;
-  cursor: pointer;
-  font-size: 14px;
 }
 
-.go-back-btn {
+.buttons>*+* {
-  background:
+  margin-top: 1rem;
-    linear-gradient(to right, #151522, #181b2a) padding-box,
-    linear-gradient(50deg, #151522, #181b2a, #456b95) border-box;
-}
-
-.grant-permission-btn {
-  background:
-    linear-gradient(to right, #482179, #8a39e6) padding-box,
-    linear-gradient(50deg, #482179, #4f3585, #b79ae0) border-box;
-}
-
-.go-back-btn:hover {
-  background:
-    linear-gradient(to right, #2a334e, #2f3552) padding-box,
-    linear-gradient(50deg, #2a334e, #2f3552, #6086b7) border-box;
-}
-
-.grant-permission-btn:hover {
-  background:
-    linear-gradient(to right, #603a9a, #a25ff5) padding-box,
-    linear-gradient(50deg, #603a9a, #653c9f, #d9aef1) border-box;
-}
-
-.grant-permission-btn:disabled {
-  background:
-    linear-gradient(to right, #311e4b, #6b4b99) padding-box,
-    linear-gradient(50deg, #311e4b, #3b265b, #704fa5) border-box;
-  cursor: not-allowed;
-  opacity: 0.5;
 }

src/tabs/PermissionGrant.tsx

@@ -3,6 +3,7 @@ import { usePermission } from '~hooks/usePermission';
 import { makeUrlIntoDomain } from '~utils/domains';
 
 import './PermissionGrant.css';
+import { Button } from '~components/Button';
 
 export default function PermissionGrant() {
   const { domainWhitelist } = useDomainWhitelist();
@@ -29,28 +30,20 @@ export default function PermissionGrant() {
   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
-        </p>
         <div className="permission-card">
+          <h1 className="color-white">Permission</h1>
           <p className="text-color" style={{ textAlign: 'center' }}>
             The website <span className="color-white">{domain}</span> wants to <br /> use the extension on their page.
+            Do you trust them?
           </p>
-        </div>
+          <div className="buttons">
-        <div className="footer">
+            <Button full onClick={handleGrantPermission}>
-          <button type="button" className="go-back-btn" onClick={redirectBack}>
+              Grant Permission
-            Go back
+            </Button>
-          </button>
+            <Button full onClick={redirectBack} type="secondary">
-          <div style={{ flex: 1 }} />
+              Decline
-          <button
+            </Button>
-            type="button"
+          </div>
-            className="grant-permission-btn"
-            onClick={handleGrantPermission}
-            disabled={permissionsGranted}
-          >
-            Grant Permission
-          </button>
         </div>
       </div>
     </div>