Added a transition to WYSIWYGMenu

Author: Zaydek Michels-Gualtieri

src/EditorApp/WYSIWYGMenu.js

@@ -24,7 +24,7 @@ const WYSIWYGMenu = ({ state, dispatch }) => {
 	const [tooltip, setTooltip] = React.useState("")
 
 	return (
-		<div className="px-3 py-2 flex flex-row items-center bg-white rounded-lg shadow-hero">
+		<div className="px-3 py-2 flex flex-row items-center bg-white rounded-lg shadow-hero hover:shadow-hero-lg transition duration-200 ease-in-out">
 			<div className="-ml-0.5" />
 
 			<div

tailwind.config.js

@@ -1,13 +1,46 @@
 const defaultTheme = require("tailwindcss/defaultTheme")
 
+function trimWhitespace(str) {
+	return str.split(/\s+/).join(" ").trim()
+}
+
 module.exports = {
 	purge: [
 		"./public/**/*.html",
 		"./src/**/*.js",
 	],
 	theme: {
 		extend: {
-			// https://tailwindcss.com/docs/font-family
+			boxShadow: {
+				"hero-sm": trimWhitespace(`
+					0 0 0 1px rgba(0, 0, 0, 0.05),
+					0 1px 2px 0 rgba(0, 0, 0, 0.05)
+				`),
+				"hero": trimWhitespace(`
+					0 0 0 1px rgba(0, 0, 0, 0.05),
+					0 1px 3px 0 rgba(0, 0, 0, 0.1),
+					0 1px 2px 0 rgba(0, 0, 0, 0.06)
+				`),
+				"hero-md": trimWhitespace(`
+					0 0 0 1px rgba(0, 0, 0, 0.05),
+					0 4px 6px -1px rgba(0, 0, 0, 0.1),
+					0 2px 4px -1px rgba(0, 0, 0, 0.06)
+				`),
+				"hero-lg": trimWhitespace(`
+					0 0 0 1px rgba(0, 0, 0, 0.05),
+					0 10px 15px -3px rgba(0, 0, 0, 0.1),
+					0 4px 6px -2px rgba(0, 0, 0, 0.05)
+				`),
+				"hero-xl": trimWhitespace(`
+					0 0 0 1px rgba(0, 0, 0, 0.05),
+					0 20px 25px -5px rgba(0, 0, 0, 0.1),
+					0 10px 10px -5px rgba(0, 0, 0, 0.04)
+				`),
+				"hero-2xl": trimWhitespace(`
+					0 0 0 1px rgba(0, 0, 0, 0.05),
+					0 25px 50px -12px rgba(0, 0, 0, 0.25)
+				`),
+			},
 			fontFamily: {
 				sans: [
 					...defaultTheme.fontFamily.sans.slice(0, 3),
@@ -18,7 +51,6 @@ module.exports = {
 		},
 	},
 	variants: {
-		// https://github.com/tailwindlabs/tailwindcss-typography/issues/46
 		typography: [],
 	},
 	plugins: [