From 3b357d8332c4c976a7303df80227d68901cf3076 Mon Sep 17 00:00:00 2001
From: Tom Hicks <tomhicks@users.noreply.github.com>
Date: Wed, 15 Apr 2020 18:42:07 +0100
Subject: [PATCH] Improve UI continuity behind panels (#1435)

* Add variable for island color

* Make islands semi-transparent

This preserves the notion of the infinite canvas and helps
maintain context, especially on smaller screens.
---
 src/components/Island.css | 3 ++-
 src/css/theme.scss        | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Island.css b/src/components/Island.css
index 06e8415d..0099b59f 100644
--- a/src/components/Island.css
+++ b/src/components/Island.css
@@ -1,6 +1,7 @@
 .Island {
   --padding: 0;
-  background-color: var(--bg-color-main);
+  background-color: var(--bg-color-island);
+  backdrop-filter: saturate(180%) blur(20px);
   box-shadow: var(--shadow-island);
   border-radius: var(--border-radius-m);
   padding: calc(var(--padding) * var(--space-factor));
diff --git a/src/css/theme.scss b/src/css/theme.scss
index 8e8107ee..66605a1a 100644
--- a/src/css/theme.scss
+++ b/src/css/theme.scss
@@ -2,6 +2,7 @@
   --text-color-primary: #343a40;
   --bg-color-main: #fff;
   --shadow-island: 0 1px 5px rgba(0, 0, 0, 0.15);
+  --bg-color-island: rgba(255, 255, 255, 0.7);
   --border-radius-m: 4px;
   --space-factor: 0.25rem;
 }