syntax and media queries

Author: mathcodes

src/components/BackToTop/BackToTop.css

@@ -1,24 +1,24 @@
 .backToTop {
-    position: fixed; 
-    right: 10px;
-    bottom: 60px;
-    height: 30px;
-    font-size: 3rem;
-    z-index: 999;
+  position: fixed;
+  right: 10px;
+  bottom: 60px;
+  height: 30px;
+  font-size: 3rem;
+  z-index: 999;
 }
 
 .backToTop button {
-    outline: none;
-    border: none;
-    cursor: pointer;
-    background: none;
-    padding: 20px;
+  outline: none;
+  border: none;
+  cursor: pointer;
+  background: none;
+  padding: 20px;
 }
 
 @media screen and (max-width: 800px) {
-    .backToTop { 
-        right: -10px;
-        bottom: 50px;
-        font-size: 2.75rem;
-    }
+  .backToTop {
+    right: -10px;
+    bottom: 50px;
+    font-size: 2.75rem;
+  }
 }

src/components/BackToTop/BackToTop.js

@@ -6,47 +6,47 @@ import { ThemeContext } from '../../contexts/ThemeContext';
 import './BackToTop.css';
 
 function BackToTop() {
-    const [visible, setVisible] = useState(false);
-
-    const { theme } = useContext(ThemeContext);
-
-    const toggleVisible = () => {
-        const scrolled = document.documentElement.scrollTop;
-        if (scrolled > 300) {
-            setVisible(true);
-        } else if (scrolled <= 300) {
-            setVisible(false);
-        }
-    };
-
-    const scrollToTop = () => {
-        window.scrollTo({
-            top: 0,
-            behavior: 'smooth',
-        });
-    };
-
-    window.addEventListener('scroll', toggleVisible);
-
-    const useStyles = makeStyles(() => ({
-        icon: {
-            fontSize: '3rem',
-            color: theme.tertiary,
-        },
-    }));
-
-    const classes = useStyles();
-
-    return (
-        <div
-            style={{ display: visible ? 'inline' : 'none' }}
-            className='backToTop'
-        >
-            <button onClick={scrollToTop} aria-label='Back to top'>
-                <IoIosArrowDropupCircle className={classes.icon} />
-            </button>
-        </div>
-    );
+	const [visible, setVisible] = useState(false);
+
+	const { theme } = useContext(ThemeContext);
+
+	const toggleVisible = () => {
+		const scrolled = document.documentElement.scrollTop;
+		if (scrolled > 300) {
+			setVisible(true);
+		} else if (scrolled <= 300) {
+			setVisible(false);
+		}
+	};
+
+	const scrollToTop = () => {
+		window.scrollTo({
+			top: 0,
+			behavior: 'smooth',
+		});
+	};
+
+	window.addEventListener('scroll', toggleVisible);
+
+	const useStyles = makeStyles(() => ({
+		icon: {
+			fontSize: '3rem',
+			color: theme.tertiary,
+		},
+	}));
+
+	const classes = useStyles();
+
+	return (
+		<div
+			style={{ display: visible ? 'inline' : 'none' }}
+			className='backToTop'
+		>
+			<button onClick={scrollToTop} aria-label='Back to top'>
+				<IoIosArrowDropupCircle className={classes.icon} />
+			</button>
+		</div>
+	);
 }
 
 export default BackToTop;