diff --git a/src/Navigation.tsx b/src/Navigation.tsx
index c9f9272194..0a46041fb7 100644
--- a/src/Navigation.tsx
+++ b/src/Navigation.tsx
@@ -61,7 +61,7 @@ import {ProfileListScreen} from './view/screens/ProfileList'
import {PostThreadScreen} from './view/screens/PostThread'
import {PostLikedByScreen} from './view/screens/PostLikedBy'
import {PostRepostedByScreen} from './view/screens/PostRepostedBy'
-import {DebugScreen} from './view/screens/Debug'
+import {DebugScreen} from './view/screens/DebugNew'
import {LogScreen} from './view/screens/Log'
import {SupportScreen} from './view/screens/Support'
import {PrivacyPolicyScreen} from './view/screens/PrivacyPolicy'
diff --git a/src/view/screens/Debug.tsx b/src/view/screens/Debug.tsx
index da63c628bd..0e0464200e 100644
--- a/src/view/screens/Debug.tsx
+++ b/src/view/screens/Debug.tsx
@@ -1,219 +1,520 @@
import React from 'react'
-import {View, Text as RNText} from 'react-native'
-import {CenteredView, ScrollView} from '#/view/com/util/Views'
+import {ScrollView, View} from 'react-native'
+import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
+import {ViewHeader} from '../com/util/ViewHeader'
+import {ThemeProvider, PaletteColorName} from 'lib/ThemeContext'
+import {usePalette} from 'lib/hooks/usePalette'
+import {s} from 'lib/styles'
+import * as Toast from 'view/com/util/Toast'
+import {Text} from '../com/util/text/Text'
+import {ViewSelector} from '../com/util/ViewSelector'
+import {EmptyState} from '../com/util/EmptyState'
+import * as LoadingPlaceholder from '../com/util/LoadingPlaceholder'
+import {Button, ButtonType} from '../com/util/forms/Button'
+import {DropdownButton, DropdownItem} from '../com/util/forms/DropdownButton'
+import {ToggleButton} from '../com/util/forms/ToggleButton'
+import {RadioGroup} from '../com/util/forms/RadioGroup'
+import {ErrorScreen} from '../com/util/error/ErrorScreen'
+import {ErrorMessage} from '../com/util/error/ErrorMessage'
-import {useSetColorMode} from '#/state/shell'
-import {
- useBreakpoints,
- useStyle,
- useStyles,
- Box,
- Text,
- Button,
- H1,
- H2,
- H3,
- H4,
- H5,
- H6,
-} from '#/view/nova'
-
-function ThemeSelector() {
- const setColorMode = useSetColorMode()
+const MAIN_VIEWS = ['Base', 'Controls', 'Error', 'Notifs']
+export const DebugScreen = ({}: NativeStackScreenProps<
+ CommonNavigatorParams,
+ 'Debug'
+>) => {
+ const [colorScheme, setColorScheme] = React.useState<'light' | 'dark'>(
+ 'light',
+ )
+ const onToggleColorScheme = () => {
+ setColorScheme(colorScheme === 'light' ? 'dark' : 'light')
+ }
return (
-
-
-
-
-
+
+
+
)
}
-function BreakpointDebugger() {
- const breakpoints = useBreakpoints()
+function DebugInner({
+ colorScheme,
+ onToggleColorScheme,
+}: {
+ colorScheme: 'light' | 'dark'
+ onToggleColorScheme: () => void
+}) {
+ const [currentView, setCurrentView] = React.useState(0)
+ const pal = usePalette('default')
+
+ const renderItem = (item: any) => {
+ return (
+
+
+
+
+ {item.currentView === 3 ? (
+
+ ) : item.currentView === 2 ? (
+
+ ) : item.currentView === 1 ? (
+
+ ) : (
+
+ )}
+
+ )
+ }
+
+ const items = [{currentView}]
return (
-
-
- Breakpoint Debugger
-
-
- {JSON.stringify(breakpoints, null, 2)}
-
-
- )
-}
-
-function Hooks() {
- const outer = useStyle({
- pa: 'm',
- bg: 'l1',
- })
- const {heading} = useStyles({
- heading: {
- color: 'l7',
- fontSize: 'l',
- fontWeight: 'bold',
- gtTablet: {
- fontSize: 'xl',
- },
- },
- })
-
- return (
-
- Hooks
+
+
+
)
}
-export function DebugScreen() {
- const backgroundStyles = useStyle({
- bg: 'l0',
- })
-
+function Heading({label}: {label: string}) {
+ const pal = usePalette('default')
return (
-
-
-
-
+
+
+ {label}
+
+
+ )
+}
-
-
- Colors
-
-
-
-
-
-
-
-
-
-
-
-
+function BaseView() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
-
-
- Spacing
-
-
-
-
- xxs (2px)
-
-
-
- xs (4px)
-
-
-
- s (8px)
-
-
-
- m (12px)
-
-
-
- l (18px)
-
-
-
- xl (24px)
-
-
-
- xxl (32px)
-
-
-
-
-
-
-
-
-
- Typography
-
-
-
- Heading 1
- Heading 2
- Heading 3
- Heading 4
- Heading 5
- Heading 6
-
- H1 Size Text
-
- H2 Size Text
- H3 Size Text
- H4 Size Text
- H5 Size Text
- H6 Size Text
-
-
-
-
-
- Grid
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Breakpoint styles
-
-
-
-
-
-
-
-
-
-
+function ControlsView() {
+ return (
+
+
+
+
+
+
+
+
+
+
)
}
+
+function ErrorView() {
+ return (
+
+
+ {}}
+ />
+
+
+
+
+
+
+
+
+ {}}
+ />
+
+
+ {}}
+ numberOfLines={1}
+ />
+
+
+ )
+}
+
+function NotifsView() {
+ const triggerPush = () => {
+ // TODO: implement local notification for testing
+ }
+ const triggerToast = () => {
+ Toast.show('The task has been completed')
+ }
+ const triggerToast2 = () => {
+ Toast.show('The task has been completed successfully and with no problems')
+ }
+ return (
+
+
+
+
+
+
+
+ )
+}
+
+function PaletteView({palette}: {palette: PaletteColorName}) {
+ const defaultPal = usePalette('default')
+ const pal = usePalette(palette)
+ return (
+
+ {palette} colors
+ Light text
+ Link text
+ {palette !== 'default' && (
+
+ Inverted text
+
+ )}
+
+ )
+}
+
+function TypographyView() {
+ const pal = usePalette('default')
+ return (
+
+
+ '2xl-thin' lorem ipsum dolor
+
+
+ '2xl' lorem ipsum dolor
+
+
+ '2xl-medium' lorem ipsum dolor
+
+
+ '2xl-bold' lorem ipsum dolor
+
+
+ '2xl-heavy' lorem ipsum dolor
+
+
+ 'xl-thin' lorem ipsum dolor
+
+
+ 'xl' lorem ipsum dolor
+
+
+ 'xl-medium' lorem ipsum dolor
+
+
+ 'xl-bold' lorem ipsum dolor
+
+
+ 'xl-heavy' lorem ipsum dolor
+
+
+ 'lg-thin' lorem ipsum dolor
+
+
+ 'lg' lorem ipsum dolor
+
+
+ 'lg-medium' lorem ipsum dolor
+
+
+ 'lg-bold' lorem ipsum dolor
+
+
+ 'lg-heavy' lorem ipsum dolor
+
+
+ 'md-thin' lorem ipsum dolor
+
+
+ 'md' lorem ipsum dolor
+
+
+ 'md-medium' lorem ipsum dolor
+
+
+ 'md-bold' lorem ipsum dolor
+
+
+ 'md-heavy' lorem ipsum dolor
+
+
+ 'sm-thin' lorem ipsum dolor
+
+
+ 'sm' lorem ipsum dolor
+
+
+ 'sm-medium' lorem ipsum dolor
+
+
+ 'sm-bold' lorem ipsum dolor
+
+
+ 'sm-heavy' lorem ipsum dolor
+
+
+ 'xs-thin' lorem ipsum dolor
+
+
+ 'xs' lorem ipsum dolor
+
+
+ 'xs-medium' lorem ipsum dolor
+
+
+ 'xs-bold' lorem ipsum dolor
+
+
+ 'xs-heavy' lorem ipsum dolor
+
+
+
+ 'title-2xl' lorem ipsum dolor
+
+
+ 'title-xl' lorem ipsum dolor
+
+
+ 'title-lg' lorem ipsum dolor
+
+
+ 'title' lorem ipsum dolor
+
+
+ Button
+
+
+ Button-lg
+
+
+ )
+}
+
+function EmptyStateView() {
+ return
+}
+
+function LoadingPlaceholderView() {
+ return (
+ <>
+
+
+
+ )
+}
+
+function ButtonsView() {
+ const defaultPal = usePalette('default')
+ const buttonStyles = {marginRight: 5}
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+const DROPDOWN_ITEMS: DropdownItem[] = [
+ {
+ icon: ['far', 'paste'],
+ label: 'Copy post text',
+ onPress() {},
+ },
+ {
+ icon: 'share',
+ label: 'Share...',
+ onPress() {},
+ },
+ {
+ icon: 'circle-exclamation',
+ label: 'Report post',
+ onPress() {},
+ },
+]
+function DropdownButtonsView() {
+ const defaultPal = usePalette('default')
+ return (
+
+
+
+
+
+
+ Bare
+
+
+
+ )
+}
+
+function ToggleButtonsView() {
+ const defaultPal = usePalette('default')
+ const buttonStyles = s.mb5
+ const [isSelected, setIsSelected] = React.useState(false)
+ const onToggle = () => setIsSelected(!isSelected)
+ return (
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+const RADIO_BUTTON_ITEMS = [
+ {key: 'default-light', label: 'Default Light'},
+ {key: 'primary', label: 'Primary'},
+ {key: 'secondary', label: 'Secondary'},
+ {key: 'inverted', label: 'Inverted'},
+ {key: 'primary-outline', label: 'Primary Outline'},
+ {key: 'secondary-outline', label: 'Secondary Outline'},
+ {key: 'primary-light', label: 'Primary Light'},
+ {key: 'secondary-light', label: 'Secondary Light'},
+]
+function RadioButtonsView() {
+ const defaultPal = usePalette('default')
+ const [rgType, setRgType] = React.useState('default-light')
+ return (
+
+ setRgType(v as ButtonType)}
+ />
+
+ )
+}
diff --git a/src/view/screens/DebugNew.tsx b/src/view/screens/DebugNew.tsx
new file mode 100644
index 0000000000..da63c628bd
--- /dev/null
+++ b/src/view/screens/DebugNew.tsx
@@ -0,0 +1,219 @@
+import React from 'react'
+import {View, Text as RNText} from 'react-native'
+import {CenteredView, ScrollView} from '#/view/com/util/Views'
+
+import {useSetColorMode} from '#/state/shell'
+import {
+ useBreakpoints,
+ useStyle,
+ useStyles,
+ Box,
+ Text,
+ Button,
+ H1,
+ H2,
+ H3,
+ H4,
+ H5,
+ H6,
+} from '#/view/nova'
+
+function ThemeSelector() {
+ const setColorMode = useSetColorMode()
+
+ return (
+
+
+
+
+
+ )
+}
+
+function BreakpointDebugger() {
+ const breakpoints = useBreakpoints()
+
+ return (
+
+
+ Breakpoint Debugger
+
+
+ {JSON.stringify(breakpoints, null, 2)}
+
+
+ )
+}
+
+function Hooks() {
+ const outer = useStyle({
+ pa: 'm',
+ bg: 'l1',
+ })
+ const {heading} = useStyles({
+ heading: {
+ color: 'l7',
+ fontSize: 'l',
+ fontWeight: 'bold',
+ gtTablet: {
+ fontSize: 'xl',
+ },
+ },
+ })
+
+ return (
+
+ Hooks
+
+ )
+}
+
+export function DebugScreen() {
+ const backgroundStyles = useStyle({
+ bg: 'l0',
+ })
+
+ return (
+
+
+
+
+
+
+
+ Colors
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Spacing
+
+
+
+
+ xxs (2px)
+
+
+
+ xs (4px)
+
+
+
+ s (8px)
+
+
+
+ m (12px)
+
+
+
+ l (18px)
+
+
+
+ xl (24px)
+
+
+
+ xxl (32px)
+
+
+
+
+
+
+
+
+
+ Typography
+
+
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ H1 Size Text
+
+ H2 Size Text
+ H3 Size Text
+ H4 Size Text
+ H5 Size Text
+ H6 Size Text
+
+
+
+
+
+ Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Breakpoint styles
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/view/screens/DebugOld.tsx b/src/view/screens/DebugOld.tsx
deleted file mode 100644
index 0e0464200e..0000000000
--- a/src/view/screens/DebugOld.tsx
+++ /dev/null
@@ -1,520 +0,0 @@
-import React from 'react'
-import {ScrollView, View} from 'react-native'
-import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
-import {ViewHeader} from '../com/util/ViewHeader'
-import {ThemeProvider, PaletteColorName} from 'lib/ThemeContext'
-import {usePalette} from 'lib/hooks/usePalette'
-import {s} from 'lib/styles'
-import * as Toast from 'view/com/util/Toast'
-import {Text} from '../com/util/text/Text'
-import {ViewSelector} from '../com/util/ViewSelector'
-import {EmptyState} from '../com/util/EmptyState'
-import * as LoadingPlaceholder from '../com/util/LoadingPlaceholder'
-import {Button, ButtonType} from '../com/util/forms/Button'
-import {DropdownButton, DropdownItem} from '../com/util/forms/DropdownButton'
-import {ToggleButton} from '../com/util/forms/ToggleButton'
-import {RadioGroup} from '../com/util/forms/RadioGroup'
-import {ErrorScreen} from '../com/util/error/ErrorScreen'
-import {ErrorMessage} from '../com/util/error/ErrorMessage'
-
-const MAIN_VIEWS = ['Base', 'Controls', 'Error', 'Notifs']
-
-export const DebugScreen = ({}: NativeStackScreenProps<
- CommonNavigatorParams,
- 'Debug'
->) => {
- const [colorScheme, setColorScheme] = React.useState<'light' | 'dark'>(
- 'light',
- )
- const onToggleColorScheme = () => {
- setColorScheme(colorScheme === 'light' ? 'dark' : 'light')
- }
- return (
-
-
-
- )
-}
-
-function DebugInner({
- colorScheme,
- onToggleColorScheme,
-}: {
- colorScheme: 'light' | 'dark'
- onToggleColorScheme: () => void
-}) {
- const [currentView, setCurrentView] = React.useState(0)
- const pal = usePalette('default')
-
- const renderItem = (item: any) => {
- return (
-
-
-
-
- {item.currentView === 3 ? (
-
- ) : item.currentView === 2 ? (
-
- ) : item.currentView === 1 ? (
-
- ) : (
-
- )}
-
- )
- }
-
- const items = [{currentView}]
-
- return (
-
-
-
-
- )
-}
-
-function Heading({label}: {label: string}) {
- const pal = usePalette('default')
- return (
-
-
- {label}
-
-
- )
-}
-
-function BaseView() {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
-
-function ControlsView() {
- return (
-
-
-
-
-
-
-
-
-
-
-
- )
-}
-
-function ErrorView() {
- return (
-
-
- {}}
- />
-
-
-
-
-
-
-
-
- {}}
- />
-
-
- {}}
- numberOfLines={1}
- />
-
-
- )
-}
-
-function NotifsView() {
- const triggerPush = () => {
- // TODO: implement local notification for testing
- }
- const triggerToast = () => {
- Toast.show('The task has been completed')
- }
- const triggerToast2 = () => {
- Toast.show('The task has been completed successfully and with no problems')
- }
- return (
-
-
-
-
-
-
-
- )
-}
-
-function PaletteView({palette}: {palette: PaletteColorName}) {
- const defaultPal = usePalette('default')
- const pal = usePalette(palette)
- return (
-
- {palette} colors
- Light text
- Link text
- {palette !== 'default' && (
-
- Inverted text
-
- )}
-
- )
-}
-
-function TypographyView() {
- const pal = usePalette('default')
- return (
-
-
- '2xl-thin' lorem ipsum dolor
-
-
- '2xl' lorem ipsum dolor
-
-
- '2xl-medium' lorem ipsum dolor
-
-
- '2xl-bold' lorem ipsum dolor
-
-
- '2xl-heavy' lorem ipsum dolor
-
-
- 'xl-thin' lorem ipsum dolor
-
-
- 'xl' lorem ipsum dolor
-
-
- 'xl-medium' lorem ipsum dolor
-
-
- 'xl-bold' lorem ipsum dolor
-
-
- 'xl-heavy' lorem ipsum dolor
-
-
- 'lg-thin' lorem ipsum dolor
-
-
- 'lg' lorem ipsum dolor
-
-
- 'lg-medium' lorem ipsum dolor
-
-
- 'lg-bold' lorem ipsum dolor
-
-
- 'lg-heavy' lorem ipsum dolor
-
-
- 'md-thin' lorem ipsum dolor
-
-
- 'md' lorem ipsum dolor
-
-
- 'md-medium' lorem ipsum dolor
-
-
- 'md-bold' lorem ipsum dolor
-
-
- 'md-heavy' lorem ipsum dolor
-
-
- 'sm-thin' lorem ipsum dolor
-
-
- 'sm' lorem ipsum dolor
-
-
- 'sm-medium' lorem ipsum dolor
-
-
- 'sm-bold' lorem ipsum dolor
-
-
- 'sm-heavy' lorem ipsum dolor
-
-
- 'xs-thin' lorem ipsum dolor
-
-
- 'xs' lorem ipsum dolor
-
-
- 'xs-medium' lorem ipsum dolor
-
-
- 'xs-bold' lorem ipsum dolor
-
-
- 'xs-heavy' lorem ipsum dolor
-
-
-
- 'title-2xl' lorem ipsum dolor
-
-
- 'title-xl' lorem ipsum dolor
-
-
- 'title-lg' lorem ipsum dolor
-
-
- 'title' lorem ipsum dolor
-
-
- Button
-
-
- Button-lg
-
-
- )
-}
-
-function EmptyStateView() {
- return
-}
-
-function LoadingPlaceholderView() {
- return (
- <>
-
-
-
- )
-}
-
-function ButtonsView() {
- const defaultPal = usePalette('default')
- const buttonStyles = {marginRight: 5}
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
-
-const DROPDOWN_ITEMS: DropdownItem[] = [
- {
- icon: ['far', 'paste'],
- label: 'Copy post text',
- onPress() {},
- },
- {
- icon: 'share',
- label: 'Share...',
- onPress() {},
- },
- {
- icon: 'circle-exclamation',
- label: 'Report post',
- onPress() {},
- },
-]
-function DropdownButtonsView() {
- const defaultPal = usePalette('default')
- return (
-
-
-
-
-
-
- Bare
-
-
-
- )
-}
-
-function ToggleButtonsView() {
- const defaultPal = usePalette('default')
- const buttonStyles = s.mb5
- const [isSelected, setIsSelected] = React.useState(false)
- const onToggle = () => setIsSelected(!isSelected)
- return (
-
-
-
-
-
-
-
-
-
-
- )
-}
-
-const RADIO_BUTTON_ITEMS = [
- {key: 'default-light', label: 'Default Light'},
- {key: 'primary', label: 'Primary'},
- {key: 'secondary', label: 'Secondary'},
- {key: 'inverted', label: 'Inverted'},
- {key: 'primary-outline', label: 'Primary Outline'},
- {key: 'secondary-outline', label: 'Secondary Outline'},
- {key: 'primary-light', label: 'Primary Light'},
- {key: 'secondary-light', label: 'Secondary Light'},
-]
-function RadioButtonsView() {
- const defaultPal = usePalette('default')
- const [rgType, setRgType] = React.useState('default-light')
- return (
-
- setRgType(v as ButtonType)}
- />
-
- )
-}