Skip to content

Commit 74fa3a6

Browse files
lukaw3dlukaw3d
authored
Merge pull request #288 from oasisprotocol/csillag/update-rofl-text
Discover: implement design updates
2 parents 7298c15 + 2446ccd commit 74fa3a6

20 files changed

Lines changed: 231 additions & 211 deletions

File tree

‎.changelog/288.bugfix.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Discover: implement design updates

‎discover/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"pnpm": ">=10.0.0"
1818
},
1919
"dependencies": {
20-
"@oasisprotocol/rose-app-ui": "workspace:*",
20+
"@oasisprotocol/ui-library": "file:../ui-library",
2121
"react": "^18.2.0",
2222
"react-responsive": "^9.0.2"
2323
},

‎discover/src/App.module.css‎

Lines changed: 56 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,66 @@
1+
.global {
2+
color: var(--white);
3+
4+
:global(h1) {
5+
font-size: 30px;
6+
font-weight: 500;
7+
line-height: 36.31px;
8+
}
9+
10+
:global(h2) {
11+
font-size: 20px;
12+
font-weight: 600;
13+
line-height: 24.2px;
14+
}
15+
16+
:global(p) {
17+
&:global(.text-xxxl) {
18+
font-size: 48px;
19+
line-height: 48px;
20+
}
21+
22+
&:global(.text-xxl) {
23+
font-size: 24px;
24+
line-height: 24px;
25+
}
26+
27+
&:global(.text-xl) {
28+
font-size: 20px;
29+
line-height: 24.2px;
30+
}
31+
32+
&:global(.text-base) {
33+
font-size: 16px;
34+
line-height: 19.36px;
35+
}
36+
37+
&:global(.text-sm) {
38+
font-size: 14px;
39+
line-height: 16.94px;
40+
}
41+
42+
&:global(.text-tiny) {
43+
font-size: 12px;
44+
line-height: 12px;
45+
}
46+
47+
&:global(.regular) {
48+
font-weight: 400;
49+
}
50+
51+
&:global(.medium) {
52+
font-weight: 500;
53+
}
54+
}
55+
}
56+
157
.app {
258
display: flex;
359
flex-direction: column;
460
flex-grow: 1;
561
padding: 0 1rem 2.25rem;
662
}
763

8-
.discoverTitle {
9-
margin-bottom: 1.5rem;
10-
}
11-
1264
.dAppsTitle,
1365
.toolingTitle {
1466
margin-bottom: 1rem;

‎discover/src/App.tsx‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,31 @@
11
import { FC } from 'react'
2-
import { Layout, Card } from '@oasisprotocol/rose-app-ui/discover'
2+
import { cn } from '@oasisprotocol/ui-library/src'
3+
import { Card } from './Card'
34
import { CARDS_CONFIG } from './constants/config'
45
import classes from './App.module.css'
56

67
const { featured, dApps, tooling } = CARDS_CONFIG
78

89
export const App: FC = () => {
910
return (
10-
<Layout>
11-
<div className={classes.app}>
12-
<h1 className={classes.discoverTitle}>Discover</h1>
13-
<div className={classes.featured}>
14-
{featured.map(cardConfig => (
15-
<Card isFeatured key={cardConfig.title} {...cardConfig} />
16-
))}
17-
</div>
18-
<h2 className={classes.dAppsTitle}>dApps</h2>
19-
<div className={classes.dApps}>
20-
{dApps.map(cardConfig => (
21-
<Card key={cardConfig.title} {...cardConfig} />
22-
))}
23-
</div>
24-
<h2 className={classes.toolingTitle}>Tooling</h2>
25-
<div className={classes.tooling}>
26-
{tooling.map(cardConfig => (
27-
<Card key={cardConfig.title} {...cardConfig} />
28-
))}
29-
</div>
11+
<div className={cn(classes.global, classes.app)}>
12+
<div className={classes.featured}>
13+
{featured.map((cardConfig, index) => (
14+
<Card isFeatured isHero={index === 0} key={cardConfig.title} {...cardConfig} />
15+
))}
3016
</div>
31-
</Layout>
17+
<h2 className={classes.dAppsTitle}>dApps</h2>
18+
<div className={classes.dApps}>
19+
{dApps.map(cardConfig => (
20+
<Card key={cardConfig.title} {...cardConfig} />
21+
))}
22+
</div>
23+
<h2 className={classes.toolingTitle}>Tooling</h2>
24+
<div className={classes.tooling}>
25+
{tooling.map(cardConfig => (
26+
<Card key={cardConfig.title} {...cardConfig} />
27+
))}
28+
</div>
29+
</div>
3230
)
3331
}

ui/src/discover/components/Card/index.module.css renamed to discover/src/Card/index.module.css

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,9 @@
5555
.thumbnail {
5656
display: flex;
5757
justify-content: center;
58-
width: 80px;
59-
min-width: 80px;
60-
height: 80px;
58+
width: 48px;
59+
min-width: 48px;
60+
height: 48px;
6161
border: 1px solid var(--zinc-800);
6262
border-radius: 8px;
6363

@@ -80,6 +80,14 @@
8080
color: var(--zinc-500);
8181
}
8282

83+
.typeOnTop {
84+
color: white;
85+
position: absolute;
86+
top: 1.5em;
87+
left: 1.5em;
88+
font-weight: bold;
89+
}
90+
8391
.grantRecipient {
8492
display: flex;
8593
align-items: center;

‎discover/src/Card/index.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { FC } from 'react'
2+
import classes from './index.module.css'
3+
import { cn } from '@oasisprotocol/ui-library/src'
4+
5+
export interface CardConfig {
6+
title: string
7+
type?: string
8+
description?: string
9+
imgSrc: string
10+
externalLink: string
11+
}
12+
13+
interface Props extends CardConfig {
14+
className?: string
15+
isFeatured?: boolean
16+
isHero?: boolean
17+
}
18+
19+
export const Card: FC<Props> = ({
20+
externalLink,
21+
title,
22+
imgSrc,
23+
type,
24+
description,
25+
className,
26+
isFeatured,
27+
isHero,
28+
}) => (
29+
<a className={classes.externalLink} href={externalLink} rel="noopener noreferrer" target="_blank">
30+
<div
31+
className={`${classes.card} ${isFeatured ? classes.isFeatured : ''} ${className}`}
32+
style={isFeatured ? { backgroundImage: `url(${imgSrc})` } : undefined}
33+
>
34+
{isFeatured && type && <p className={cn(classes.typeOnTop, 'text-tiny regular')}>{type}</p>}
35+
{!isFeatured && (
36+
<div className={classes.thumbnail}>
37+
<img src={imgSrc} alt={title} />
38+
</div>
39+
)}
40+
<div className={classes.description}>
41+
<p className={isFeatured ? (isHero ? 'text-xxxl medium' : 'text-xxl medium') : 'text-base medium'}>
42+
{title}
43+
</p>
44+
{!isFeatured && type && <p className={cn(classes.type, 'text-sm regular')}>{type}</p>}
45+
{!!isFeatured && description && (
46+
<p className={'text-sm regular w-[320px] text-[var(--zinc-500)]'}>{description}</p>
47+
)}
48+
</div>
49+
</div>
50+
</a>
51+
)

‎discover/src/constants/config.ts‎

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,27 @@
1-
import { CardConfig } from '@oasisprotocol/rose-app-ui/discover'
1+
import { CardConfig } from '../Card'
22

33
export const CARDS_CONFIG: { featured: CardConfig[]; dApps: CardConfig[]; tooling: CardConfig[] } = {
44
featured: [
55
{
6-
title: 'ROFL',
7-
type: 'Verifiable off-chain apps in TEE',
8-
imgSrc: 'https://assets.oasis.io/rose-app-discover/Rofl.jpg',
6+
title: 'ROFL App',
7+
type: 'TOOLING',
8+
description:
9+
'Build trustless apps. Start quickly with templates. Manage everything from one interface.',
10+
imgSrc: 'https://assets.oasis.io/rose-app-discover/RoflApp.jpg',
911
externalLink: 'https://rofl.app',
1012
},
1113
{
1214
title: 'Accumulated Finance',
13-
type: 'Liquid staking',
15+
type: 'LIQUID STAKING',
16+
description:
17+
'Omnichain liquid staking protocol. Lending of liquid staked tokens (LSTs). Leveraged staking.',
1418
imgSrc: 'https://assets.oasis.io/rose-app-discover/AccumulatedFinance.png',
1519
externalLink: 'https://accumulated.finance/',
1620
},
1721
{
1822
title: 'Bit Protocol',
19-
type: 'CDP Stablecoin',
23+
type: 'CDP STABLECOIN',
24+
description: 'The first privacy-focused stablecoin built on Oasis Sapphire EVM.',
2025
imgSrc: 'https://assets.oasis.io/rose-app-discover/BitProtocol.png',
2126
externalLink: 'https://bitusd.finance/',
2227
},
@@ -76,12 +81,6 @@ export const CARDS_CONFIG: { featured: CardConfig[]; dApps: CardConfig[]; toolin
7681
imgSrc: 'https://assets.oasis.io/rose-app-discover/Midas.jpg',
7782
externalLink: 'https://midas.app/',
7883
},
79-
{
80-
title: 'Daosis',
81-
type: 'Launchpad & Token Minter',
82-
imgSrc: 'https://assets.oasis.io/rose-app-discover/Daosis.jpg',
83-
externalLink: 'https://daosis.io/',
84-
},
8584
{
8685
title: 'NEBY',
8786
type: 'DEX',
@@ -96,12 +95,6 @@ export const CARDS_CONFIG: { featured: CardConfig[]; dApps: CardConfig[]; toolin
9695
imgSrc: 'https://assets.oasis.io/rose-app-discover/Empyreal.jpg',
9796
externalLink: 'https://empyrealsdk.com/',
9897
},
99-
{
100-
title: 'Router Bridge',
101-
type: 'Bridge',
102-
imgSrc: 'https://assets.oasis.io/rose-app-discover/Router.jpg',
103-
externalLink: 'https://app.routernitro.com/swap',
104-
},
10598
{
10699
title: 'DEX Screener',
107100
imgSrc: 'https://assets.oasis.io/rose-app-discover/DexScreener.jpg',

‎pnpm-lock.yaml‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui-library‎

Submodule ui-library updated 31 files

‎ui/src/core/components/RainbowKitConnectButton/index.tsx‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { FC } from 'react'
22
import { ConnectButton } from '@rainbow-me/rainbowkit'
33
import { ChevronDown, Wallet } from 'lucide-react'
4-
import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
4+
import { cn, Button } from '@oasisprotocol/ui-library/src'
55
import {
66
DropdownMenu,
77
DropdownMenuContent,
@@ -25,15 +25,34 @@ const TruncatedAddress: FC<{ address: string; className?: string }> = ({ address
2525

2626
interface Props {
2727
onMobileClose?: () => void
28+
className?: string
2829
}
2930

31+
export const ConnectWalletButton: FC<Props> = ({ onMobileClose, className }) => (
32+
<ConnectButton.Custom>
33+
{({ openConnectModal }) => (
34+
<Button
35+
onClick={() => {
36+
openConnectModal()
37+
onMobileClose?.()
38+
}}
39+
variant="default"
40+
className={cn('max-md:w-full', className)}
41+
>
42+
<Wallet className="w-4 h-4 mr-2" />
43+
Connect Wallet
44+
</Button>
45+
)}
46+
</ConnectButton.Custom>
47+
)
48+
3049
export const RainbowKitConnectButton: FC<Props> = ({ onMobileClose }) => {
3150
const isMobile = useIsMobile()
3251
const { disconnect } = useDisconnect()
3352

3453
return (
3554
<ConnectButton.Custom>
36-
{({ account, chain, openAccountModal, openChainModal, openConnectModal, mounted }) => {
55+
{({ account, chain, openAccountModal, openChainModal, mounted }) => {
3756
const ready = mounted
3857
const connected = ready && account && chain
3958

@@ -50,19 +69,7 @@ export const RainbowKitConnectButton: FC<Props> = ({ onMobileClose }) => {
5069
>
5170
{(() => {
5271
if (!connected) {
53-
return (
54-
<Button
55-
onClick={() => {
56-
openConnectModal()
57-
onMobileClose?.()
58-
}}
59-
variant="secondary"
60-
className="max-md:w-full"
61-
>
62-
<Wallet className="w-4 h-4 mr-2" />
63-
Connect Wallet
64-
</Button>
65-
)
72+
return <ConnectWalletButton onMobileClose={onMobileClose} />
6673
}
6774

6875
if (chain.unsupported) {

0 commit comments

Comments
 (0)