Skip to content

Commit

Permalink
update color icons immediately
Browse files Browse the repository at this point in the history
  • Loading branch information
@SeanM322
SeanM322 committed Jul 12, 2024
1 parent c05243b commit b240994
Show file tree
Hide file tree
Showing 19 changed files with 149 additions and 265 deletions.
21 changes: 8 additions & 13 deletions rair-front/src/components/Header/MainHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ import TalkSalesComponent from './HeaderItems/TalkToSalesComponent/TalkSalesComp

//styles
import './Header.css';
import useServerSettings from '../adminViews/useServerSettings';

const MainHeader: React.FC<IMainHeader> = ({
goHome,
Expand All @@ -53,11 +52,9 @@ const MainHeader: React.FC<IMainHeader> = ({
const dispatch = useDispatch();
const navigate = useNavigate();

const {customSecondaryButtonColor} = useServerSettings();

const { ref, isComponentVisible, setIsComponentVisible } =
useComponentVisible(true);
const { primaryColor, headerLogo, primaryButtonColor, textColor } =
const { primaryColor, headerLogo, primaryButtonColor, textColor, secondaryButtonColor, iconColor } =
useSelector<RootState, ColorStoreType>((store) => store.colorStore);
const { connectUserData } = useConnectUser();
const { dataAll, message } = useSelector<RootState, TSearchInitialState>(
Expand All @@ -72,6 +69,8 @@ const MainHeader: React.FC<IMainHeader> = ({
(store) => store.contractStore
);

console.info(iconColor, 'iconColor')

const hotdropsVar = import.meta.env.VITE_TESTNET;

const [textSearch, setTextSearch] = useState<string>('');
Expand Down Expand Up @@ -125,6 +124,8 @@ const MainHeader: React.FC<IMainHeader> = ({
setTextSearch('');
};

console.info(secondaryButtonColor, 'secondaryButtonColor')

const Highlight = (props) => {
const { filter, str } = props;
if (!filter) return str;
Expand Down Expand Up @@ -359,16 +360,10 @@ const MainHeader: React.FC<IMainHeader> = ({
style={{
color:
import.meta.env.VITE_TESTNET === 'true'
? `${
textColor === '#FFF' || textColor === 'black'
? '#F95631'
: customSecondaryButtonColor
}`
?
`${iconColor === '#1486c5' ? '#F95631' : iconColor}`
: `${
textColor === '#FFF' || textColor === 'black'
? '#E882D5'
: customSecondaryButtonColor
}`
iconColor === '#1486c5' ? '#E882D5' : iconColor}`
}}
aria-hidden="true"></i>
</div>
Expand Down
43 changes: 13 additions & 30 deletions rair-front/src/components/MockUpPage/FilteringBlock/FilteringBlock.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ import ModalBlockchain from './portal/ModalBlockchain/ModalBlockchain';
import ModalCategories from './portal/ModalCategories/ModalCategories';

import './FilteringBlock.css';
import useServerSettings from '../../adminViews/useServerSettings';

const FilteringBlock = ({
sortItem,
Expand All @@ -52,13 +51,11 @@ const FilteringBlock = ({
const [sortPopUp, setSortPopUp] = useState(false);
const sortRef = useRef();

const { primaryColor, secondaryColor, textColor } = useSelector<
const { primaryColor, secondaryColor, textColor, iconColor } = useSelector<
RootState,
ColorStoreType
>((store) => store.colorStore);

const {customSecondaryButtonColor} = useServerSettings();

const [isOpenCategories, setIsOpenCategories] = useState(false);
const [isOpenBlockchain, setIsOpenBlockchain] = useState(false);
const { width /*height*/ } = useWindowDimensions();
Expand Down Expand Up @@ -162,12 +159,12 @@ const FilteringBlock = ({
textColor={textColor}
sortItem={sortItem}
primaryColor={primaryColor}
customSecondaryButtonColor={customSecondaryButtonColor}
customSecondaryButtonColor={iconColor}
className="fas fa-arrow-up"
/>
<StyledArrowDownIcon
textColor={textColor}
customSecondaryButtonColor={customSecondaryButtonColor}
customSecondaryButtonColor={iconColor}
sortItem={sortItem}
primaryColor={primaryColor}
className="fas fa-arrow-down"
Expand All @@ -187,15 +184,15 @@ const FilteringBlock = ({
rotate="true"
primaryColor={primaryColor}
textColor={textColor}
customSecondaryButtonColor={customSecondaryButtonColor}
customSecondaryButtonColor={iconColor}
/>
) : (
// <i className="fas fa-chevron-down"></i>
<StyledShevronIcon
className="fas fa-chevron-up"
primaryColor={primaryColor}
textColor={textColor}
customSecondaryButtonColor={customSecondaryButtonColor}
customSecondaryButtonColor={iconColor}
/>
)}
</div>
Expand Down Expand Up @@ -277,31 +274,24 @@ const FilteringBlock = ({
style={{
marginRight: '5px',
color: import.meta.env.VITE_TESTNET === 'true'
? `${
textColor === '#FFF' || textColor === 'black'
? '#F95631'
: customSecondaryButtonColor
}`
? `${iconColor === '#1486c5' ? '#F95631' : iconColor}`
: filterPopUp
? '#fff'
: `${
textColor === '#FFF' || textColor === 'black'
? '#E882D5'
: customSecondaryButtonColor
}`}
iconColor === '#1486c5' ? '#E882D5' : iconColor}`}
}
/>
) : (
<StyledFilterIcon
customSecondaryButtonColor={customSecondaryButtonColor}
customSecondaryButtonColor={iconColor}
primaryColor={primaryColor}
textColor={textColor}
filterPopUp={filterPopUp}></StyledFilterIcon>
)}
</>
) : (
<StyledFilterIcon
customSecondaryButtonColor={customSecondaryButtonColor}
customSecondaryButtonColor={iconColor}
primaryColor={primaryColor}
textColor={textColor}
filterPopUp={filterPopUp}></StyledFilterIcon>
Expand All @@ -323,7 +313,7 @@ const FilteringBlock = ({
<>
{filterCloseText ? (
<StyledFilterIcon
customSecondaryButtonColor={customSecondaryButtonColor}
customSecondaryButtonColor={iconColor}
primaryColor={primaryColor}
textColor={textColor}
filterPopUp={filterPopUp}></StyledFilterIcon>
Expand All @@ -332,25 +322,18 @@ const FilteringBlock = ({
style={{
marginRight: '5px',
color: import.meta.env.VITE_TESTNET === 'true'
? `${
textColor === '#FFF' || textColor === 'black'
? '#F95631'
: customSecondaryButtonColor
}`
? `${iconColor === '#1486c5' ? '#F95631' : iconColor}`
: filterPopUp
? '#fff'
: `${
textColor === '#FFF' || textColor === 'black'
? '#E882D5'
: customSecondaryButtonColor
}`}
iconColor === '#1486c5' ? '#E882D5' : iconColor}`}
}
/>
)}
</>
) : (
<StyledFilterIcon
customSecondaryButtonColor={customSecondaryButtonColor}
customSecondaryButtonColor={iconColor}
primaryColor={primaryColor}
textColor={textColor}
filterPopUp={filterPopUp}></StyledFilterIcon>
Expand Down
69 changes: 16 additions & 53 deletions ...ront/src/components/MockUpPage/FilteringBlock/FilteringBlockItems/FilteringBlockItems.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,18 +100,12 @@ export const StyledFilterIcon = styled(FilterIconNew)`
path {
stroke: ${(props: TFiltersTitleIconStyled) =>
import.meta.env.VITE_TESTNET === 'true'
? `${
props.textColor === '#FFF' || props.textColor === 'black'
? '#F95631'
: props.customSecondaryButtonColor
}`
? `${props.customSecondaryButtonColor === '#1486c5' ? '#F95631' : props.customSecondaryButtonColor}`
: props.filterPopUp
? '#fff'
: `${
props.textColor === '#FFF' || props.textColor === 'black'
? '#E882D5'
: props.customSecondaryButtonColor
}`};
props.customSecondaryButtonColor === '#1486c5' ? '#E882D5' : props.customSecondaryButtonColor
}`};
}
margin-right: 8px;
`;
Expand All @@ -120,34 +114,21 @@ export const StyledArrowUpIcon = styled(ArrowUp)`
path {
stroke: ${(props: TSortArrowUpIconStyled) =>
import.meta.env.VITE_TESTNET === 'true'
? `${
props.textColor === '#FFF' || props.textColor === 'black'
? '#F95631'
: props.customSecondaryButtonColor
}`
? `${props.customSecondaryButtonColor === '#1486c5' ? '#F95631' : props.customSecondaryButtonColor}`
: props.sortItem === 'up'
? `${
props.textColor === '#FFF' || props.textColor === 'black'
? '#E882D5'
: props.customSecondaryButtonColor
}`
props.customSecondaryButtonColor === '#1486c5' ? '#E882D5' : props.customSecondaryButtonColor}`
: '#A7A6A6'};
}
`;
export const StyledArrowDownIcon = styled(ArrowDown)`
path {
stroke: ${(props: TSortArrowUpIconStyled) =>
import.meta.env.VITE_TESTNET === 'true'
? `${
props.textColor === '#FFF' || props.textColor === 'black'
? '#F95631'
: props.customSecondaryButtonColor
}`
? `${props.customSecondaryButtonColor === '#1486c5' ? '#F95631' : props.customSecondaryButtonColor}`
: props.sortItem === 'down' &&
`${
props.textColor === '#FFF' || props.textColor === 'black'
? '#E882D5'
: props.customSecondaryButtonColor
props.customSecondaryButtonColor === '#1486c5' ? '#E882D5' : props.customSecondaryButtonColor
}`};
}
`;
Expand All @@ -159,48 +140,30 @@ export const StyledShevronIcon = styled(SimpleFilterArrow)`
path {
stroke: ${(props) =>
import.meta.env.VITE_TESTNET === 'true'
? `${
props.textColor === '#FFF' || props.textColor === 'black'
? '#F95631'
: props.customSecondaryButtonColor
}`
? `${props.customSecondaryButtonColor === '#1486c5' ? '#F95631' : props.customSecondaryButtonColor}`
: `${
props.textColor === '#FFF' || props.textColor === 'black'
? '#E882D5'
: props.customSecondaryButtonColor
}`};
props.customSecondaryButtonColor === '#1486c5' ? '#E882D5' : props.customSecondaryButtonColor
}`};
}
`;

export const StyledPopupArrowUpIcon = styled(ArrowUp)`
path {
stroke: ${(props: TSortArrowUpIconStyled) =>
import.meta.env.VITE_TESTNET === 'true'
? `${
props.textColor === '#FFF' || props.textColor === 'black'
? '#F95631'
: props.textColor
}`
? `${props.customSecondaryButtonColor === '#1486c5' ? '#F95631' : props.customSecondaryButtonColor}`
: `${
props.textColor === '#FFF' || props.textColor === 'black'
? '#E882D5'
: props.textColor
}`};
props.customSecondaryButtonColor === '#1486c5' ? '#E882D5' : props.customSecondaryButtonColor
}`};
}
`;
export const StyledPopupArrowDownIcon = styled(ArrowDown)`
path {
stroke: ${(props: TSortArrowUpIconStyled) =>
import.meta.env.VITE_TESTNET === 'true'
? `${
props.textColor === '#FFF' || props.textColor === 'black'
? '#F95631'
: props.textColor
}`
? `${props.customSecondaryButtonColor === '#1486c5' ? '#F95631' : props.customSecondaryButtonColor}`
: `${
props.textColor === '#FFF' || props.textColor === 'black'
? '#E882D5'
: props.textColor
}`};
props.customSecondaryButtonColor === '#1486c5' ? '#E882D5' : props.customSecondaryButtonColor
}`};
}
`;
36 changes: 11 additions & 25 deletions rair-front/src/components/MockUpPage/NftList/Breadcrumbs/Breadcrumbs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import { TParamsBreadcrumbsComponent } from '../../mockupPage.types';
import { IBreadcrumbsComponent } from '../nftList.types';

import './Breadcrumbs.css';
import useServerSettings from '../../../adminViews/useServerSettings';

const BreadcrumbsComponent: React.FC<IBreadcrumbsComponent> = ({
embeddedParams
Expand All @@ -25,10 +24,9 @@ const BreadcrumbsComponent: React.FC<IBreadcrumbsComponent> = ({
? embeddedParams
: params;
const navigate = useNavigate();
const { primaryColor, textColor } = useSelector<RootState, ColorStoreType>(
const { primaryColor, textColor, iconColor } = useSelector<RootState, ColorStoreType>(
(store) => store.colorStore
);
const {customSecondaryButtonColor} = useServerSettings();

function handleClick(event: MouseEvent) {
event.preventDefault();
Expand Down Expand Up @@ -69,17 +67,11 @@ const BreadcrumbsComponent: React.FC<IBreadcrumbsComponent> = ({
<SingleTokenHome
style={{
fill:
import.meta.env.VITE_TESTNET === 'true'
? `${
textColor === '#FFF' || textColor === 'black'
? '#F95631'
: customSecondaryButtonColor
}`
: `${
textColor === '#FFF' || textColor === 'black'
? '#E882D5'
: customSecondaryButtonColor
}`
import.meta.env.VITE_TESTNET === 'true'
?
`${iconColor === '#1486c5' ? '#F95631' : iconColor}`
: `${
iconColor === '#1486c5' ? '#E882D5' : iconColor}`
}}
width={24}
height={24}
Expand Down Expand Up @@ -108,17 +100,11 @@ const BreadcrumbsComponent: React.FC<IBreadcrumbsComponent> = ({
<SingleTokenHome
style={{
fill:
import.meta.env.VITE_TESTNET === 'true'
? `${
textColor === '#FFF' || textColor === 'black'
? '#F95631'
: customSecondaryButtonColor
}`
: `${
textColor === '#FFF' || textColor === 'black'
? '#E882D5'
: customSecondaryButtonColor
}`
import.meta.env.VITE_TESTNET === 'true'
?
`${iconColor === '#1486c5' ? '#F95631' : iconColor}`
: `${
iconColor === '#1486c5' ? '#E882D5' : iconColor}`
}}
width={24}
height={24}
Expand Down
Loading

0 comments on commit b240994

Please sign in to comment.