* Sort currencies

* Blog posts are now inside cards
* Footer is now at the bottom of the page

Author: CodeDead

src/components/Footer/index.jsx

@@ -20,7 +20,9 @@ const Footer = ({ facebookUrl, githubUrl, twitterUrl }) => {
   return (
     <BottomNavigation
       showLabels
-      style={{ marginTop: 20 }}
+      style={{
+        position: 'fixed', bottom: 0, width: '100%',
+      }}
     >
       <BottomNavigationAction
         icon={(

src/components/Layout/index.jsx

@@ -88,6 +88,7 @@ const Layout = ({ children }) => {
           </Button>
         </Alert>
       )}
+      <div style={{ marginBottom: 65 }} />
       <Footer
         facebookUrl={data.site.siteMetadata.facebook}
         githubUrl={data.site.siteMetadata.github}

src/pages/software/egld-price-calculator/index.jsx

@@ -1,7 +1,12 @@
 import React, { useContext, useEffect, useState } from 'react';
 import {
   Card,
-  Container, FormControl, InputLabel, MenuItem, Select, TextField,
+  Container,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  TextField,
 } from '@material-ui/core';
 import axios from 'axios';
 import Grid from '@material-ui/core/Grid';
@@ -47,7 +52,7 @@ const EgldPriceCalculator = () => {
 
     axios.get('https://api.coingecko.com/api/v3/simple/supported_vs_currencies')
       .then((res) => {
-        setSupportedCurrencies(res.data);
+        setSupportedCurrencies(res.data.sort((a, b) => a.localeCompare(b)));
       })
       .catch((err) => {
         setError(err);
@@ -207,7 +212,11 @@ const EgldPriceCalculator = () => {
                               >
                                 {item.toUpperCase()}
                               </MenuItem>
-                            )) : null}
+                            )) : (
+                              <MenuItem value="usd">
+                                USD
+                              </MenuItem>
+                            )}
                         </Select>
                       </FormControl>
                     </Grid>

src/templates/BlogTemplate/index.jsx

@@ -3,6 +3,8 @@ import Container from '@material-ui/core/Container';
 import { graphql } from 'gatsby';
 import Typography from '@material-ui/core/Typography';
 import Divider from '@material-ui/core/Divider';
+import { Card } from '@material-ui/core';
+import CardContent from '@material-ui/core/CardContent';
 import PageHeader from '../../components/PageHeader';
 import Layout from '../../components/Layout';
 import { MainContext } from '../../contexts/MainContextProvider';
@@ -38,16 +40,21 @@ const BlogTemplate = ({ data }) => {
         title={frontmatter.title}
       />
       <Container maxWidth="md">
-        <Typography variant="subtitle1" gutterBottom style={{ marginTop: 10 }}>
-          {frontmatter.author}
-          {' | '}
-          {frontmatter.date}
-          {' | '}
-          {frontmatter.categories}
-        </Typography>
+        <Card style={{ marginTop: 20 }}>
+          <CardContent>
+            <Typography gutterBottom>
+              {`${frontmatter.author} | ${frontmatter.date} | ${frontmatter.categories}`}
+            </Typography>
+            <Divider />
+            <Typography
+              variant="body2"
+              color="textSecondary"
+              component="p"
+              dangerouslySetInnerHTML={{ __html: html }}
+            />
+          </CardContent>
+        </Card>
         <Divider />
-        {/* eslint-disable-next-line react/no-danger */}
-        <div dangerouslySetInnerHTML={{ __html: html }} />
       </Container>
     </Layout>
   );