Merge pull request #4 from SunDr17/theming

Add footer and theming functionality
SunDr17 · Jan 23, 2024 · 6f6b110 · 6f6b110
2 parents 4d028f4 + 3692282
commit 6f6b110
Show file tree

Hide file tree

Showing 24 changed files with 139 additions and 65 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "react-router-bootstrap": "^0.26.2",
     "react-scripts": "5.0.1",
     "react-svg": "^16.1.32",
+    "sass": "^1.70.0",
     "viem": "^2.4.0",
     "wagmi": "^2.3.1",
     "web-vitals": "^2.1.4"

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/images/icons/github.svg b/public/images/icons/github.svg
diff --git a/public/images/icons/telegram.svg b/public/images/icons/telegram.svg
diff --git a/public/images/icons/twitter-x.svg b/public/images/icons/twitter-x.svg
diff --git a/public/images/icons/whitepaper.svg b/public/images/icons/whitepaper.svg
diff --git a/public/index.html b/public/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="PetsROI P2E Game"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>PetsROI</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "PetsROI",
+  "name": "PetsROI P2E Game",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/src/App.test.tsx b/src/App.test.tsx
diff --git a/src/App.tsx b/src/App.tsx
@@ -3,14 +3,16 @@ import React from 'react';
 import Header from '@/components/common/Header';
 import Modal from '@/components/common/Modal';
 import Routes from '@/routes/Routes';
+import Footer from '@/components/common/Footer';
 
 function App() {
   return (
-    <div className="App">
+    <div className="App d-flex flex-column min-vh-100">
       <Header />
       <div className="main p-4">
         <Routes />
       </div>
+      <Footer />
       <Modal />
     </div>
   );

diff --git a/src/components/common/Footer/index.tsx b/src/components/common/Footer/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import Navbar from 'react-bootstrap/Navbar';
+import Nav from 'react-bootstrap/Nav';
+import Container from 'react-bootstrap/Container';
+import { LinkContainer } from 'react-router-bootstrap';
+
+import config from '@/config';
+import Icon from '@/components/common/Icon';
+
+export default function Footer() {
+  const { t } = useTranslation();
+
+  return (
+    <footer className="border-top mt-auto">
+      <Navbar>
+        <Container>
+          <Nav className="m-auto flex-wrap">
+            <LinkContainer to="/">
+              <Nav.Link>{t('inventory')}</Nav.Link>
+            </LinkContainer>
+            <LinkContainer to="/shop">
+              <Nav.Link>{t('header.shop')}</Nav.Link>
+            </LinkContainer>
+            <LinkContainer to="/ref_program">
+              <Nav.Link>{t('ref_program')}</Nav.Link>
+            </LinkContainer>
+          </Nav>
+          <Nav>
+            {Object.keys(config.socialLinks).map((social) => (
+              <Nav.Link href={config.socialLinks[social]} target="_blank"><Icon name={social} /></Nav.Link>
+            ))}
+          </Nav>
+        </Container>
+      </Navbar>
+    </footer>
+  );
+}
diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx
@@ -35,9 +35,6 @@ export default function Header() {
             <LinkContainer to="/shop">
               <Nav.Link>{t('header.shop')}</Nav.Link>
             </LinkContainer>
-            <LinkContainer to="/ref_program">
-              <Nav.Link>{t('ref_program')}</Nav.Link>
-            </LinkContainer>
           </Nav>
           <Nav>
             <ConnectWallet />

diff --git a/src/components/common/Icon.tsx b/src/components/common/Icon.tsx
@@ -0,0 +1,17 @@
+import React, { memo } from 'react';
+
+type Props = {
+  className?: string;
+  name?: string;
+  url?: string;
+};
+
+function Icon({ className = 'icon', name, url }: Props) {
+  return (name || url) ? (
+    <i className={className}>
+      <img alt="icon" src={name ? process.env.PUBLIC_URL + `/images/icons/${name}.svg` : url}></img>
+    </i>
+  ) : null;
+}
+
+export default memo(Icon);
diff --git a/src/components/common/MiniCard/MiniCard.tsx b/src/components/common/MiniCard/MiniCard.tsx
@@ -21,15 +21,13 @@ export default function MiniCard({ item }: { item: Item }) {
             ? <FilledSvg
               src={item.imageSrc}
               color={item.color || item.defaultColor}
-              height={100}
               width={100}
             />
             : <Card.Img
               bsPrefix="card-img-top pt-2"
               variant="top"
               src={item.imageSrc}
               width={100}
-              height={100}
             />
           }
         </div>

diff --git a/src/config.ts b/src/config.ts
@@ -13,4 +13,10 @@ export default {
     150000: 3,
   } as { [index: string]: number },
   cycleDuration: 24 * 60 * 60 * 1000,
+  socialLinks: {
+    'twitter-x': 'https://twitter.com/',
+    telegram: 'https://t.me/CrypTime_Channel',
+    github: 'https://github.com',
+    whitepaper: 'https://ethereum.org/en/whitepaper',
+  } as { [index: string]: string },
 };
diff --git a/src/index.css b/src/index.css
diff --git a/src/index.tsx b/src/index.tsx
@@ -5,14 +5,12 @@ import { Provider } from 'react-redux';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { WagmiProvider } from 'wagmi';
 
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-import store from './store/index';
-import './services/i18n';
-import { wagmiConfig } from './services/web3/wagmiConfig';
+import App from '@/App';
+import store from '@/store/index';
+import '@/services/i18n';
+import { wagmiConfig } from '@/services/web3/wagmiConfig';
 
-import 'bootstrap/dist/css/bootstrap.min.css';
-import './index.css';
+import '@/styles/theme.scss';
 
 const queryClient = new QueryClient();
 
@@ -32,8 +30,3 @@ root.render(
     </Provider>
   </React.StrictMode>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts
diff --git a/src/setupTests.ts b/src/setupTests.ts
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
@@ -0,0 +1,5 @@
+// Override default variables before the import
+// https://getbootstrap.com/docs/5.3/customize/sass/#variable-defaults
+
+// Import Bootstrap and its default variables
+@import 'bootstrap';