From 91f0fb06512a02267cb81e0e41738ff9498070e5 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Sat, 6 Jun 2020 02:07:04 +0300
Subject: [PATCH] botPosition

---
 private/Notes.txt                              |  3 +++
 src/features/chatbot/components/BotsManager.js | 18 ++++++++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/private/Notes.txt b/private/Notes.txt
index 9f08956..8264173 100644
--- a/private/Notes.txt
+++ b/private/Notes.txt
@@ -42,3 +42,6 @@ docker run --restart=always -p 5005:80 -d cloud.canister.io:5000/tstanciu/revers
 Rename container
 docker rename <containet_id> reverse-proxy-frontend
 ##############################################################################################
+
+import { makeStyles, useTheme } from "@material-ui/core/styles";
+  const theme = useTheme();
\ No newline at end of file
diff --git a/src/features/chatbot/components/BotsManager.js b/src/features/chatbot/components/BotsManager.js
index bcbca22..b0d0592 100644
--- a/src/features/chatbot/components/BotsManager.js
+++ b/src/features/chatbot/components/BotsManager.js
@@ -3,17 +3,31 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { botType } from "../botType";
 import Wizard from "./Wizard";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles(theme => ({
+  bot: {
+    position: "fixed",
+    bottom: theme.spacing(2),
+    right: theme.spacing(2),
+    zIndex: 1
+  },
+  botPosition: {
+    position: "absolute"
+  }
+}));
 
 const BotsManager = ({ bot }) => {
   const [type, setType] = useState(bot.type);
+  const classes = useStyles();
 
   useEffect(() => {
     if (bot.type) setType(bot.type);
   }, [bot.type]);
 
   return (
-    <div style={{ position: "absolute" }}>
-      {type === botType.wizard && <Wizard />}
+    <div className={classes.botPosition}>
+      <div className={classes.bot}>{type === botType.wizard && <Wizard />}</div>
     </div>
   );
 };