diff --git a/src/components/Root.js b/src/components/Root.js
index ac3afa2..e78be27 100644
--- a/src/components/Root.js
+++ b/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 */}
-
-
+
+
+ Hover on icons above for commands
+
+
+
diff --git a/src/components/root.less b/src/components/root.less
index ca3c193..baa8d9a 100644
--- a/src/components/root.less
+++ b/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;
+}