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 0000000..7a1b3ab Binary files /dev/null and b/src/components/image/logo.png differ 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 ( + -