More muted styling in iframe mode (#593)

* More muted styling in iframe mode

Colors match those on source.coop where the viewer is embedded.

* linting

app/src/Frame.tsx

@@ -192,7 +192,14 @@ export function Frame(props: {
 
   return (
     <div
-      class="flex flex-col h-dvh w-full app-bg"
+      classList={{
+        flex: true,
+        "flex-col": true,
+        "h-dvh": true,
+        "w-full": true,
+        "app-bg": true,
+        iframe: props.iframe,
+      }}
       ondragover={dragover}
       ondrop={drop}
     >

app/src/PageMap.tsx

@@ -49,6 +49,7 @@ function MapView(props: {
   inspectFeatures: Accessor<boolean>;
   setInspectFeatures: Setter<boolean>;
   mapHashPassed: boolean;
+  iframe: boolean;
 }) {
   let mapContainer: HTMLDivElement | undefined;
   let hiddenRef: HTMLDivElement | undefined;
@@ -459,7 +460,19 @@ function MapView(props: {
   return (
     <div class="flex flex-col md:flex-row w-full h-full">
       <div class="flex-1 flex flex-col">
-        <div class="flex-none p-4 flex justify-between text-xs md:text-base space-x-2">
+        <div
+          classList={{
+            "flex-none": true,
+            "pb-4": true,
+            "pt-4": !props.iframe,
+            "px-4": !props.iframe,
+            flex: true,
+            "justify-between": true,
+            "text-xs": true,
+            "md:text-base": true,
+            "space-x-2": true,
+          }}
+        >
           <button
             class="px-4 btn-primary cursor-pointer"
             type="button"
@@ -511,7 +524,8 @@ function MapView(props: {
             classList={{
               "h-full": true,
               "flex-1": true,
-              "bg-gray-900": true,
+              "bg-gray-900": !props.iframe,
+              "bg-black": props.iframe,
               inspectFeatures: props.inspectFeatures(),
               frozen: frozen(),
             }}
@@ -617,6 +631,7 @@ function PageMap() {
             inspectFeatures={inspectFeatures}
             setInspectFeatures={setInspectFeatures}
             mapHashPassed={mapHashPassed}
+            iframe={iframe}
           />
         )}
       </Show>

app/src/index.css

@@ -8,6 +8,9 @@ json-viewer {
 	overflow-x: scroll;
 	padding: 4px;
 }
+.iframe json-viewer {
+	background-color: #212121;
+}
 
 .tile-border {
 	stroke: black;
@@ -16,12 +19,19 @@ json-viewer {
 @theme {
 	--color-purple: #3131dc;
 	--color-slate: #e7e7f9;
+	--color-source-background: #212121;
+	--color-source-primary: #6e6e6e;
+	--color-source-primary-hover: #767676;
 }
 
 @layer components {
 	.app-bg {
 		@apply bg-gray-100 border-gray-400 divide-gray-400;
 	}
+	.iframe.app-bg,
+	.iframe .app-bg {
+		@apply bg-white;
+	}
 	.app-border {
 		@apply border border-gray-300 divide-gray-300;
 	}
@@ -34,21 +44,37 @@ json-viewer {
 	.app-well {
 		@apply bg-gray-200 hover:bg-gray-300;
 	}
+	.iframe .app-well {
+		@apply bg-white;
+	}
 
 	.btn-primary {
 		@apply rounded bg-purple text-white shadow-sm hover:bg-black focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple;
 	}
+	.iframe .btn-primary {
+		@apply bg-source-primary hover:bg-source-primary-hover;
+	}
 	.btn-secondary {
 		@apply rounded bg-gray-700 text-white shadow-sm hover:bg-black focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple;
 	}
+	.iframe .btn-secondary {
+		@apply bg-source-primary hover:bg-source-primary-hover;
+	}
 
 	@media (prefers-color-scheme: dark) {
 		.app-bg {
 			@apply bg-gray-900 text-white;
 		}
+		.iframe.app-bg,
+		.iframe .app-bg {
+			@apply bg-source-background;
+		}
 		.app-border {
 			@apply border border-gray-600 divide-gray-600;
 		}
+		.iframe .app-border {
+			@apply border-source-primary;
+		}
 		.app-divide {
 			@apply divide-gray-600;
 		}
@@ -58,6 +84,9 @@ json-viewer {
 		.app-well {
 			@apply bg-gray-700 hover:bg-gray-600;
 		}
+		.iframe .app-well {
+			@apply bg-source-background;
+		}
 	}
 }