diff --git a/src/components/Setting/FontSize/fontsize.js b/src/components/Setting/FontSize/fontsize.js index d6207d1..0eac8b9 100644 --- a/src/components/Setting/FontSize/fontsize.js +++ b/src/components/Setting/FontSize/fontsize.js @@ -1,47 +1,53 @@ -import React from 'react'; -import '../../../components/style/fontsize.scss'; +import React, { useState } from "react"; +import "../../../components/style/fontsize.scss"; function ButtonIncrement(props) { - return ( -

+ return ( +

+ -

- ) - } - - function ButtonDecrement(props) { - - return ( -

- - -

- ) - } - - function Display(props) { - return ( - - ) - } +

+ ); +} -const Fontsize = (props) => { +function ButtonDecrement(props) { + return ( +

+ - +

+ ); +} - const {countersize, setCounter} = props; - const incrementCounter = () => setCounter(countersize + 1); - let decrementCounter = () => setCounter(countersize - 1); - - if(countersize <= 1) { - decrementCounter = () => setCounter(1); - } - return ( -
- -
- ) +function Display(props) { + return ; } -export default Fontsize +const Fontsize = (props) => { + const [countersize, setCounter ] = useState(1) + const incrementCounter = () => setCounter(countersize + 1); + let decrementCounter = () => setCounter(countersize - 1); + + if (countersize <= 1) { + decrementCounter = () => setCounter(1); + } + return ( +
+ +
+ ); +}; + +export default Fontsize; diff --git a/src/components/Setting/FontStyle/Fontstyle.js b/src/components/Setting/FontStyle/Fontstyle.js index 3d607b4..b04fdce 100644 --- a/src/components/Setting/FontStyle/Fontstyle.js +++ b/src/components/Setting/FontStyle/Fontstyle.js @@ -14,7 +14,7 @@ const Fontstyle = (props) => {
- : null} + {window.innerWidth < 768 ? : null} ); }; @@ -37,6 +56,8 @@ const Footer = ({ const Button = styled.button` width: 100%; justify-content: center; + position: fixed; + bottom: 0; display: flex; height: 35px; padding: 2px 2rem; diff --git a/src/containers/Header.tsx b/src/containers/Header.tsx index 8ac520b..716e16a 100644 --- a/src/containers/Header.tsx +++ b/src/containers/Header.tsx @@ -6,6 +6,7 @@ import Layout, { AutoLayout } from "components/header/Layout"; import Logo from "components/header/Logo"; import Item from "components/footer/Item"; import Setting from "components/Setting/setting"; +import { Collapse, Button, CardBody, Card } from "reactstrap"; const Header = ({ onNavToggle, @@ -14,7 +15,6 @@ const Header = ({ title, }: Props) => { const [isOpen, setIsOpen] = useState(false); - const toggle = () => setIsOpen(!isOpen); return ( <> @@ -25,7 +25,7 @@ const Header = ({ @@ -36,7 +36,7 @@ const Header = ({ />