Merge pull request #79 from hellomuthu23/fix-footer

fix: fix footer
hellomuthu23 · Jul 6, 2023 · b9626fc · b9626fc
2 parents 9cbb549 + 32a0f93
commit b9626fc
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -9,7 +9,6 @@ import HomePage from './pages/HomePage/HomePage';
 import JoinPage from './pages/JoinPage/JoinPage';
 import { theme } from './service/theme';
 import { AboutPage } from './pages/AboutPage/AboutPage';
-import { Footer } from './components/Footer/Footer';
 import { ExamplesPage } from './pages/ExamplesPage/ExamplesPage';
 import { GuidePage } from './pages/GuidePage/GuidePage';
 
@@ -30,7 +29,6 @@ function App() {
               <Route path='/guide' component={GuidePage} />
               <Route exact path='/*' component={HomePage} />
             </Switch>
-            <Footer />
           </Router>
         </StylesProvider>
       </ThemeProvider>

diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css
@@ -3,7 +3,7 @@
 }
 
 .FooterContainer {
-  padding: 20px;
+  padding-top: 10px;
   display: flex;
   justify-content: space-evenly;
   align-items: center;

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -25,9 +25,19 @@ export const Footer = () => {
             </div>
 
             <Divider orientation='vertical' flexItem></Divider>
-            <Link href='https://github.com/hellomuthu23/planning-poker/issues'>
-              Submit an Issue
-            </Link>
+            <Link href='https://github.com/hellomuthu23/planning-poker/issues'>Submit an Issue</Link>
+            <Divider orientation='vertical' flexItem></Divider>
+            <div className='FooterItemContainer'>
+              <Typography color='textSecondary' variant='body2'>
+                <a href='https://www.buymeacoffee.com/hellomuthu23' target='_blank' rel='noreferrer'>
+                  <img
+                    src='https://cdn.buymeacoffee.com/buttons/v2/default-blue.png'
+                    alt='Buy Me A Coffee'
+                    style={{ height: '40px', width: '150px' }}
+                  />
+                </a>
+              </Typography>
+            </div>
           </div>
         </div>
       </Slide>

diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
@@ -8,6 +8,7 @@ import LandingImage from './../../images/background.jpg';
 import SessionControllerImage from './../../images/Session.jpg';
 import './HomePage.css';
 import { AboutPlanningPokerContent } from '../AboutPage/AboutPage';
+import { Footer } from '../../components/Footer/Footer';
 
 export const HomePage = () => {
   const isJoin = useRouteMatch('/join');
@@ -95,6 +96,7 @@ export const HomePage = () => {
         </Grid>
         <AboutPlanningPokerContent />
       </Grid>
+      <Footer />
     </>
   );
 };