major improvement with tool tips, reddit, and other things

dist/styles.css

@@ -1,10 +1,10 @@
 body {
-	margin: 0;
+  margin: 0;
-	padding: 0;
+  padding: 0;
 }
 
 #app {
-	display: flex;
+  display: flex;
-	justify-content: center;
+  justify-content: center;
-	min-height: 100vh;
+  min-height: 100vh;
 }

src/components/AvailableCommandsIcons.js

@@ -3,39 +3,67 @@ import styles from './root.less';
 
 const envVars = require('config');
 
+import { Tooltip } from '@material-ui/core';
+
 const AvailableCommandsIcons = props => {
   return (
     <div className={styles.availableCommandsIconsCont}>
-      {/* <img className={styles.icon} src={envVars.DEFAULT_LOGO} /> */}
+      {/* Google Search */}
-      <img
+      <Tooltip title="default search on google">
-        className={styles.icon}
+        <img className={styles.icon} src={envVars.DEFAULT_LOGO} />
-        src={'https://image.flaticon.com/icons/png/512/281/281769.png'}
+      </Tooltip>
-      />
+
-      <img
+      {/* Gmail */}
+      <Tooltip title="gmail">
+        <img
+          className={styles.icon}
+          src={'https://image.flaticon.com/icons/png/512/281/281769.png'}
+        />
+      </Tooltip>
+
+      {/* Reddit */}
+      <Tooltip title="red">
+        <img
+          className={styles.icon}
+          src={
+            'https://cdn0.iconfinder.com/data/icons/social-media-2092/100/social-36-512.png'
+          }
+        />
+      </Tooltip>
+
+      {/* Youtube */}
+      <Tooltip title="utube">
+        <img
+          className={styles.icon}
+          src={
+            'https://cdn2.iconfinder.com/data/icons/micon-social-pack/512/youtube-512.png'
+          }
+        />
+      </Tooltip>
+
+      {/* Slack */}
+      {/* <img
         className={styles.icon}
         src={
           'https://a.slack-edge.com/4a5c4/marketing/img/meta/slack_hash_256.png'
         }
-      />
+      /> */}
-      <img
+
-        className={styles.icon}
+      {/* Google Maps */}
-        src={
+      {/* <img
-          'https://cdn2.iconfinder.com/data/icons/micon-social-pack/512/youtube-512.png'
-        }
-      />
-      <img
         className={styles.icon}
         src={
           'https://travelhoney.com/wp-content/uploads/2017/03/google-maps-for-ios-8-1.png'
         }
-      />
+      /> */}
 
-      <img
+      {/* Android Messages */}
+      {/* <img
         className={styles.icon}
         src={
           'https://electronjs.org/app-img/android-messages/android-messages-icon-128.png'
         }
-      />
+      /> */}
     </div>
   );
 };

src/components/MainCommand.js

@@ -138,10 +138,10 @@ class MainCommand extends Component {
     ) {
       newCommand = 'reddit';
       newCommandIcon =
-        'https://cdn2.iconfinder.com/data/icons/micon-social-pack/512/youtube-512.png';
+        'https://cdn0.iconfinder.com/data/icons/social-media-2092/100/social-36-512.png';
-      newInput = newInput.replace('utube', '');
+      newInput = newInput.replace('red', '');
       newCommandComplete = true;
-      newCommandInputPlaceholder = 'search for any video';
+      newCommandInputPlaceholder = 'search for any subreddit';
     } else if (newCommand == 'google') {
       newCommand = 'google';
       newCommandComplete = true;
@@ -213,6 +213,11 @@ class MainCommand extends Component {
           this.state.commandInput,
         '_blank'
       );
+    } else if (this.state.command == 'reddit') {
+      window.open(
+        'https://www.reddit.com/r/' + this.state.commandInput,
+        '_blank'
+      );
     }
 
     this.setState(INITIAL_COMMAND_STATE, () => {
@@ -273,7 +278,11 @@ class MainCommand extends Component {
           </Button>
         )}
 
-        <ToastsContainer store={ToastsStore} />
+        <ToastsContainer
+          store={ToastsStore}
+          position={'TOP_RIGHT'}
+          className={styles.notificationCont}
+        />
       </div>
     );
   }

src/components/TipCard.js

@@ -25,22 +25,28 @@ const TipCard = props => {
           Google
         </Typography>
         <Typography variant="body2" component="p">
-          By default, any search + enter button will search on Google.
+          Just search below to use 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
+          Type in the command 'gmail' and send a quick email.
-          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
+          Type in 'ubute' and find your video right away.
+        </Typography>
+
+        <Typography variant="h6" component="h2">
+          Reddit
+        </Typography>
+        <Typography variant="body2" component="p">
+          Type in 'red' and go straight to a subreddit.
         </Typography>
 
         <br />

src/components/root.less

@@ -119,15 +119,13 @@
 }
 
 .notificationCont {
-  background-color: #4bb543 !important;
+  color: white !important;
-  color: white;
-  padding: 1em;
-  position: fixed;
-  top: 0;
-  right: 0;
-  margin: 1em;
 }
 
 .hidden {
   display: none !important;
 }
+
+.malTooltip {
+  font-size: 3em !important;
+}