feat: styling updates on all ui elements

src/components/UiElement/UiElement.tsx

@@ -11,6 +11,8 @@ export const UiElement = ({ children, sx }: Props) => {
     <Card
       sx={{
         borderRadius: 2,
+        boxShadow: 1,
+        borderColor: 'grey.400',
         ...sx
       }}
     >

src/styles/theme.ts

@@ -43,8 +43,19 @@ export const customVars: CustomThemeVars = {
   }
 };
 
+const createShadows = () => {
+  const shadows = Array(25)
+    .fill('none')
+    .map((shadow, i) => {
+      return `0px 10px 20px ${i - 10}px rgba(0,0,0,0.25)`;
+    }) as Required<ThemeOptions>['shadows'];
+
+  return shadows;
+};
+
 export const themeConfig: ThemeOptions = {
   customVars,
+  shadows: createShadows(),
   typography: {
     h2: {
       fontSize: '4em',