mirror/App
1
0
Fork 0
mirror of https://github.com/Jellify-Music/App.git synced 2026-01-25 04:28:40 -06:00
Code Issues Packages Projects Releases Wiki Activity

styling

Browse Source
This commit is contained in:
Violet Caulfield
2024-10-18 19:11:43 -05:00
parent fe6d4e24b2
commit d3bb4360e2
2 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/Login/helpers/server-address.tsx
View File

@@ -7,7 +7,7 @@ import { AsyncStorageKeys } from "../../../enums/async-storage-keys";
import { JellifyServer } from "../../../types/JellifyServer";
import { mutateServer, serverMutation } from "../../../api/mutators/functions/storage";
import { useApiClientContext } from "../../jellyfin-api-provider";
import { Button, Input, SizableText, useTheme, View, YStack, Stack, XStack, getFontSizeToken } from "tamagui";
import { Button, Input, SizableText, useTheme, View, YStack, Stack, XStack, getFontSizeToken, Paragraph } from "tamagui";
import { CheckboxWithLabel } from "../../helpers/checkbox-with-label";
import { SwitchWithLabel } from "../../helpers/switch-with-label";
@@ -54,15 +54,18 @@ export default function ServerAddress(): React.JSX.Element {
return (
<View flex={1} justifyContent='center'>
<SizableText style={{ fontSize: 25, fontWeight: '800' }}>Connect to Jellyfin</SizableText>
<Paragraph fontSize={25} fontWeight={800}>Connect to Jellyfin</Paragraph>
<XStack>
<SwitchWithLabel checked={useHttps} onCheckedChange={(checked) => setUseHttps(checked)} label="HTTPS" size="$2" />
<SwitchWithLabel
checked={useHttps}
onCheckedChange={(checked) => setUseHttps(checked)}
label="HTTPS"
size="$2"
width={100} />
<Input
width={400}
placeholder="jellyfin.org"
onChangeText={setServerAddress}
>
</Input>
onChangeText={setServerAddress} />
</XStack>
<Button
onPress={() => {

4
components/helpers/switch-with-label.tsx
View File

@@ -1,9 +1,9 @@
import { SizeTokens, XStack, Label, Separator, Switch } from "tamagui";
export function SwitchWithLabel(props: { size: SizeTokens; checked: boolean, label: string, onCheckedChange: (value: boolean) => void }) {
export function SwitchWithLabel(props: { size: SizeTokens; checked: boolean, label: string, onCheckedChange: (value: boolean) => void, width?: number }) {
const id = `switch-${props.size.toString().slice(1)}-${props.checked ?? ''}}`
return (
<XStack width={200} alignItems="center" gap="$4">
<XStack width={props.width ?? 150} alignItems="center" gap="$4">
<Label
paddingRight="$0"
minWidth={90}