From 2d1d15eb7db06a946d992d762434857ad5e911a7 Mon Sep 17 00:00:00 2001
From: Thrishank <86158204+thrishank@users.noreply.github.com>
Date: Wed, 13 Mar 2024 21:06:06 +0530
Subject: [PATCH] Fix: Ensure Footer Visibility on Smaller Screens (#489)

### Summary
#468 Issue
This pull request addresses an issue where the footer was not rendering
on smaller screens due to the d-none class. The visibility of the footer
is crucial for providing a seamless user experience across different
devices.

### Changes Made
- Removed the d-none class from the div in the footer folder index file,
enabling the footer to be visible on smaller screens.

### Why
The d-none class was unintentionally hiding the footer on smaller
screens, affecting the overall user experience. This change ensures
consistent visibility across all screen sizes. The d-none class in
Bootstrap is a utility class that sets an element to display: none!
important;, effectively hiding it.

### ScreenShots
**before**
![Screenshot 2024-02-25
163600](https://github.com/apertium/apertium-html-tools/assets/86158204/1d59046e-2041-436d-9986-f10baf35dce9)
**After**
![Screenshot 2024-02-25
163441](https://github.com/apertium/apertium-html-tools/assets/86158204/e115ded4-47ce-428e-b7fc-702ad2125242)

- Tested on various devices and screen sizes.
- Ensured the removal of the d-none class did not introduce any
unintended side effects.

This PR is ready for review. Your feedback is appreciated!
---
 .../footer/__tests__/index.test.tsx           |  2 +-
 src/components/footer/index.tsx               | 62 ++++++++++---------
 2 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/src/components/footer/__tests__/index.test.tsx b/src/components/footer/__tests__/index.test.tsx
index 10cb9fcdb..35ef28845 100644
--- a/src/components/footer/__tests__/index.test.tsx
+++ b/src/components/footer/__tests__/index.test.tsx
@@ -108,7 +108,7 @@ describe('Footer', () => {
     it('opens about dialog on desktop', () => {
       renderFooter();
 
-      userEvent.click(screen.getAllByRole('button', { name: 'Help_Improve-Default' })[1]);
+      userEvent.click(screen.getAllByRole('button', { name: 'Help_Improve-Default' })[0]);
 
       expect(screen.getByRole('dialog').textContent).toMatchInlineSnapshot(
         `"About_Apertium-Default×CloseWhat_Is_Apertium-DefaultApertium-Default"`,
diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
index 5998f155c..41d0102f9 100644
--- a/src/components/footer/index.tsx
+++ b/src/components/footer/index.tsx
@@ -38,27 +38,37 @@ const FooterNav_ = ({
   const { t } = useLocalization();
 
   return (
-    <Nav as="ul" className="p-0" role="navigation" style={{ cursor: 'pointer' }} variant="pills">
-      <Nav.Item as="li">
-        <Nav.Link className="footer-link" onClick={() => setOpenTab(Tab.About)}>
-          <FontAwesomeIcon icon={faQuestionCircle} /> {t('About')}
-        </Nav.Link>
-      </Nav.Item>
-      <Nav.Item as="li">
-        <Nav.Link className="footer-link" onClick={() => setOpenTab(Tab.Download)}>
-          <FontAwesomeIcon icon={faDownload} /> {t('Download')}
-        </Nav.Link>
-      </Nav.Item>
-      <Nav.Item as="li">
-        <Nav.Link className="footer-link" onClick={() => setOpenTab(Tab.Documentation)}>
-          <FontAwesomeIcon icon={faBook} /> {t('Documentation')}
-        </Nav.Link>
-      </Nav.Item>
-      <Nav.Item as="li">
-        <Nav.Link className="footer-link" onClick={() => setOpenTab(Tab.Contact)}>
-          <FontAwesomeIcon icon={faEnvelope} /> {t('Contact')}
-        </Nav.Link>
-      </Nav.Item>
+    <Nav
+      as="ul"
+      className="p-2 flex-column flex-md-row"
+      role="navigation"
+      style={{ cursor: 'pointer' }}
+      variant="pills"
+    >
+      <div className="d-flex justify-content-between">
+        <Nav.Item as="li">
+          <Nav.Link className="footer-link" onClick={() => setOpenTab(Tab.About)}>
+            <FontAwesomeIcon icon={faQuestionCircle} /> {t('About')}
+          </Nav.Link>
+        </Nav.Item>
+        <Nav.Item as="li">
+          <Nav.Link className="footer-link" onClick={() => setOpenTab(Tab.Download)}>
+            <FontAwesomeIcon icon={faDownload} /> {t('Download')}
+          </Nav.Link>
+        </Nav.Item>
+      </div>
+      <div className="d-flex justify-content-between">
+        <Nav.Item as="li">
+          <Nav.Link className="footer-link" onClick={() => setOpenTab(Tab.Documentation)}>
+            <FontAwesomeIcon icon={faBook} /> {t('Documentation')}
+          </Nav.Link>
+        </Nav.Item>
+        <Nav.Item as="li">
+          <Nav.Link className="footer-link" onClick={() => setOpenTab(Tab.Contact)}>
+            <FontAwesomeIcon icon={faEnvelope} /> {t('Contact')}
+          </Nav.Link>
+        </Nav.Item>
+      </div>
     </Nav>
   );
 };
@@ -95,7 +105,7 @@ const Footer = ({
     <>
       <div className="d-flex flex-column container" ref={footerRef}>
         <div className="d-flex flex-column container">
-          <div className="d-none d-md-flex flex-wrap flex-row justify-content-between position-relative row">
+          <div className="d-md-flex flex-wrap flex-column flex-md-row justify-content-between position-relative row">
             <FooterNav setOpenTab={setOpenTab} />
 
             <div className="mb-4 d-flex flex-column">
@@ -106,7 +116,7 @@ const Footer = ({
                 </Button>
               </div>
               <a
-                className="text-muted d-none d-lg-block version align-self-end"
+                className="text-muted d-lg-block version align-self-end font-weigth-bold"
                 href="https://github.com/apertium/apertium-html-tools"
                 rel="noreferrer"
                 target="_blank"
@@ -115,12 +125,6 @@ const Footer = ({
               </a>
             </div>
           </div>
-          <div className="align-self-end card card-body d-block bg-light d-md-none my-2 p-2">
-            <span>{t('Notice_Mistake')}</span>{' '}
-            <Button className="p-0" onClick={() => setOpenTab(Tab.About)} tabIndex={0} variant="link">
-              {t('Help_Improve')}
-            </Button>
-          </div>
         </div>
       </div>