Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

94 update theming elements header text color to primary button color for icons #111

Merged
merged 22 commits into from
Jul 16, 2024
Merged

94 update theming elements header text color to primary button color for icons #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
1966cf4
Initial commit
Apr 30, 2024
f227644
Create docker-image.yml
sarora180673 May 9, 2024
270ce7a
Update docker-image.yml
sarora180673 May 9, 2024
9d159a0
Update docker-image.yml
sarora180673 May 10, 2024
571db47
Update docker-image.yml
sarora180673 May 10, 2024
8cb033f
Merge pull request #24 from rairprotocol/sarora180673-patch-1
sarora180673 May 10, 2024
1cca8b8
Update docker-image.yml
sarora180673 May 14, 2024
8f7ee69
Update docker-image.yml
sarora180673 May 16, 2024
812303a
Merge pull request #27 from rairprotocol/sarora180673-GithubActions
May 16, 2024
cd36ebe
updated as per dev branch
May 28, 2024
c1a5fb8
Merge branch 'dev' into merge_main_dev
May 28, 2024
dfa6975
Merge pull request #49 from rairprotocol/merge_main_dev
May 29, 2024
ff24727
Update README.md
May 29, 2024
7d91994
Merge pull request #51 from rairprotocol/rairprotocol-patch-1
sarora180673 May 30, 2024
5da0438
Merge pull request #82 from rairprotocol/dev
Jul 1, 2024
c05243b
fix icons and buttons with serverSettings
SeanM322 Jul 11, 2024
b240994
update color icons immediately
SeanM322 Jul 12, 2024
3956016
fix
SeanM322 Jul 12, 2024
a155228
Merge branch 'dev' into 94-update-theming-elements-header-text-color-…
SeanM322 Jul 12, 2024
672d1dd
Change color LoadingComponent
SeanM322 Jul 12, 2024
e0d3fb2
add secondaryColor for header and footer
SeanM322 Jul 12, 2024
2efc3d3
add iconColor for AdminPanel
SeanM322 Jul 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,7 @@
# Getting Started
_Building RAIR is a snap! Follow these simple steps and you'll be up and running in no time._

<iframe width="560" height="315" src="https://www.youtube.com/embed/MmH-JmWkhQo?si=YLSNcz7WxQjBlwRO" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

![download video from git](https://github.com/rairprotocol/RAIRsite/blob/main/src/assets/images/rair-install.webm)
![click walkthrough no narration](https://github.com/rairprotocol/RAIRsite/blob/main/src/assets/images/rair-install.webm)

## Clone the RAIR repository

Expand Down
6 changes: 4 additions & 2 deletions rair-front/src/components/Footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const Footer: React.FC<IFooter> = () => {

const hotdropsVar = import.meta.env.VITE_TESTNET;

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

const onChangeEmail = (e) => {
Expand All @@ -52,7 +52,9 @@ const Footer: React.FC<IFooter> = () => {
<FooterMain
hotdrops={hotdropsVar}
primaryColor={primaryColor}
textColor={textColor}>
textColor={textColor}
secondaryColor={secondaryColor}
>
<FooterWrapper
className="footer-wrapper-hotdrops"
primaryColor={primaryColor}>
Expand Down
3 changes: 2 additions & 1 deletion rair-front/src/components/Footer/FooterItems/FooterItems.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,14 @@ type TFooterMainStyled = {
messageAlert?: string;
hotdrops?: string;
textColor?: any;
secondaryColor?: string;
};

export const FooterMain = styled.footer<TFooterMainStyled>`
background: ${(props) =>
props.primaryColor === '#dedede'
? '#fff'
: `color-mix(in srgb, ${props.primaryColor}, #888888)`};
: `color-mix(in srgb, ${props.secondaryColor}, #888888)`};
padding: 40px 120px 25px 120px;
color: ${(props) => props.textColor};

Expand Down
56 changes: 49 additions & 7 deletions rair-front/src/components/Header/AdminPanel/AdminPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const AdminPanel = ({ creatorViewsDisabled, adminPanel, setAdminPanel }) => {
const { adminRights, loggedIn } = useSelector<RootState, TUsersInitialState>(
(store) => store.userStore
);
const { primaryColor, secondaryColor, textColor } = useSelector<
const { primaryColor, textColor, iconColor } = useSelector<
RootState,
ColorStoreType
>((store) => store.colorStore);
Expand All @@ -42,7 +42,14 @@ const AdminPanel = ({ creatorViewsDisabled, adminPanel, setAdminPanel }) => {
<TooltipBox position={'top'} title="Server Settings">
{' '}
<div>
<i className="fa fa-cog" aria-hidden="true" />
<i style={{
color:
import.meta.env.VITE_TESTNET === 'true'
?
`${iconColor === '#1486c5' ? '#F95631' : iconColor}`
: `${
iconColor === '#1486c5' ? '#E882D5' : iconColor}`
}} className="fa fa-cog" aria-hidden="true" />
</div>
</TooltipBox>
),
Expand All @@ -54,7 +61,14 @@ const AdminPanel = ({ creatorViewsDisabled, adminPanel, setAdminPanel }) => {
<TooltipBox position={'top'} title="License">
{' '}
<div>
<i className="fa fa-id-card" aria-hidden="true" />
<i style={{
color:
import.meta.env.VITE_TESTNET === 'true'
?
`${iconColor === '#1486c5' ? '#F95631' : iconColor}`
: `${
iconColor === '#1486c5' ? '#E882D5' : iconColor}`
}} className="fa fa-id-card" aria-hidden="true" />
</div>
</TooltipBox>
),
Expand All @@ -67,7 +81,14 @@ const AdminPanel = ({ creatorViewsDisabled, adminPanel, setAdminPanel }) => {
position={'top'}
title="Import / Export / Transfer">
<div>
<i className="fas fa-city" />
<i style={{
color:
import.meta.env.VITE_TESTNET === 'true'
?
`${iconColor === '#1486c5' ? '#F95631' : iconColor}`
: `${
iconColor === '#1486c5' ? '#E882D5' : iconColor}`
}} className="fas fa-city" />
</div>
</TooltipBox>
),
Expand All @@ -78,7 +99,14 @@ const AdminPanel = ({ creatorViewsDisabled, adminPanel, setAdminPanel }) => {
name: (
<TooltipBox position={'top'} title="Streaming">
<div style={{ width: '70px' }}>
<i className="fas fa-film" />
<i style={{
color:
import.meta.env.VITE_TESTNET === 'true'
?
`${iconColor === '#1486c5' ? '#F95631' : iconColor}`
: `${
iconColor === '#1486c5' ? '#E882D5' : iconColor}`
}} className="fas fa-film" />
</div>
</TooltipBox>
),
Expand All @@ -89,7 +117,14 @@ const AdminPanel = ({ creatorViewsDisabled, adminPanel, setAdminPanel }) => {
name: (
<TooltipBox position={'top'} title="Old Market (diamond)">
<div style={{ width: '70px' }}>
<i className="fas fa-gem" />
<i style={{
color:
import.meta.env.VITE_TESTNET === 'true'
?
`${iconColor === '#1486c5' ? '#F95631' : iconColor}`
: `${
iconColor === '#1486c5' ? '#E882D5' : iconColor}`
}} className="fas fa-gem" />
</div>
</TooltipBox>
),
Expand All @@ -100,7 +135,14 @@ const AdminPanel = ({ creatorViewsDisabled, adminPanel, setAdminPanel }) => {
name: (
<TooltipBox position={'top'} title="Old Market (classic)">
<div style={{ width: '70px' }}>
<i className="fa fa-shopping-cart" aria-hidden="true" />
<i style={{
color:
import.meta.env.VITE_TESTNET === 'true'
?
`${iconColor === '#1486c5' ? '#F95631' : iconColor}`
: `${
iconColor === '#1486c5' ? '#E882D5' : iconColor}`
}} className="fa fa-shopping-cart" aria-hidden="true" />
</div>
</TooltipBox>
),
Expand Down
3 changes: 2 additions & 1 deletion rair-front/src/components/Header/HeaderItems/HeaderItems.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,14 @@ interface IHeaderContainerStyled {
isSplashPage?: boolean;
hotdrops?: string;
realChainId?: string | undefined;
secondaryColor?: string;
}

export const HeaderContainer = styled.div<IHeaderContainerStyled>`
background: ${(props) =>
props.primaryColor === '#dedede'
? '#fff'
: `color-mix(in srgb, ${props.primaryColor}, #888888)`};
: `color-mix(in srgb, ${props.secondaryColor}, #888888)`};
margin-top: ${(props) =>
props.realChainId &&
props.showAlert &&
Expand Down
17 changes: 7 additions & 10 deletions rair-front/src/components/Header/MainHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const MainHeader: React.FC<IMainHeader> = ({

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

console.info(iconColor, 'iconColor')

const hotdropsVar = import.meta.env.VITE_TESTNET;
const [realDataNotification, setRealDataNotification] = useState([]);
const [notificationCount, setNotificationCount] = useState<number>(0);
Expand Down Expand Up @@ -205,6 +207,7 @@ const MainHeader: React.FC<IMainHeader> = ({
isSplashPage={isSplashPage}
selectedChain={selectedChain}
realChainId={realChainId}
secondaryColor={secondaryColor}
ref={ref}>
<div>
<MainLogo
Expand Down Expand Up @@ -388,16 +391,10 @@ const MainHeader: React.FC<IMainHeader> = ({
style={{
color:
import.meta.env.VITE_TESTNET === 'true'
? `${
textColor === '#FFF' || textColor === 'black'
? '#F95631'
: textColor
}`
?
`${iconColor === '#1486c5' ? '#F95631' : iconColor}`
: `${
textColor === '#FFF' || textColor === 'black'
? '#E882D5'
: textColor
}`
iconColor === '#1486c5' ? '#E882D5' : iconColor}`
}}
aria-hidden="true"></i>
</div>
Expand Down
38 changes: 31 additions & 7 deletions rair-front/src/components/MockUpPage/FilteringBlock/FilteringBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ 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);
Expand Down Expand Up @@ -159,10 +159,12 @@ const FilteringBlock = ({
textColor={textColor}
sortItem={sortItem}
primaryColor={primaryColor}
customSecondaryButtonColor={iconColor}
className="fas fa-arrow-up"
/>
<StyledArrowDownIcon
textColor={textColor}
customSecondaryButtonColor={iconColor}
sortItem={sortItem}
primaryColor={primaryColor}
className="fas fa-arrow-down"
Expand All @@ -182,13 +184,15 @@ const FilteringBlock = ({
rotate="true"
primaryColor={primaryColor}
textColor={textColor}
customSecondaryButtonColor={iconColor}
/>
) : (
// <i className="fas fa-chevron-down"></i>
<StyledShevronIcon
className="fas fa-chevron-up"
primaryColor={primaryColor}
textColor={textColor}
customSecondaryButtonColor={iconColor}
/>
)}
</div>
Expand Down Expand Up @@ -268,18 +272,26 @@ const FilteringBlock = ({
{filterCloseText ? (
<CloseIcon
style={{
marginRight: '5px'
}}
marginRight: '5px',
color: import.meta.env.VITE_TESTNET === 'true'
? `${iconColor === '#1486c5' ? '#F95631' : iconColor}`
: filterPopUp
? '#fff'
: `${
iconColor === '#1486c5' ? '#E882D5' : iconColor}`}
}
/>
) : (
<StyledFilterIcon
customSecondaryButtonColor={iconColor}
primaryColor={primaryColor}
textColor={textColor}
filterPopUp={filterPopUp}></StyledFilterIcon>
)}
</>
) : (
<StyledFilterIcon
customSecondaryButtonColor={iconColor}
primaryColor={primaryColor}
textColor={textColor}
filterPopUp={filterPopUp}></StyledFilterIcon>
Expand All @@ -301,18 +313,30 @@ const FilteringBlock = ({
<>
{filterCloseText ? (
<StyledFilterIcon
filterPopUp={filterPopUp}></StyledFilterIcon>
customSecondaryButtonColor={iconColor}
primaryColor={primaryColor}
textColor={textColor}
filterPopUp={filterPopUp}></StyledFilterIcon>
) : (
<CloseIcon
style={{
marginRight: '5px'
}}
marginRight: '5px',
color: import.meta.env.VITE_TESTNET === 'true'
? `${iconColor === '#1486c5' ? '#F95631' : iconColor}`
: filterPopUp
? '#fff'
: `${
iconColor === '#1486c5' ? '#E882D5' : iconColor}`}
}
/>
)}
</>
) : (
<StyledFilterIcon
filterPopUp={filterPopUp}></StyledFilterIcon>
customSecondaryButtonColor={iconColor}
primaryColor={primaryColor}
textColor={textColor}
filterPopUp={filterPopUp}></StyledFilterIcon>
)}
{width > 700 && <span>Filters</span>}
</div>
Expand Down
Loading