Skip to content

Commit

Permalink
chore: fix some issue
Browse files Browse the repository at this point in the history
  • Loading branch information
reza-bm committed Nov 25, 2023
1 parent 4ff2d46 commit ea9988d
Show file tree
Hide file tree
Showing 9 changed files with 149 additions and 126 deletions.
2 changes: 1 addition & 1 deletion components/Button/LinkButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export function LinkButton(props: PropsWithChildren<LinkButtonProps>) {
return (
<Link
onClick={onClick}
className={`transition-all hover:bg-opacity-90 overflow-hidden relative py-3 flex items-center justify-center px-4 text-12 font-semibold md:leading-snug md:text-18 text-baseForeground bg-secondary-500 rounded-lg ${props.className}`}
className={`transition-all hover:bg-opacity-90 overflow-hidden relative py-15 flex items-center justify-center px-20 font-medium text-18 md:leading-snug md:text-18 text-baseForeground bg-secondary-500 rounded-soft ${props.className}`}
href={props.href}>
{props.children}
</Link>
Expand Down
148 changes: 75 additions & 73 deletions components/ChartBox/Chart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,89 +22,91 @@ export const Chart = (props: ChartProps) => {
});

return (
<XYChart
theme={customTheme}
height={300}
xScale={{ type: 'band' }}
yScale={{ type: 'linear' }}>
<AnimatedAxis
tickComponent={(props) => (
<CustomTick dxValue={days === 7 ? 15 : 30} {...props} />
)}
orientation="bottom"
hideTicks
numTicks={7}
tickFormat={(d) => getDayOfMonth(d)}
/>
<AnimatedAxis
orientation="left"
hideAxisLine
hideTicks
numTicks={3}
tickFormat={(c) => getRoundedCount(c).toString()}
tickComponent={(props) => <CustomTick {...props} />}
/>
<AnimatedGrid
lineStyle={{
stroke: 'rgba(184, 184, 184, 0.30)',
strokeLinecap: 'round',
strokeWidth: 1,
}}
columns={false}
numTicks={3}
/>

{days === 30 && (
<AnimatedLineSeries
curve={curveCardinal}
dataKey="Last month"
data={data}
stroke="#469BF5"
xAccessor={(d) => d.date}
yAccessor={(d) => d.count}
<div className="w-full">
<XYChart
theme={customTheme}
height={300}
xScale={{ type: 'band' }}
yScale={{ type: 'linear' }}>
<AnimatedAxis
tickComponent={(props) => (
<CustomTick dxValue={days === 7 ? 15 : 30} {...props} />
)}
orientation="bottom"
hideTicks
numTicks={7}
tickFormat={(d) => getDayOfMonth(d)}
/>
<AnimatedAxis
orientation="left"
hideAxisLine
hideTicks
numTicks={3}
tickFormat={(c) => getRoundedCount(c).toString()}
tickComponent={(props) => <CustomTick {...props} />}
/>
<AnimatedGrid
lineStyle={{
stroke: 'rgba(184, 184, 184, 0.30)',
strokeLinecap: 'round',
strokeWidth: 1,
}}
columns={false}
numTicks={3}
/>
)}

{days === 7 && (
<>
{days === 30 && (
<AnimatedLineSeries
curve={curveCardinal}
dataKey="Current Week"
data={currentWeek}
dataKey="Last month"
data={data}
stroke="#469BF5"
xAccessor={(d) => d.date}
yAccessor={(d) => d.count}
/>
<AnimatedLineSeries
curve={curveCardinal}
dataKey="Prev Week"
data={prevWeek}
stroke="#242D5B"
xAccessor={(d) => d.date}
yAccessor={(d) => d.count}
/>
</>
)}
)}

<Tooltip
snapTooltipToDatumX
snapTooltipToDatumY
showVerticalCrosshair
renderTooltip={({ tooltipData }: any) => (
<div className="text-12">
<div className="mb-1">Swaps</div>
{days === 7 && (
<>
<AnimatedLineSeries
curve={curveCardinal}
dataKey="Current Week"
data={currentWeek}
stroke="#469BF5"
xAccessor={(d) => d.date}
yAccessor={(d) => d.count}
/>
<AnimatedLineSeries
curve={curveCardinal}
dataKey="Prev Week"
data={prevWeek}
stroke="#242D5B"
xAccessor={(d) => d.date}
yAccessor={(d) => d.count}
/>
</>
)}

<div className="mb-1">
{dayjs(tooltipData.nearestDatum.datum.date.split('T')[0]).format(
'dddd, YYYY MMMM DD',
)}
</div>
<div className="mb-1">
Count: {tooltipData.nearestDatum.datum.count}
<Tooltip
snapTooltipToDatumX
snapTooltipToDatumY
showVerticalCrosshair
renderTooltip={({ tooltipData }: any) => (
<div className="text-12">
<div className="mb-1">Swaps</div>

<div className="mb-1">
{dayjs(
tooltipData.nearestDatum.datum.date.split('T')[0],
).format('dddd, YYYY MMMM DD')}
</div>
<div className="mb-1">
Count: {tooltipData.nearestDatum.datum.count}
</div>
</div>
</div>
)}
/>
</XYChart>
)}
/>
</XYChart>
</div>
);
};
5 changes: 2 additions & 3 deletions components/ChartBox/index.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import { ChartProps, DaysFilter } from './Chart.type';
import { useState } from 'react';
import { Chart } from './Chart';
import { MonthlyChart } from './MonthlyChart';

function ChartBox(props: ChartProps) {
const { data } = props;
const [days, setDays] = useState<DaysFilter>(7);

return (
<div className="px-20">
<div className="flex items-center justify-between pb-35">
<div className="pl-[60px]">
<div className="flex items-center justify-between pr-[40px]">
<div className="flex items-center bg-neutral-700 p-5 rounded-normal">
<button
onClick={() => setDays(7)}
Expand Down
101 changes: 60 additions & 41 deletions components/Footer/index.tsx
Original file line number Diff line number Diff line change
@@ -1,51 +1,70 @@
import { documentation, products, socialMedia } from './Footer.helper';
import ListItem from './ListItem';
import { LinkButton } from 'components/Button/LinkButton';

function Footer() {
return (
<footer className="relative flex w-full flex-col bg-baseBackground pt-10 lg:pt-24">
<div className="relative w-full bg-footer-mask bg-contain bg-right-bottom bg-no-repeat pb-16 md:bg-[right_1.5rem]">
<div className="mx-auto flex container flex-col justify-between px-[1.875rem] lg:flex-row lg:px-0">
<div className="mb-10 text-left lg:mb-0 lg:max-w-[19.4375rem]">
<h3 className="mb-3.5 text-left text-22 font-medium text-baseForeground lg:text-[1.1rem] lg:leading-[1.4rem]">
About Rango
</h3>
<p className="w-full text-16 leading-[1.5rem] text-neutral-200 ">
Rango is a cutting-edge routing and aggregation protocol for all
cross-chain and on-chain swaps, aggregating bridges and DEXs in
crypto world. You can swap native assets like Bitcoin, Ethereum,
Matic, ... to each other in a decentralized manner.
</p>
<footer className="relative flex w-full flex-col">
<div className="w-full bg-neutral-500 flex flex-col items-center">
<div className="container p-50 flex flex-col items-center">
<div className="text-baseForeground text-45 font-semibold">
Start secure swaps across blockchains
</div>
<div className="mb-10">
<h3 className="mb-3 text-left text-22 font-medium text-baseForeground lg:mb-3.5 lg:text-[1.1rem] lg:leading-[1.4rem]">
Products
</h3>
<ul className="w-full">
{products.map((link, index) => (
<ListItem key={index} {...link} />
))}
</ul>
<div className="text-18 text-neutral-200">
Swap across 64+ blockchains and 100+ DEX/Bridge Protocols in a
simple UI
</div>
<div className="mb-10">
<h3 className="mb-3 text-left text-22 font-medium text-baseForeground lg:mb-3.5 lg:text-[1.1rem] lg:leading-[1.4rem]">
Documentation
</h3>
<ul className="w-full">
{documentation.map((link, index) => (
<ListItem key={index} {...link} />
))}
</ul>
</div>
<div>
<h3 className="mb-3 text-left text-22 font-medium text-baseForeground lg:mb-3.5 lg:text-[1.1rem] lg:leading-[1.4rem]">
Social Media
</h3>
<ul className="w-full">
{socialMedia.map((link, index) => (
<ListItem key={index} {...link} />
))}
</ul>
<LinkButton
className="mt-[60px] w-[257px]"
href="https://app.rango.exchange/">
Open App
</LinkButton>
</div>
</div>
<div className="w-full bg-baseBackground pt-[100px]">
<div className="relative w-full bg-footer-mask bg-contain bg-right-bottom bg-no-repeat pb-16 md:bg-[right_1.5rem]">
<div className="mx-auto flex container flex-col justify-between px-[1.875rem] lg:flex-row lg:px-0">
<div className="mb-10 text-left lg:mb-0 lg:max-w-[19.4375rem]">
<h3 className="mb-3.5 text-left text-22 font-medium text-baseForeground lg:text-[1.1rem] lg:leading-[1.4rem]">
About Rango
</h3>
<p className="w-full text-16 leading-[1.5rem] text-neutral-200 ">
Rango is a cutting-edge routing and aggregation protocol for all
cross-chain and on-chain swaps, aggregating bridges and DEXs in
crypto world. You can swap native assets like Bitcoin, Ethereum,
Matic, ... to each other in a decentralized manner.
</p>
</div>
<div className="mb-10">
<h3 className="mb-3 text-left text-22 font-medium text-baseForeground lg:mb-3.5 lg:text-[1.1rem] lg:leading-[1.4rem]">
Products
</h3>
<ul className="w-full">
{products.map((link, index) => (
<ListItem key={index} {...link} />
))}
</ul>
</div>
<div className="mb-10">
<h3 className="mb-3 text-left text-22 font-medium text-baseForeground lg:mb-3.5 lg:text-[1.1rem] lg:leading-[1.4rem]">
Documentation
</h3>
<ul className="w-full">
{documentation.map((link, index) => (
<ListItem key={index} {...link} />
))}
</ul>
</div>
<div>
<h3 className="mb-3 text-left text-22 font-medium text-baseForeground lg:mb-3.5 lg:text-[1.1rem] lg:leading-[1.4rem]">
Social Media
</h3>
<ul className="w-full">
{socialMedia.map((link, index) => (
<ListItem key={index} {...link} />
))}
</ul>
</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/Layout/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ function Layout(props: PropsWithChildren<LayoutProps>) {
</Head>
<Navbar theme={'light'} />
<main
className="w-full min-h-[800px] bg-body-mask bg-cover"
className="w-full min-h-[800px] pb-50 bg-neutral-300 bg-body-mask bg-cover"
style={{
width: '-webkit-fill-available',
}}>
Expand Down
2 changes: 1 addition & 1 deletion components/Table/TableHead.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ function TableHead() {
<div className="w-full grid grid-cols-11 bg-surfacesBackground">
{columns.map((col, index) => (
<div
className={`text-14 p-30 text-primary-500 col-span-${
className={`text-14 px-20 py-30 text-primary-500 col-span-${
index === 0 ? 3 : 2
}`}
key={`head-${col.id}`}>
Expand Down
2 changes: 1 addition & 1 deletion components/Table/cells/RequestIDCell.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ function RequestIDCell(props: CellProps) {
{dayjs
.utc(transactionTime)
.local()
.format('DD MMMM YYYY | HH:MM')
.format('DD MMMM YYYY | HH:mm')
.toString()}
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,11 +61,11 @@ function Home(props: PropsType) {
<SearchBox />
</div>

<div className="container bg-neutral-500 absolute p-[40px] flex items-center justify-between bottom-0 translate-y-[50%]">
<div className="container bg-neutral-500 absolute p-[40px] pr-0 flex items-center justify-between bottom-0 translate-y-[50%]">
<div className="w-[36%]">
<Summary summary={summary} />
</div>
<div className="w-[51%]">
<div className="w-[64%]">
<ChartBox data={summary.dailyInterval} />
</div>
</div>
Expand Down
9 changes: 6 additions & 3 deletions tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,15 @@ module.exports = {
20: '1.25rem',
25: '1.56rem',
30: '1.875rem',
35: '2.1875rem'
35: '2.1875rem',
50: '3.125rem',
},
margin: {
5: '0.32rem',
10: '0.625rem',
20: '1.25rem',
25: '1.56rem',
25: '1.56rem',
50: '3.125rem',

},
lineHeight: {
Expand All @@ -62,11 +64,12 @@ module.exports = {
},
fontSize: {
'12': '0.75rem',
'14': '0.84rem',
'14': '0.875rem',
'16': '1rem',
'18': '1.125rem',
'22': '1.375rem',
'28': '1.75rem',
'45': '2.8125rem',
'56': '3.5rem',
},
height: {
Expand Down

0 comments on commit ea9988d

Please sign in to comment.