From 15ae3bee55b3f7aecf292a55f25cdc07739c4a94 Mon Sep 17 00:00:00 2001
From: Paul Armstrong <paul@spaceyak.com>
Date: Thu, 4 Feb 2021 10:49:14 -0800
Subject: [PATCH] refactor(web): update shadows for material specs

---
 web/src/components/AppBar.jsx |  2 +-
 web/src/components/Card.jsx   |  4 +++-
 web/tailwind.config.js        | 23 +++++++++++++++--------
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/web/src/components/AppBar.jsx b/web/src/components/AppBar.jsx
index 089b1b508..698635d88 100644
--- a/web/src/components/AppBar.jsx
+++ b/web/src/components/AppBar.jsx
@@ -73,7 +73,7 @@ export default function AppBar({ title }) {
     <div
       className={`w-full border-b border-gray-200 dark:border-gray-700 flex items-center align-middle p-4 space-x-2 fixed left-0 right-0 z-10 bg-white dark:bg-gray-900 transform transition-all duration-200 translate-y-0 ${
         !show ? '-translate-y-full' : ''
-      } ${!atZero ? 'shadow' : ''}`}
+      } ${!atZero ? 'shadow-sm' : ''}`}
     >
       <div className="lg:hidden">
         <Button color="black" className="rounded-full w-12 h-12" onClick={handleShowDrawer} type="text">
diff --git a/web/src/components/Card.jsx b/web/src/components/Card.jsx
index 5fde64c78..f9393a37b 100644
--- a/web/src/components/Card.jsx
+++ b/web/src/components/Card.jsx
@@ -17,7 +17,9 @@ export default function Box({
   const Element = href ? 'a' : 'div';
 
   return (
-    <div className={`bg-white dark:bg-gray-800 shadow-md hover:shadow-xl rounded-lg overflow-hidden ${className}`}>
+    <div
+      className={`bg-white dark:bg-gray-800 shadow-md hover:shadow-lg transition-shadow rounded-lg overflow-hidden ${className}`}
+    >
       <Element href={href} {...props}>
         {media}
         <div class="p-4 pb-2">{header ? <Heading size="base">{header}</Heading> : null}</div>
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index fef89b4bd..b475ca4ec 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -4,14 +4,21 @@ module.exports = {
   purge: ['./public/**/*.html', './src/**/*.jsx'],
   darkMode: 'class',
   theme: {
-    extend: {},
-    screens: {
-      sm: '640px',
-      md: '768px',
-      lg: '1024px',
-      xl: '1280px',
-      '2xl': '1536px',
-      '3xl': '1720px',
+    extend: {
+      screens: {
+        '2xl': '1536px',
+        '3xl': '1720px',
+      },
+    },
+    boxShadow: {
+      sm: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
+      DEFAULT: '0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);',
+      md: '0px 2px 2px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);',
+      lg: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
+      xl: '0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
+      '2xl': '0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)',
+      '3xl': '',
+      none: '',
     },
   },
   variants: {