diff --git a/src/Popup.css b/src/Popup.css new file mode 100644 index 0000000..6df3a09 --- /dev/null +++ b/src/Popup.css @@ -0,0 +1,11 @@ +body { + margin: 0; +} + +.popup { + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/src/components/BottomLabel.css b/src/components/BottomLabel.css new file mode 100644 index 0000000..c68a113 --- /dev/null +++ b/src/components/BottomLabel.css @@ -0,0 +1,15 @@ +.bottom-label { + position: absolute; + bottom: .5rem; + display: flex; + align-items: center; + gap: .5rem; + font-weight: normal; + color: #4A4863; +} + +.dot { + width: 2px; + height: 2px; + background: currentColor; +} \ No newline at end of file diff --git a/src/components/BottomLabel.tsx b/src/components/BottomLabel.tsx new file mode 100644 index 0000000..f18d227 --- /dev/null +++ b/src/components/BottomLabel.tsx @@ -0,0 +1,14 @@ +import { useVersion } from '~hooks/useVersion'; +import './BottomLabel.css'; + +export function BottomLabel() { + const version = useVersion({ prefixed: true }); + + return ( +

+ {version} +
+ movie-web +

+ ); +} diff --git a/src/components/Frame.css b/src/components/Frame.css new file mode 100644 index 0000000..2b02f34 --- /dev/null +++ b/src/components/Frame.css @@ -0,0 +1,4 @@ +.frame { + background-color: #171720; + background-image: radial-gradient(271.48% 132.05% at 136.13% 65.62%, rgba(37, 26, 60, 0.50) 0%, rgba(28, 28, 44, 0.00) 100%), radial-gradient(671.15% 123.02% at 76.68% -34.38%, #2E2E5B 0%, rgba(23, 23, 32, 0.00) 100%); +} \ No newline at end of file diff --git a/src/components/Frame.tsx b/src/components/Frame.tsx index 0733f80..efa84e7 100644 --- a/src/components/Frame.tsx +++ b/src/components/Frame.tsx @@ -1,9 +1,15 @@ import type { ReactNode } from 'react'; +import './Frame.css'; + export interface FrameProps { children?: ReactNode; } export function Frame(props: FrameProps) { - return
{props.children}
; + return ( +
+ {props.children} +
+ ); } diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx new file mode 100644 index 0000000..a7011fe --- /dev/null +++ b/src/components/Icon.tsx @@ -0,0 +1,9 @@ +const icons = { + power: ``, +}; +export type Icons = keyof typeof icons; + +export function Icon(props: { name: Icons }) { + // eslint-disable-next-line react/no-danger + return
; +} diff --git a/src/components/ToggleButton.css b/src/components/ToggleButton.css new file mode 100644 index 0000000..24d36fc --- /dev/null +++ b/src/components/ToggleButton.css @@ -0,0 +1,105 @@ +.button-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; +} + + +.button-wrapper { + width: 70px; + height: 70px; + position: relative; +} + +.button-wrapper::after { + position: absolute; + z-index: 0; + content: ''; + width: 120%; + height: 120%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: rgba(119, 66, 233, 0.25); + filter: blur(35px); + opacity: 0; + transition: opacity 300ms; +} + +.button-wrapper.active::after { + opacity: 1; +} + +.toggle-button { + position: absolute; + z-index: 1; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 1000px; + overflow: hidden; + border: 0; + background-color: transparent; +} + +.actual-button-style { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 1000px; + box-sizing: border-box; + border-color: rgba(96, 66, 166, 0.50); + background-image: linear-gradient(180deg, #463177 0%, #2D1C54 100%); + border: 1px solid #322E48; + transition: opacity 300ms ease; +} + +.actual-button-style.active { + z-index: 1; + border-color: #322E48; + background-image: linear-gradient(180deg, #232236 0%, #0E0D15 100%); +} + +.toggle-button .glow-thingie, .toggle-button svg { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + transition: color 300ms; +} + +.toggle-button .glow-thingie { + position: absolute; + width: 90%; + height: 90%; + border-radius: 1000px; + filter: blur(10px); + z-index: 1; +} + +.toggle-button svg { + width: 35px; + height: 35px; + display: block; + z-index: 10; +} + +.toggle-button svg * { + box-shadow: 0px 0px 0 4px rgba(0, 0, 0, 1) inset; +} + +.button-container p { + color: #4A4863; + text-align: center; + max-width: 180px; + font-size: 16px; +} + +.button-container strong { + color: white; +} \ No newline at end of file diff --git a/src/components/ToggleButton.tsx b/src/components/ToggleButton.tsx index b9a3344..55b44cf 100644 --- a/src/components/ToggleButton.tsx +++ b/src/components/ToggleButton.tsx @@ -1,12 +1,42 @@ +import { Icon } from './Icon'; +import './ToggleButton.css'; + export interface ToggleButtonProps { onClick?: () => void; active?: boolean; } export function ToggleButton(props: ToggleButtonProps) { + const opacityStyle = { + opacity: props.active ? 0 : 1, + }; + return ( - +
+
+ +
+

+ Extension{props.active ? '' : ' not'} enabled on movie-web.app +

+
); } diff --git a/src/popup.tsx b/src/popup.tsx index 4c01d3e..2a37f8b 100644 --- a/src/popup.tsx +++ b/src/popup.tsx @@ -1,19 +1,21 @@ +import { BottomLabel } from '~components/BottomLabel'; import { Frame } from '~components/Frame'; import { ToggleButton } from '~components/ToggleButton'; import { useDomain } from '~hooks/useDomain'; import { useToggleWhitelistDomain } from '~hooks/useDomainWhitelist'; -import { useVersion } from '~hooks/useVersion'; +import './Popup.css'; function IndexPopup() { const domain = useDomain(); const { isWhitelisted, toggle } = useToggleWhitelistDomain(domain); - const version = useVersion({ prefixed: true }); return ( - - {!domain ?

Cant use extension on this page

: null} -

{version} - movie-web

+
+ + {!domain ?

The movie-web extension can not be used on this page

: null} + +
); }