From 4dd7cbe2cad7822766b16045377564cc44f8d128 Mon Sep 17 00:00:00 2001
From: Valtteri Karesto <valtteri.karesto@gmail.com>
Date: Wed, 11 May 2022 13:07:08 +0300
Subject: [PATCH] Updated main modal

---
 components/Navigation.tsx | 182 +++++++++++++++++++++++++-------------
 public/accept.svg         |   6 ++
 public/carbon.svg         |   6 ++
 public/firewall.svg       |  11 +++
 public/notary.svg         |   6 ++
 public/peggy.svg          |   9 ++
 public/starter.svg        |   6 ++
 7 files changed, 163 insertions(+), 63 deletions(-)
 create mode 100644 public/accept.svg
 create mode 100644 public/carbon.svg
 create mode 100644 public/firewall.svg
 create mode 100644 public/notary.svg
 create mode 100644 public/peggy.svg
 create mode 100644 public/starter.svg

diff --git a/components/Navigation.tsx b/components/Navigation.tsx
index 3660540..067e518 100644
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import Link from "next/link";
+import Image from "next/image";
 
 import { useSnapshot } from "valtio";
 import { useRouter } from "next/router";
@@ -28,6 +29,13 @@ import {
 } from "./Dialog";
 import PanelBox from "./PanelBox";
 import { templateFileIds } from "../state/constants";
+import { styled } from "../stitches.config";
+
+const ImageWrapper = styled(Flex, {
+  position: "relative",
+  mt: "$2",
+  mb: "$10",
+});
 
 const Navigation = () => {
   const router = useRouter();
@@ -128,9 +136,10 @@ const Navigation = () => {
                 </DialogTrigger>
                 <DialogContent
                   css={{
+                    display: "flex",
                     maxWidth: "1080px",
                     width: "80vw",
-                    height: "80%",
+                    maxHeight: "80%",
                     backgroundColor: "$mauve1 !important",
                     overflowY: "auto",
                     p: 0,
@@ -139,8 +148,7 @@ const Navigation = () => {
                   <Flex
                     css={{
                       flexDirection: "column",
-                      flex: 1,
-                      height: "auto",
+                      height: "100%",
                       "@md": {
                         flexDirection: "row",
                         height: "100%",
@@ -151,9 +159,9 @@ const Navigation = () => {
                       css={{
                         borderBottom: "1px solid $colors$mauve5",
                         width: "100%",
+                        minWidth: "240px",
                         flexDirection: "column",
                         p: "$7",
-                        height: "100%",
                         backgroundColor: "$mauve2",
                         "@md": {
                           width: "30%",
@@ -255,67 +263,115 @@ const Navigation = () => {
                         </Flex>
                       </DialogDescription>
                     </Flex>
-                    <div>
-                      <Flex
-                        css={{
-                          display: "grid",
-                          gridTemplateColumns: "1fr",
+
+                    <Flex
+                      css={{
+                        display: "grid",
+                        gridTemplateColumns: "1fr",
+                        gridTemplateRows: "max-content",
+                        flex: 1,
+                        p: "$7",
+                        pb: "$16",
+                        gap: "$3",
+                        alignItems: "normal",
+                        flexWrap: "wrap",
+                        backgroundColor: "$mauve1",
+                        "@md": {
+                          gridTemplateColumns: "1fr 1fr",
                           gridTemplateRows: "max-content",
-                          flex: 1,
-                          p: "$7",
-                          gap: "$3",
-                          alignItems: "normal",
-                          flexWrap: "wrap",
-                          backgroundColor: "$mauve1",
-                          "@md": {
-                            gridTemplateColumns: "1fr 1fr 1fr",
-                            gridTemplateRows: "max-content",
-                          },
-                        }}
+                        },
+                        "@lg": {
+                          gridTemplateColumns: "1fr 1fr 1fr",
+                          gridTemplateRows: "max-content",
+                        },
+                      }}
+                    >
+                      <PanelBox
+                        as="a"
+                        href={`/develop/${templateFileIds.starter}`}
                       >
-                        <PanelBox
-                          as="a"
-                          href={`/develop/${templateFileIds.starter}`}
-                        >
-                          <Heading>Starter</Heading>
-                          <Text>
-                            Just a basic starter with essential imports
-                          </Text>
-                        </PanelBox>
-                        <PanelBox
-                          as="a"
-                          href={`/develop/${templateFileIds.firewall}`}
-                        >
-                          <Heading>Firewall</Heading>
-                          <Text>
-                            This Hook essentially checks a blacklist of accounts
-                          </Text>
-                        </PanelBox>
-                        <PanelBox
-                          as="a"
-                          href={`/develop/${templateFileIds.notary}`}
-                        >
-                          <Heading>Notary</Heading>
-                          <Text>
-                            Collecting signatures for multi-sign transactions
-                          </Text>
-                        </PanelBox>
-                        <PanelBox
-                          as="a"
-                          href={`/develop/${templateFileIds.carbon}`}
-                        >
-                          <Heading>Carbon</Heading>
-                          <Text>Send a percentage of sum to an address</Text>
-                        </PanelBox>
-                        <PanelBox
-                          as="a"
-                          href={`/develop/${templateFileIds.peggy}`}
-                        >
-                          <Heading>Peggy</Heading>
-                          <Text>An oracle based stable coin hook</Text>
-                        </PanelBox>
-                      </Flex>
-                    </div>
+                        <ImageWrapper>
+                          <Image
+                            src="/starter.svg"
+                            alt="Firewall icon"
+                            width="66px"
+                            height="33px"
+                          />
+                        </ImageWrapper>
+                        <Heading>Starter</Heading>
+
+                        <Text>
+                          Just a basic starter with essential imports, just
+                          accepts any transaction coming through
+                        </Text>
+                      </PanelBox>
+
+                      <PanelBox
+                        as="a"
+                        href={`/develop/${templateFileIds.firewall}`}
+                        css={{ alignItems: "flex-start" }}
+                      >
+                        <ImageWrapper>
+                          <Image
+                            src="/firewall.svg"
+                            alt="Firewall icon"
+                            width="66px"
+                            height="33px"
+                          />
+                        </ImageWrapper>
+                        <Heading>Firewall</Heading>
+                        <Text>
+                          This Hook essentially checks a blacklist of accounts
+                        </Text>
+                      </PanelBox>
+                      <PanelBox
+                        as="a"
+                        href={`/develop/${templateFileIds.notary}`}
+                      >
+                        <ImageWrapper>
+                          <Image
+                            src="/notary.svg"
+                            alt="Firewall icon"
+                            width="66px"
+                            height="33px"
+                          />
+                        </ImageWrapper>
+                        <Heading>Notary</Heading>
+                        <Text>
+                          Collecting signatures for multi-sign transactions
+                        </Text>
+                      </PanelBox>
+                      <PanelBox
+                        as="a"
+                        href={`/develop/${templateFileIds.carbon}`}
+                      >
+                        <ImageWrapper>
+                          <Image
+                            src="/carbon.svg"
+                            alt="Firewall icon"
+                            width="66px"
+                            height="33px"
+                          />
+                        </ImageWrapper>
+                        <Heading>Carbon</Heading>
+                        <Text>Send a percentage of sum to an address</Text>
+                      </PanelBox>
+                      <PanelBox
+                        as="a"
+                        href={`/develop/${templateFileIds.peggy}`}
+                      >
+                        <ImageWrapper>
+                          <Image
+                            src="/peggy.svg"
+                            alt="Firewall icon"
+                            width="66px"
+                            height="33px"
+                          />
+                        </ImageWrapper>
+                        <Heading>Peggy</Heading>
+                        <Text>An oracle based stable coin hook</Text>
+                      </PanelBox>
+                    </Flex>
                   </Flex>
                   <DialogClose asChild>
                     <Box
diff --git a/public/accept.svg b/public/accept.svg
new file mode 100644
index 0000000..e1efaba
--- /dev/null
+++ b/public/accept.svg
@@ -0,0 +1,6 @@
+<svg width="66" height="32" viewBox="0 0 66 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.5 13L31.1666 20L27.5 16.5" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M43 5H23C22.4477 5 22 5.44772 22 6V26C22 26.5523 22.4477 27 23 27H43C43.5523 27 44 26.5523 44 26V6C44 5.44772 43.5523 5 43 5Z" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.14441e-05 5L8.94099 16.0625L4.00543e-05 27.125H2.27587L10.5015 16.9475H16.5938V15.1775H10.5015L2.27582 5H-1.14441e-05Z" fill="#EDEDEF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M66 5L57.059 16.0625L66 27.125H63.7241L55.4985 16.9475H49.4062V15.1775H55.4985L63.7242 5H66Z" fill="#EDEDEF"/>
+</svg>
diff --git a/public/carbon.svg b/public/carbon.svg
new file mode 100644
index 0000000..e21da40
--- /dev/null
+++ b/public/carbon.svg
@@ -0,0 +1,6 @@
+<svg width="66" height="32" viewBox="0 0 66 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33 2L23 15H28L21 24H45L38 15H43L33 2Z" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M33 24V30" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.14441e-05 4L8.94099 15.0625L4.00543e-05 26.125H2.27587L10.5015 15.9475H16.5938V14.1775H10.5015L2.27582 4H-1.14441e-05Z" fill="#EDEDEF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M66 4L57.059 15.0625L66 26.125H63.7241L55.4985 15.9475H49.4062V14.1775H55.4985L63.7242 4H66Z" fill="#EDEDEF"/>
+</svg>
diff --git a/public/firewall.svg b/public/firewall.svg
new file mode 100644
index 0000000..eed2207
--- /dev/null
+++ b/public/firewall.svg
@@ -0,0 +1,11 @@
+<svg width="66" height="32" viewBox="0 0 66 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33 13V7" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M27 19V13" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M39 19V13" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M33 25V19" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 13H45" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 19H45" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M45 7H21V25H45V7Z" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.14441e-05 4.875L8.94099 15.9375L4.00543e-05 27H2.27587L10.5015 16.8225H16.5938V15.0525H10.5015L2.27582 4.875H-1.14441e-05Z" fill="#EDEDEF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M66 4.875L57.059 15.9375L66 27H63.7241L55.4985 16.8225H49.4062V15.0525H55.4985L63.7242 4.875H66Z" fill="#EDEDEF"/>
+</svg>
diff --git a/public/notary.svg b/public/notary.svg
new file mode 100644
index 0000000..2e8f7bd
--- /dev/null
+++ b/public/notary.svg
@@ -0,0 +1,6 @@
+<svg width="66" height="32" viewBox="0 0 66 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37.5 10.5L26.5 21.5L21 16.0002" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M49 10.5L38 21.5L35.0784 18.5785" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.14441e-05 5L8.94099 16.0625L4.00543e-05 27.125H2.27587L10.5015 16.9475H16.5938V15.1775H10.5015L2.27582 5H-1.14441e-05Z" fill="#EDEDEF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M66 5L57.059 16.0625L66 27.125H63.7241L55.4985 16.9475H49.4062V15.1775H55.4985L63.7242 5H66Z" fill="#EDEDEF"/>
+</svg>
diff --git a/public/peggy.svg b/public/peggy.svg
new file mode 100644
index 0000000..9ce5e95
--- /dev/null
+++ b/public/peggy.svg
@@ -0,0 +1,9 @@
+<svg width="66" height="32" viewBox="0 0 66 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33 19C40.1797 19 46 16.3137 46 13C46 9.68629 40.1797 7 33 7C25.8203 7 20 9.68629 20 13C20 16.3137 25.8203 19 33 19Z" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M33 19V25" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20 13V19C20 22 25 25 33 25C41 25 46 22 46 19V13" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41 17.7633V23.7634" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25 17.7633V23.7634" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.14441e-05 4L8.94099 15.0625L4.00543e-05 26.125H2.27587L10.5015 15.9475H16.5938V14.1775H10.5015L2.27582 4H-1.14441e-05Z" fill="#EDEDEF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M66 4L57.059 15.0625L66 26.125H63.7241L55.4985 15.9475H49.4062V14.1775H55.4985L63.7242 4H66Z" fill="#EDEDEF"/>
+</svg>
diff --git a/public/starter.svg b/public/starter.svg
new file mode 100644
index 0000000..40793dd
--- /dev/null
+++ b/public/starter.svg
@@ -0,0 +1,6 @@
+<svg width="66" height="32" viewBox="0 0 66 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42 28H24C23.7347 28 23.4804 27.8946 23.2929 27.7071C23.1053 27.5196 23 27.2652 23 27V5C23 4.73479 23.1053 4.48044 23.2929 4.2929C23.4804 4.10537 23.7347 4.00001 24 4H36.0003L43 11V27C43 27.2652 42.8947 27.5196 42.7071 27.7071C42.5196 27.8946 42.2653 28 42 28V28Z" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M36 4V11H43.001" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.14441e-05 4.875L8.94099 15.9375L4.00543e-05 27H2.27587L10.5015 16.8225H16.5938V15.0525H10.5015L2.27582 4.875H-1.14441e-05Z" fill="#EDEDEF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M66 4.875L57.059 15.9375L66 27H63.7241L55.4985 16.8225H49.4062V15.0525H55.4985L63.7242 4.875H66Z" fill="#EDEDEF"/>
+</svg>