diff --git a/public/css/global.css b/public/css/global.css index b071859..70bdd5a 100644 --- a/public/css/global.css +++ b/public/css/global.css @@ -31,7 +31,7 @@ a { font-weight: 400; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-size: 1rem; - color: #333; + color: #009aa8; } #root { diff --git a/src/components/footer/Slider.js b/src/components/footer/Slider.js index 43cd3f5..429e54b 100644 --- a/src/components/footer/Slider.js +++ b/src/components/footer/Slider.js @@ -1,17 +1,17 @@ -import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import Slider from '@material-ui/core/Slider'; +import React from "react"; +import { makeStyles } from "@material-ui/core/styles"; +import Slider from "@material-ui/core/Slider"; const useStyles = makeStyles((theme) => ({ root: { - width: 825, + width: "100%", }, margin: { height: theme.spacing(1), }, })); -export default function TrackInvertedSlider({CountPage}) { +export default function TrackInvertedSlider({ value, max }) { const classes = useStyles(); return ( @@ -22,9 +22,9 @@ export default function TrackInvertedSlider({CountPage}) { // value={CountPage} track="inverted" aria-labelledby="track-inverted-range-slider" - value={1 - CountPage} - max={100} + value={max - value} + max={max} /> ); -} \ No newline at end of file +} diff --git a/src/components/footer/progressBar.js b/src/components/footer/progressBar.js index 81176d7..ab2fe55 100644 --- a/src/components/footer/progressBar.js +++ b/src/components/footer/progressBar.js @@ -3,10 +3,10 @@ import "components/style/slider.scss"; import Slider from "./Slider"; export default function ProgressBar(props) { - const { CountPage } = props; + const { value, max } = props; return ( <> - + ); } diff --git a/src/components/sideMenu/Wrapper.tsx b/src/components/sideMenu/Wrapper.tsx index ef66e12..c196cdf 100644 --- a/src/components/sideMenu/Wrapper.tsx +++ b/src/components/sideMenu/Wrapper.tsx @@ -24,6 +24,7 @@ const Container = styled.div` display: flex; flex-direction: column; position: fixed; + padding:5px; width: 340px; max-width: 95vw; height: 100vh; diff --git a/src/components/style/footerStyle.scss b/src/components/style/footerStyle.scss index 252acf0..c53b7af 100644 --- a/src/components/style/footerStyle.scss +++ b/src/components/style/footerStyle.scss @@ -11,18 +11,24 @@ left: 0; bottom: 0; width: 100%; - + .footer-item { display: flex; justify-content: space-evenly; padding: 0 5px; align-items: center; margin-bottom: 5px; + .icon{ + width: 25px; + margin-left: 1rem; + } } } .nav-footer-item{ - margin-right: 1.5rem; + margin: auto; + min-width:80px; + } .active{ diff --git a/src/containers/Footer.tsx b/src/containers/Footer.tsx index 3cb71d0..8f203b2 100644 --- a/src/containers/Footer.tsx +++ b/src/containers/Footer.tsx @@ -62,49 +62,95 @@ const Footer = ({ // } // setToggleIcon(false); // }; + let isMobile = window.innerWidth <= 768 return ( - <> - - ); }; -const Icon = styled.div` - width: 16px; - height: 16px; - & > div, - & > svg { - width: 16px; - height: 16px; - } -`; const Button = styled.button` width: 100%; diff --git a/src/containers/menu/Note.tsx b/src/containers/menu/Note.tsx index 8ed59c1..81c3897 100644 --- a/src/containers/menu/Note.tsx +++ b/src/containers/menu/Note.tsx @@ -38,7 +38,7 @@ const Note = ( <> {control.display && (