From 492c997d533990eb88a6d50d6c71cd01713fcb82 Mon Sep 17 00:00:00 2001
From: Matt Solomon <matt@mattsolomon.dev>
Date: Mon, 30 Jan 2023 13:59:42 -0800
Subject: [PATCH] style: gradients and containers

---
 components/HowTo.tsx  |  4 +---
 components/TxForm.tsx |  2 +-
 pages/_app.tsx        |  1 +
 pages/index.tsx       |  2 +-
 styles/globals.css    | 11 +++++++++++
 5 files changed, 15 insertions(+), 5 deletions(-)
 create mode 100644 styles/globals.css

diff --git a/components/HowTo.tsx b/components/HowTo.tsx
index ffaeeea..903dc7b 100644
--- a/components/HowTo.tsx
+++ b/components/HowTo.tsx
@@ -4,10 +4,8 @@ import { Flex, Heading, Link, ListItem, OrderedList, Text } from '@chakra-ui/lay
 const HowTo = () => {
   return (
     <Flex
+      className="container"
       direction="column"
-      border="1px solid"
-      borderRadius="0.3rem"
-      padding="2rem"
       maxWidth="40rem"
       marginTop="3rem"
       marginBottom="3rem"
diff --git a/components/TxForm.tsx b/components/TxForm.tsx
index 9abb7b1..3b12922 100644
--- a/components/TxForm.tsx
+++ b/components/TxForm.tsx
@@ -48,7 +48,7 @@ export const TxForm = () => {
     ethers.utils.parseUnits(tokenAmount || '0', tokenDecimals).gt(tokenAllowance);
 
   return (
-    <Box width="24rem">
+    <Box width="24rem" className="container">
       <FormControl>
         <FormLabel>Recipient address</FormLabel>
         <Input
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 5c50c01..06130ee 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -12,6 +12,7 @@ import { publicProvider } from 'wagmi/providers/public';
 import Header from '@/components/Header';
 import { TokenListProvider } from '@/contexts/TokenContext';
 import { useRailgunProvider } from '@/hooks/useRailgunProvider';
+import '@/styles/globals.css';
 import { bscIcon } from '@/utils/constants';
 import { initialize } from '@/utils/railgun';
 
diff --git a/pages/index.tsx b/pages/index.tsx
index 6caa0ee..3c39767 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -6,7 +6,7 @@ import { TxForm } from '@/components/TxForm';
 const Home: NextPage = () => {
   return (
     <Flex direction="column" align="center" justify="center" pt="2rem">
-      <Heading as="h1" size="4xl" mb="4rem">
+      <Heading as="h1" size="4xl" mb="2rem">
         Shield
       </Heading>
       <TxForm />
diff --git a/styles/globals.css b/styles/globals.css
new file mode 100644
index 0000000..87a97ee
--- /dev/null
+++ b/styles/globals.css
@@ -0,0 +1,11 @@
+body {
+  background-image: radial-gradient(circle at center, #decba488, #3e515188) !important;
+}
+
+.container {
+  background-color: #faf9f7dd;
+  border-radius: 1rem;
+  border: 1px solid #b8b2a7;
+  padding: 2rem;
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}