diff --git a/src/components/modals/AboutModal.tsx b/src/components/modals/AboutModal.tsx
index 025c09e..7934c52 100644
--- a/src/components/modals/AboutModal.tsx
+++ b/src/components/modals/AboutModal.tsx
@@ -1,6 +1,4 @@
-import { Fragment } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
-import { XCircleIcon } from '@heroicons/react/outline'
+import { BaseModal } from './BaseModal'
type Props = {
isOpen: boolean
@@ -9,80 +7,23 @@ type Props = {
export const AboutModal = ({ isOpen, handleClose }: Props) => {
return (
-
-
-
+
+
+ This is an open source clone of the game Wordle -{' '}
+
+ check out the code here
+ {' '}
+ and{' '}
+
+ play the original here
+
+
+
)
}
diff --git a/src/components/modals/BaseModal.tsx b/src/components/modals/BaseModal.tsx
new file mode 100644
index 0000000..e07a1e3
--- /dev/null
+++ b/src/components/modals/BaseModal.tsx
@@ -0,0 +1,75 @@
+import { Fragment } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+import { XCircleIcon } from '@heroicons/react/outline'
+
+type Props = {
+ title: string
+ children: React.ReactNode
+ isOpen: boolean
+ handleClose: () => void
+}
+
+export const BaseModal = ({ title, children, isOpen, handleClose }: Props) => {
+ return (
+
+
+
+ )
+}
diff --git a/src/components/modals/InfoModal.tsx b/src/components/modals/InfoModal.tsx
index 37472d0..3fc0f32 100644
--- a/src/components/modals/InfoModal.tsx
+++ b/src/components/modals/InfoModal.tsx
@@ -1,7 +1,5 @@
-import { Fragment } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
import { Cell } from '../grid/Cell'
-import { XCircleIcon } from '@heroicons/react/outline'
+import { BaseModal } from './BaseModal'
type Props = {
isOpen: boolean
@@ -10,102 +8,44 @@ type Props = {
export const InfoModal = ({ isOpen, handleClose }: Props) => {
return (
-
-
-
+
+ |
+ |
+ |
+ |
+ |
+
+
+ The letter U is not in the word in any spot.
+
+
)
}
diff --git a/src/components/modals/StatsModal.tsx b/src/components/modals/StatsModal.tsx
index a2e08a2..4b0ad02 100644
--- a/src/components/modals/StatsModal.tsx
+++ b/src/components/modals/StatsModal.tsx
@@ -1,9 +1,7 @@
-import { Fragment } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
-import { XCircleIcon } from '@heroicons/react/outline'
import { StatBar } from '../stats/StatBar'
import { Histogram } from '../stats/Histogram'
import { GameStats } from '../../lib/localStorage'
+import { BaseModal } from './BaseModal'
type Props = {
isOpen: boolean
@@ -13,71 +11,12 @@ type Props = {
export const StatsModal = ({ isOpen, handleClose, gameStats }: Props) => {
return (
-
-
-
+
+
+
+ Guess Distribution
+
+
+
)
}
diff --git a/src/components/modals/WinModal.tsx b/src/components/modals/WinModal.tsx
index faf8254..a0979da 100644
--- a/src/components/modals/WinModal.tsx
+++ b/src/components/modals/WinModal.tsx
@@ -1,9 +1,8 @@
-import { Fragment } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
+import { Dialog } from '@headlessui/react'
import { CheckIcon } from '@heroicons/react/outline'
import { MiniGrid } from '../mini-grid/MiniGrid'
import { shareStatus } from '../../lib/share'
-import { XCircleIcon } from '@heroicons/react/outline'
+import { BaseModal } from './BaseModal'
type Props = {
isOpen: boolean
@@ -19,84 +18,36 @@ export const WinModal = ({
handleShare,
}: Props) => {
return (
-
-