animation

src/client/App.svelte

@@ -28,28 +28,30 @@
 <style>
   .wrapper {
     position: fixed;
-    color: #111;
-    top: 0;
+    color: #000;
+    bottom: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
-    background-color: #fefefe;
+    background-color: hsla(0, 0%, 100%, 0.975);
     z-index: 999999999;
     font-size: 1rem;
     padding: 1rem;
     user-select: none;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
       'Helvetica Neue', sans-serif;
+    transition: all 300ms ease-out;
   }
 
   .wrapper.hidden {
-    display: none;
+    /* display: none; */
+    bottom: -100vh;
   }
 
   @media (prefers-color-scheme: dark) {
     .wrapper {
-      background-color: #111;
-      color: #eee;
+      background-color: hsl(0, 0%, 0%, 0.925);
+      color: #ffffff;
     }
   }
 
@@ -76,10 +78,12 @@
     display: block;
     cursor: pointer;
     padding: 0.1em;
+    opacity: 0.6;
     transition: all 100ms ease-in-out;
   }
 
   .dismiss .links a:hover {
-    transform: translateX(-0.5em);
+    transform: translateX(-0.25em);
+    opacity: 1;
   }
 </style>

src/client/blocked.js

@@ -1,5 +1,5 @@
 import browser from 'webextension-polyfill'
-import { readable } from 'svelte/store'
+import { writable } from 'svelte/store'
 
 async function check(set) {
   if (window.document.hidden) return
@@ -10,7 +10,7 @@ async function check(set) {
   set(isBlocked)
 }
 
-export const blocked = new readable(false, (set) => {
+export const blocked = new writable(false, (set) => {
   check(set)
   const interval = setInterval(() => check(set), 1000)
   return () => clearInterval(interval)

src/client/dismiss.js

@@ -4,7 +4,11 @@ dayjs.extend(duration)
 
 import browser from 'webextension-polyfill'
 
+import { isDev } from '../shared/utils'
+import { blocked } from './blocked'
+
 export const buttons = [
+  ...(isDev ? [{ label: 'Dev', duration: dayjs.duration({ seconds: 5 }) }] : []),
   { label: '1 minute', duration: dayjs.duration({ minutes: 1 }) },
   { label: '5 minutes', duration: dayjs.duration({ minutes: 5 }) },
   { label: '15 minutes', duration: dayjs.duration({ minutes: 15 }) },
@@ -17,4 +21,5 @@ export function dismiss(duration) {
     duration: duration.asMilliseconds(),
     host: window.location.host,
   })
+  blocked.set(false)
 }