Skip to content

Commit 3bd8319

Browse files
EjembiEmmanuelEjembiEmmanuel
committed
mobile view changes
1 parent 796f926 commit 3bd8319

File tree

14 files changed

+1690
-484
lines changed

14 files changed

+1690
-484
lines changed

‎src/app/globals.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@
1717
}
1818

1919
body {
20-
color: rgb(var(--foreground-rgb));
20+
/* color: rgb(var(--foreground-rgb)); */
21+
color: #fff;
22+
background-color: #fff;
2123
}
2224

2325
@layer utilities {

‎src/app/page.tsx‎

Lines changed: 37 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import {
1515
Container,
1616
Link,
1717
Tab,
18-
TabIndicator,
1918
TabList,
2019
TabPanel,
2120
TabPanels,
@@ -93,12 +92,20 @@ export default function Home() {
9392
}, [searchParams]);
9493

9594
return (
96-
<Container maxWidth={'1152px'} margin={'0 auto'}>
97-
<Box padding={'15px 30px'} borderRadius="10px" margin={'20px 0px 10px'}>
95+
<Container
96+
maxWidth={'1152px'}
97+
margin={'0 auto'}
98+
padding={{ base: '15px 10px' }}
99+
>
100+
<Box
101+
padding={{ base: '15px 15px' }}
102+
borderRadius="10px"
103+
margin={'20px 0px 10px'}
104+
>
98105
<Text
99106
color={'light_green'}
100-
fontSize={{ base: '28px', md: '35px' }}
101-
lineHeight={'30px'}
107+
fontSize={{ base: '32px', md: '35px' }}
108+
lineHeight={{ base: '40px', md: '30px' }}
102109
marginBottom={'10px'}
103110
textAlign={'center'}
104111
>
@@ -108,7 +115,8 @@ export default function Home() {
108115
<Text
109116
color="white"
110117
textAlign={'center'}
111-
fontSize={{ base: '16px', md: '18px' }}
118+
fontSize={{ base: '20px', md: '18px' }}
119+
lineHeight={{ base: '28px', md: '20px' }}
112120
marginBottom={'0px'}
113121
>
114122
Identify & Invest in the best $STRK rewarding pools and maximize your
@@ -126,42 +134,47 @@ export default function Home() {
126134
onChange={handleTabsChange}
127135
marginTop={'10px'}
128136
>
129-
<TabList paddingLeft={'16px'}>
137+
<TabList>
130138
<Tab
131-
color={'silver_gray'}
132-
_selected={{ color: 'light_green', fontWeight: 'bold' }}
139+
width={'100%'}
140+
bg="purple_60p"
141+
color="lavender_gray"
142+
fontSize={'14px'}
143+
fontWeight={'700'}
144+
borderTopLeftRadius={'8px'}
145+
_selected={{ bg: 'bright_purple', color: 'black' }}
133146
onClick={() => {
134147
mixpanel.track('Strategies opened');
135148
}}
136149
>
137150
Strategies✨
138151
</Tab>
139152
<Tab
140-
color={'silver_gray'}
141-
_selected={{ color: 'light_green', fontWeight: 'bold' }}
153+
width={'100%'}
154+
bg="purple_60p"
155+
color="lavender_gray"
156+
fontSize={'14px'}
157+
fontWeight={'700'}
158+
borderTopRightRadius={'8px'}
159+
_selected={{ bg: 'bright_purple', color: 'black' }}
142160
onClick={() => {
143161
mixpanel.track('All pools clicked');
144162
}}
145163
>
146164
Find yields
147165
</Tab>
148166
</TabList>
149-
<TabIndicator
150-
mt="-1.5px"
151-
height="3px"
152-
bg="light_green"
153-
color="color1"
154-
borderRadius="1px"
155-
boxShadow={'0px 0px 8px 0px #3EE5C2'}
156-
/>
157167
<TabPanels>
158168
<TabPanel
159169
bg="highlight"
160170
float={'left'}
161171
width={'100%'}
162172
borderWidth={'1px'}
163173
borderColor={'slate_blue'}
164-
borderRadius={'8px'}
174+
borderTopLeftRadius={{ base: '0px', md: '8px' }}
175+
borderTopRightRadius={{ base: '0px', md: '8px' }}
176+
borderBottomLeftRadius={{ base: '8px' }}
177+
borderBottomRightRadius={{ base: '8px' }}
165178
>
166179
<Strategies />
167180
</TabPanel>
@@ -171,7 +184,10 @@ export default function Home() {
171184
float={'left'}
172185
borderWidth={'1px'}
173186
borderColor={'slate_blue'}
174-
borderRadius={'8px'}
187+
borderTopLeftRadius={{ base: '0px', md: '8px' }}
188+
borderTopRightRadius={{ base: '0px', md: '8px' }}
189+
borderBottomLeftRadius={{ base: '8px' }}
190+
borderBottomRightRadius={{ base: '8px' }}
175191
>
176192
<Pools />
177193
</TabPanel>

‎src/app/strategy/[strategyId]/_components/DetailsTab.tsx‎

Lines changed: 71 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,77 @@ import loopAction from '@/assets/loopAction.svg';
77

88
interface DetailsTabProps {
99
strategy: STRKFarmStrategyAPIResult;
10+
isMobile?: boolean;
1011
}
1112

1213
export function DetailsTab(props: DetailsTabProps) {
13-
const { strategy } = props;
14+
const { strategy, isMobile } = props;
15+
16+
if (isMobile) {
17+
return (
18+
<Flex flexDirection="column" gap="16px" width="100%">
19+
<Box
20+
width="100%"
21+
borderRadius="8px"
22+
borderWidth="1px"
23+
borderColor="slate_blue"
24+
bg="bg_2"
25+
p={4}
26+
>
27+
<Text fontSize="18px" color="white" fontWeight="600" mb={1}>
28+
Behind the scenes
29+
</Text>
30+
<Text fontSize="14px" color="border_light" mb={2}>
31+
Actions done automatically by the strategy (smart-contract) with an
32+
investment of $1000
33+
</Text>
34+
<Flex flexDirection="column" gap={2}>
35+
{strategy.actions.length > 0 ? (
36+
strategy.actions.map((action, index) => (
37+
<Box
38+
key={index}
39+
display="flex"
40+
alignItems="center"
41+
borderWidth="1px"
42+
borderColor="slate_blue"
43+
borderRadius="8px"
44+
bg="bg"
45+
p={2}
46+
gap={2}
47+
>
48+
{action.name.toLowerCase().includes('stake') ||
49+
action.name.toLowerCase().includes('supply') ? (
50+
<Image src={depositAction} />
51+
) : action.name.toLowerCase().includes('borrow') ? (
52+
<Image src={withdrawAction} />
53+
) : (
54+
<Image src={loopAction} />
55+
)}
56+
<Text paddingLeft={2} color="border_light" fontSize="14px">
57+
{action.name}
58+
</Text>
59+
</Box>
60+
))
61+
) : (
62+
<Text fontSize="14px" color="silver_gray">
63+
No actions found
64+
</Text>
65+
)}
66+
</Flex>
67+
</Box>
68+
<Box
69+
width="100%"
70+
borderRadius="8px"
71+
borderWidth="1px"
72+
borderColor="slate_blue"
73+
bg="bg_2"
74+
p={4}
75+
>
76+
<FlowChart strategyId={strategy.id} />
77+
</Box>
78+
</Flex>
79+
);
80+
}
1481

1582
return (
1683
<Flex flexDirection={'column'} padding={'24px 0px'} gap={'24px'}>
@@ -51,11 +118,11 @@ export function DetailsTab(props: DetailsTabProps) {
51118
>
52119
{action.name.toLowerCase().includes('stake') ||
53120
action.name.toLowerCase().includes('supply') ? (
54-
<Image src={depositAction.src} />
121+
<Image src={depositAction} />
55122
) : action.name.toLowerCase().includes('borrow') ? (
56-
<Image src={withdrawAction.src} />
123+
<Image src={withdrawAction} />
57124
) : (
58-
<Image src={loopAction.src} />
125+
<Image src={loopAction} />
59126
)}
60127
<Text padding={'5px 10px'} color={'border_light'}>
61128
{action.name}

‎src/app/strategy/[strategyId]/_components/FAQTab.tsx‎

Lines changed: 98 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,107 @@ import { StrategyInfo } from '@/store/strategies.atoms';
1414

1515
interface FAQTabProps {
1616
strategy: StrategyInfo<any>;
17+
isMobile?: boolean;
1718
}
1819

1920
export function FAQTab(props: FAQTabProps) {
20-
const { strategy } = props;
21+
const { strategy, isMobile } = props;
22+
23+
if (isMobile) {
24+
return (
25+
<Flex flexDirection="column" gap="16px" width="100%">
26+
<Box
27+
width="100%"
28+
borderRadius="8px"
29+
borderWidth="1px"
30+
borderColor="slate_blue"
31+
bg="bg_2"
32+
p={4}
33+
>
34+
<Text fontSize="18px" color="white" fontWeight="600" mb={2}>
35+
Get to know about all your doubts
36+
</Text>
37+
<Accordion width={'100%'} allowToggle>
38+
{strategy.metadata.faqs && strategy.metadata.faqs.length > 0 ? (
39+
strategy.metadata.faqs.map((faq, index) => (
40+
<AccordionItem
41+
key={index}
42+
borderRadius={'8px'}
43+
borderWidth={'1px'}
44+
borderColor={'slate_blue'}
45+
mb={2}
46+
>
47+
<AccordionButton>
48+
<Box
49+
flex="1"
50+
textAlign="left"
51+
fontSize="14px"
52+
fontWeight="500"
53+
color="border_light"
54+
>
55+
{faq.question}
56+
</Box>
57+
<AccordionIcon />
58+
</AccordionButton>
59+
<AccordionPanel pb={4} fontSize="14px" color="silver_gray">
60+
{faq.answer}
61+
</AccordionPanel>
62+
</AccordionItem>
63+
))
64+
) : (
65+
<Text fontSize={'14px'} color={'silver_gray'}>
66+
No FAQs at the moment
67+
</Text>
68+
)}
69+
</Accordion>
70+
</Box>
71+
<Box
72+
width="100%"
73+
borderRadius="8px"
74+
borderWidth="1px"
75+
borderColor="slate_blue"
76+
bg="bg_2"
77+
p={4}
78+
display="flex"
79+
flexDirection="column"
80+
alignItems="center"
81+
gap={2}
82+
>
83+
<Text
84+
fontSize={'14px'}
85+
fontWeight={'500'}
86+
color={'border_light'}
87+
textAlign={'center'}
88+
>
89+
For more queries reach out to us on Telegram
90+
</Text>
91+
<Text
92+
fontSize={'14px'}
93+
fontWeight={'400'}
94+
color={'silver_gray'}
95+
textAlign={'center'}
96+
>
97+
Our team will respond to you soon!
98+
</Text>
99+
<Link href="https://t.me/+HQ_eHaXmF-1lZDc1">
100+
<Button
101+
bg={'transparent'}
102+
padding={'12px 20px'}
103+
borderRadius={'100px'}
104+
borderWidth={'1px'}
105+
borderColor={'color_7'}
106+
color={'color_7'}
107+
fontSize={'14px'}
108+
fontWeight={'700'}
109+
_hover={{ bg: 'transparent', color: 'color_7' }}
110+
>
111+
Connect on Telegram
112+
</Button>
113+
</Link>
114+
</Box>
115+
</Flex>
116+
);
117+
}
21118

22119
return (
23120
<Flex flexDirection={'column'} padding={'24px 0px'} gap={'24px'}>

0 commit comments

Comments
 (0)