tiny improvmeents

Author: Beasleydog

src/blocks/googleCalendarBlock.js

@@ -7,7 +7,7 @@ export default function GoogleCalendarBlock(props) {
             height: '100%',
             borderRadius: "10px",
             overflow: "hidden",
-            background: "rgba(255, 255, 255, 10%)"
+            background: "rgba(255, 255, 255)"
         }}>
             {props.calendarAccount != ""
                 ?

src/blocks/googlePhotosBlock.js

@@ -54,11 +54,12 @@ export default function GooglePhotosBlock(props) {
     return (
         <div style={{
             width: "100%", height: "100%", padding: "10px", boxSizing: "border-box", display: "flex", alignItems: "center", justifyContent: "center",
-            ...(props.albumUrls.length == 0 && { background: window.themeColor, color: "white" })
+            ...(props.albumUrls.length == 0 && { background: `${window.themeColor}20`, color: "white" })
         }}>
             <div style={{
                 fontWeight: "bold",
-                ...(props.albumUrls.length > 0 && { display: "none" })
+                ...(props.albumUrls.length > 0 && { display: "none" }),
+                textShadow: "0px 0px 5px gray",
             }}>
                 No Albums Added... <span role="img" aria-label='sad'>😢</span>
             </div>

src/blocks/weatherBlock.js

@@ -25,8 +25,7 @@ export default function WeatherBlock(props) {
         setRerender(!rerender);
     }, [props]);
     return (
-        <div style={{ width: "100%", height: "100%", padding: "5px", boxSizing: "border-box" }}>
-
+        <div style={{ width: "100%", height: "100%", padding: "5px", boxSizing: "border-box", cursor: (props.editing ? "" : "pointer") }} onClick={() => { if (!props.editing) window.location.replace("https://weather.com/weather/today") }}>
             <Loader loaded={weatherData.status === "success"}>
 
                 <WeatherIconDefinitions />

src/components/blockContainer/blockContainer.js

@@ -65,9 +65,9 @@ function BlockContainer({ id, focusedAndEditing, onMouseDown, editing, onDelete
                             topLeft: <Handle />
                         }}
                     >
-                        <RenderBlocker editing={editing} block={block.blockProps.hoverToLoad || (block.blockProps.hideContentWhileEdit && editing)} humanName={realBlockFromJSON(block).getBlockHumanName()}>
+                        <RenderBlocker width={block.dragProps.width} height={block.dragProps.height} editing={editing} block={block.blockProps.hoverToLoad || (block.blockProps.hideContentWhileEdit && editing)} humanName={realBlockFromJSON(block).getBlockHumanName()}>
                             {
-                                blockKindToComponent(block.kind, { width: block.dragProps.width, height: block.dragProps.width, id: block.id, editMode: true, backgroundTheme: window.background.themeColor, ...block.blockProps })
+                                blockKindToComponent(block.kind, { width: block.dragProps.width, height: block.dragProps.width, id: block.id, editing: editing, backgroundTheme: window.background.themeColor, ...block.blockProps })
                             }
                         </RenderBlocker>
 

src/components/loader/loader.js

@@ -1,12 +1,20 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import "./loader.css";
-
 function Loader(props) {
+    const [opacity, setOpacity] = useState(0);
+    useEffect(() => {
+        if (props.loaded) {
+            setTimeout(() => {
+                setOpacity(1);
+            }, 0);
+        }
+    }, [props.loaded]);
+
     return (
         <>
             {props.loaded
                 &&
-                <div style={{ ...(props.loaded ? { opacity: 1 } : { opacity: 0 }), transition: "opacity .1s", width: "100%", height: "100%" }}>
+                <div style={{ ...(opacity ? { opacity: 1 } : { opacity: 0 }), transition: "opacity .2s", width: "100%", height: "100%" }}>
                     {props.children}
                 </div>
             }

src/components/renderBlocker/renderBlocker.css

@@ -1,7 +1,10 @@
+div.block:has(.RenderBlocker){
+  /* We have to target the parent element (the actual dragable block) when bluring the background */
+  backdrop-filter: blur(5px);
+}
 .RenderBlocker {
   width: 100%;
   height: 100%;
-  backdrop-filter: blur(2px);
 
   display: flex;
   flex-direction: column;
@@ -12,12 +15,12 @@
   border-radius: 10px;
 }
 .blockMessage {
-  opacity:.8;
+  /* opacity:.8; */
   width:60%;
   height:20%;
 }
 .blockHumanName{
-    opacity:.8;
+    /* opacity:.8; */
     width:80%;
     height:30%;
 

src/components/renderBlocker/renderBlocker.js

@@ -2,8 +2,6 @@ import React, { useState } from 'react';
 import "./renderBlocker.css"
 
 import { ResponsiveText } from '../responsiveText/responsiveTextSize';
-import { realBlockFromJSON } from '../../helpers/functions/BlockAPI';
-
 function RenderBlocker(props) {
     const [hovered, setHovered] = useState(false);
     return (