From 78f4b96430c04b25a90a167c76fcd7a23ce52cf1 Mon Sep 17 00:00:00 2001 From: taha12322 <66300435+taha12322@users.noreply.github.com> Date: Mon, 23 Aug 2021 16:56:53 +0430 Subject: [PATCH] footer finished (responsive) background color of the iftram finished color of the book (not finished) --- .../Setting/FontColor/Colors/chosecolor.js | 8 +- src/components/Setting/FontColor/colors.js | 4 +- src/components/Setting/setting.js | 2 +- src/components/footer/progressBar.js | 54 +++++----- src/components/style/footerStyle.scss | 30 ++++++ src/components/style/slider.scss | 48 +++++++++ src/containers/Footer.tsx | 99 +++++++++++++++---- src/containers/Header.tsx | 30 +++--- src/containers/Reader.tsx | 44 ++++++++- 9 files changed, 245 insertions(+), 74 deletions(-) create mode 100644 src/components/style/slider.scss diff --git a/src/components/Setting/FontColor/Colors/chosecolor.js b/src/components/Setting/FontColor/Colors/chosecolor.js index a0d2b6e..19125a4 100644 --- a/src/components/Setting/FontColor/Colors/chosecolor.js +++ b/src/components/Setting/FontColor/Colors/chosecolor.js @@ -4,15 +4,11 @@ import '../../../style/chosecolor.scss'; const Chosecolor = (props) => { - const {setcolor} = props; - + const {setcolor , isChecked} = props; + const changeColorHandler = (value) => { setcolor(value) } - - - - const {isChecked} = props; return ( <> {isChecked ? diff --git a/src/components/Setting/FontColor/colors.js b/src/components/Setting/FontColor/colors.js index dfa9fb5..9accca0 100644 --- a/src/components/Setting/FontColor/colors.js +++ b/src/components/Setting/FontColor/colors.js @@ -7,10 +7,12 @@ import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap'; const Colors = (props) => { + const { setcolor, color} = props; const [dropdownOpen, setDropdownOpen] = useState(false); const toggle = () => setDropdownOpen(prevState => !prevState); - const {setIsChecked, isChecked , setcolor , color } = props; + + const [isChecked, setIsChecked] = useState(false) const [Icon, seticon] = useState(PalletColorOutline); const changeIcone = () => { diff --git a/src/components/Setting/setting.js b/src/components/Setting/setting.js index ca68400..2e92e4a 100644 --- a/src/components/Setting/setting.js +++ b/src/components/Setting/setting.js @@ -30,9 +30,9 @@ const Setting = (props) => { - - {window.innerWidth < 768 ? : null} + {window.innerWidth <= 768 ? ( + <> + + + ) : ( + "" + )} ); }; @@ -114,11 +172,10 @@ const Icon = styled.div` const Button = styled.button` width: 100%; - justify-content: center; - position: fixed; - bottom: 0; - display: flex; height: 35px; + display: flex; + justify-content: center; + align-items: center; padding: 2px 2rem; color: #fff; font-family: inherit; diff --git a/src/containers/Header.tsx b/src/containers/Header.tsx index c70a41f..a83a5e5 100644 --- a/src/containers/Header.tsx +++ b/src/containers/Header.tsx @@ -5,6 +5,7 @@ import Wrapper from "components/header/Wrapper"; import Layout, { AutoLayout } from "components/header/Layout"; import Logo from "components/header/Logo"; import Item from "components/footer/Item"; +import BookInfo from "components/nav/BookInfo"; // import { Collapse, Button, CardBody, Card } from "reactstrap"; const Header = ({ @@ -14,30 +15,29 @@ const Header = ({ // onOptionToggle, onLearningToggle, title, + nameBook, }: Props) => { - - return ( <>