hover effect on login, more botton

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@alan-ai/alan-sdk-web": "^1.8.25",
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
     "@testing-library/jest-dom": "^5.11.10",

src/components/Header.js

@@ -3,8 +3,12 @@ import SearchIcon from '@material-ui/icons/Search';
 import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import './Header.css'
+import './LoginT.css'
 import Tippy from '@tippyjs/react';
 import 'tippy.js/dist/tippy.css';
+import MoreT from './MoreT'
+import LoginT from './LoginT';
+import 'tippy.js/themes/light.css'
 
 const Header = () => {
     return (
@@ -34,13 +38,23 @@ const Header = () => {
             </div>
 
             <div className='header__third'>
-                <Tippy content="logintooltip">
+                <Tippy
+                    theme="light"
+                    content={<LoginT></LoginT>}
+                    interactive={true}
+                    offset={[5, 18]}>
                     <button>Login</button>
                 </Tippy>
             </div>
 
             <div className='header__forth'>
-                <span>More</span>
+                <Tippy
+                    theme="light"
+                    content={<MoreT></MoreT>}
+                    offset={[5, 18]}
+                    interactive={true}>
+                    <span>More</span>
+                </Tippy>
                 <ExpandMoreIcon />
             </div>
 

src/components/LoginT.css

@@ -0,0 +1,27 @@
+.logint__in,
+.moret__in {
+  display: flex;
+  align-items: center;
+  padding: 0px 7px;
+}
+.logint__in > .MuiSvgIcon-root,
+.moret__in > .MuiSvgIcon-root,
+img {
+  margin-right: 5px;
+  color: #2874f0;
+}
+.logint > hr,
+.moret > hr {
+  margin-left: -10px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  width: 108.5%;
+  height: 0.5px;
+  background-color: rgb(233, 233, 233);
+  border: none;
+}
+.logint__in:hover,
+.moret__in:hover {
+  background-color: rgb(245, 243, 243);
+  cursor: pointer;
+}

src/components/LoginT.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import AccountCircleIcon from '@material-ui/icons/AccountCircle';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import ConfirmationNumberIcon from '@material-ui/icons/ConfirmationNumber';
+import CardGiftcardIcon from '@material-ui/icons/CardGiftcard';
+import StoreIcon from '@material-ui/icons/Store';
+
+
+
+const LoginT = () => {
+  return (
+    <div className="logint">
+      <div className="logint__in">
+        <h4>New Customer?</h4>
+        <h4 style={{ color: '#2874f0' }}>Sign Up</h4>
+      </div>
+      <hr />
+      <div className="logint__in">
+        <AccountCircleIcon></AccountCircleIcon>
+        <p>My Profile</p>
+      </div>
+      <hr />
+      <div className="logint__in">
+        <img src="//img1a.flixcart.com/www/linchpin/fk-cp-zion/img/plus_aef861.png" alt="plus" />
+        <p>Flipkart Plus Zone</p>
+      </div>
+      <hr />
+      <div className="logint__in">
+        <StoreIcon></StoreIcon>
+        <p>Orders</p>
+      </div>
+      <hr />
+      <div className="logint__in">
+        <FavoriteIcon></FavoriteIcon>
+        <p>Wishlist</p>
+      </div>
+      <hr />
+      <div className="logint__in">
+        <ConfirmationNumberIcon />
+        <p>Rewards</p>
+      </div>
+      <hr />
+      <div className="logint__in">
+        <CardGiftcardIcon />
+        <p>Gift Cards</p>
+      </div>
+    </div >
+  )
+}
+
+export default LoginT

src/components/MoreT.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import ShopIcon from '@material-ui/icons/Shop';
+import NotificationsIcon from '@material-ui/icons/Notifications';
+import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
+import GetAppIcon from '@material-ui/icons/GetApp';
+import LiveHelpIcon from '@material-ui/icons/LiveHelp';
+import TrendingUpIcon from '@material-ui/icons/TrendingUp';
+//import MonetizationOnIcon from '@material-ui/icons/MonetizationOn';
+
+
+const MoreT = () => {
+  return (
+    <div className="moret">
+      <div className="moret__in">
+        <NotificationsIcon />
+        <p>Notifications Preferences</p>
+      </div>
+      <hr />
+      <div className="moret__in">
+        <BusinessCenterIcon />
+        <p>Sell on Flipkart</p>
+      </div>
+      <hr />
+      <div className="moret__in">
+        <LiveHelpIcon />
+        <p>24*7 Customer Care</p>
+      </div>
+      <hr />
+      <div className="moret__in">
+        <TrendingUpIcon />
+        <p>Advertise</p>
+      </div>
+      <hr />
+      <div className="moret__in">
+        <GetAppIcon />
+        <p>Download app</p>
+      </div>
+    </div>
+  )
+}
+
+export default MoreT