Fixed styling, blur, and drawing tools

alyssaxuu · Jan 19, 2024 · 5df946f · 5df946f
1 parent 81413bf
commit 5df946f
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 40 deletions.
diff --git a/build/contentScript.bundle.js b/build/contentScript.bundle.js
diff --git a/src/pages/Content/Content.jsx b/src/pages/Content/Content.jsx
@@ -8,27 +8,46 @@ import ContentState from "./context/ContentState";
 
 const Content = () => {
   return (
-    <div className="screenity-shadow-dom" style={{ all: "unset" }}>
+    <div className="screenity-shadow-dom">
       <ContentState>
         <Wrapper />
       </ContentState>
       <style type="text/css">{`
-				
+			#screenity-ui, #screenity-ui div {
+				background-color: unset;
+				padding: unset;
+				width: unset;
+				box-shadow: unset;
+				display: unset;
+				margin: unset;
+				border-radius: unset;
+			}
+			.screenity-outline {
+				position: absolute;
+				z-index: 99999999999;
+				border: 2px solid #3080F8;
+				outline-offset: -2px;
+				pointer-events: none;
+				border-radius: 5px!important;
+			}
+		.screenity-blur {
+			filter: blur(10px)!important;
+		}
 			.screenity-shadow-dom * {
 				transition: unset;
 			}
 			.screenity-shadow-dom .TooltipContent {
-  border-radius: 30px;
-	background-color: #29292F;
-  padding: 10px 15px;
+  border-radius: 30px!important;
+	background-color: #29292F!important;
+  padding: 10px 15px!important;
   font-size: 12px;
-	margin-bottom: 10px;
+	margin-bottom: 10px!important;
 	bottom: 100px;
   line-height: 1;
 	font-family: 'Satoshi-Medium', sans-serif;
 	z-index: 99999999!important;
   color: #FFF;
-  box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+  box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px!important;
   user-select: none;
 	transition: opacity 0.3 ease-in-out;
   will-change: transform, opacity;

diff --git a/src/pages/Content/Wrapper.jsx b/src/pages/Content/Wrapper.jsx
@@ -81,10 +81,10 @@ const Wrapper = () => {
   ]);
 
   return (
-    <div ref={parentRef} style={{ all: "unset" }}>
+    <div ref={parentRef}>
       <iframe
         style={{
-          all: "unset",
+          // all: "unset",
           display: "none",
           visibility: "hidden",
         }}
@@ -94,7 +94,7 @@ const Wrapper = () => {
       ></iframe>
       <iframe
         style={{
-          all: "unset",
+          // all: "unset",
           display: "none",
           visibility: "hidden",
         }}
@@ -105,13 +105,13 @@ const Wrapper = () => {
       {contentState.zoomEnabled && <ZoomContainer />}
       <BlurTool />
       {contentState.showExtension || contentState.recording ? (
-        <div style={{ all: "unset" }}>
+        <div>
           {!contentState.recording &&
             !contentState.drawingMode &&
             !contentState.blurMode && (
               <div
                 style={{
-                  all: "unset",
+                  // all: "unset",
                   width: "100%",
                   height: "100%",
                   zIndex: 999999999,
@@ -156,7 +156,7 @@ const Wrapper = () => {
             className="root-container"
             id="screenity-root-container"
             style={{
-              all: "initial",
+              // all: "initial",
               display: "block",
               width: "100%",
               height: "100%",
@@ -191,7 +191,7 @@ const Wrapper = () => {
           </root.div>
         </div>
       ) : (
-        <div style={{ all: "unset" }}></div>
+        <div></div>
       )}
     </div>
   );

diff --git a/src/pages/Content/canvas/layout/CanvasWrap.jsx b/src/pages/Content/canvas/layout/CanvasWrap.jsx
@@ -246,8 +246,8 @@ const CanvasWrap = (props) => {
       style={
         !contentState.drawingMode ||
         (contentState.hideToolbar && contentState.hideUI)
-          ? { pointerEvents: "none", all: "unset" }
-          : { pointerEvents: "all", all: "unset" }
+          ? { all: "unset", pointerEvents: "none" }
+          : { all: "unset", pointerEvents: "all" }
       }
     >
       <div

diff --git a/src/pages/Content/index.jsx b/src/pages/Content/index.jsx
@@ -11,6 +11,4 @@ if (existingRoot) {
 const root = document.createElement("div");
 root.id = "screenity-ui";
 document.body.appendChild(root);
-// Set style as unset for it and any divs within
-root.style.all = "unset";
 render(<Content />, root);
diff --git a/src/pages/Content/toolbar/components/Toast.jsx b/src/pages/Content/toolbar/components/Toast.jsx
@@ -64,7 +64,9 @@ const Toast = () => {
         className="ToastRoot"
         open={open}
         onOpenChange={setOpen}
-        onEscapeKeyDown={() => {
+        onEscapeKeyDown={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
           triggerRef.current();
           setOpen(false);
         }}

diff --git a/src/pages/Content/toolbar/layout/ToolbarWrap.jsx b/src/pages/Content/toolbar/layout/ToolbarWrap.jsx
@@ -319,6 +319,7 @@ const ToolbarWrap = () => {
       setContentState((prevContentState) => ({
         ...prevContentState,
         blurMode: true,
+        drawingMode: false,
       }));
     } else {
       setContentState((prevContentState) => ({

diff --git a/src/pages/Content/utils/BlurTool.jsx b/src/pages/Content/utils/BlurTool.jsx
@@ -80,7 +80,7 @@ const BlurTool = () => {
   }, []);
 
   return (
-    <div style={{ all: "unset" }}>
+    <div>
       {showOutline && (
         <div
           className="screenity-outline"
@@ -98,22 +98,6 @@ const BlurTool = () => {
           }}
         ></div>
       )}
-      <style>
-        {`
-            .screenity-outline {
-              position: absolute;
-              z-index: 99999999999;
-              border: 2px solid #3080F8;
-              outline-offset: -2px;
-							pointer-events: none;
-							border-radius: 5px;
-            }
-
-          .screenity-blur {
-            filter: blur(10px)!important;
-          }
-        `}
-      </style>
     </div>
   );
 };

diff --git a/src/pages/Content/utils/CursorModes.jsx b/src/pages/Content/utils/CursorModes.jsx
@@ -82,7 +82,7 @@ const CursorModes = () => {
   }, []);
 
   return (
-    <div style={{ all: "unset" }}>
+    <div>
       <div
         className="cursor-highlight"
         style={{

diff --git a/utils/server.js b/utils/server.js
@@ -1,6 +1,6 @@
 // Do this as the first thing so that any code reading it knows the right env.
-//process.env.BABEL_ENV = "development";
-//process.env.NODE_ENV = "development";
+// process.env.BABEL_ENV = "development";
+// process.env.NODE_ENV = "development";
 process.env.BABEL_ENV = "production";
 process.env.NODE_ENV = "production";
 process.env.ASSET_PATH = "/";