+
+ {t('pages.twitch-settings.title')}
+ {t('pages.twitch-settings.subtitle')}
+
+
+
+ dispatch(
+ setTwitchConfig({
+ ...twitchConfig,
+ enabled: !!ev,
+ }),
+ )
+ }
+ id="enable"
+ >
+ {active && }
+
+
+
+
+
+
+
+
+
+
+ {t('pages.twitch-settings.api-configuration')}
+
+
+ {t('pages.twitch-settings.bot-settings')}
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/ui/theme/forms.ts b/frontend/src/ui/theme/forms.ts
index 7145822..7e30820 100644
--- a/frontend/src/ui/theme/forms.ts
+++ b/frontend/src/ui/theme/forms.ts
@@ -1,4 +1,5 @@
import * as UnstyledLabel from '@radix-ui/react-label';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
import { styled } from './theme';
export const Field = styled('fieldset', {
@@ -6,11 +7,17 @@ export const Field = styled('fieldset', {
marginBottom: '2rem',
display: 'flex',
justifyContent: 'flex-start',
+ alignItems: 'center',
+ gap: '0.5rem',
variants: {
size: {
fullWidth: {
flexDirection: 'column',
- gap: '0.5rem',
+ alignItems: 'stretch',
+ },
+ vertical: {
+ flexDirection: 'column',
+ alignItems: 'flex-start',
},
},
},
@@ -95,3 +102,33 @@ export const Button = styled('button', {
},
},
});
+
+export const Checkbox = styled(CheckboxPrimitive.Root, {
+ all: 'unset',
+ width: 25,
+ height: 25,
+ borderRadius: 4,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ border: '1px solid $teal6',
+ backgroundColor: '$teal4',
+ '&:hover': {
+ backgroundColor: '$teal5',
+ },
+ '&:active': {
+ background: '$teal6',
+ },
+ '&:disabled': {
+ backgroundColor: '$gray4',
+ borderColor: '$gray5',
+ color: '$gray8',
+ },
+});
+
+export const CheckboxIndicator = styled(CheckboxPrimitive.Indicator, {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ color: '$teal11',
+});
diff --git a/frontend/src/ui/theme/index.ts b/frontend/src/ui/theme/index.ts
index 7496d13..e5411fb 100644
--- a/frontend/src/ui/theme/index.ts
+++ b/frontend/src/ui/theme/index.ts
@@ -3,3 +3,4 @@ export * from './brand';
export * from './forms';
export * from './pages';
export * from './tabs';
+export * from './utils';
diff --git a/frontend/src/ui/theme/pages.ts b/frontend/src/ui/theme/pages.ts
index 5b25ef6..7f41d22 100644
--- a/frontend/src/ui/theme/pages.ts
+++ b/frontend/src/ui/theme/pages.ts
@@ -28,3 +28,7 @@ export const SectionHeader = styled('h2', {
},
},
});
+
+export const TextBlock = styled('p', {
+ lineHeight: '1.5',
+});
diff --git a/frontend/src/ui/theme/tabs.ts b/frontend/src/ui/theme/tabs.ts
index 5ce4eea..93264ed 100644
--- a/frontend/src/ui/theme/tabs.ts
+++ b/frontend/src/ui/theme/tabs.ts
@@ -1,6 +1,8 @@
import * as Tabs from '@radix-ui/react-tabs';
import { styled } from './theme';
+export const TabContainer = styled(Tabs.Root, {});
+
export const TabList = styled(Tabs.List, {
borderBottom: '1px solid $gray6',
});
diff --git a/frontend/src/ui/theme/theme.ts b/frontend/src/ui/theme/theme.ts
index 27068bf..f828caf 100644
--- a/frontend/src/ui/theme/theme.ts
+++ b/frontend/src/ui/theme/theme.ts
@@ -8,6 +8,7 @@ import {
import { globalCss, createStitches } from '@stitches/react';
export const globalStyles = globalCss({
+ '*': { boxSizing: 'border-box' },
body: { margin: 0, padding: 0, backgroundColor: '$gray1', color: '$teal12' },
html: {
margin: 0,
diff --git a/frontend/src/ui/theme/utils.ts b/frontend/src/ui/theme/utils.ts
new file mode 100644
index 0000000..a52d2e0
--- /dev/null
+++ b/frontend/src/ui/theme/utils.ts
@@ -0,0 +1,15 @@
+import { styled } from './theme';
+
+export const FlexRow = styled('div', {
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ variants: {
+ spacing: {
+ '1': {
+ gap: '0.5rem',
+ },
+ },
+ },
+});