styled block view

ginny100 · Dec 29, 2024 · 5387ef2 · 5387ef2
1 parent c79f413
commit 5387ef2
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 14 deletions.
diff --git a/pages/content-ui/src/App.tsx b/pages/content-ui/src/App.tsx
@@ -1,7 +1,4 @@
 import { availableApps } from '@extension/shared/lib/constants/apps';
-
-// import { useEffect } from 'react';
-// import { Button } from '@extension/ui';
 import { useStorage } from '@extension/shared';
 import { zenStorage, ZenTimerState } from '@extension/storage';
 import { useEffect, useMemo } from 'react';
@@ -22,5 +19,18 @@ export default function App() {
     return zenSettings?.timerState === ZenTimerState.Focus && zenSettings?.blockedApps.includes(currentAppName);
   }, [zenSettings]);
 
+  useEffect(() => {
+    if (shouldBlock) {
+      document.documentElement.style.setProperty('overflow', 'hidden', 'important');
+    } else {
+      document.documentElement.style.setProperty('overflow', 'auto', 'important');
+    }
+
+    // Cleanup when component unmounts
+    return () => {
+      document.documentElement.style.setProperty('overflow', 'auto', 'important');
+    };
+  }, [shouldBlock]);
+
   return <div>{shouldBlock && <BlockView />}</div>;
 }
diff --git a/pages/content-ui/src/BlockView.tsx b/pages/content-ui/src/BlockView.tsx
@@ -1,13 +1,13 @@
-import lotusIcon from './public/lotus-icon.png';
-import blockViewImage from './public/block-view.png';
+import lotusIcon from '../public/lotus-icon.png';
+import blockViewImage from '../public/block-view.png';
 
 const BlockView = () => {
   return (
-    <div className="fixed inset-0 z-[9999] flex flex-col items-center justify-center">
+    <div className="fixed inset-0 z-[9999] flex flex-col items-center justify-center p-[2vw]">
       {/* Banner */}
-      <div className="absolute inset-x-0 top-0 z-20 flex items-center gap-3 bg-white px-4 py-3 shadow-md">
-        <img src={lotusIcon} alt="ZenCycle Logo" className="size-10" />
-        <span className="text-lg font-medium text-gray-900">This site is blocked by ZenCycle</span>
+      <div className="absolute inset-x-0 top-0 z-20 flex items-center gap-[0.75vw] bg-white p-[0.5vw] shadow-md">
+        <img src={lotusIcon} alt="ZenCycle Logo" className="size-[4vw]" />
+        <span className="text-[1.2vw] font-medium text-gray-900">This site is blocked by ZenCycle</span>
       </div>
 
       {/* Background */}
@@ -22,7 +22,7 @@ const BlockView = () => {
       />
 
       {/* Text Box */}
-      <div className="relative z-20 px-72 py-48 text-center">
+      <div className="relative z-20 px-[15vw] py-[10vw] text-center">
         <div
           className="absolute inset-0 rounded-[30px] bg-[#D9D9D9]/65"
           style={{
@@ -31,9 +31,9 @@ const BlockView = () => {
           }}
         />
         <div className="relative z-10 text-black">
-          <h1 className="mb-4 font-['Abril+Fatface'] text-6xl font-bold tracking-wider">REGAIN YOUR FOCUS</h1>
-          <hr className="mx-auto my-4 w-1/2 border-black/50" />
-          <h1 className="font-['Abril+Fatface'] text-6xl font-bold tracking-wider">REGAIN YOUR LIFE</h1>
+          <h1 className="mb-4 font-['Abril+Fatface'] text-[3vw] font-bold tracking-wider">REGAIN YOUR FOCUS</h1>
+          <hr className="mx-auto my-[1vw] w-1/2 border-black/50" />
+          <h1 className="font-['Abril+Fatface'] text-[3vw] font-bold tracking-wider">REGAIN YOUR LIFE</h1>
         </div>
       </div>
     </div>

diff --git a/pages/content-ui/src/index.css b/pages/content-ui/src/index.css
@@ -5,7 +5,7 @@
 html,
 body,
 #app-container {
-    width: 700px;
+    /* width: 700px; */
     margin: 0;
     padding: 0;
     overflow: none;