style: gradients and containers

ScopeLift · Jan 30, 2023 · 492c997 · 492c997
1 parent 8323bf0
commit 492c997
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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);
+}