blockworks-foundation
/
mango-web
mirror of https://github.com/blockworks-foundation/mango-web.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

styling updates and more responsive fixes

This commit is contained in:
Steven Sarmiento 2021-07-17 23:59:58 -07:00 committed by GitHub
parent 34d00acb09
commit 8968383fc9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 49 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/BankCard.tsx
View File

@ -17,8 +17,10 @@ const BankCard = (props: BankCardProps) => {
return (
<div className="flex flex-col py-4 px-6 h-auto w-auto">
<div className="flex flex-row gap-x-2">
<img className="w-6 h-6" src={props.icon} alt={props.name} />
<img className="w-5 h-5 mt-1" src={props.icon} alt={props.name} />
<p className="text-xl">{props.name}</p>
</div>
<div className="flex flex-row gap-x-2">
<PercentPill value={props.interest.deposit} />
<PercentPill value={props.interest.borrow} bg="bg-mango-red" />
</div>

4
components/HeroSectionHome.tsx
View File

@ -34,18 +34,22 @@ const HeroSectionHome = () => {
<div className="mt-5 w-full sm:mx-auto sm:max-w-lg lg:ml-0 md:w-1/2 sm:w-1/2">
<div className="flex">
<div className="flex justify-center">
<a className="hover:opacity-70" href="https://solana.com/">
<img
className="h-8 sm:h-8"
src="../logo_solana.svg"
alt="Solana"
/>
</a>
</div>
<div className="flex justify-center -my-1 mx-10">
<a className="hover:opacity-70" href="https://projectserum.com/#/">
<img
className="h-9 sm:h-10"
src="../logo_serum.svg"
alt="Serum"
/>
</a>
</div>
</div>
</div>

22
components/MarketCard.tsx
View File

@ -1,6 +1,6 @@
import moment from 'moment'
import { useEffect, useState } from 'react'
import { AreaChart, Area, ReferenceLine, XAxis, YAxis } from 'recharts'
import { AreaChart, Area, ReferenceLine, XAxis, YAxis, ResponsiveContainer} from 'recharts'
import tailwindConfig from '../tailwind.config.js'
import PercentPill from './PercentPill'
@ -62,10 +62,10 @@ const MarketCard = (props: MarketCardProps) => {
const colors = tailwindConfig.theme.extend.colors
return (
<div className="col-span-2 sm:col-span-1">
<div className="flex flex-row bg-th-fgd-4 rounded-lg py-4 px-4 h-auto w-auto shadow-md">
<div className="pr-4 border-r-2 border-white border-opacity-10">
<div className="">
<div className="lg:col-span-1 md:col-span-2 sm:col-span-1">
<div className="flex lg:flex-row md:flex-row sm:flex-row xs:flex-col-reverse bg-th-fgd-4 rounded-lg py-4 px-4 h-auto w-full shadow-md lg:divide-x-2 md:divide-x-2 sm:divide-x-2 divide-white divide-opacity-10">
<div className="p-2">
<div className="pr-6">
<img
className="inline-block h-5 w-5 mr-1"
src={props.icon}
@ -73,17 +73,18 @@ const MarketCard = (props: MarketCardProps) => {
/>
<p className="inline-block align-middle">{props.name}</p>
</div>
<div className="flex flex-row gap-x-2">
<div className="flex flex-row flex-wrap gap-x-2">
<p className="text-xl">${format(price, props.decimals)}</p>
<PercentPill value={change} />
</div>
<div className="mt-1 text-xs">
Volume: {format(volume)} {props.name.split('/')[0]}
<div className="mt-2 text-md">
<p className="text-white text-opacity-40">Volume:</p> {format(volume)} {props.name.split('/')[0]}
</div>
</div>
<div className="flex align-middle pl-4">
{graph.length > 0 && (
<AreaChart width={80} height={80} data={graph}>
<ResponsiveContainer width={80} height={80}>
<AreaChart data={graph}>
<ReferenceLine
y={0}
stroke={colors[`secondary-${change > 0 ? 1 : 2}`].light}
@ -101,6 +102,9 @@ const MarketCard = (props: MarketCardProps) => {
<XAxis dataKey="t" hide />
<YAxis dataKey="p" hide />
</AreaChart>
</ResponsiveContainer>
)}
</div>
</div>