From 0bbb61cfb2193cebb8431aed4e4f92dbe142547d Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Wed, 16 Nov 2022 12:14:48 -0800
Subject: [PATCH] replace homepage images with SVG components
allows color of SVGs to be dynamically styled based on color mode choice
---
public/images/pages/glyph-home-light.svg | 8 -
public/images/pages/gopher-home-front.svg | 453 ------------------
public/images/pages/gopher-home-nodes.svg | 298 ------------
.../images/pages/gopher-home-side-mobile.svg | 9 -
src/components/UI/homepage/Gopher.tsx | 17 -
src/components/UI/homepage/HomeSection.tsx | 10 +-
src/components/UI/homepage/WhatIsEthereum.tsx | 6 +-
src/components/UI/homepage/WhyRunANode.tsx | 4 +-
src/components/UI/homepage/index.ts | 1 -
src/pages/index.tsx | 16 +-
10 files changed, 24 insertions(+), 798 deletions(-)
delete mode 100644 public/images/pages/glyph-home-light.svg
delete mode 100644 public/images/pages/gopher-home-front.svg
delete mode 100644 public/images/pages/gopher-home-nodes.svg
delete mode 100644 public/images/pages/gopher-home-side-mobile.svg
delete mode 100644 src/components/UI/homepage/Gopher.tsx
diff --git a/public/images/pages/glyph-home-light.svg b/public/images/pages/glyph-home-light.svg
deleted file mode 100644
index 36fed55efc..0000000000
--- a/public/images/pages/glyph-home-light.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-
diff --git a/public/images/pages/gopher-home-front.svg b/public/images/pages/gopher-home-front.svg
deleted file mode 100644
index 5729375b7d..0000000000
--- a/public/images/pages/gopher-home-front.svg
+++ /dev/null
@@ -1,453 +0,0 @@
-
diff --git a/public/images/pages/gopher-home-nodes.svg b/public/images/pages/gopher-home-nodes.svg
deleted file mode 100644
index 6c412aa7d1..0000000000
--- a/public/images/pages/gopher-home-nodes.svg
+++ /dev/null
@@ -1,298 +0,0 @@
-
diff --git a/public/images/pages/gopher-home-side-mobile.svg b/public/images/pages/gopher-home-side-mobile.svg
deleted file mode 100644
index a4bfbbd93c..0000000000
--- a/public/images/pages/gopher-home-side-mobile.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-
diff --git a/src/components/UI/homepage/Gopher.tsx b/src/components/UI/homepage/Gopher.tsx
deleted file mode 100644
index 788cfa1ece..0000000000
--- a/src/components/UI/homepage/Gopher.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Image, Stack } from '@chakra-ui/react';
-import { FC } from 'react';
-
-export const Gopher: FC = () => {
- return (
-
-
-
- );
-};
diff --git a/src/components/UI/homepage/HomeSection.tsx b/src/components/UI/homepage/HomeSection.tsx
index 10c8d6e623..38a6544196 100644
--- a/src/components/UI/homepage/HomeSection.tsx
+++ b/src/components/UI/homepage/HomeSection.tsx
@@ -2,6 +2,8 @@ import { Box, Image, Link, Stack, Text } from '@chakra-ui/react';
import { FC } from 'react';
import NextLink from 'next/link';
+import { GopherHomeFront } from '../svgs/';
+
interface Props {
imgSrc?: string;
imgAltText?: string;
@@ -9,6 +11,7 @@ interface Props {
linkLabel: string;
buttonHref: string;
children?: React.ReactNode;
+ showGopher?: boolean;
}
export const HomeSection: FC = ({
@@ -17,17 +20,18 @@ export const HomeSection: FC = ({
sectionTitle,
linkLabel,
buttonHref,
+ showGopher,
children
}) => {
return (
- {!!imgSrc && (
+ {imgSrc || showGopher && (
{/* TODO: use NextImage */}
-
+ {imgSrc && }
+ {showGopher && }
)}
-
= ({ children }) => {
borderColor='primary'
h='100%'
>
- {/* TODO: use NextImage */}
-
+
diff --git a/src/components/UI/homepage/WhyRunANode.tsx b/src/components/UI/homepage/WhyRunANode.tsx
index 59e773a25b..5bbfad5101 100644
--- a/src/components/UI/homepage/WhyRunANode.tsx
+++ b/src/components/UI/homepage/WhyRunANode.tsx
@@ -2,6 +2,7 @@ import { Box, Grid, GridItem, Image, Link, Stack, Text } from '@chakra-ui/react'
import { FC } from 'react';
import NextLink from 'next/link';
+import { GopherHomeNodes } from '../svgs/GopherHomeNodes';
import { ETHEREUM_ORG_RUN_A_NODE_URL } from '../../../constants';
interface Props {
@@ -48,8 +49,7 @@ export const WhyRunANode: FC = ({ children }) => {
borderColor='primary !important'
h='100%'
>
- {/* TODO: use NextImage */}
-
+
diff --git a/src/components/UI/homepage/index.ts b/src/components/UI/homepage/index.ts
index 95f8371b8c..278ac8a77a 100644
--- a/src/components/UI/homepage/index.ts
+++ b/src/components/UI/homepage/index.ts
@@ -1,4 +1,3 @@
-export * from './Gopher';
export * from './HomeHero';
export * from './HomeSection';
export * from './WhatIsEthereum';
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index c95046c86c..9aed48222a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,13 +2,13 @@ import { Box, Grid, GridItem, Link, Stack, Text } from '@chakra-ui/react';
import type { NextPage } from 'next';
import {
- Gopher,
HomeHero,
HomeSection,
QuickLinks,
WhatIsEthereum,
WhyRunANode
} from '../components/UI/homepage';
+import { GopherHomeLinks } from '../components/UI/svgs';
import {
CONTRIBUTING_PAGE,
@@ -32,11 +32,10 @@ const HomePage: NextPage = ({}) => {
{/* SECTION: What is Geth */}
Geth (go-ethereum) is a{' '}
@@ -142,7 +141,16 @@ const HomePage: NextPage = ({}) => {
{/* TODO: replace with animated/video version */}
-
+
+
+