From d4aa9d6e6429a6d60bc2d78e44cb6b774d3d85e0 Mon Sep 17 00:00:00 2001 From: taha12322 <66300435+taha12322@users.noreply.github.com> Date: Wed, 11 Aug 2021 08:39:12 +0430 Subject: [PATCH] change font color header setting --- package.json | 5 +- .../Setting/FontColor/Colors/chosecolor.js | 62 ++ src/components/Setting/FontColor/colors.js | 48 + src/components/Setting/FontSize/fontsize.js | 47 + .../Setting/FontStyle/Fonts/fonts.js | 23 + src/components/Setting/FontStyle/Fontstyle.js | 33 + .../Setting/LineHeight/lineheight.js | 54 ++ src/components/Setting/setting.js | 50 ++ src/components/footer/Item.tsx | 2 +- src/components/footer/MoveBtn.tsx | 4 +- src/components/header/Logo.tsx | 1 + src/components/image/Pages.svg | 13 + src/components/image/PalletColorBold.svg | 5 + src/components/image/PalletColorOutline.svg | 10 + src/components/image/lineSpace.svg | 18 + src/components/image/logo.png | Bin 0 -> 2761 bytes src/components/image/menu.svg | 5 + src/components/style/NavbarDrawer.scss | 160 ++++ src/components/style/_btnStyle.scss | 22 + src/components/style/_colors.scss | 4 + src/components/style/_twobtnStyle.scss | 23 + src/components/style/bookPage.scss | 57 ++ src/components/style/bookiconFooter.scss | 12 + src/components/style/chosecolor.scss | 48 + src/components/style/colorsComponents.scss | 88 ++ src/components/style/fontStyle.scss | 4 + src/components/style/fonts.scss | 24 + src/components/style/fontsize.scss | 3 + src/components/style/footer.scss | 44 + src/components/style/header.scss | 60 ++ src/components/style/home.scss | 26 + src/components/style/index.scss | 31 + src/components/style/lineheight.scss | 14 + src/components/style/modal.scss | 97 ++ src/components/style/progress.scss | 9 + src/components/style/search.scss | 3 + src/components/style/searchBox.scss | 61 ++ src/components/style/setting.scss | 18 + src/components/style/tabpanel.scss | 87 ++ src/containers/Footer.tsx | 5 +- src/containers/Header.tsx | 48 +- src/containers/Reader.tsx | 14 +- src/containers/menu/Nav.tsx | 68 +- src/containers/menu/Note.tsx | 2 +- src/containers/menu/Option.tsx | 9 +- yarn.lock | 837 +++++++++++++++++- 46 files changed, 2189 insertions(+), 69 deletions(-) create mode 100644 src/components/Setting/FontColor/Colors/chosecolor.js create mode 100644 src/components/Setting/FontColor/colors.js create mode 100644 src/components/Setting/FontSize/fontsize.js create mode 100644 src/components/Setting/FontStyle/Fonts/fonts.js create mode 100644 src/components/Setting/FontStyle/Fontstyle.js create mode 100644 src/components/Setting/LineHeight/lineheight.js create mode 100644 src/components/Setting/setting.js create mode 100644 src/components/image/Pages.svg create mode 100644 src/components/image/PalletColorBold.svg create mode 100644 src/components/image/PalletColorOutline.svg create mode 100644 src/components/image/lineSpace.svg create mode 100644 src/components/image/logo.png create mode 100644 src/components/image/menu.svg create mode 100644 src/components/style/NavbarDrawer.scss create mode 100644 src/components/style/_btnStyle.scss create mode 100644 src/components/style/_colors.scss create mode 100644 src/components/style/_twobtnStyle.scss create mode 100644 src/components/style/bookPage.scss create mode 100644 src/components/style/bookiconFooter.scss create mode 100644 src/components/style/chosecolor.scss create mode 100644 src/components/style/colorsComponents.scss create mode 100644 src/components/style/fontStyle.scss create mode 100644 src/components/style/fonts.scss create mode 100644 src/components/style/fontsize.scss create mode 100644 src/components/style/footer.scss create mode 100644 src/components/style/header.scss create mode 100644 src/components/style/home.scss create mode 100644 src/components/style/index.scss create mode 100644 src/components/style/lineheight.scss create mode 100644 src/components/style/modal.scss create mode 100644 src/components/style/progress.scss create mode 100644 src/components/style/search.scss create mode 100644 src/components/style/searchBox.scss create mode 100644 src/components/style/setting.scss create mode 100644 src/components/style/tabpanel.scss diff --git a/package.json b/package.json index 58973ba..b341905 100644 --- a/package.json +++ b/package.json @@ -40,9 +40,12 @@ "postcompile": "cp -r ./src/types ./lib/types" }, "dependencies": { + "@material-ui/core": "^4.12.3", "epubjs": "^0.3.88", + "node-sass": "4.14.1", "react-epub-viewer": "^0.1.7", - "react-iconly": "^2.2.3" + "react-iconly": "^2.2.3", + "reactstrap": "^8.9.0" }, "devDependencies": { "@babel/cli": "^7.13.14", diff --git a/src/components/Setting/FontColor/Colors/chosecolor.js b/src/components/Setting/FontColor/Colors/chosecolor.js new file mode 100644 index 0000000..ba58309 --- /dev/null +++ b/src/components/Setting/FontColor/Colors/chosecolor.js @@ -0,0 +1,62 @@ +import React from 'react'; +import '../../../style/chosecolor.scss'; + + + +const Chosecolor = (props) => { + const {color , setcolor} = props; + + const changeColorHandler = (value) => { + setcolor(value) + } + + + + const {isChecked} = props; + return ( + <> + {isChecked ? +
+
+
+ +
+
+ +
+
+ +
+
+
: +
+
+
+ +
+
+ +
+
+ +
+
+
+ } + + ) +} + +export default Chosecolor diff --git a/src/components/Setting/FontColor/colors.js b/src/components/Setting/FontColor/colors.js new file mode 100644 index 0000000..dfa9fb5 --- /dev/null +++ b/src/components/Setting/FontColor/colors.js @@ -0,0 +1,48 @@ +import React , { useState } from 'react'; +import '../../../components/style/colorsComponents.scss'; +import PalletColorOutline from '../../image/PalletColorOutline.svg'; +import PalletColorbold from '../../image/PalletColorBold.svg'; +import Chosecolor from './Colors/chosecolor' +import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap'; + + +const Colors = (props) => { + const [dropdownOpen, setDropdownOpen] = useState(false); + const toggle = () => setDropdownOpen(prevState => !prevState); + + const {setIsChecked, isChecked , setcolor , color } = props; + + const [Icon, seticon] = useState(PalletColorOutline); + const changeIcone = () => { + seticon(Icon===PalletColorOutline?PalletColorbold:PalletColorOutline); + }; + + return ( + <> + + + ) +} + +export default Colors \ No newline at end of file diff --git a/src/components/Setting/FontSize/fontsize.js b/src/components/Setting/FontSize/fontsize.js new file mode 100644 index 0000000..d6207d1 --- /dev/null +++ b/src/components/Setting/FontSize/fontsize.js @@ -0,0 +1,47 @@ +import React from 'react'; +import '../../../components/style/fontsize.scss'; + +function ButtonIncrement(props) { + return ( +

+ + +

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

+ - +

+ ) + } + + function Display(props) { + return ( + + ) + } + +const Fontsize = (props) => { + + const {countersize, setCounter} = props; + 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/Fonts/fonts.js b/src/components/Setting/FontStyle/Fonts/fonts.js new file mode 100644 index 0000000..0758ba2 --- /dev/null +++ b/src/components/Setting/FontStyle/Fonts/fonts.js @@ -0,0 +1,23 @@ +import React from 'react'; +import '../../../style/fonts.scss'; + +const Fonts = (props) => { + + const {setname} = props; + + const fontHandler = (value) =>{ + setname(value) + } + + + return ( + <> + + + ) +} + +export default Fonts diff --git a/src/components/Setting/FontStyle/Fontstyle.js b/src/components/Setting/FontStyle/Fontstyle.js new file mode 100644 index 0000000..3d607b4 --- /dev/null +++ b/src/components/Setting/FontStyle/Fontstyle.js @@ -0,0 +1,33 @@ +import React , { useState } from 'react'; +import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap'; +import '../../../components/style/fontStyle.scss' +import Fonts from './Fonts/fonts' + +const Fontstyle = (props) => { + const {setname ,name} = props; + + + const [dropdownOpen, setDropdownOpen] = useState(false); + const toggle = () => setDropdownOpen(prevState => !prevState) + + return ( +
+ + + + + + + + +
+ ) +} + +export default Fontstyle diff --git a/src/components/Setting/LineHeight/lineheight.js b/src/components/Setting/LineHeight/lineheight.js new file mode 100644 index 0000000..3738b2a --- /dev/null +++ b/src/components/Setting/LineHeight/lineheight.js @@ -0,0 +1,54 @@ +import React from 'react' +// import {FormatLineSpacingRoundedIcon} from '@material-ui/icons/FormatLineSpacingRounded' +import lineSpace from '../../image/lineSpace.svg' +import '../../../components/style/lineheight.scss' + +function ButtonIncrement(props) { + return ( + + {/* */} + + ) +} + +function ButtonDecrement(props) { + return ( + Icon + ) +} + +function Display(props) { + return +} + +const Lineheight = (props) => { + const { counterline, setcounterline } = props + + const incrementCounter = () => setcounterline(counterline + 1) + let decrementCounter = () => setcounterline(counterline - 1) + + if (counterline <= 1) { + decrementCounter = () => setcounterline(1) + } + + return ( + <> +
+ +
+ + ) +} + +export default Lineheight diff --git a/src/components/Setting/setting.js b/src/components/Setting/setting.js new file mode 100644 index 0000000..376de37 --- /dev/null +++ b/src/components/Setting/setting.js @@ -0,0 +1,50 @@ +import React from 'react' +import { UncontrolledCollapse, Card } from 'reactstrap' +import '../../../src/components/style/setting.scss' +import Fontstyle from './FontStyle/Fontstyle' +import Colors from './FontColor/colors' +import FontSize from './FontSize/fontsize' +import LineHeight from './LineHeight/lineheight' + +const Setting = (props) => { + const { + setIsChecked, + isChecked, + countersize, + setCounter, + counterline, + setcounterline, + setname, + name, + setcolor, + color, + } = props + + return ( + <> + + + + + + ) +} + +export default Setting diff --git a/src/components/footer/Item.tsx b/src/components/footer/Item.tsx index cbd7237..68d30d2 100644 --- a/src/components/footer/Item.tsx +++ b/src/components/footer/Item.tsx @@ -21,7 +21,7 @@ const Container = styled.div` white-space: nowrap; & > span { - color: ${palette.gray4}; + color: ${palette.white}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/src/components/footer/MoveBtn.tsx b/src/components/footer/MoveBtn.tsx index 6325deb..3eabc9f 100644 --- a/src/components/footer/MoveBtn.tsx +++ b/src/components/footer/MoveBtn.tsx @@ -6,8 +6,8 @@ import * as styles from 'lib/styles/styles' const MoveBtn = ({ type, onClick }: Props) => { const Icon = type === "PREV" - ? PrevIcon - : NextIcon; + ? NextIcon + : PrevIcon; const msg = type === "PREV" ? "이전 페이지" diff --git a/src/components/header/Logo.tsx b/src/components/header/Logo.tsx index 70e5e8d..1d2fb45 100644 --- a/src/components/header/Logo.tsx +++ b/src/components/header/Logo.tsx @@ -17,6 +17,7 @@ const Wrapper = styled.a` align-items: center; justify-content: center; outline: none; + marginRight: 10px; background-color: #009AA8; transition: .2s ${styles.transition}; border-radius: 8px; diff --git a/src/components/image/Pages.svg b/src/components/image/Pages.svg new file mode 100644 index 0000000..1f21107 --- /dev/null +++ b/src/components/image/Pages.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/components/image/PalletColorBold.svg b/src/components/image/PalletColorBold.svg new file mode 100644 index 0000000..eb77393 --- /dev/null +++ b/src/components/image/PalletColorBold.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/image/PalletColorOutline.svg b/src/components/image/PalletColorOutline.svg new file mode 100644 index 0000000..7f68b26 --- /dev/null +++ b/src/components/image/PalletColorOutline.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/image/lineSpace.svg b/src/components/image/lineSpace.svg new file mode 100644 index 0000000..eba95f5 --- /dev/null +++ b/src/components/image/lineSpace.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/components/image/logo.png b/src/components/image/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..7a1b3abdb51102debaff730dd3fe506a3e7a4ae5 GIT binary patch literal 2761 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 P00000NkvXXu0mjfIhJDV literal 0 HcmV?d00001 diff --git a/src/components/image/menu.svg b/src/components/image/menu.svg new file mode 100644 index 0000000..f43232e --- /dev/null +++ b/src/components/image/menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/style/NavbarDrawer.scss b/src/components/style/NavbarDrawer.scss new file mode 100644 index 0000000..c68ed01 --- /dev/null +++ b/src/components/style/NavbarDrawer.scss @@ -0,0 +1,160 @@ +@import './colors'; + +.MuiDrawer-paperAnchorRight { + background: white; + &::-webkit-scrollbar { + display: none; + width: 0px; + font-family: inherit; + } +} + +.MuiDrawer-paperAnchorRight { + top: 35px !important; +} +.navbar-drawer { + font-family: inherit; + text-align: right !important; + direction: rtl; + &__header { + height: 60px; + background-color: white; + width: 80% !important; + align-items: center; + &--right { + margin-right: 10px; + & h1 { + margin-bottom: 0px; + font-size: calc(100vw / 22); + color: #4d4d4f; + letter-spacing: -1px; + } + & div { + color: #4d4d4f; + font-size: calc(100vw / 34); + letter-spacing: -1px; + } + } + &--dropdown { + left: 10px; + top: 10px; + } + & img { + width: 100%; + height: 100%; + } + } + &__dropdown { + width: calc(100vw * 0.8); + .navbar-drawer-user { + width: 100%; + &__right { + margin-right: 10px; + & h1 { + margin-bottom: 0px; + font-size: calc(100vw / 22); + color: #4d4d4f; + letter-spacing: -1px; + } + & div { + color: #4d4d4f; + font-size: calc(100vw / 34); + letter-spacing: -1px; + } + } + } + } + &__bottom { + width: 100%; + &--link { + width: 100%; + align-items: center; + padding: 15px 10px; + & img { + width: 20px; + height: 20px; + margin-left: 20px; + } + & .badge { + background-color: red; + margin: 5px; + position: absolute; + left: 5px; + top: 12px; + } + } + &--button { + width: 100%; + height: 100px; + color: white; + padding: 15px 10px; + cursor: pointer; + & img { + width: 20px; + height: 20px; + margin-left: 20px; + } + } + &--version { + position: absolute; + bottom: 5px; + left: 0px; + width: 100%; + height: 32px; + font-size: 14px; + justify-content: center; + align-items: center; + & span { + color: #cfcfcf; + font-size: 14px; + } + } + } +} + +.makeStyles-list-1 { + width: 300px !important; +} + +.MuiBackdrop-root { + top: 35px !important; +} + +.navbar-drawer__bottom a { + width: 100%; + color: #666; + text-decoration: none; +} +.navbar-drawer__bottom a:hover { + color: $green; +} + +.navbar-drawer__bottom--link .navbar-drawer__bottom--link div { + font-size: 10px; +} + +.MuiTabs-indicator { + background-color: $green !important; +} + +.MuiTab-root { + min-width: 100px !important; +} + +.MuiTab-wrapper { + color: $green; +} + +.PrivateSwipeArea-root-15 { + left: 0 !important; + right: 0 !important; +} +.MuiPaper-elevation { + box-shadow: none; +} + +.nav-cansel { + color: red; + text-align: left; + +} diff --git a/src/components/style/_btnStyle.scss b/src/components/style/_btnStyle.scss new file mode 100644 index 0000000..3f37ea5 --- /dev/null +++ b/src/components/style/_btnStyle.scss @@ -0,0 +1,22 @@ +@import './colors'; + +.btn{ + border: $green solid 1.5px !important; + padding: 0px 3px 4px 3px !important; + height: 1.5rem; + color: $green !important; + + p{ + font-size: 12px; + margin: 0; + padding: 2px 5px !important; + } +} + +.btn:hover{ + color: $white !important; + background-color: $green !important; +} +.btn:focus { + box-shadow: none !important; +} \ No newline at end of file diff --git a/src/components/style/_colors.scss b/src/components/style/_colors.scss new file mode 100644 index 0000000..d954685 --- /dev/null +++ b/src/components/style/_colors.scss @@ -0,0 +1,4 @@ +$green : #009AA8; +$white : #fff; +$black : #000; +$gray : #fafafa; \ No newline at end of file diff --git a/src/components/style/_twobtnStyle.scss b/src/components/style/_twobtnStyle.scss new file mode 100644 index 0000000..a132636 --- /dev/null +++ b/src/components/style/_twobtnStyle.scss @@ -0,0 +1,23 @@ +@import './colors'; + +.nav-fontBtn{ + margin-right: 5px; + nav{ + display: flex; + justify-content: space-between; + width: 60px; + height: 1.5rem; + border-radius: 5px; + border: 1.5px solid $green; + + .counter{ + font-size: 0.95rem; + } + + p{ + padding-left: 2px; + padding-right: 2px; + font-family: inherit; + } + } +} \ No newline at end of file diff --git a/src/components/style/bookPage.scss b/src/components/style/bookPage.scss new file mode 100644 index 0000000..248b764 --- /dev/null +++ b/src/components/style/bookPage.scss @@ -0,0 +1,57 @@ +@import './colors'; + +.paragraph { + text-align: justify; + direction: rtl; + color: black; +} + +.slider-btn-left { + display: flex; + align-items: center; +} + +.slider-btn-right { + display: flex; + align-items: center; +} + +.nav-flex-items-pages { + height: 100%; + max-height: 100%; + display: flex; + justify-content: center; +} + +.main-nav{ + height: calc(100% - 90px); + margin-top: 15px; + display: flex; + justify-content: center; +} + +@media only screen and (max-width: 700px) { + .slider-btn-left { + display: flex; + align-items: center; + opacity: 0; + width: 40%; + left: 0; + top: 60px; + z-index: 500; + position: absolute; + height: 85%; + } + + .slider-btn-right{ + display: flex; + align-items: center; + opacity: 0; + width: 40%; + right: 0; + top: 60px; + z-index: 500; + position: absolute; + height: 85%; + } +} diff --git a/src/components/style/bookiconFooter.scss b/src/components/style/bookiconFooter.scss new file mode 100644 index 0000000..d4f7eef --- /dev/null +++ b/src/components/style/bookiconFooter.scss @@ -0,0 +1,12 @@ + +.nav-icon { + cursor: 'pointer'; + z-index: 500; + position: 'relative'; + margin-left: 0.5rem; +} +@media only screen and (max-width: 900px ) { + .display-icon { + display: none; + } +} \ No newline at end of file diff --git a/src/components/style/chosecolor.scss b/src/components/style/chosecolor.scss new file mode 100644 index 0000000..81541ea --- /dev/null +++ b/src/components/style/chosecolor.scss @@ -0,0 +1,48 @@ +@import './colors'; + + +.nav-btn{ + text-align: center; +} + +.btn-color{ + outline: none; + border-radius: 5px; + margin: 1px; +} + +#red-btn-w{ + background-color: #fff; + color: #121212; + border: $green solid 1px; +} + +#green-btn-w{ + background-color: #fff4e1; + color: #af622e; + border: $green solid 1px; +} + +#blue-btn-w{ + background-color: #86bbff ; + color: rgb(88, 88, 211); + border: $green solid 1px; +} + +#red-btn-d{ + background-color: #121212; + color: #fff; + border: $green solid 1px; +} + +#green-btn-d{ + background-color: #af622e; + color: rgb(255, 244, 225); + border: $green solid 1px; +} + +#blue-btn-d{ + background-color: #5858d3; + color: #86bbff; + border: $green solid 1px; +} \ No newline at end of file diff --git a/src/components/style/colorsComponents.scss b/src/components/style/colorsComponents.scss new file mode 100644 index 0000000..143aea1 --- /dev/null +++ b/src/components/style/colorsComponents.scss @@ -0,0 +1,88 @@ +@import './colors'; + +.switch { + position: relative; + display: inline-block; + width: 35px; + height: 18px; + margin-right: 5px; +} + +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgb(187, 187, 187); + -webkit-transition: .4s; + transition: .4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 12px; + width: 12px; + left: 2px; + bottom: 3px; + background-color: white; + transition: .4s; +} + + +input:checked + .slider { + background-color: $green; +} + +input:checked + .slider:before { + background-color: black; +} + + +input:focus + .slider { + box-shadow: 0 0 1px $green; +} + +input:checked + .slider:before { + transform: translateX(18px); +} + +/* Rounded sliders */ +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} + +.main-colors-setting{ + display: flex; + align-items: center; +} + + + +#dropdown-btn{ + background-color: white !important; + border: none !important ; + padding: 0px !important; + margin: 0px !important; +} + +#dropdown-btn:hover{ + color: $green !important; +} + +.palette-icon{ + width: 1.4rem; + margin-top: 2px; +} \ No newline at end of file diff --git a/src/components/style/fontStyle.scss b/src/components/style/fontStyle.scss new file mode 100644 index 0000000..c41251e --- /dev/null +++ b/src/components/style/fontStyle.scss @@ -0,0 +1,4 @@ +.nav-menu-font{ + min-width: 4rem !important; + transform: translate3d(-5px, 24px, 0px) !important; +} \ No newline at end of file diff --git a/src/components/style/fonts.scss b/src/components/style/fonts.scss new file mode 100644 index 0000000..35af1be --- /dev/null +++ b/src/components/style/fonts.scss @@ -0,0 +1,24 @@ +@import './colors'; + + +.nav-btn{ + text-align: center; + + .btn-font{ + outline: none; + border-radius: 5px; + margin: 5px; + border: $green solid 1.5px; + color: $green; + background-color: white; + width: 2.8rem; + font-size: 10px; + } + + .btn-font:hover{ + border: $green solid 1.5px; + color: white; + background-color: $green; + } + +} diff --git a/src/components/style/fontsize.scss b/src/components/style/fontsize.scss new file mode 100644 index 0000000..7f9bd8c --- /dev/null +++ b/src/components/style/fontsize.scss @@ -0,0 +1,3 @@ +@import './colors'; +@import './btnStyle'; +@import './twobtnStyle'; \ No newline at end of file diff --git a/src/components/style/footer.scss b/src/components/style/footer.scss new file mode 100644 index 0000000..5ce4129 --- /dev/null +++ b/src/components/style/footer.scss @@ -0,0 +1,44 @@ +@import './colors'; + +.main-footer { + width: 100%; + background-color: white; + height: 60px; + position: fixed; + bottom: 0; + text-align: center; + padding: 0.25rem 1rem; +} + +.nav-items { + display: flex; + justify-content: center; + text-align: center; + + p { + padding-right: 0.75rem; + } +} + +.buy-btn-mobile { + border: solid 1.5px white; + background-color: #009AA8; + border-radius: 5px; + color: white; + font-size: 12px; + padding: 0.30rem 2rem; + width: 112%; + position: fixed; + bottom: -1px; + right: -20px; +} + +@media only screen and (min-width: 700px ) { + .buy-btn-mobile { + display: none; + } + + .main-footer{ + height: 30px; + } + } diff --git a/src/components/style/header.scss b/src/components/style/header.scss new file mode 100644 index 0000000..3a94d5d --- /dev/null +++ b/src/components/style/header.scss @@ -0,0 +1,60 @@ +@import './colors'; + +.nav-header { + width: 100%; + background-color: $green; + height: 35px; + color: $white; + display: flex; + justify-content: space-between; + align-items: center; + + .items { + display: flex; + padding: 0.25rem 1rem; + + .icon { + margin-right: 5px; + width: 20px; + } + + .header-title { + margin: 0; + padding: 0; + font-size: 14px; + } + + .logo { + width: 50px; + margin-right: 1rem; + } + } +} + + +.buy-btn { + border: solid 1.5px white; + background-color: $green; + border-radius: 5px; + color: white; + margin-right: 7px; + font-size: 12px; + width: 8rem; +} + +.buy-btn:hover{ + color: $green; + background-color: white; + font-weight: bold; +} + + + +@media only screen and (max-width: 700px ) { + .buy-btn { + display: none; + } +} + + + diff --git a/src/components/style/home.scss b/src/components/style/home.scss new file mode 100644 index 0000000..c4d2875 --- /dev/null +++ b/src/components/style/home.scss @@ -0,0 +1,26 @@ +@import './colors'; + +.custom-drawer { + height: 100%; + width: 0px; + position: relative; + display: none; +} + +@keyframes drawerActive { + 0% { + width: 0px; + } + 100% { + width: 300px; + } +} + +.custom-drawer-active { + border-left: solid 1.5px #009aa882; + border-radius: 9px; + background-color: #fff; + width: 300px; + animation-name: drawerActive; + animation-duration: 0.2s; +} diff --git a/src/components/style/index.scss b/src/components/style/index.scss new file mode 100644 index 0000000..d34f06d --- /dev/null +++ b/src/components/style/index.scss @@ -0,0 +1,31 @@ +@import './colors'; + +@font-face { + font-family: 'Nazanin'; + src: local('Nazanin'), url(../fonts/Nazanin.woff) format('woff'); + } + + + @font-face { + font-family: 'Sans'; + src: local('IRANSansWeb'), url(../fonts/IRANSansWeb.woff) format('woff'); + } + + @font-face { + font-family: 'SansNum'; + src: local('IRANSansWebFaNum'), url(../fonts/IRANSansWebFaNum.woff) format('woff'); + } + +body { + margin: 0; + padding: 0; + color: $green; + font-family: 'SansNum' , 'Sans' , 'Nazanin'; + text-align: right; + overflow: hidden; +} +html,body,#root{ + height: 100%; +} + + diff --git a/src/components/style/lineheight.scss b/src/components/style/lineheight.scss new file mode 100644 index 0000000..e79b406 --- /dev/null +++ b/src/components/style/lineheight.scss @@ -0,0 +1,14 @@ +@import './btnStyle'; +@import './twobtnStyle'; + + +.line-space-icon-{ + font-size: 1rem !important; + width: 1rem !important; + margin: 3px; +} + +.line-space-icon{ + font-size: 1rem !important; + width: 1rem !important; +} diff --git a/src/components/style/modal.scss b/src/components/style/modal.scss new file mode 100644 index 0000000..67e23ae --- /dev/null +++ b/src/components/style/modal.scss @@ -0,0 +1,97 @@ +@import './colors'; + +.modal { + top: 6rem !important; + left: 6rem !important; +} + +.modal-content { + width: 300px !important; +} + +.modal-footer { + justify-content: flex-start !important; +} + +.title-input { + text-align: right; + direction: rtl; + width: 100% !important; + border: 1px gray solid; + outline: none; + padding: 0.25rem 1rem; + font-size: 14px; + border-radius: 3px; + margin-bottom: 0.75rem; +} + +.title-input::placeholder{ + font-size: 10px; + font-weight: 500; +} + +.dis-input { + text-align: right; + direction: rtl; + outline: none; + width: 100%; + padding: 0.25rem 1rem; + font-size: 12px; + border-radius: 3px; + resize: none; +} + +.dis-input::placeholder{ + font-size: 9px; + font-weight: 300; +} + +.save-btn { + border: none; + background-color: $green; + border-radius: 4px; + padding: 0.25rem 1rem; + color: #fff; + font-size: 14px; + margin-right: 0.5rem; +} + +.close-btn { + border: red solid 1px; + background-color: #fff; + border-radius: 4px; + padding: 0.25rem 1rem; + color: red; + font-size: 14px; +} + +.save-number-page{ + font-size: 10px; + text-align: left; + direction: ltr; +} + +.span-num{ + color: red; + font-weight: bold; +} + + +.nav-btn-form{ + text-align: left; + +} + +.lable-input{ + font-size: 12px; + font-weight: bold; +} + + +.bookmark{ + z-index: 2000; + position: absolute; + top: 3.75rem; + left: 34.75rem; + width: 8rem; +} \ No newline at end of file diff --git a/src/components/style/progress.scss b/src/components/style/progress.scss new file mode 100644 index 0000000..cddcaa1 --- /dev/null +++ b/src/components/style/progress.scss @@ -0,0 +1,9 @@ +@import './colors'; + + + +.edit-progress{ + direction: rtl; + width: 90% !important; + height: 5px !important; +} \ No newline at end of file diff --git a/src/components/style/search.scss b/src/components/style/search.scss new file mode 100644 index 0000000..e537a28 --- /dev/null +++ b/src/components/style/search.scss @@ -0,0 +1,3 @@ +.nav-search{ + display: flex !important; +} \ No newline at end of file diff --git a/src/components/style/searchBox.scss b/src/components/style/searchBox.scss new file mode 100644 index 0000000..59bd1c0 --- /dev/null +++ b/src/components/style/searchBox.scss @@ -0,0 +1,61 @@ +@import './colors'; + +.nav-color { + background-color: #fff; + width: 100%; +} +.nav-serch-items { + display: flex; + align-items: center; + border: solid 1.5px $green; + border-radius: 12px; + color: $green; + width: 100%; + + form { + width: 100%; + display: flex; + justify-content: space-between; + } + + svg { + margin-right: 10px; + } + + .input-text { + width: 100%; + color: $green; + font-size: 14px; + padding: 5px 5px; + border: none; + outline: none; + } + + input[type='search']::-webkit-search-cancel-button { + height: 10px; + width: 10px; + } + + .input-submit { + color: $green; + font-size: 15px; + padding: 5px 8px; + border-right: solid 1.5px $green; + border-left: none; + border-top: none; + border-bottom: none; + outline: none; + background-color: inherit; + } + + .input-submit:hover { + color: #fff; + background-color: $green; + border-left: none; + border-top: none; + border-bottom: none; + border-right: solid 1.5px $green; + border-left: solid 1.5px $green; + border-radius: 10px 0 0 10px; + } +} diff --git a/src/components/style/setting.scss b/src/components/style/setting.scss new file mode 100644 index 0000000..4c5ff16 --- /dev/null +++ b/src/components/style/setting.scss @@ -0,0 +1,18 @@ +.nav-content{ + display: flex; + align-items: center; + padding: 0.25rem 1rem; + justify-content: space-between; + + .nav-items{ + display: flex; + margin-left: 5px; + } +} + + +.nav-menu{ + min-width: 3rem !important; + transform: translate3d(-12px, 24px, 0px) !important; + padding: 2px !important; +} \ No newline at end of file diff --git a/src/components/style/tabpanel.scss b/src/components/style/tabpanel.scss new file mode 100644 index 0000000..fa2eb6c --- /dev/null +++ b/src/components/style/tabpanel.scss @@ -0,0 +1,87 @@ +@import './colors'; + +.main-tab { + background-color: white !important; + color: black !important; + font-family: inherit !important; + width: 100% !important; + position: static !important; + box-shadow: none; +} + +.MuiBox-root { + padding: 0 !important; +} +.MuiPaper-root{ + box-shadow: none !important; +} + +.list-note { + margin-bottom: 0.5rem; + padding: 15px 10px; + display: flex; + justify-content: space-between; + color: #666; + align-items: center; + font-family: 'Sans', 'SansNum'; + border-bottom: solid 1px #009aa833; + margin: 0; + width: 100%; + font-size: 15px; + + li { + display: flex; + list-style: none; + } + + p { + margin: 0; + padding: 0; + } +} + +.nav-list-book { + border-bottom: solid 1px #009aa833; + margin: 0; + width: 100%; + font-size: 15px; +} + +.nav-list-book-active { +background-color:#009aa85b; +color: $green; +border-bottom: solid 1px #009aa833; +margin: 0; +width: 100%; +font-size: 15px; +} + +.nav-list-book:hover { + background-color: rgba(200, 231, 231, 0.616); +} + +.list-note:hover { + background-color: rgba(200, 231, 231, 0.616); + color: $green; +} + + +.MuiPaper-elevation{ + box-shadow: none ; +} + + +.MuiTabs-indicator{ + display: none !important ; +} + + +.border-tab{ + font-family: inherit !important; + font-size: 12px !important; + padding: 0 !important; +} + +.border-tab-active{ + border-bottom: $green solid 1.5px !important; +} \ No newline at end of file diff --git a/src/containers/Footer.tsx b/src/containers/Footer.tsx index 07d630a..0781c4b 100644 --- a/src/containers/Footer.tsx +++ b/src/containers/Footer.tsx @@ -6,10 +6,9 @@ import MoveBtn from "components/footer/MoveBtn"; const Footer = ({ title, nowPage, totalPage, onPageMove }: Props) => { return ( - onPageMove("PREV")} /> - - onPageMove("NEXT")} /> + + onPageMove("PREV")} /> ); }; diff --git a/src/containers/Header.tsx b/src/containers/Header.tsx index a98bd22..14610c9 100644 --- a/src/containers/Header.tsx +++ b/src/containers/Header.tsx @@ -3,18 +3,43 @@ import styled from "styled-components"; import Wrapper from "components/header/Wrapper"; import Layout, { AutoLayout } from "components/header/Layout"; import Logo from "components/header/Logo"; -import ControlBtn from "components/header/ControlBtn"; +import Item from "components/footer/Item"; -const Header = ({ onNavToggle, onOptionToggle, onLearningToggle }: Props) => { +const Header = ({ + onNavToggle, + onOptionToggle, + onLearningToggle, + title, +}: Props) => { return ( + -