/midterms

web/components/usa-map/usa-map.tsx

@@ -46,6 +46,7 @@ type USAMapPropTypes = {
   defaultFill?: string
   customize?: Customize
   hideStateTitle?: boolean
+  className?: string
 }
 
 export const USAMap = ({
@@ -58,6 +59,7 @@ export const USAMap = ({
   defaultFill = '#d3d3d3',
   customize,
   hideStateTitle,
+  className,
 }: USAMapPropTypes) => {
   const fillStateColor = (state: string) =>
     customize?.[state]?.fill ? (customize[state].fill as string) : defaultFill
@@ -66,7 +68,7 @@ export const USAMap = ({
 
   return (
     <svg
-      className="us-state-map"
+      className={className}
       xmlns="http://www.w3.org/2000/svg"
       width={width}
       height={height}

web/components/usa-map/usa-state.tsx

@@ -28,9 +28,6 @@ export const USAState = ({
       onClick={onClickState}
       id={state}
     >
-      <text>
-        <textPath xlinkHref={`#${state}`}>{stateName}</textPath>
-      </text>
       {hideStateTitle ? null : <title>{stateName}</title>}
     </path>
   )

web/pages/midterms.tsx

@@ -1,4 +1,5 @@
 import { Col } from 'web/components/layout/col'
+import { Page } from 'web/components/page'
 import { Title } from 'web/components/title'
 import {
   StateElectionMarket,
@@ -70,7 +71,8 @@ const senateMidterms: StateElectionMarket[] = [
 
 const App = () => {
   return (
-    <Col className="items-center justify-center bg-white">
+    <Page className="">
+      <Col className="items-center justify-center">
         <Title text="2022 US Senate Midterms" className="mt-8" />
         <StateElectionMap markets={senateMidterms} />
 
@@ -83,6 +85,7 @@ const App = () => {
           className="mt-8"
         ></iframe>
       </Col>
+    </Page>
   )
 }