diff --git a/src/components/Button.css b/src/components/Button.css index e3fa721..3916c91 100644 --- a/src/components/Button.css +++ b/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; @@ -38,4 +38,4 @@ .button.button-primary:hover { background-color: #5E3F9D; color: white; -} +} \ No newline at end of file diff --git a/src/tabs/PermissionGrant.css b/src/tabs/PermissionGrant.css index 0397c31..6401c64 100644 --- a/src/tabs/PermissionGrant.css +++ b/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: 10px; - height: 125px; - padding-right: 40px; - padding-left: 40px; + border-radius: 20px; + padding: 40px; + padding-top: 50px; font-size: 14px; - border: 1px solid #20202d; + border: 1px solid #272A37; } -.footer { - display: flex; +h1 { + 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, -.grant-permission-btn { - color: #ffffff; - padding: 10px 20px; - border-radius: 10px; - border: 1px solid #0000; - cursor: pointer; - font-size: 14px; +.buttons { + width: 100%; + margin-top: 2rem; } -.go-back-btn { - background: - 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; -} +.buttons>*+* { + margin-top: 1rem; +} \ No newline at end of file diff --git a/src/tabs/PermissionGrant.tsx b/src/tabs/PermissionGrant.tsx index 5cd54fc..69a1c49 100644 --- a/src/tabs/PermissionGrant.tsx +++ b/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 (
-

Permission

-

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

+

Permission

The website {domain} wants to
use the extension on their page. + Do you trust them?

-
-
- -
- +
+ + +