status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-28 02:50:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(titles): responsive advanced settings

Browse Source
This commit is contained in:
RadoslavDimchev 2024-03-21 20:40:48 +02:00 committed by Radoslav Dimchev
parent 7bea0cd7ed
commit 46fc344fd1
3 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/General/Titles.tsx
View File

@ -1,4 +1,4 @@
import { XStack, YStack } from 'tamagui'
import { YStack } from 'tamagui'
import { Button, Text } from '@status-im/components'
import { RevealIcon } from '@status-im/icons'
@ -19,7 +19,7 @@ const Titles = ({
}: TitlesProps) => {
return (
<YStack style={{ width: '100%', margin: '0 0 1em' }}>
<XStack style={{ justifyContent: 'space-between', alignItems: 'center' }}>
<div className={'titles-container'}>
<Text size={titleSize} weight={'semibold'}>
{title}
</Text>
@ -28,7 +28,7 @@ const Titles = ({
Advanced Settings
</Button>
)}
</XStack>
</div>
<Text size={subtitleSize}>{subtitle}</Text>
</YStack>
)

17
src/index.css
View File

@ -123,6 +123,11 @@ ul li {
margin-top: 4.4rem;
}
.titles-container {
display: flex;
justify-content: space-between;
}
@media (prefers-color-scheme: light) {
:root {
color: #09101c;
@ -154,3 +159,15 @@ ul li {
margin-top: 0;
}
}
@media (max-width: 1160px) and (min-width: 1000px) {
.titles-container {
flex-direction: column;
}
}
@media (max-width: 500px) {
.titles-container {
flex-direction: column;
}
}