Fix header and UI elements

gatsby-config.js

@@ -1,7 +1,7 @@
 module.exports = {
   siteMetadata: {
-    title: `Ionic v4 CheatSheet`,
-    description: `An Ionic Framework v4 CheatSheet`,
+    title: `ion-cheat-sheet`,
+    description: `An Ionic Framework v4 Cheat Sheet`,
     author: `@anagstef`,
   },
   plugins: [
@@ -19,16 +19,14 @@ module.exports = {
       resolve: `gatsby-plugin-manifest`,
       options: {
         name: `ion-cheat-sheet`,
-        short_name: `ioncss`,
+        short_name: `ion-cheat-sheet`,
         start_url: `/`,
-        background_color: `#663399`,
-        theme_color: `#663399`,
+        background_color: `#4d8dff`,
+        theme_color: `#4d8dff`,
         display: `minimal-ui`,
-        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
+        icon: `src/images/ionic-icon.png`, // This path is relative to the root of the site.
       },
     },
-    // this (optional) plugin enables Progressive Web App + Offline functionality
-    // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,
     `gatsby-plugin-netlify`
   ],

src/components/header.css

@@ -0,0 +1,33 @@
+header{
+  background: #4d8dff;
+  margin-bottom: 1.45rem;
+}
+
+header .header-container{
+  margin: 0 auto;
+  max-width: 960px;
+  padding: 1.45rem 1.0875rem;
+  color: white;
+  display: flex;
+}
+
+header h1{
+  margin: 0;
+}
+
+header h5{
+  margin: 0;
+  font-style: italic;
+  margin-top: 5px;
+}
+
+.ionic-logo {
+  width: 70px;
+  height: 70px;
+}
+
+.header-container img{
+  filter: brightness(100);
+  margin: 0;
+  margin-right: 30px;
+}

src/components/header.js

@@ -1,42 +1,28 @@
-import { Link } from "gatsby"
 import PropTypes from "prop-types"
 import React from "react"
+import './header.css'
+import IonicLogo from '../images/ionic-icon.png'
 
-const Header = ({ siteTitle }) => (
-  <header
-    style={{
-      background: `#4d8dff`,
-      marginBottom: `1.45rem`,
-    }}
-  >
-    <div
-      style={{
-        margin: `0 auto`,
-        maxWidth: 960,
-        padding: `1.45rem 1.0875rem`,
-      }}
-    >
-      <h1 style={{ margin: 0 }}>
-        <Link
-          to="/"
-          style={{
-            color: `white`,
-            textDecoration: `none`,
-          }}
-        >
-          {siteTitle}
-        </Link>
-      </h1>
+const Header = ({ siteTitle, siteSubtitle }) => (
+  <header>
+    <div className="header-container">
+      <img src={IonicLogo} className="ionic-logo" />
+      <div className="header-title-text">
+        <h1>{siteTitle}</h1>
+        <h5>{siteSubtitle}</h5>
+      </div>
     </div>
   </header>
 )
 
 Header.propTypes = {
   siteTitle: PropTypes.string,
+  siteSubtitle: PropTypes.string,
 }
 
 Header.defaultProps = {
   siteTitle: ``,
+  siteSubtitle: ``,
 }
 
 export default Header

src/components/layout.js

@@ -19,13 +19,14 @@ const Layout = ({ children }) => (
         site {
           siteMetadata {
             title
+            description
           }
         }
       }
     `}
     render={data => (
       <>
-        <Header siteTitle={data.site.siteMetadata.title} />
+        <Header siteTitle={data.site.siteMetadata.title} siteSubtitle={data.site.siteMetadata.description} />
         <div
           style={{
             margin: `0 auto`,

src/components/searchbar.js

@@ -20,14 +20,14 @@ class Searchbar extends React.Component {
         </div>
         <div className="checkboxes">
           <div>
-            <input type="checkbox" name="option1" value="CSS" /><label htmlFor="option1">CSS Vars</label>
+            <input type="checkbox" name="option1" value="CSS" checked /><label htmlFor="option1">CSS Vars</label>
           </div>
-          <div>
+          {/* <div>
             <input type="checkbox" name="option2" value="Methods" /><label htmlFor="option2">Methods</label>
           </div>
           <div>
             <input type="checkbox" name="option3" value="Properties" /><label htmlFor="option3">Properties</label>
-          </div>
+          </div> */}
         </div>
       </div>
     );

src/pages/index.js

@@ -17,13 +17,22 @@ class IndexPage extends React.Component {
   render() {
     return (
       <Layout>
-        <SEO title="Ionic 4 CheatSheet" keywords={[`ionic`, `cheatsheet`, `angular`, `css`]} />
+        <SEO title="ion-cheat-sheet - Ionic 4 Cheat Sheet" keywords={[`ionic`, `cheatsheet`, `angular`, `css`, `react`, `vue`, `stencil`, `web components`]} />
         <Searchbar />
         {this.state.pageContext.downloadedContent.map(content => {
           if (content.cssVars.length < 1 || !content.title.includes(this.props.search || '')) return null;
           return <ListItem content={content} key={content.title} />
         })}
-        <p>{this.state.pageContext.buildDate}</p>
+        <div style={{ display: 'flex', justifyContent: 'flex-end', fontSize: '14px', fontStyle: 'italic' }}>
+          <span style={{ width: '70%', textAlign: 'right' }}>
+            Last update from
+            {` `}
+            <a href="https://ionicframework.com" target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'unset', color: '#4d8dff'}}>Ionic Framework Docs</a>
+            {` `}
+            was on {this.state.pageContext.buildDate}.
+          </span>
+        </div>
+
       </Layout>
     );
   }