slight changes to ui

src/components/Root.js

@@ -4,6 +4,7 @@ import styles from './root.less';
 
 import backgroundImage from '../assets/images/mainbg.jpg';
 
+import TipCard from './TipCard';
 import MainCommand from './MainCommand';
 import AvailableCommandsIcons from './AvailableCommandsIcons';
 
@@ -13,6 +14,8 @@ const Root = props => {
       {/* Toast for notifications */}
 
       <div className={styles.mainCont}>
+        <TipCard />
+
         <MainCommand />
 
         <AvailableCommandsIcons />

src/components/TipCard.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import styles from './root.less';
+
+const envVars = require('config');
+
+import {
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  Typography
+} from '@material-ui/core';
+
+const TipCard = props => {
+  const bull = <span>•</span>;
+
+  return (
+    <Card className={styles.tipCard}>
+      <CardContent>
+        <Typography color="textSecondary" gutterBottom>
+          Commands
+        </Typography>
+
+        <Typography variant="h6" component="h2">
+          Google
+        </Typography>
+        <Typography variant="body2" component="p">
+          By default, any search + enter button will search on Google.
+        </Typography>
+
+        <Typography variant="h6" component="h2">
+          Gmail
+        </Typography>
+        <Typography variant="body2" component="p">
+          Type in the command 'gmail' and follow instructions to send a quick
+          email.
+        </Typography>
+
+        <Typography variant="h6" component="h2">
+          Youtube
+        </Typography>
+        <Typography variant="body2" component="p">
+          Type in 'ubute' and it will go straight to the search
+        </Typography>
+
+        <br />
+
+        <Typography variant="body2" component="i">
+          Backspace to get rid of activated command.
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default TipCard;

src/components/root.less

@@ -3,9 +3,19 @@
   overflow: hidden;
   flex: 1;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
 
+  .tipCard {
+    position: absolute;
+    top: 20px;
+    margin: 1em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
   .searchCont {
     display: flex;
     justify-content: center;
@@ -102,7 +112,7 @@
     top: 0;
     width: 100%;
     height: 100%;
-    opacity: 0.7;
+    opacity: 0.5;
 
     z-index: -1;
   }