feat(footer): Updated footer with new information

src/components/footer/footer.css

@@ -1,13 +1,63 @@
-#footer{
-    width: 100%;
-    max-height: 50px;
-    min-height: 50px;
-    background-color: var(--main-color);
-    display: flex;
+#footer {
+  width: 100%;
+  /*max-height: 50px;*/
+  /*min-height: 50px;*/
+  background-color: var(--main-color);
+  /*display: flex;
     justify-content: center;
-    align-items: center;
+    align-items: center;*/
+  padding: 1em;
 }
-#footer a{
-    color: white;
-    font-weight: 400;
-}
+#footer a {
+  color: white;
+  font-size: 16px;
+  text-decoration: underline white;
+}
+#footer ul {
+  margin: 0px;
+  list-style-type: lower-roman;
+  display: grid;
+}
+#footer li {
+  display: inline;
+  margin-left: 1em;
+  word-break: break-all;
+}
+#footer li b {
+  margin-right: 1em;
+}
+.footer-section {
+  text-align: start;
+  color: white;
+  margin-top: 15px;
+}
+.footer-section .section-tittle {
+  color: white;
+  font-weight: bold;
+  font-size: 17px;
+  margin-bottom: 6px;
+}
+/* .footer-section div{
+  width: fit-content;
+  float: right;
+} */
+
+#footer ul li::before {
+  content: "\2022";
+  color: white;
+  display: inline-block;
+  margin-right: 10px;
+  font-size: 25px;
+  line-height: 15px;
+  vertical-align: -6px;
+}
+#footer svg {
+  margin-right: 5px;
+}
+ ul #web span{
+  margin-right: 3.5px;
+}
+ul #tor span{
+  margin-right: 9px;
+}
+ 

src/components/footer/index.js

@@ -1,12 +1,105 @@
 import React from "react"
 import "./footer.css"
+import { Row, Col } from "adminlte-2-react"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faGithub } from "@fortawesome/free-brands-svg-icons"
+
 class Footer extends React.Component {
   render() {
     return (
       <section id="footer">
+        <Row className="footer-container">
+          <Col md={5} className="footer-section">
+            <Row>
+              <Col md={12} className="mb-1">
+                <p className="section-tittle">Produced By</p>
+
+                <a
+                  href="https://psfoundation.cash/"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Permissionless Software Foundation
+                </a>
+              </Col>
+              <Col md={12}>
+                <p className="section-tittle">Source Code</p>
+                <FontAwesomeIcon className="" size="md" icon={faGithub} />
+                <a
+                  href="https://github.com/Permissionless-Software-Foundation/gatsby-ipfs-web-wallet"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Github
+                </a>
+              </Col>
+            </Row>
+          </Col>
+          <Col md={7} className="footer-section">
+            <div className="pull-right">
+              <span className="section-tittle">
+                Ways to access this web-app
+              </span>
+              <ul>
+                <li id="web">
+                  <span>
+                    <b>Web</b>
+                  </span>
+                  <b>|</b>
+                  <a href="https://wallet.fullstack.cash">
+                    wallet.fullstack.cash
+                  </a>
+                </li>
+
+                <li id="tor">
+                <span>
+                    <b>Tor</b>
+                  </span>
+                  <b>|</b>
+                  <a href="http://puh2fyj2ly5b4p5m.onion/">
+                    puh2fyj2ly5b4p5m.onion
+                  </a>
+                </li>
+
+                <li id="ipfs">
+                <span>
+                    <b>IPFS</b>
+                  </span>
+                  <b>|</b>
+                  <a href="https://ipfs.io/ipfs/QmTMpYt66SGSjckXTHF6bPip6h1V5fXT23tEUJgy7pyTkf/">
+                    QmTMpYt66SGSjckXTHF6bPip6h1V5fXT23tEUJgy7pyTkf
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </Col>
+        </Row>
+        {/*   <center>
         <a href="https://psfoundation.cash/" target="_blank" rel="noreferrer">
           Produced by the Permissionless Software Foundation
         </a>
+
+        <br /><br />
+        <p>Ways to access this web-app:</p>
+        <ul>
+          <li>
+            Web: <a href="https://wallet.fullstack.cash">wallet.fullstack.cash</a>
+          </li>
+
+          <li>
+            Tor: <a href="http://puh2fyj2ly5b4p5m.onion/">puh2fyj2ly5b4p5m.onion</a>
+          </li>
+
+          <li>
+            IPFS: <a href="https://ipfs.io/ipfs/QmTMpYt66SGSjckXTHF6bPip6h1V5fXT23tEUJgy7pyTkf/">QmTMpYt66SGSjckXTHF6bPip6h1V5fXT23tEUJgy7pyTkf</a>
+          </li>
+        </ul>
+        <br />
+
+        <a href="https://github.com/Permissionless-Software-Foundation/gatsby-ipfs-web-wallet" target="_blank" rel="noreferrer">
+          Source Code
+        </a>
+        </center> */}
       </section>
     )
   }

src/components/layout.css

@@ -722,4 +722,11 @@ pre tt:after {
   font-size: 12px;
   font-weight: 800;
   margin-top: 8px;
+}
+@media screen and (max-width: 500px) {
+  .version-status {
+    width: 80%;
+    left: calc(42% - 30%) ;
+
+  }
 }

src/components/layout.js

@@ -10,9 +10,9 @@ import PropTypes from "prop-types"
 //import { useStaticQuery, graphql } from "gatsby"
 
 //import Header from "./header"
-import Footer from './footer'
 import "./app-colors.css"
 import "./layout.css"
+import Footer from './footer'
 
 const Layout = ({ children }) => {
 /*   const data = useStaticQuery(graphql`