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 */}
+
+
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 =
•;
+
+ return (
+
+
+
+ Commands
+
+
+
+ Google
+
+
+ By default, any search + enter button will search on Google.
+
+
+
+ Gmail
+
+
+ Type in the command 'gmail' and follow instructions to send a quick
+ email.
+
+
+
+ Youtube
+
+
+ Type in 'ubute' and it will go straight to the search
+
+
+
+
+
+ Backspace to get rid of activated command.
+
+
+
+ );
+};
+
+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;
}