Extension styling

src/Popup.css

@@ -0,0 +1,11 @@
+body {
+  margin: 0;
+}
+
+.popup {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

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

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 (
+    <h3 className="bottom-label">
+      {version}
+      <div className="dot" />
+      movie-web
+    </h3>
+  );
+}

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%);
+}

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 <div style={{ width: 300, height: 300 }}>{props.children}</div>;
+  return (
+    <div className="frame" style={{ width: 300, height: 300 }}>
+      {props.children}
+    </div>
+  );
 }

src/components/Icon.tsx

@@ -0,0 +1,9 @@
+const icons = {
+  power: `<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#filter0_i_1153_291)"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.4375 2.875C16.4375 2.36114 16.2334 1.86833 15.87 1.50498C15.5067 1.14163 15.0139 0.9375 14.5 0.9375C13.9861 0.9375 13.4933 1.14163 13.13 1.50498C12.7666 1.86833 12.5625 2.36114 12.5625 2.875V15.7917C12.5625 16.3055 12.7666 16.7983 13.13 17.1617C13.4933 17.525 13.9861 17.7292 14.5 17.7292C15.0139 17.7292 15.5067 17.525 15.87 17.1617C16.2334 16.7983 16.4375 16.3055 16.4375 15.7917V2.875ZM9.14475 6.42708C9.35678 6.28621 9.53899 6.10495 9.68097 5.89366C9.82295 5.68237 9.92192 5.44519 9.97224 5.19565C10.0226 4.94611 10.0232 4.6891 9.97422 4.4393C9.92521 4.1895 9.82748 3.9518 9.68661 3.73977C9.54574 3.52774 9.36448 3.34553 9.15319 3.20355C8.9419 3.06157 8.70471 2.9626 8.45517 2.91228C8.20563 2.86197 7.94863 2.86129 7.69883 2.9103C7.44903 2.95931 7.21132 3.05704 6.99929 3.19792C5.13427 4.43483 3.60458 6.11435 2.54683 8.08651C1.48907 10.0587 0.936176 12.2621 0.937502 14.5C0.937502 21.9904 7.00963 28.0625 14.5 28.0625C21.9904 28.0625 28.0625 21.9904 28.0625 14.5C28.0625 9.78025 25.651 5.62625 22.0007 3.19792C21.5725 2.91358 21.0489 2.811 20.545 2.91274C20.0412 3.01448 19.5984 3.3122 19.314 3.74042C19.0297 4.16863 18.9271 4.69226 19.0289 5.19611C19.1306 5.69995 19.4283 6.14275 19.8565 6.42708C21.5907 7.5775 22.9083 9.25578 23.6143 11.2134C24.3203 13.1711 24.3771 15.3041 23.7763 17.2965C23.1755 19.289 21.9491 21.035 20.2786 22.2761C18.6081 23.5172 16.5824 24.1873 14.5013 24.1873C12.4202 24.1873 10.3945 23.5172 8.72399 22.2761C7.05349 21.035 5.82705 19.289 5.22627 17.2965C4.62548 15.3041 4.68228 13.1711 5.38826 11.2134C6.09424 9.25578 7.41057 7.5775 9.14475 6.42708Z" fill="currentColor" /></g><defs><filter id="filter0_i_1153_291" x="0.9375" y="0.9375" width="27.125" height="27.125"filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix" /><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" /><feOffset /><feGaussianBlur stdDeviation="2" /><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" /><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" /><feBlend mode="normal" in2="shape" result="effect1_innerShadow_1153_291" /></filter></defs></svg>`,
+};
+export type Icons = keyof typeof icons;
+
+export function Icon(props: { name: Icons }) {
+  // eslint-disable-next-line react/no-danger
+  return <div dangerouslySetInnerHTML={{ __html: icons[props.name] }} />;
+}

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

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 (
-    <button type="button" onClick={props.onClick}>
+    <div className="button-container">
-      {props.active ? 'ON' : 'OFF'}
+      <div className={['button-wrapper', props.active ? 'active' : ''].join(' ')}>
-    </button>
+        <button
+          type="button"
+          onClick={props.onClick}
+          aria-label="Toggle extension on/off"
+          className="toggle-button"
+          style={{
+            color: props.active ? '#9B93CC' : '#4B4765',
+          }}
+        >
+          <div className="actual-button-style" />
+          <div className="actual-button-style active" style={opacityStyle} />
+          <Icon name="power" />
+          <div
+            className="glow-thingie"
+            style={{
+              backgroundColor: props.active ? '#452D7C' : '#181724',
+            }}
+          />
+        </button>
+      </div>
+      <p>
+        Extension{props.active ? '' : ' not'} enabled on <strong>movie-web.app</strong>
+      </p>
+    </div>
   );
 }

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 (
     <Frame>
-      <ToggleButton active={isWhitelisted} onClick={toggle} />
+      <div className="popup">
-      {!domain ? <p>Cant use extension on this page</p> : null}
+        <ToggleButton active={isWhitelisted} onClick={toggle} />
-      <h3>{version} - movie-web</h3>
+        {!domain ? <p>The movie-web extension can not be used on this page</p> : null}
+        <BottomLabel />
+      </div>
     </Frame>
   );
 }