Skip to content
This repository was archived by the owner on Jul 22, 2025. It is now read-only.

Update design system #1551

Merged
juliangruber merged 7 commits into from
May 23, 2024
Merged

Update design system #1551

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7a3148b
update tailwind config and styles
davelange May 21, 2024
7e9826b
update changed
davelange May 21, 2024
999accd
add text and button generics
davelange May 21, 2024
8980903
update layout
davelange May 21, 2024
ea1f13c
add switch
davelange May 22, 2024
26bd8cf
add safelist to config
davelange May 22, 2024
6968b9a
font type fix
davelange May 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 108 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,12 @@
"@glif/filecoin-wallet-provider": "^3.0.4",
"@influxdata/influxdb-client": "^1.33.2",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-switch": "^1.0.3",
"@sentry/node": "^7.111.0",
"@sentry/react": "^7.111.0",
"@sentry/tracing": "^7.111.0",
"chart.js": "^4.4.2",
"classnames": "^2.5.1",
"dayjs": "^1.11.10",
"electron-log": "^5.1.2",
"electron-serve": "^1.3.0",
Expand Down
30 changes: 3 additions & 27 deletions renderer/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,12 @@
}
@font-face {
font-family: "SpaceGrotesk";
font-weight: 700;
src: url('assets/fonts/SpaceGrotesk/SpaceGrotesk-Bold.ttf');
font-weight: 500;
src: url('assets/fonts/SpaceGrotesk/SpaceGrotesk-Medium.ttf');
}
@font-face {
font-family: "SpaceMono";
font-weight: 400;
src: url('assets/fonts/SpaceMono/SpaceMono-Regular.ttf');
}
@font-face {
Expand Down Expand Up @@ -49,14 +50,6 @@
margin-block-end: 0;
}

.title {
@apply text-header-l font-title text-primary leading-[1.25] tracking-[-0.4px];
}

.subtitle {
@apply text-header-xxs font-title text-secondary tracking-[-0.4px];
}

.app-bg {
background-image: url('./assets/img/bg-pattern.svg');
background-repeat: no-repeat;
Expand All @@ -66,12 +59,6 @@
}

@layer components {

.input {
@apply text-header-3xs font-body text-white
bg-transparent appearance-none focus:outline-none focus:ring-0;
}

.btn-primary {
@apply py-2 px-4 h-12 rounded-full font-body text-body-s w-fit
bg-transparent text-white border border-white border-solid
Expand Down Expand Up @@ -126,17 +113,6 @@
disabled:border-grayscale-500 disabled:text-grayscale-500;
}

.btn-primary-accent {
@apply bg-accent hover:bg-accent-hover visited:bg-accent-click
disabled:bg-accent/40
}

.link-primary {
@apply text-body-xs text-primary underline decoration-primary/70
hover:text-primary-hover hover:decoration-primary-hover/70
visited:text-primary-click visited:decoration-primary-click/70
}

input:focus ~ label,
input:not(:placeholder-shown) ~ label{
--tw-rotate: 0;
Expand Down
45 changes: 45 additions & 0 deletions renderer/src/components/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import classNames from 'classnames'
import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react'

const DEFAULT_ELEMENT = 'button'

type ButtonOwnProps<C> = {
variant: 'primary' | 'secondary';
icon?: ReactNode;
as?: C;
children: ReactNode;
}

type ButtonProps<C extends ElementType = typeof DEFAULT_ELEMENT>
= ButtonOwnProps<C> & ComponentPropsWithoutRef<C>

const variantClassNames = {
primary: 'bg-primary text-white',
secondary: 'bg-slate-50 text-primary outline-1 outline-dashed outline-primary'
}

const Button = <C extends ElementType = typeof DEFAULT_ELEMENT>({
variant,
as,
icon,
children,
...props
}: ButtonProps<C>) => {
const Component = as || DEFAULT_ELEMENT

const className = classNames(
`flex gap-2 items-center font-mono text-2xs py-2 px-6 rounded-[28px]
focus:ring ring-slate-400 focus:outline-0`,
variantClassNames[variant],
props.className
)

return (
<Component {...props} className={className}>
{icon}
{children}
</Component>
)
}

export default Button
2 changes: 1 addition & 1 deletion renderer/src/components/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const Layout = ({ children }: {children: ReactNode}) => {
<div className='h-screen w-screen overflow-x-hidden flex relative app-bg'>
<DraggableArea />
<Sidebar />
<main className='flex-1 px-20'>
<main className='flex-1 px-9 mt-28 '>
<div className='w-full flex flex-wrap justify-end'>
<UpdateBanner />
<WalletWidget />
Expand Down
61 changes: 61 additions & 0 deletions renderer/src/components/SwitchInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import { Root, Thumb } from '@radix-ui/react-switch'
import Text from './Text'
import { useId } from 'react'

type SwitchInputProps = {
name: string;
defaultChecked?: boolean;
checked?: boolean;
disabled?: boolean;
required?: boolean;
value?: string;
onChange: (value: boolean) => void;
}

const SwitchInput = ({
onChange,
defaultChecked,
...props
}: SwitchInputProps) => {
const id = useId()

return (
<div className='flex gap-5 items-center focus-within:ring-2 ring-slate-400 rounded-sm'>
<Root
id={id}
{...props}
className="w-[34px] h-5 bg-slate-400 rounded-full relative data-[state=checked]:bg-primary
outline-none cursor-default peer"
checked={defaultChecked}
onCheckedChange={onChange}
>
<Thumb className="block w-4 h-4 bg-white rounded-full shadow-switchButton
transition-transform duration-100 translate-x-0.5
will-change-transform data-[state=checked]:translate-x-4"
/>
</Root>
<Text
as='label'
htmlFor={id}
font='mono'
size='xs'
color='secondary'
className='leading-none peer-data-[state=unchecked]:hidden'
>
Yes
</Text>
<Text
as='label'
htmlFor={id}
font='mono'
size='xs'
color='secondary'
className='leading-none peer-data-[state=checked]:hidden'
>
No
</Text>
</div>
)
}

export default SwitchInput
Loading