Skip to content

Commit

Permalink
fix icons and buttons with serverSettings
Browse files Browse the repository at this point in the history
  • Loading branch information
@SeanM322
SeanM322 committed Jul 11, 2024
1 parent 5da0438 commit c05243b
Show file tree
Hide file tree
Showing 14 changed files with 203 additions and 39 deletions.
7 changes: 5 additions & 2 deletions rair-front/src/components/Header/MainHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import TalkSalesComponent from './HeaderItems/TalkToSalesComponent/TalkSalesComp

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

const MainHeader: React.FC<IMainHeader> = ({
goHome,
Expand All @@ -52,6 +53,8 @@ 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 } =
Expand Down Expand Up @@ -359,12 +362,12 @@ const MainHeader: React.FC<IMainHeader> = ({
? `${
textColor === '#FFF' || textColor === 'black'
? '#F95631'
: textColor
: customSecondaryButtonColor
}`
: `${
textColor === '#FFF' || textColor === 'black'
? '#E882D5'
: textColor
: customSecondaryButtonColor
}`
}}
aria-hidden="true"></i>
Expand Down
53 changes: 47 additions & 6 deletions rair-front/src/components/MockUpPage/FilteringBlock/FilteringBlock.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import ModalBlockchain from './portal/ModalBlockchain/ModalBlockchain';
import ModalCategories from './portal/ModalCategories/ModalCategories';

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

const FilteringBlock = ({
sortItem,
Expand Down Expand Up @@ -56,6 +57,8 @@ const FilteringBlock = ({
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 @@ -159,10 +162,12 @@ const FilteringBlock = ({
textColor={textColor}
sortItem={sortItem}
primaryColor={primaryColor}
customSecondaryButtonColor={customSecondaryButtonColor}
className="fas fa-arrow-up"
/>
<StyledArrowDownIcon
textColor={textColor}
customSecondaryButtonColor={customSecondaryButtonColor}
sortItem={sortItem}
primaryColor={primaryColor}
className="fas fa-arrow-down"
Expand All @@ -182,13 +187,15 @@ const FilteringBlock = ({
rotate="true"
primaryColor={primaryColor}
textColor={textColor}
customSecondaryButtonColor={customSecondaryButtonColor}
/>
) : (
// <i className="fas fa-chevron-down"></i>
<StyledShevronIcon
className="fas fa-chevron-up"
primaryColor={primaryColor}
textColor={textColor}
customSecondaryButtonColor={customSecondaryButtonColor}
/>
)}
</div>
Expand Down Expand Up @@ -268,18 +275,33 @@ const FilteringBlock = ({
{filterCloseText ? (
<CloseIcon
style={{
marginRight: '5px'
}}
marginRight: '5px',
color: import.meta.env.VITE_TESTNET === 'true'
? `${
textColor === '#FFF' || textColor === 'black'
? '#F95631'
: customSecondaryButtonColor
}`
: filterPopUp
? '#fff'
: `${
textColor === '#FFF' || textColor === 'black'
? '#E882D5'
: customSecondaryButtonColor
}`}
}
/>
) : (
<StyledFilterIcon
customSecondaryButtonColor={customSecondaryButtonColor}
primaryColor={primaryColor}
textColor={textColor}
filterPopUp={filterPopUp}></StyledFilterIcon>
)}
</>
) : (
<StyledFilterIcon
customSecondaryButtonColor={customSecondaryButtonColor}
primaryColor={primaryColor}
textColor={textColor}
filterPopUp={filterPopUp}></StyledFilterIcon>
Expand All @@ -301,18 +323,37 @@ const FilteringBlock = ({
<>
{filterCloseText ? (
<StyledFilterIcon
filterPopUp={filterPopUp}></StyledFilterIcon>
customSecondaryButtonColor={customSecondaryButtonColor}
primaryColor={primaryColor}
textColor={textColor}
filterPopUp={filterPopUp}></StyledFilterIcon>
) : (
<CloseIcon
style={{
marginRight: '5px'
}}
marginRight: '5px',
color: import.meta.env.VITE_TESTNET === 'true'
? `${
textColor === '#FFF' || textColor === 'black'
? '#F95631'
: customSecondaryButtonColor
}`
: filterPopUp
? '#fff'
: `${
textColor === '#FFF' || textColor === 'black'
? '#E882D5'
: customSecondaryButtonColor
}`}
}
/>
)}
</>
) : (
<StyledFilterIcon
filterPopUp={filterPopUp}></StyledFilterIcon>
customSecondaryButtonColor={customSecondaryButtonColor}
primaryColor={primaryColor}
textColor={textColor}
filterPopUp={filterPopUp}></StyledFilterIcon>
)}
{width > 700 && <span>Filters</span>}
</div>
Expand Down
16 changes: 8 additions & 8 deletions ...ront/src/components/MockUpPage/FilteringBlock/FilteringBlockItems/FilteringBlockItems.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,14 +103,14 @@ export const StyledFilterIcon = styled(FilterIconNew)`
? `${
props.textColor === '#FFF' || props.textColor === 'black'
? '#F95631'
: props.textColor
: props.customSecondaryButtonColor
}`
: props.filterPopUp
? '#fff'
: `${
props.textColor === '#FFF' || props.textColor === 'black'
? '#E882D5'
: props.textColor
: props.customSecondaryButtonColor
}`};
}
margin-right: 8px;
Expand All @@ -123,13 +123,13 @@ export const StyledArrowUpIcon = styled(ArrowUp)`
? `${
props.textColor === '#FFF' || props.textColor === 'black'
? '#F95631'
: props.textColor
: props.customSecondaryButtonColor
}`
: props.sortItem === 'up'
? `${
props.textColor === '#FFF' || props.textColor === 'black'
? '#E882D5'
: props.textColor
: props.customSecondaryButtonColor
}`
: '#A7A6A6'};
}
Expand All @@ -141,13 +141,13 @@ export const StyledArrowDownIcon = styled(ArrowDown)`
? `${
props.textColor === '#FFF' || props.textColor === 'black'
? '#F95631'
: props.textColor
: props.customSecondaryButtonColor
}`
: props.sortItem === 'down' &&
`${
props.textColor === '#FFF' || props.textColor === 'black'
? '#E882D5'
: props.textColor
: props.customSecondaryButtonColor
}`};
}
`;
Expand All @@ -162,12 +162,12 @@ export const StyledShevronIcon = styled(SimpleFilterArrow)`
? `${
props.textColor === '#FFF' || props.textColor === 'black'
? '#F95631'
: props.textColor
: props.customSecondaryButtonColor
}`
: `${
props.textColor === '#FFF' || props.textColor === 'black'
? '#E882D5'
: props.textColor
: props.customSecondaryButtonColor
}`};
}
`;
Expand Down
3 changes: 3 additions & 0 deletions rair-front/src/components/MockUpPage/FilteringBlock/filteringBlock.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export type TFiltersTitleIconStyled = {
className?: string;
primaryColor: string;
textColor?: string;
customSecondaryButtonColor?: string;
};

export type TSelectFiltersPopUpStyled = {
Expand All @@ -57,6 +58,7 @@ export type TSortArrowUpIconStyled = {
sortItem?: TSortChoice;
primaryColor: string;
textColor?: string;
customSecondaryButtonColor?: any;
};

export type TSelectSortPopUpStyled = {
Expand All @@ -74,6 +76,7 @@ export type TStyledShevronIconStyled = {
rotate?: string;
primaryColor: string;
textColor?: string;
customSecondaryButtonColor?: string;
};

export type TModalCategoriesItem = {
Expand Down
10 changes: 6 additions & 4 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,6 +15,7 @@ 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 @@ -27,6 +28,7 @@ const BreadcrumbsComponent: React.FC<IBreadcrumbsComponent> = ({
const { primaryColor, textColor } = useSelector<RootState, ColorStoreType>(
(store) => store.colorStore
);
const {customSecondaryButtonColor} = useServerSettings();

function handleClick(event: MouseEvent) {
event.preventDefault();
Expand Down Expand Up @@ -71,12 +73,12 @@ const BreadcrumbsComponent: React.FC<IBreadcrumbsComponent> = ({
? `${
textColor === '#FFF' || textColor === 'black'
? '#F95631'
: textColor
: customSecondaryButtonColor
}`
: `${
textColor === '#FFF' || textColor === 'black'
? '#E882D5'
: textColor
: customSecondaryButtonColor
}`
}}
width={24}
Expand Down Expand Up @@ -110,12 +112,12 @@ const BreadcrumbsComponent: React.FC<IBreadcrumbsComponent> = ({
? `${
textColor === '#FFF' || textColor === 'black'
? '#F95631'
: textColor
: customSecondaryButtonColor
}`
: `${
textColor === '#FFF' || textColor === 'black'
? '#E882D5'
: textColor
: customSecondaryButtonColor
}`
}}
width={24}
Expand Down
7 changes: 5 additions & 2 deletions rair-front/src/components/MockUpPage/NftList/NftData/NftCollectionPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ import MetadataAttributesProperties from './TitleCollection/FilterMetadataTokens
import TitleCollection from './TitleCollection/TitleCollection';

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

const NftCollectionPageComponent: React.FC<INftCollectionPageComponent> = ({
embeddedParams,
Expand Down Expand Up @@ -77,6 +78,8 @@ const NftCollectionPageComponent: React.FC<INftCollectionPageComponent> = ({
const [selectedAttributeValues, setSelectedAttributeValues] =
useState<any>(undefined);

const {customSecondaryButtonColor} = useServerSettings();

const { primaryColor, textColor, primaryButtonColor } = useSelector<
RootState,
ColorStoreType
Expand Down Expand Up @@ -447,12 +450,12 @@ const NftCollectionPageComponent: React.FC<INftCollectionPageComponent> = ({
? `${
textColor === '#FFF' || textColor === 'black'
? '#F95631'
: textColor
: customSecondaryButtonColor
}`
: `${
textColor === '#FFF' || textColor === 'black'
? '#E882D5'
: textColor
: customSecondaryButtonColor
}`
}}
aria-hidden="true"></i>
Expand Down
16 changes: 16 additions & 0 deletions rair-front/src/components/MockUpPage/NftList/NftData/SellInputButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { RootState } from '../../../../ducks';
import { ColorStoreType } from '../../../../ducks/colors/colorStore.types';
import InputField from '../../../common/InputField';
import { ISellInputButton } from '../../mockupPage.types';
import useServerSettings from '../../../adminViews/useServerSettings';

const SellInputButton: React.FC<ISellInputButton> = ({
tokenData,
Expand All @@ -19,6 +20,7 @@ const SellInputButton: React.FC<ISellInputButton> = ({
const { textColor } = useSelector<RootState, ColorStoreType>(
(store) => store.colorStore
);
const {customSecondaryButtonColor} = useServerSettings();

const handleInputClear = useCallback(() => {
if (inputSellValue) {
Expand All @@ -40,6 +42,20 @@ const SellInputButton: React.FC<ISellInputButton> = ({
placeholder="Your price"
/>
<CloseIcon
style={{
color:
import.meta.env.VITE_TESTNET === 'true'
? `${
textColor === '#FFF' || textColor === 'black'
? '#F95631'
: customSecondaryButtonColor
}`
: `${
textColor === '#FFF' || textColor === 'black'
? '#E882D5'
: customSecondaryButtonColor
}`
}}
className="input-sell-close-icon"
fontSize="small"
onClick={handleInputClear}
Expand Down
6 changes: 4 additions & 2 deletions rair-front/src/components/MockUpPage/SearchPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ import {
} from './FilteringBlock/filteringBlock.types';
import { NftList } from './NftList/NftList';
import PaginationBox from './PaginationBox/PaginationBox';
import useServerSettings from '../adminViews/useServerSettings';

const SearchPanel: React.FC<ISearchPanel> = ({ tabIndex, setTabIndex }) => {
const [videoUnlocked, setVideoUnlocked] = useState<boolean>(false);
Expand All @@ -65,6 +66,7 @@ const SearchPanel: React.FC<ISearchPanel> = ({ tabIndex, setTabIndex }) => {
const currentPage = useSelector<RootState, number>(
(store) => store.getPageStore.currentPage
);
const {customSecondaryButtonColor} = useServerSettings();
const { nftListTotal, nftList, itemsPerPage } = useSelector<
RootState,
InitialNftDataStateType
Expand Down Expand Up @@ -270,12 +272,12 @@ const SearchPanel: React.FC<ISearchPanel> = ({ tabIndex, setTabIndex }) => {
? `${
textColor === '#FFF' || textColor === 'black'
? '#F95631'
: textColor
: customSecondaryButtonColor
}`
: `${
textColor === '#FFF' || textColor === 'black'
? '#E882D5'
: textColor
: customSecondaryButtonColor
}`
}}
aria-hidden="true"></i>
Expand Down
Loading

0 comments on commit c05243b

Please sign in to comment.