status-im
/
status-web
mirror of https://github.com/status-im/status-web.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(react): improve usage of theme tokens

This commit is contained in:
Pavel Prichodko 2022-04-14 13:44:55 +02:00
parent c87619c6ec
commit 51c6250b6e
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
16 changed files with 71 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/status-react/src/components/main-sidebar/components/channels/channel-group.tsx
View File

@ -48,9 +48,10 @@ const CollapsibleTrigger = styled(Collapsible.Trigger, {
padding: 8,
borderRadius: 8,
height: 34,
color: '$accent-1',
'&:hover': {
background: '#E9EDF1',
background: '$gray-3',
},
'&[aria-expanded="true"] svg': {

4
packages/status-react/src/components/main-sidebar/components/community-info/community-dialog.tsx
View File

File diff suppressed because one or more lines are too long

2
packages/status-react/src/components/main-sidebar/components/community-info/index.tsx
View File

@ -34,6 +34,6 @@ const Button = styled('button', {
alignItems: 'center',
'&:hover': {
background: '#E9EDF1',
background: '$gray-3',
},
})

10
packages/status-react/src/components/main-sidebar/components/sidebar-item/index.tsx
View File

@ -40,7 +40,7 @@ const Link = styled(NavLink, {
fontWeight: '$500',
fontSize: 15,
display: 'inline-flex',
color: 'rgba(0, 0, 0, 0.7)',
color: '$accent-4',
alignItems: 'center',
width: '100%',
gap: '$2',
@ -48,19 +48,21 @@ const Link = styled(NavLink, {
padding: 8,
'&:hover': {
background: '#E9EDF1',
background: '$gray-3',
},
'&.active': {
background: 'rgba(233, 237, 241, 1)',
color: '$accent-1',
background: '$gray-3',
},
variants: {
state: {
muted: {
color: 'rgba(0, 0, 0, 0.4)',
color: '$accent-5',
},
unread: {
color: '$accent-1',
fontWeight: '$600',
'&::after': {
content: '"1"',

14
packages/status-react/src/components/main-sidebar/index.tsx
View File

@ -1,6 +1,7 @@
import React from 'react'
import { styled } from '~/src/styles/config'
import { Separator } from '~/src/system'
import { Channels } from './components/channels'
import { CommunityInfo } from './components/community-info'
@ -12,9 +13,9 @@ export const MainSidebar = () => {
<Wrapper>
<CommunityInfo />
<Channels />
<Separator />
<Separator css={{ margin: '16px 0' }} />
<Messages />
<Separator />
<Separator css={{ margin: '16px 0' }} />
<GetStarted />
</Wrapper>
)
@ -26,17 +27,10 @@ const Wrapper = styled('div', {
flexDirection: 'column',
padding: '10px 16px',
display: 'none',
backgroundColor: '#F6F8FA',
backgroundColor: '$gray-4',
overflowY: 'scroll',
'@medium': {
display: 'flex',
},
})
const Separator = styled('div', {
margin: '16px 0',
height: 1,
background: 'rgba(0, 0, 0, 0.1)',
flexShrink: 0,
})

2
packages/status-react/src/components/member-sidebar/index.tsx
View File

@ -50,7 +50,7 @@ const Wrapper = styled('div', {
flexShrink: 0,
padding: '18px 16px',
display: 'none',
backgroundColor: '#F6F8FA',
backgroundColor: '$gray-4',
overflowY: 'scroll',
'@medium': {

2
packages/status-react/src/components/member-sidebar/member-item.tsx
View File

@ -23,7 +23,7 @@ export const MemberItem = (props: Props) => {
/>
<div>
<Flex align="center" gap={1}>
<Text size="15" color="black-70">
<Text size="15" color="accent">
{children}
</Text>
{verified && (

56
packages/status-react/src/modules/community/index.tsx
View File

@ -1,7 +1,6 @@
import React, { useRef } from 'react'
import { BrowserRouter } from 'react-router-dom'
import styled, { ThemeProvider } from 'styled-components'
import { AppProvider } from '~/src/contexts/app-context'
import { ChatStateProvider } from '~/src/contexts/chatStateProvider'
@ -12,6 +11,7 @@ import { ModalProvider } from '~/src/contexts/modalProvider'
import { NarrowProvider } from '~/src/contexts/narrowProvider'
import { ScrollProvider } from '~/src/contexts/scrollProvider'
import { ToastProvider } from '~/src/contexts/toastProvider'
import { styled } from '~/src/styles/config'
import { GlobalStyle } from '~/src/styles/GlobalStyle'
import { Messenger } from './messenger'
@ -34,30 +34,28 @@ export const Community = (props: Props) => {
<Router>
<AppProvider config={props}>
<DialogProvider>
<ThemeProvider theme={theme}>
<NarrowProvider myRef={ref}>
<ModalProvider>
<ToastProvider>
<Wrapper ref={ref}>
<GlobalStyle />
<IdentityProvider>
<MessengerProvider
publicKey={publicKey}
environment={environment}
>
<ChatStateProvider>
<ScrollProvider>
<Messenger />
<div id="modal-root" />
</ScrollProvider>
</ChatStateProvider>
</MessengerProvider>
</IdentityProvider>
</Wrapper>
</ToastProvider>
</ModalProvider>
</NarrowProvider>
</ThemeProvider>
<NarrowProvider myRef={ref}>
<ModalProvider>
<ToastProvider>
<Wrapper ref={ref} className={theme}>
<GlobalStyle />
<IdentityProvider>
<MessengerProvider
publicKey={publicKey}
environment={environment}
>
<ChatStateProvider>
<ScrollProvider>
<Messenger />
<div id="portal" data-radix-portal />
</ScrollProvider>
</ChatStateProvider>
</MessengerProvider>
</IdentityProvider>
</Wrapper>
</ToastProvider>
</ModalProvider>
</NarrowProvider>
</DialogProvider>
</AppProvider>
</Router>
@ -66,7 +64,7 @@ export const Community = (props: Props) => {
export type { Props as CommunityProps }
const Wrapper = styled.div`
height: 100%;
overflow: hidden;
`
const Wrapper = styled('div', {
height: '100%',
overflow: 'hidden',
})

1
packages/status-react/src/modules/community/messenger.tsx
View File

@ -28,4 +28,5 @@ const Wrapper = styled('div', {
height: '100%',
display: 'flex',
alignItems: 'stretch',
background: '$background',
})

2
packages/status-react/src/routes/chat/components/chat-message/index.tsx
View File

@ -235,7 +235,7 @@ const Wrapper = styled('div', {
transitionDuration: '100ms',
'&:hover, &[data-open="true"], &[data-active="true"]': {
background: '#EEF2F5',
background: '$gray-4',
},
a: {

1
packages/status-react/src/routes/index.tsx
View File

@ -52,4 +52,5 @@ const Wrapper = styled('div', {
height: '100%',
display: 'flex',
alignItems: 'stretch',
background: '$background',
})

1
packages/status-react/src/routes/new-chat/index.tsx
View File

@ -250,7 +250,6 @@ const Wrapper = styled('div', {
display: 'flex',
flexDirection: 'column',
alignItems: 'stretch',
background: '#fff',
})
const NavbarWrapper = styled('div', {

7
packages/status-react/src/styles/config.tsx
View File

@ -4,6 +4,7 @@ import type { CSS as StitchesCSS } from '@stitches/react'
export type { VariantProps } from '@stitches/react'
export type CSS = StitchesCSS<typeof config>
export type Theme = typeof theme
export const {
styled,
@ -31,6 +32,9 @@ export const {
current: 'currentColor',
transparent: 'transparent',
background: 'rgb(255, 255, 255)',
overlay: 'rgba(0, 0, 0, 0.4)',
'primary-1': 'rgba(67, 96, 223, 1)',
'primary-2': 'rgba(67, 96, 223, 0.2)',
'primary-3': 'rgba(67, 96, 223, 0.1)',
@ -107,6 +111,9 @@ export const {
export const darkTheme = createTheme({
colors: {
background: 'rgb(0, 0, 0)',
overlay: 'rgba(255, 255, 255, 0.4)',
'primary-1': 'rgba(136, 176, 255, 1)',
'primary-2': 'rgba(134, 158, 255, 0.3)',
'primary-3': 'rgba(134, 158, 255, 0.2)',

8
packages/status-react/src/system/avatar/styles.tsx
View File

@ -6,7 +6,7 @@ export type Variants = VariantProps<typeof Base>
export const Base = styled('div', {
position: 'relative',
background: '#F6F8FA',
background: '$accent-6',
borderRadius: '100%',
flexShrink: 0,
@ -53,7 +53,7 @@ export const Indicator = styled('span', {
right: -2,
bottom: -2,
borderRadius: '100%',
border: '2px solid #fff',
border: '2px solid $gray-4',
variants: {
size: {
@ -71,10 +71,10 @@ export const Indicator = styled('span', {
},
state: {
online: {
backgroundColor: '#4EBC60',
backgroundColor: '$success-1',
},
offline: {
backgroundColor: '#939BA1',
backgroundColor: '$gray-1',
},
},
},

8
packages/status-react/src/system/dialog/styles.tsx
View File

@ -18,7 +18,7 @@ const overlayAnimation = keyframes({
export const Overlay = styled('div', {
inset: 0,
position: 'fixed',
backgroundColor: 'rgba(0,0,0,0.4)',
backgroundColor: '$overlay',
'@motion': {
animation: `${overlayAnimation} 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards`,
@ -37,7 +37,7 @@ const contentAnimation = keyframes({
})
export const Content = styled('div', {
backgroundColor: 'white',
backgroundColor: '$background',
borderRadius: 8,
boxShadow:
'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
@ -75,7 +75,7 @@ export const Header = styled('div', {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
borderBottom: '1px solid #eee',
borderBottom: '1px solid $gray-2',
})
export const Body = styled(Flex, {
@ -91,6 +91,6 @@ export const Actions = styled('div', {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
borderTop: '1px solid #EEF2F5',
borderTop: '1px solid $gray-2',
gap: 16,
})

18
packages/status-react/src/system/icon-button/styles.tsx
View File

@ -14,39 +14,39 @@ export const Base = styled('button', {
borderRadius: 8,
'&:hover': {
background: '#EEF2F5',
background: '$gray-3',
},
'&[aria-expanded="true"]': {
background: '#F6F8FA',
background: '$gray-4',
},
variants: {
color: {
default: {
color: '#000',
color: '$accent-1',
},
gray: {
color: '#939BA1',
color: '$gray-1',
},
},
intent: {
info: {
'&:hover': {
background: 'rgba(67, 96, 223, 0.1)',
color: '#4360DF',
background: '$primary-3',
color: '$primary-1',
},
},
danger: {
'&:hover': {
background: 'rgba(255, 45, 85, 0.2)',
color: '#FF2D55',
background: '$danger-2',
color: '$danger-1',
},
},
},
active: {
true: {
background: '#F6F8FA',
background: '$gray-4',
},
},
},