formatting

client/src/components/cardHolder.js

@@ -3,13 +3,15 @@ import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 
 export default function CardHolder(props) {
-
     return(
         <Container fluid className="bg-dark">
+
             <Row className="d-flex flex-row justify-content-center align-items-center py-3">
+                
                 {props.children}
+            
             </Row>
+
         </Container>
     );
-
 }

client/src/components/characterCard.js

@@ -10,27 +10,44 @@ export default function CharacterCard(props) {
     const lastEpisode = props.character.lastEpisode;
     
     return(
-
         <Card style={{ width: '22rem' }} className='p-1 m-3'>
+            
             <Card.Img variant='top' src={image} width='100%' />
+            
             <Card.Body>
+                
                 <Card.Title>{characterName}</Card.Title>
+                
                 <Card.Text>
+                    
                     <Table>
+                        
                         <tbody>
+                            
                             <tr>
+                                
                                 <td className='fw-bold'>First Episode:</td>
+                                
                                 <td>{firstEpisode}</td>
+                            
                             </tr>
+                            
                             <tr>
+                                
                                 <td className='fw-bold'>Last Episode:</td>
+                                
                                 <td>{lastEpisode}</td>
+                            
                             </tr>
+                        
                         </tbody>
+                    
                     </Table>
+                
                 </Card.Text>
+            
             </Card.Body>
+        
         </Card>
-
     );
 }

client/src/components/footer.js

@@ -1,7 +1,9 @@
 import React from 'react';
+
 import { Github } from 'react-bootstrap-icons';
 import { Globe } from 'react-bootstrap-icons';
 import { Envelope } from 'react-bootstrap-icons';
+
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
@@ -17,9 +19,13 @@ export default function Footer() {
                 <Row>
 
                     <Col className='text-start'>
+
                         <span>
+
                             <span className='highlight'>criminal</span>mindsapi &#169; 2022
+                        
                         </span>
+
                     </Col>
 
                     <Col className='text-end'>

client/src/components/greeting.js

@@ -4,7 +4,6 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 
 export default function Greeting() {
-
     return (
         <Container>
 
@@ -34,5 +33,4 @@ export default function Greeting() {
             
         </Container>
     );
-
 }

client/src/components/loading.js

@@ -5,11 +5,13 @@ import Col from 'react-bootstrap/Col';
 import { TailSpin } from 'react-loading-icons';
 
 export default function Loading() {
-
     return (
         <Container className='m-auto'>
+
             <Row>
+
                 <Col className='text-center'>
+
                     <TailSpin
                         height='3em'
                         fill='#912718'
@@ -19,10 +21,13 @@ export default function Loading() {
                         strokeOpacity={1}
                         strokeWidth={2}
                     />
+
                      <div className='mt-2'>Loading...</div>
+
                 </Col>
+
             </Row>
+
         </Container>
     );
-
 }

client/src/components/navbar.js

@@ -5,7 +5,6 @@ import { NavLink } from 'react-router-dom';
 import Container from 'react-bootstrap/Container';
 
 export default function NavBar() {
-
     return (
         <Navbar
             expand='sm'
@@ -62,5 +61,4 @@ export default function NavBar() {
             
         </Navbar>
     )
-
 }