move the footer component to the settings page

Author: medyo

src/App.js

@@ -1,7 +1,7 @@
 import React, { Suspense, useEffect, useLayoutEffect, useState } from 'react'
 import 'react-contexify/dist/ReactContexify.css'
 import 'src/assets/App.css'
-import { Footer, Header } from 'src/components/Layout'
+import { Header } from 'src/components/Layout'
 import { BookmarksSidebar } from 'src/features/bookmarks'
 import { MarketingBanner } from 'src/features/MarketingBanner'
 import { setupAnalytics, setupIdentification, trackPageView } from 'src/lib/analytics'
@@ -59,8 +59,6 @@ function App() {
         <ScrollCardsNavigator />
         <AppContentLayout setShowSettings={setShowSettings} />
         <BookmarksSidebar showSidebar={showSideBar} onClose={() => setShowSideBar(false)} />
-
-        <Footer />
       </div>
     </>
   )

src/assets/App.css

@@ -67,16 +67,16 @@ a {
 }
 
 .AppFooter {
-  flex: 0 0 auto;
+  display: flex;
   flex-direction: row;
-  text-align: right;
-  margin-top: 12px;
+  justify-content: center;
+  align-items: center;
+  margin-top: 24px;
 }
 .AppFooter .linkItem {
   font-size: 12px;
   color: var(--primary-text-color);
   text-decoration: none;
-  text-transform: uppercase;
   margin-right: 12px;
   cursor: pointer;
   display: inline-flex;
@@ -92,7 +92,7 @@ a {
 .AppContent {
   position: relative;
   overflow-y: hidden;
-  padding-bottom: 12px;
+  padding: 12px 0;
 }
 .Cards {
   padding: 1%;
@@ -102,6 +102,7 @@ a {
   position: relative;
   overflow-y: hidden;
   scroll-snap-type: x mandatory;
+  scroll-padding-left: 12px;
 }
 .HorizontalScroll {
   -ms-overflow-style: none;
@@ -198,7 +199,7 @@ a {
   border-radius: 10px;
   overflow: hidden;
   flex-direction: column;
-  height: 78vh;
+  height: 82vh;
   width: 10vw;
   flex: 0 0 auto;
   scroll-snap-align: start;
@@ -210,7 +211,7 @@ a {
   flex-direction: column;
   overflow-x: hidden;
   scroll-snap-type: y mandatory;
-  height: calc(80vh - 1% - 46px);
+  height: calc(86vh - 1% - 46px);
 }
 
 .scrollable {
@@ -253,7 +254,6 @@ a {
   font-size: 16px;
   padding-top: 16px;
   padding-bottom: 8px;
-  cursor: pointer;
   position: relative;
 }
 
@@ -291,7 +291,7 @@ a {
   z-index: 1;
   cursor: grab;
   display: none;
-  color: var(--card-action-button-color);
+  color: #96a2ae;
   font-size: 24px;
 }
 
@@ -489,7 +489,7 @@ a {
   flex-direction: row;
   flex-wrap: wrap;
   gap: 4px;
-  margin-top: 12px;
+  margin-top: 24px;
 }
 
 .tag {

src/components/Layout/Footer.tsx

@@ -1,16 +1,11 @@
-import React from 'react'
-import {
-  repository,
-  supportLink,
-  privacyPolicyLink,
-  termsAndConditionsLink,
-  dataSourcesLink,
-} from 'src/config'
-import { RiCodeSSlashFill } from 'react-icons/ri'
 import { HiLightBulb } from 'react-icons/hi'
+import { RiCodeSSlashFill } from 'react-icons/ri'
+import { privacyPolicyLink, repository, supportLink, termsAndConditionsLink } from 'src/config'
 import { trackPageView } from 'src/lib/analytics'
+import { getAppVersion } from 'src/utils/Os'
 
 export const Footer = () => {
+  const appVersion = getAppVersion()
   return (
     <footer className="AppFooter">
       <a className="linkItem" href={supportLink} onClick={() => trackPageView('Feature Request')}>
@@ -34,9 +29,16 @@ export const Footer = () => {
         onClick={() => trackPageView('Privacy Policy')}>
         Privacy policy
       </a>
-      <a className="linkItem" href={dataSourcesLink} onClick={() => trackPageView('Data Sources')}>
-        Data sources
-      </a>
+      {appVersion && (
+        <a
+          className="linkItem"
+          href={repository}
+          target="_blank"
+          rel="noreferrer"
+          onClick={() => trackPageView('Source Code')}>
+          v{appVersion}
+        </a>
+      )}
     </footer>
   )
 }

src/features/settings/components/SettingsModal.tsx

@@ -4,6 +4,7 @@ import ReactModal from 'react-modal'
 import Select, { ActionMeta, MultiValue, SingleValue } from 'react-select'
 import Toggle from 'react-toggle'
 import 'react-toggle/style.css'
+import { Footer } from 'src/components/Layout'
 import { SUPPORTED_CARDS, SUPPORTED_SEARCH_ENGINES, supportLink } from 'src/config'
 import { Tag, useRemoteConfigStore } from 'src/features/remoteConfig'
 import {
@@ -259,6 +260,7 @@ export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalPr
             </p>
           </div>
         </div>
+        <Footer />
       </div>
     </ReactModal>
   )