J M Rossy
1 month ago
committed by
GitHub
|
Before Width: | Height: | Size: 278 B |
|
After Width: | Height: | Size: 80 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 7.5 KiB |
@ -1,5 +1,17 @@ |
||||
import { Space_Grotesk } from 'next/font/google'; |
||||
|
||||
import { Color } from '../styles/Color'; |
||||
|
||||
export const MAIN_FONT = Space_Grotesk({ |
||||
subsets: ['latin'], |
||||
variable: '--font-main', |
||||
preload: true, |
||||
fallback: ['sans-serif'], |
||||
}); |
||||
export const APP_NAME = 'Hyperlane Renzo Bridge'; |
||||
export const APP_DESCRIPTION = 'A DApp for ezETH transfers'; |
||||
export const APP_DESCRIPTION = 'A token bridge for ezETH transfers, created by Hyperlane'; |
||||
export const APP_URL = 'renzo.hyperlane.xyz'; |
||||
export const APP_BRAND_COLOR = '#C4FF61'; |
||||
export const BRAND_COLOR = Color.primary; |
||||
export const BACKGROUND_COLOR = Color.primary; |
||||
export const BACKGROUND_IMAGE = 'url(/backgrounds/main.svg)'; |
||||
export const PROXY_DEPLOYED_URL = 'https://proxy.hyperlane.xyz'; |
||||
|
||||
@ -1,25 +1,11 @@ |
||||
import { WideChevron } from '@hyperlane-xyz/widgets'; |
||||
|
||||
import { Card } from '../../components/layout/Card'; |
||||
import { Color } from '../../styles/Color'; |
||||
|
||||
import { TransferTokenForm } from './TransferTokenForm'; |
||||
|
||||
export function TransferTokenCard() { |
||||
return ( |
||||
<Card className="w-100 sm:w-[31rem]"> |
||||
<> |
||||
<div className="absolute left-0 right-0 -top-36 xs:-top-[6.5rem] flex justify-center overflow-hidden z-10"> |
||||
<WideChevron |
||||
direction="s" |
||||
height="100%" |
||||
width="100" |
||||
rounded={true} |
||||
color={Color.primaryBlue} |
||||
/> |
||||
</div> |
||||
<TransferTokenForm /> |
||||
</> |
||||
</Card> |
||||
); |
||||
} |
||||
|
||||
|
Before Width: | Height: | Size: 583 B |
|
Before Width: | Height: | Size: 290 B |
|
Before Width: | Height: | Size: 929 B After Width: | Height: | Size: 929 B |
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 716 B |
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 54 KiB |
@ -1,27 +1,14 @@ |
||||
// Should match tailwind.config.js
|
||||
export enum Color { |
||||
primaryBlack = '#010101', |
||||
primaryWhite = '#FFFFFF', |
||||
primaryGray = '#6B7280', |
||||
lightGray = '#D0D4DB', |
||||
primaryBlue = '#C4FF61', |
||||
primaryPink = '#ACE732', |
||||
primaryBeige = '#F1EDE9', |
||||
primaryRed = '#BF1B15', |
||||
primaryMint = '#31D99C', |
||||
} |
||||
// @ts-ignore
|
||||
import { theme } from '../../tailwind.config'; |
||||
|
||||
// Useful for cases when using class names isn't convenient
|
||||
// such as in svg fills
|
||||
export function classNameToColor(className) { |
||||
switch (className) { |
||||
case 'bg-blue-500': |
||||
return Color.primaryBlue; |
||||
case 'bg-red-500': |
||||
return Color.primaryRed; |
||||
case 'bg-gray-500': |
||||
return Color.primaryGray; |
||||
default: |
||||
throw new Error('Missing color for className: ' + className); |
||||
} |
||||
} |
||||
const themeColors = theme.extend.colors as unknown as Record<string, string>; |
||||
|
||||
export const Color = { |
||||
black: themeColors.black, |
||||
white: themeColors.white, |
||||
gray: themeColors.gray[500], |
||||
lightGray: themeColors.gray[200], |
||||
primary: themeColors.primary[500], |
||||
accent: themeColors.accent[500], |
||||
red: themeColors.red[500], |
||||
} as const; |
||||
|
||||
@ -1,39 +0,0 @@ |
||||
@font-face { |
||||
font-family: 'Neue Haas Grotesk'; |
||||
font-style: normal; |
||||
font-weight: 200; |
||||
src: url('/fonts/NeueHaasDisplayThin.woff2') format('woff2'), |
||||
url('/fonts/NeueHaasDisplayThin.woff') format('woff'); |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'Neue Haas Grotesk'; |
||||
font-style: normal; |
||||
font-weight: 300; |
||||
src: url('/fonts/NeueHaasDisplayLight.woff2') format('woff2'), |
||||
url('/fonts/NeueHaasDisplayLight.woff') format('woff'); |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'Neue Haas Grotesk'; |
||||
font-style: normal; |
||||
font-weight: 400; |
||||
src: url('/fonts/NeueHaasDisplayRoman.woff2') format('woff2'), |
||||
url('/fonts/NeueHaasDisplayRoman.woff') format('woff'); |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'Neue Haas Grotesk'; |
||||
font-style: normal; |
||||
font-weight: 500; |
||||
src: url('/fonts/NeueHaasDisplayMedium.woff2') format('woff2'), |
||||
url('/fonts/NeueHaasDisplayMedium.woff') format('woff'); |
||||
} |
||||
|
||||
@font-face { |
||||
font-family: 'Neue Haas Grotesk'; |
||||
font-style: normal; |
||||
font-weight: 600; |
||||
src: url('/fonts/NeueHaasDisplayBold.woff2') format('woff2'), |
||||
url('/fonts/NeueHaasDisplayBold.woff') format('woff'); |
||||
} |
||||