Skip to content

Commit dc3e10c

Browse files
author
Guillaume Galuz
committed
colored button
1 parent 62fc137 commit dc3e10c

File tree

12 files changed

+71
-49
lines changed

12 files changed

+71
-49
lines changed

‎components/protocols/avalanche/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ const Chain = ({ chain }: { chain: ChainType }) => {
3636
stepIndex={stepIndex}
3737
/>
3838
<Step
39+
chain={chain}
3940
step={step}
4041
isFirstStep={isFirstStep}
4142
isLastStep={isLastStep}

‎components/protocols/celo/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const Chain = ({ chain }: { chain: ChainType }) => {
3030
stepIndex={stepIndex}
3131
/>
3232
<Step
33+
chain={chain}
3334
step={step}
3435
isFirstStep={isFirstStep}
3536
isLastStep={isLastStep}

‎components/protocols/near/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const Chain = ({ chain }: { chain: ChainType }) => {
3030
stepIndex={stepIndex}
3131
/>
3232
<Step
33+
chain={chain}
3334
step={step}
3435
isFirstStep={isFirstStep}
3536
isLastStep={isLastStep}

‎components/protocols/polkadot/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const Chain = ({ chain }: { chain: ChainType }) => {
3030
stepIndex={stepIndex}
3131
/>
3232
<Step
33+
chain={chain}
3334
step={step}
3435
isFirstStep={isFirstStep}
3536
isLastStep={isLastStep}

‎components/protocols/polygon/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const Chain = ({ chain }: { chain: ChainType }) => {
3030
stepIndex={stepIndex}
3131
/>
3232
<Step
33+
chain={chain}
3334
step={step}
3435
isFirstStep={isFirstStep}
3536
isLastStep={isLastStep}

‎components/protocols/secret/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const Chain = ({ chain }: { chain: ChainType }) => {
3030
stepIndex={stepIndex}
3131
/>
3232
<Step
33+
chain={chain}
3334
step={step}
3435
isFirstStep={isFirstStep}
3536
isLastStep={isLastStep}

‎components/protocols/solana/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ const Chain = ({ chain }: { chain: ChainType }) => {
3838
stepIndex={stepIndex}
3939
/>
4040
<Step
41+
chain={chain}
4142
step={step}
4243
isFirstStep={isFirstStep}
4344
isLastStep={isLastStep}

‎components/protocols/tezos/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const Chain = ({ chain }: { chain: ChainType }) => {
3030
stepIndex={stepIndex}
3131
/>
3232
<Step
33+
chain={chain}
3334
step={step}
3435
isFirstStep={isFirstStep}
3536
isLastStep={isLastStep}

‎components/shared/Sidebar.tsx

+7-22
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Col, Steps, Space } from 'antd';
44
import { ArrowLeft } from 'react-feather';
55
import Link from "next/link";
66
import Image from 'next/image'
7-
import logoSVG from "public/figment-learn-color.svg"
7+
import logoSVG from "public/figment-learn-compact.svg"
88

99
import { ChainType, StepType } from "types/types";
1010

@@ -21,8 +21,10 @@ const Sidebar = ({
2121
}) => {
2222
return (
2323
<Left span={8} chainId={chain.id}>
24-
<Image src={logoSVG} alt="Figment Learn" height={40} width={100} />
25-
<ChainTitle chainId={chain.id}>{`${chain.label} Pathway`}</ChainTitle>
24+
<Space size="large" direction="horizontal" align="center" style={{ marginBottom: "40px" }}>
25+
<Image src={logoSVG} alt="Figment Learn" height={41} width={100} />
26+
<ChainTitle chainId={chain.id}>{`${chain.label} Pathway`}</ChainTitle>
27+
</Space>
2628

2729
<Steps direction="vertical" size="small" current={stepIndex}>
2830
{steps.map((s: StepType) => <Step key={s.id} title={s.title} />)}
@@ -38,25 +40,8 @@ const Sidebar = ({
3840
)
3941
}
4042

41-
const Learn = styled.div<{ chainId: string }>`
42-
margin-bottom: 0;
43-
font-size: 16px;
44-
font-weight: 600;
45-
46-
color: ${({ chainId }) => {
47-
if (chainId === "solana") {
48-
return '#EEE';
49-
} else if (chainId === "avalanche") {
50-
return '#EEE';
51-
} else if (chainId === "polygon") {
52-
return '#EEE';
53-
}
54-
return '#EEE';
55-
}};
56-
`;
57-
5843
const ChainTitle = styled.div<{ chainId: string }>`
59-
margin-bottom: 40px;
44+
margin-bottom: 8px;
6045
font-size: 28px;
6146
font-weight: 600;
6247
@@ -68,7 +53,7 @@ const ChainTitle = styled.div<{ chainId: string }>`
6853
} else if (chainId === "polygon") {
6954
return '#F6F6F6';
7055
}
71-
return '#F6F6F6';
56+
return 'black';
7257
}};
7358
`;
7459

‎components/shared/Step.tsx

+46-11
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,12 @@ import { ArrowLeftOutlined, ArrowRightOutlined } from "@ant-design/icons";
44
import styled from "styled-components";
55
import { ArrowUpRight } from 'react-feather';
66

7-
import { StepType } from 'types/types';
7+
import { ChainType, StepType } from 'types/types';
88

99
const { Text } = Typography;
1010

1111
const Step = ({
12+
chain,
1213
step,
1314
isFirstStep,
1415
isLastStep,
@@ -17,6 +18,7 @@ const Step = ({
1718
body,
1819
nav,
1920
}: {
21+
chain: ChainType
2022
step: StepType
2123
isFirstStep: boolean
2224
isLastStep: boolean
@@ -48,7 +50,14 @@ const Step = ({
4850
{body}
4951
</StepContent>
5052

51-
<StepButtons next={next} prev={prev} isFirstStep={isFirstStep} isLastStep={isLastStep} />
53+
<StepButtons
54+
key={step.id}
55+
chainId={chain.id}
56+
next={next}
57+
prev={prev}
58+
isFirstStep={isFirstStep}
59+
isLastStep={isLastStep}
60+
/>
5261

5362
{nav}
5463
</Col>
@@ -57,11 +66,13 @@ const Step = ({
5766
}
5867

5968
const StepButtons = ({
69+
chainId,
6070
next,
6171
prev,
6272
isFirstStep,
6373
isLastStep,
6474
}: {
75+
chainId: string
6576
next(): void
6677
prev(): void
6778
isFirstStep: boolean
@@ -75,7 +86,7 @@ const StepButtons = ({
7586
</PrevButton>
7687
}
7788
{!isLastStep &&
78-
<NextButton type="primary" onClick={() => next()}>
89+
<NextButton type="primary" onClick={() => next()} textColor={getButtonTextColor(chainId)} bgColor={getButtonBgColor(chainId)}>
7990
<Row align="middle">
8091
Next Step
8192
<ArrowRightOutlined size={20} style={{ marginLeft: "6px" }} />
@@ -86,6 +97,28 @@ const StepButtons = ({
8697
)
8798
}
8899

100+
const getButtonBgColor = (chainId: string) => {
101+
if (chainId === "solana") {
102+
return 'linear-gradient(253deg, #00FFA3, #DC1FFF)';
103+
} else if (chainId === "avalanche") {
104+
return '#e84141';
105+
} else if (chainId === "polygon") {
106+
return '#8247e5';
107+
} else if (chainId === "polkadot") {
108+
return '#e6007a';
109+
} else if (chainId === "tezos") {
110+
return '#0f62ff';
111+
}
112+
return "rgb(255,242,155)"
113+
}
114+
115+
const getButtonTextColor = (chainId: string) => {
116+
if (chainId === "solana") {
117+
return "white";
118+
}
119+
return "white"
120+
}
121+
89122
const Right = styled(Col)`
90123
padding: 60px;
91124
height: 100vh;
@@ -118,21 +151,23 @@ const StepContent = styled.div`
118151
margin-bottom: 100px;
119152
`;
120153

121-
const NextButton = styled(Button)`
122-
background: rgb(255,242,155);
123-
border: solid #888 1px;
124-
color: #555;
154+
const NextButton = styled(Button)<{ bgColor: string; textColor: string }>`
155+
border: none;
156+
157+
color: ${({ textColor })=> textColor};
158+
background: ${({ bgColor })=> bgColor};
125159
126160
&:hover {
127-
background: rgb(255,242,155);
128-
color: black;
129-
border: solid black 1px;
161+
background: ${({ bgColor })=> bgColor};
162+
color: ${({ textColor })=> textColor};
163+
border: none;
164+
box-shadow: black 2px 2px 1px;
130165
}
131166
`;
132167

133168
const PrevButton = styled(Button)`
134169
background: white;
135-
border: solid #888 1px;
170+
border: solid #BBB 1px;
136171
color: #555;
137172
138173
&:hover {

‎public/figment-learn-color.svg

-16
This file was deleted.

0 commit comments

Comments
 (0)