From b005ed0cd9ee9032a27d289a25964c1f3f00e4ea Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Mon, 19 Aug 2019 21:25:17 -0700
Subject: [PATCH] slight changes to ui

---
 src/components/Root.js    |  3 +++
 src/components/TipCard.js | 56 +++++++++++++++++++++++++++++++++++++++
 src/components/root.less  | 12 ++++++++-
 3 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 src/components/TipCard.js

diff --git a/src/components/Root.js b/src/components/Root.js
index 6028e44..1333e23 100644
--- a/src/components/Root.js
+++ b/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 />
diff --git a/src/components/TipCard.js b/src/components/TipCard.js
new file mode 100644
index 0000000..c87c3d0
--- /dev/null
+++ b/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;
diff --git a/src/components/root.less b/src/components/root.less
index 524b28a..19ee206 100644
--- a/src/components/root.less
+++ b/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;
   }