fix styling

src/Components/Misc/InfoModal.tsx

@@ -1,6 +1,7 @@
 import { Modal } from '@mui/material';
-import { theme } from '../../Data/theme';
 import { twc } from 'react-twc';
+import { Separator } from './Separator';
+import { Paragraph } from './TextComponents';
 
 export const ModalWrapper = twc.div`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80vw] h-[85vh] bg-background-default p-4 overflow-scroll rounded-2xl border-none text-text-primary`;
 
@@ -14,14 +15,14 @@ export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => {
     <Modal open={isOpen} onClose={closeModal}>
       <ModalWrapper>
         <div>
-          <h2 style={{ textAlign: 'center' }}>📋 Usage Guide</h2>
-          <p>
+          <h2 className="text-2xl text-center mb-4">📋 Usage Guide</h2>
+          <Separator height="1px" />
+          <Paragraph className="my-4">
             There are some controls that you might not know about, so here's a
             short list of them.
-          </p>
-
-          <h3>Life counter</h3>
-          <ul>
+          </Paragraph>
+          <h3 className="text-lg font-bold mb-2">Life counter</h3>
+          <ul className="list-disc ml-6 mb-4">
             <li>
               <strong>Tap</strong> on a player's + or - button to add or
               subtract <strong>1 life</strong>.
@@ -32,8 +33,10 @@ export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => {
             </li>
           </ul>
 
-          <h3>Commander damage and other counters</h3>
-          <ul>
+          <h3 className="text-lg font-bold mb-2">
+            Commander damage and other counters
+          </h3>
+          <ul className="list-disc ml-6 mb-4">
             <li>
               <strong>Tap</strong> on the counter to add{' '}
               <strong>1 counter</strong>.
@@ -44,33 +47,21 @@ export const InfoModal = ({ isOpen, closeModal }: InfoModalProps) => {
             </li>
           </ul>
 
-          <h3>Other</h3>
-          <p>
+          <h3 className="text-lg font-bold mb-2">Other</h3>
+          <Paragraph className="mb-4">
             When a player is <strong>at or below 0 life</strong>, has taken{' '}
             <strong>21 or more Commander Damage</strong> or has{' '}
             <strong>10 or more poison counters</strong>, a button with a skull
-            will appear on that player's card.
-          </p>
-          <p>
-            Tap on the button to mark that player as lost, dimming their player
+            will appear on that player's card. Tapping it will dim the player's
             card.
-          </p>
+          </Paragraph>
         </div>
-        <br />
-        <div
-          style={{
-            textAlign: 'center',
-            marginTop: '1rem',
-          }}
-        >
+        <div className="text-center mt-4">
           Visit my
           <a
             href="https://github.com/Vikeo/LifeTrinket"
             target="_blank"
-            style={{
-              textDecoration: 'none',
-              color: theme.palette.primary.light,
-            }}
+            className="text-text-secondary underline"
           >
             {' '}
             GitHub{' '}