Disabled screen, update colors & styling

src/components/BottomLabel.css

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

src/components/DisabledScreen.css

@@ -0,0 +1,22 @@
+.disabled {
+  color: white;
+  text-align: center;
+  max-width: 230px;
+  font-size: 16px;
+}
+
+.disabled svg {
+  display: block;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin: 0 auto;
+  color: #B44868;
+}
+
+.disabled p {
+  color: #4A4864;
+}
+
+.disabled strong {
+  color: white;
+}

src/components/DisabledScreen.tsx

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

src/components/Frame.css

@@ -1,4 +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%);
+  background-color: #0a080e;
+  background-image: radial-gradient(271.48% 132.05% at 136.13% 65.62%, #271945b3 0%, #1c1c2c00 100%), radial-gradient(671.15% 123.02% at 76.68% -34.38%, #272753 0%, #17172000 100%);
 }

src/components/Icon.tsx

@@ -1,5 +1,6 @@
 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>`,
+  warningCircle: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>`,
 };
 export type Icons = keyof typeof icons;
 

src/components/ToggleButton.css

@@ -54,18 +54,17 @@
   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;
+  border: 1px solid #322E48;
   background-image: linear-gradient(180deg, #232236 0%, #0E0D15 100%);
 }
 
-.toggle-button .glow-thingie, .toggle-button svg {
+.actual-button-style.active {
+  border-color: #48307F;
+  background-image: linear-gradient(180deg, #463177 0%, #2D1C54 100%);
+}
+
+.toggle-button .inside-glow, .toggle-button svg {
   position: absolute;
   left: 50%;
   top: 50%;
@@ -73,7 +72,7 @@
   transition: color 300ms;
 }
 
-.toggle-button .glow-thingie {
+.toggle-button .inside-glow {
   position: absolute;
   width: 90%;
   height: 90%;

src/components/ToggleButton.tsx

@@ -8,7 +8,7 @@ export interface ToggleButtonProps {
 
 export function ToggleButton(props: ToggleButtonProps) {
   const opacityStyle = {
-    opacity: props.active ? 0 : 1,
+    opacity: props.active ? 1 : 0,
   };
 
   return (
@@ -27,7 +27,7 @@ export function ToggleButton(props: ToggleButtonProps) {
           <div className="actual-button-style active" style={opacityStyle} />
           <Icon name="power" />
           <div
-            className="glow-thingie"
+            className="inside-glow"
             style={{
               backgroundColor: props.active ? '#452D7C' : '#181724',
             }}

src/popup.tsx

@@ -1,4 +1,5 @@
 import { BottomLabel } from '~components/BottomLabel';
+import { DisabledScreen } from '~components/DisabledScreen';
 import { Frame } from '~components/Frame';
 import { ToggleButton } from '~components/ToggleButton';
 import { useDomain } from '~hooks/useDomain';
@@ -12,8 +13,7 @@ function IndexPopup() {
   return (
     <Frame>
       <div className="popup">
-        <ToggleButton active={isWhitelisted} onClick={toggle} />
-        {!domain ? <p>The movie-web extension can not be used on this page</p> : null}
+        {!domain ? <DisabledScreen /> : <ToggleButton active={isWhitelisted} onClick={toggle} />}
         <BottomLabel />
       </div>
     </Frame>