cleaning up tool tip card and instructions

src/components/Root.js

@@ -8,6 +8,8 @@ import TipCard from './TipCard';
 import MainCommand from './MainCommand';
 import AvailableCommandsIcons from './AvailableCommandsIcons';
 
+import { Typography, Card, CardContent } from '@material-ui/core';
+
 function getRandomInt(max) {
   return Math.floor(Math.random() * Math.floor(max));
 }
@@ -23,12 +25,21 @@ const Root = props => {
       {/* Toast for notifications */}
 
       <div className={styles.mainCont}>
-        <TipCard />
-
         <MainCommand />
 
         <AvailableCommandsIcons />
 
+        <Card className={styles.directionsCard}>
+          <Typography
+            variant="overline"
+            align="left"
+            component="h1"
+            color="primary"
+          >
+            Hover on icons above for commands
+          </Typography>
+        </Card>
+
         <img className={styles.backgroundImage} src={bgImg} />
       </div>
 

src/components/root.less

@@ -18,6 +18,8 @@
 
   .searchCont {
     display: flex;
+    flex: 1;
+    width: 100%;
     justify-content: center;
     align-items: center;
 
@@ -46,6 +48,8 @@
       flex: 1;
       border-radius: 0.4rem;
       margin: 0 10px;
+
+      max-width: 40px;
     }
     .searchBar {
       display: block;
@@ -61,8 +65,11 @@
       border-radius: 0.4rem;
       transition: box-shadow var(--transitionDuration);
       box-shadow: 0 0 8px #666;
-      width: 400px;
+
+      width: 100%;
       height: 40px;
+      max-width: 600px;
+
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
         Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 
@@ -95,7 +102,8 @@
 
   .availableCommandsIconsCont {
     display: flex;
-
+    flex-direction: row;
+    flex-wrap: wrap;
     position: fixed;
     bottom: 3em;
 
@@ -129,3 +137,8 @@
 .malTooltip {
   font-size: 3em !important;
 }
+
+.directionsCard {
+  padding: 5px 10px;
+  margin-bottom: 5px;
+}