From 483f7d589319bf7e9efefd8ca2c96151a84291d2 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Wed, 11 Aug 2021 23:53:05 -0700
Subject: [PATCH] Clean up popovers: background color and placeholder text

---
 frontend/src/App.vue                                 | 10 +++-------
 frontend/src/components/panels/Document.vue          |  8 ++++----
 frontend/src/components/panels/LayerTree.vue         |  2 +-
 .../widgets/floating-menus/FloatingMenu.vue          | 12 ++++++------
 .../src/components/widgets/options/ToolOptions.vue   |  6 +++---
 frontend/src/components/workspace/Panel.vue          |  2 +-
 6 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 53d123dbf..496c96a83 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -19,6 +19,8 @@
 
 <style lang="scss">
 :root {
+	// Replace usage of `-rgb` variants with CSS color() function to calculate alpha when browsers support it
+	// See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color() and https://caniuse.com/css-color-function
 	--color-0-black: #000;
 	--color-0-black-rgb: 0, 0, 0;
 	--color-1-nearblack: #111;
@@ -57,12 +59,6 @@
 	--color-accent-hover-rgb: 73, 165, 226;
 	--color-accent-disabled: #416277;
 	--color-accent-disabled-rgb: 65, 98, 119;
-
-	// TODO: Replace with CSS color() function to calculate alpha when browsers support it
-	// See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color() and https://caniuse.com/css-color-function
-	// F2 = 95% alpha
-	--floating-menu-opacity-color-2-mildblack: #222222f2;
-	--floating-menu-shadow: rgba(0, 0, 0, 50%);
 }
 
 html,
@@ -186,7 +182,7 @@ img {
 .unsupported-modal {
 	background: var(--color-3-darkgray);
 	border-radius: 4px;
-	box-shadow: 2px 2px 5px 0 var(--floating-menu-shadow);
+	box-shadow: 2px 2px 5px 0 rgba(var(--color-0-black-rgb), 50%);
 	padding: 0 16px 16px 16px;
 	border: 1px solid var(--color-4-dimgray);
 	max-width: 500px;
diff --git a/frontend/src/components/panels/Document.vue b/frontend/src/components/panels/Document.vue
index d87dae3dd..091f18824 100644
--- a/frontend/src/components/panels/Document.vue
+++ b/frontend/src/components/panels/Document.vue
@@ -13,7 +13,7 @@
 				<OptionalInput v-model:checked="snappingEnabled" @update:checked="comingSoon(200)" :icon="'Snapping'" title="Snapping" />
 				<PopoverButton>
 					<h3>Snapping</h3>
-					<p>More snapping options will be here</p>
+					<p>The contents of this popover menu are coming soon</p>
 				</PopoverButton>
 
 				<Separator :type="SeparatorType.Unrelated" />
@@ -21,7 +21,7 @@
 				<OptionalInput v-model:checked="gridEnabled" @update:checked="comingSoon(318)" :icon="'Grid'" title="Grid" />
 				<PopoverButton>
 					<h3>Grid</h3>
-					<p>More grid options will be here</p>
+					<p>The contents of this popover menu are coming soon</p>
 				</PopoverButton>
 
 				<Separator :type="SeparatorType.Unrelated" />
@@ -29,7 +29,7 @@
 				<OptionalInput v-model:checked="overlaysEnabled" @update:checked="comingSoon(99)" :icon="'Overlays'" title="Overlays" />
 				<PopoverButton>
 					<h3>Overlays</h3>
-					<p>More overlays options will be here</p>
+					<p>The contents of this popover menu are coming soon</p>
 				</PopoverButton>
 
 				<Separator :type="SeparatorType.Unrelated" />
@@ -37,7 +37,7 @@
 				<RadioInput :entries="viewModeEntries" v-model:selectedIndex="viewModeIndex" />
 				<PopoverButton>
 					<h3>View Mode</h3>
-					<p>More view mode options will be here</p>
+					<p>The contents of this popover menu are coming soon</p>
 				</PopoverButton>
 
 				<Separator :type="SeparatorType.Section" />
diff --git a/frontend/src/components/panels/LayerTree.vue b/frontend/src/components/panels/LayerTree.vue
index 91ebde614..824487723 100644
--- a/frontend/src/components/panels/LayerTree.vue
+++ b/frontend/src/components/panels/LayerTree.vue
@@ -11,7 +11,7 @@
 
 			<PopoverButton>
 				<h3>Compositing Options</h3>
-				<p>More blend and compositing options will be here</p>
+				<p>The contents of this popover menu are coming soon</p>
 			</PopoverButton>
 		</LayoutRow>
 		<LayoutRow :class="'layer-tree scrollable-y'">
diff --git a/frontend/src/components/widgets/floating-menus/FloatingMenu.vue b/frontend/src/components/widgets/floating-menus/FloatingMenu.vue
index 322ee9982..a79ed9334 100644
--- a/frontend/src/components/widgets/floating-menus/FloatingMenu.vue
+++ b/frontend/src/components/widgets/floating-menus/FloatingMenu.vue
@@ -38,8 +38,8 @@
 		display: flex;
 
 		.floating-menu-content {
-			background: var(--floating-menu-opacity-color-2-mildblack);
-			box-shadow: var(--floating-menu-shadow) 0 2px 4px;
+			background: rgba(var(--color-2-mildblack-rgb), 0.95);
+			box-shadow: rgba(var(--color-0-black-rgb), 50%) 0 2px 4px;
 			border-radius: var(--floating-menu-content-border-radius);
 			color: var(--color-e-nearwhite);
 			font-size: inherit;
@@ -128,28 +128,28 @@
 
 	&.top .tail {
 		border-width: 8px 6px 0 6px;
-		border-color: var(--floating-menu-opacity-color-2-mildblack) transparent transparent transparent;
+		border-color: rgba(var(--color-2-mildblack-rgb), 0.95) transparent transparent transparent;
 		margin-left: -6px;
 		margin-bottom: 2px;
 	}
 
 	&.bottom .tail {
 		border-width: 0 6px 8px 6px;
-		border-color: transparent transparent var(--floating-menu-opacity-color-2-mildblack) transparent;
+		border-color: transparent transparent rgba(var(--color-2-mildblack-rgb), 0.95) transparent;
 		margin-left: -6px;
 		margin-top: 2px;
 	}
 
 	&.left .tail {
 		border-width: 6px 0 6px 8px;
-		border-color: transparent transparent transparent var(--floating-menu-opacity-color-2-mildblack);
+		border-color: transparent transparent transparent rgba(var(--color-2-mildblack-rgb), 0.95);
 		margin-top: -6px;
 		margin-right: 2px;
 	}
 
 	&.right .tail {
 		border-width: 6px 8px 6px 0;
-		border-color: transparent var(--floating-menu-opacity-color-2-mildblack) transparent transparent;
+		border-color: transparent rgba(var(--color-2-mildblack-rgb), 0.95) transparent transparent;
 		margin-top: -6px;
 		margin-left: 2px;
 	}
diff --git a/frontend/src/components/widgets/options/ToolOptions.vue b/frontend/src/components/widgets/options/ToolOptions.vue
index 901e638ce..c8a0ab417 100644
--- a/frontend/src/components/widgets/options/ToolOptions.vue
+++ b/frontend/src/components/widgets/options/ToolOptions.vue
@@ -87,7 +87,7 @@ export default defineComponent({
 					kind: "PopoverButton",
 					popover: {
 						title: "Align",
-						text: "More alignment-related buttons will be here",
+						text: "The contents of this popover menu are coming soon",
 					},
 					props: {},
 				},
@@ -103,7 +103,7 @@ export default defineComponent({
 					kind: "PopoverButton",
 					popover: {
 						title: "Flip",
-						text: "More flip-related buttons will be here",
+						text: "The contents of this popover menu are coming soon",
 					},
 					props: {},
 				},
@@ -122,7 +122,7 @@ export default defineComponent({
 					kind: "PopoverButton",
 					popover: {
 						title: "Boolean",
-						text: "More boolean-related buttons will be here",
+						text: "The contents of this popover menu are coming soon",
 					},
 					props: {},
 				},
diff --git a/frontend/src/components/workspace/Panel.vue b/frontend/src/components/workspace/Panel.vue
index 49defbd95..48787888c 100644
--- a/frontend/src/components/workspace/Panel.vue
+++ b/frontend/src/components/workspace/Panel.vue
@@ -16,7 +16,7 @@
 			</div>
 			<PopoverButton :icon="PopoverButtonIcon.VerticalEllipsis">
 				<h3>Panel Options</h3>
-				<p>More panel-related options will be here</p>
+				<p>The contents of this popover menu are coming soon</p>
 			</PopoverButton>
 		</div>
 		<div class="panel-body">