Fix banner buttons

Seneca-CDOT · Apr 21, 2021 · 79d838b · 79d838b
1 parent 29951b7
commit 79d838b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/src/web/src/components/Banner.tsx b/src/web/src/components/Banner.tsx
@@ -11,7 +11,7 @@ import smoothscroll from 'smoothscroll-polyfill';
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 import { telescopeUrl } from '../config';
 import BannerDynamicItems from './BannerDynamicItems';
-import LandingButtons from './BannerButtons';
+import BannerButtons from './BannerButtons';
 import ScrollAction from './ScrollAction';
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -178,7 +178,7 @@ export default function Banner({ onVisibilityChange }: BannerProps) {
     <>
       <div className={classes.heroBanner} ref={bannerAnchor}>
         <BannerDynamicItems />
-        <LandingButtons />
+        <BannerButtons />
       </div>
       <div className={classes.textsContainer}>
         <Typography variant="h1" className={classes.title}>

diff --git a/src/web/src/components/BannerButtons.tsx b/src/web/src/components/BannerButtons.tsx
@@ -11,7 +11,6 @@ const useStyles = makeStyles((theme) => ({
     position: 'absolute',
     color: 'white',
     top: '20px',
-    width: '250px',
     right: '5%',
     display: 'flex',
     justifyContent: 'space-around',
@@ -22,6 +21,16 @@ const useStyles = makeStyles((theme) => ({
         color: '#9ABDFF',
       },
     },
+  },
+  userSignedInClass: {
+    width: '155px',
+    [theme.breakpoints.down(490)]: {
+      width: '100%',
+      right: 0,
+    },
+  },
+  userNotSignedClass: {
+    width: '250px',
     [theme.breakpoints.down(490)]: {
       width: '100%',
       right: 0,
@@ -36,7 +45,7 @@ const ButtonTooltip = withStyles({
   },
 })(Tooltip);
 
-const LandingButtons = () => {
+const BannerButtons = () => {
   const { login, logout, user } = useAuth();
 
   const classes = useStyles();
@@ -45,8 +54,10 @@ const LandingButtons = () => {
 
   return (
     <div
-      className={classes.buttonsContainer}
-      style={user?.isRegistered ? { width: '155px' } : { width: '250px' }}
+      className={`${classes.buttonsContainer} ${
+        user?.isRegistered ? classes.userSignedInClass : classes.userNotSignedClass
+      }`}
+      // style={user?.isRegistered ? { width: '155px' } : { width: '250px' }}
     >
       {user && !user?.isRegistered && (
         <PopUp
@@ -112,4 +123,4 @@ const LandingButtons = () => {
   );
 };
 
-export default LandingButtons;
+export default BannerButtons;