/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,19 +71,21 @@ const senateMidterms: StateElectionMarket[] = [
 
 const App = () => {
   return (
-    <Col className="items-center justify-center bg-white">
+    <Page className="">
-      <Title text="2022 US Senate Midterms" className="mt-8" />
+      <Col className="items-center justify-center">
-      <StateElectionMap markets={senateMidterms} />
+        <Title text="2022 US Senate Midterms" className="mt-8" />
+        <StateElectionMap markets={senateMidterms} />
 
-      <iframe
+        <iframe
-        src="https://manifold.markets/embed/NathanpmYoung/will-the-democrats-control-the-sena"
+          src="https://manifold.markets/embed/NathanpmYoung/will-the-democrats-control-the-sena"
-        title="Will the Democrats control the Senate after the Midterms?"
+          title="Will the Democrats control the Senate after the Midterms?"
-        frameBorder="0"
+          frameBorder="0"
-        width={800}
+          width={800}
-        height={400}
+          height={400}
-        className="mt-8"
+          className="mt-8"
-      ></iframe>
+        ></iframe>
-    </Col>
+      </Col>
+    </Page>
   )
 }