From b71677b31a48ab475daffee1c5607182305e4adf Mon Sep 17 00:00:00 2001 From: taha12322 <66300435+taha12322@users.noreply.github.com> Date: Tue, 31 Aug 2021 16:00:26 +0430 Subject: [PATCH] color mood --- .../Setting/FontColor/Colors/chosecolor.js | 58 ------- src/components/Setting/FontColor/colors.js | 147 ++++++++++++------ src/components/footer/Item.tsx | 3 +- src/components/style/_btnStyle.scss | 4 +- src/components/style/colorsComponents.scss | 40 +++-- src/components/style/setting.scss | 1 + src/containers/Header.tsx | 7 +- 7 files changed, 140 insertions(+), 120 deletions(-) diff --git a/src/components/Setting/FontColor/Colors/chosecolor.js b/src/components/Setting/FontColor/Colors/chosecolor.js index 19125a4..e69de29 100644 --- a/src/components/Setting/FontColor/Colors/chosecolor.js +++ b/src/components/Setting/FontColor/Colors/chosecolor.js @@ -1,58 +0,0 @@ -import React from 'react'; -import '../../../style/chosecolor.scss'; - - - -const Chosecolor = (props) => { - const {setcolor , isChecked} = props; - - const changeColorHandler = (value) => { - setcolor(value) - } - return ( - <> - {isChecked ? -
-
-
- -
-
- -
-
- -
-
-
: -
-
-
- -
-
- -
-
- -
-
-
- } - - ) -} - -export default Chosecolor diff --git a/src/components/Setting/FontColor/colors.js b/src/components/Setting/FontColor/colors.js index 9accca0..b43a286 100644 --- a/src/components/Setting/FontColor/colors.js +++ b/src/components/Setting/FontColor/colors.js @@ -1,50 +1,109 @@ -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'; - +import React, { useState } from "react"; +import "../../../components/style/colorsComponents.scss"; +import "../../../components/style/chosecolor.scss"; +import PalletColorOutline from "../../image/PalletColorOutline.svg"; +import PalletColorbold from "../../image/PalletColorBold.svg"; +import Chosecolor from "./Colors/chosecolor"; +import { + ButtonDropdown, + DropdownToggle, + DropdownMenu, + DropdownItem, +} from "reactstrap"; const Colors = (props) => { - const { setcolor, color} = props; - const [dropdownOpen, setDropdownOpen] = useState(false); - const toggle = () => setDropdownOpen(prevState => !prevState); - + const { setcolor, color } = props; - const [isChecked, setIsChecked] = useState(false) + const [dropdownOpen, setOpen] = useState(false); + const toggle = () => setOpen(!dropdownOpen); + const [isChecked, setIsChecked] = useState(false); + const [Icon, seticon] = useState(PalletColorOutline); + const changeIcone = () => { + seticon(Icon === PalletColorOutline ? PalletColorbold : PalletColorOutline); + }; - const [Icon, seticon] = useState(PalletColorOutline); - const changeIcone = () => { - seticon(Icon===PalletColorOutline?PalletColorbold:PalletColorOutline); - }; + const changeColorHandler = (value) => { + setcolor(value); + }; - return ( - <> - - - ) -} + return ( + <> + + + +
changeIcone()}> + icon +
+ + + {isChecked ? ( + <> + + + + + + + + + + + ) : ( + <> + + + + + + + + + + + )} + + + + ); +}; -export default Colors \ No newline at end of file +export default Colors; diff --git a/src/components/footer/Item.tsx b/src/components/footer/Item.tsx index 15701e0..36b3939 100644 --- a/src/components/footer/Item.tsx +++ b/src/components/footer/Item.tsx @@ -15,10 +15,11 @@ const Container = styled.div` flex-basis: 100%; display: flex; align-items: center; - justify-content: center; + justify-content: flex-start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + padding-right: 5px; & > span { color: ${palette.white}; diff --git a/src/components/style/_btnStyle.scss b/src/components/style/_btnStyle.scss index 3f37ea5..2de2754 100644 --- a/src/components/style/_btnStyle.scss +++ b/src/components/style/_btnStyle.scss @@ -1,7 +1,8 @@ @import './colors'; .btn{ - border: $green solid 1.5px !important; + background-color: #fff !important; + border: none !important; padding: 0px 3px 4px 3px !important; height: 1.5rem; color: $green !important; @@ -15,7 +16,6 @@ .btn:hover{ color: $white !important; - background-color: $green !important; } .btn:focus { box-shadow: none !important; diff --git a/src/components/style/colorsComponents.scss b/src/components/style/colorsComponents.scss index 143aea1..a541e83 100644 --- a/src/components/style/colorsComponents.scss +++ b/src/components/style/colorsComponents.scss @@ -1,4 +1,4 @@ -@import './colors'; +@import "./colors"; .switch { position: relative; @@ -8,7 +8,7 @@ margin-right: 5px; } -.switch input { +.switch input { opacity: 0; width: 0; height: 0; @@ -22,8 +22,8 @@ right: 0; bottom: 0; background-color: rgb(187, 187, 187); - -webkit-transition: .4s; - transition: .4s; + -webkit-transition: 0.4s; + transition: 0.4s; } .slider:before { @@ -34,10 +34,9 @@ left: 2px; bottom: 3px; background-color: white; - transition: .4s; + transition: 0.4s; } - input:checked + .slider { background-color: $green; } @@ -46,7 +45,6 @@ input:checked + .slider:before { background-color: black; } - input:focus + .slider { box-shadow: 0 0 1px $green; } @@ -64,25 +62,39 @@ input:checked + .slider:before { border-radius: 50%; } -.main-colors-setting{ +.main-colors-setting { display: flex; align-items: center; } - - -#dropdown-btn{ +#dropdown-btn { background-color: white !important; border: none !important ; padding: 0px !important; margin: 0px !important; } -#dropdown-btn:hover{ +#dropdown-btn:hover { color: $green !important; } -.palette-icon{ +.palette-icon { width: 1.4rem; margin-top: 2px; -} \ No newline at end of file +} + +.dropdown-menu{ + position: absolute !important; + z-index: 1000 !important; + margin: 0; + text-align: center !important; + background-color: #fff; + border: 1px solid rgba(0, 0, 0, 0.15) !important; + border-radius: 0.25rem; + min-width: 0rem !important; + padding: 0.5rem !important; + + .dropdown-item{ + padding: 0 !important; + } +} diff --git a/src/components/style/setting.scss b/src/components/style/setting.scss index 4c5ff16..13811c7 100644 --- a/src/components/style/setting.scss +++ b/src/components/style/setting.scss @@ -3,6 +3,7 @@ align-items: center; padding: 0.25rem 1rem; justify-content: space-between; + z-index: 1000; .nav-items{ display: flex; diff --git a/src/containers/Header.tsx b/src/containers/Header.tsx index fc0c877..662cebd 100644 --- a/src/containers/Header.tsx +++ b/src/containers/Header.tsx @@ -46,7 +46,12 @@ const Header = ({