From bda355fd58a06b5fe7cf58a12d32769f75112a4f Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 18 Sep 2024 20:22:03 -0500 Subject: [PATCH 1/7] Fix font loading on web (#5412) * Copy font files during build * Fall back if error loading fonts --- package.json | 2 +- src/App.web.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index ba7882902c..09985de02f 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "web": "expo start --web", "use-build-number": "./scripts/useBuildNumberEnv.sh", "use-build-number-with-bump": "./scripts/useBuildNumberEnvWithBump.sh", - "build-web": "expo export:web && node ./scripts/post-web-build.js && cp -v ./web-build/static/js/*.* ./bskyweb/static/js/ && cp -v ./web-build/static/media/*.png ./bskyweb/static/media/", + "build-web": "expo export:web && node ./scripts/post-web-build.js && cp -v ./web-build/static/js/*.* ./bskyweb/static/js/ && cp -v ./web-build/static/media/* ./bskyweb/static/media/", "build-all": "yarn intl:build && yarn use-build-number-with-bump eas build --platform all", "build-ios": "yarn use-build-number-with-bump eas build -p ios", "build-android": "yarn use-build-number-with-bump eas build -p android", diff --git a/src/App.web.tsx b/src/App.web.tsx index 1c66507336..846d178f99 100644 --- a/src/App.web.tsx +++ b/src/App.web.tsx @@ -144,13 +144,13 @@ function InnerApp() { function App() { const [isReady, setReady] = useState(false) - const [loaded] = useFonts() + const [loaded, error] = useFonts() React.useEffect(() => { initPersistedState().then(() => setReady(true)) }, []) - if (!isReady || !loaded) { + if (!isReady || (!loaded && !error)) { return null } From 8fde02fabcac588df3187a7e42108cb8f6a2239a Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Thu, 19 Sep 2024 15:32:12 +0100 Subject: [PATCH 2/7] Fix ext embeds in DMs (#5419) * fix ext embeds in DMs * undo acciental rounding change --- src/lib/embeds.ts | 2 +- src/view/com/util/post-embeds/ExternalLinkEmbed.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/embeds.ts b/src/lib/embeds.ts index a758987b20..2904f1cc36 100644 --- a/src/lib/embeds.ts +++ b/src/lib/embeds.ts @@ -1,7 +1,7 @@ import { - AppBskyFeedDefs, AppBskyEmbedRecord, AppBskyEmbedRecordWithMedia, + AppBskyFeedDefs, } from '@atproto/api' export function isEmbedByEmbedder( diff --git a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx index e6ab86f9c5..2fc53a4df9 100644 --- a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx +++ b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx @@ -59,7 +59,7 @@ export const ExternalLinkEmbed = ({ } return ( - + {imageUri && !embedPlayerParams ? ( From 24adcb48b7fa5261b67d40cb78b9b22c62c3854d Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 19 Sep 2024 11:54:29 -0500 Subject: [PATCH 3/7] Revert provider stacking changes (#5423) --- src/App.native.tsx | 83 ++++++++++++++++++++++++---------------------- src/App.web.tsx | 80 ++++++++++++++++++++++---------------------- 2 files changed, 84 insertions(+), 79 deletions(-) diff --git a/src/App.native.tsx b/src/App.native.tsx index 9214253aca..b780880b3a 100644 --- a/src/App.native.tsx +++ b/src/App.native.tsx @@ -106,48 +106,51 @@ function InnerApp() { }, [_]) return ( - - - - - - + + + + + + - - {/* LabelDefsProvider MUST come before ModerationOptsProvider */} - - - - - - - - - - - - - - - - - - - - - - - - + + + {/* LabelDefsProvider MUST come before ModerationOptsProvider */} + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - + + + + + + ) } diff --git a/src/App.web.tsx b/src/App.web.tsx index 846d178f99..075ce964a9 100644 --- a/src/App.web.tsx +++ b/src/App.web.tsx @@ -96,48 +96,50 @@ function InnerApp() { return ( - - - - - - + + + + + + - - {/* LabelDefsProvider MUST come before ModerationOptsProvider */} - - - - - - - - - - - - - - - - - - - - - - - + + + {/* LabelDefsProvider MUST come before ModerationOptsProvider */} + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - + + + + + + ) } From 15231604679675633c72583879234402eea0fa2c Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 19 Sep 2024 11:54:39 -0500 Subject: [PATCH 4/7] Remove expo/vector-icons from EditImage modal (#5422) --- .../aspectRatio11_stroke2_corner0_rounded.svg | 1 + .../aspectRatio34_stroke2_corner0_rounded.svg | 1 + .../aspectRatio43_stroke2_corner0_rounded.svg | 1 + ...flipHorizontal_stroke2_corner0_rounded.svg | 1 + .../flipVertical_stroke2_corner0_rounded.svg | 1 + src/components/icons/AspectRatio.tsx | 13 +++ src/components/icons/FlipImage.tsx | 9 ++ src/view/com/modals/EditImage.tsx | 106 +++++++----------- 8 files changed, 69 insertions(+), 64 deletions(-) create mode 100644 assets/icons/aspectRatio11_stroke2_corner0_rounded.svg create mode 100644 assets/icons/aspectRatio34_stroke2_corner0_rounded.svg create mode 100644 assets/icons/aspectRatio43_stroke2_corner0_rounded.svg create mode 100644 assets/icons/flipHorizontal_stroke2_corner0_rounded.svg create mode 100644 assets/icons/flipVertical_stroke2_corner0_rounded.svg create mode 100644 src/components/icons/AspectRatio.tsx create mode 100644 src/components/icons/FlipImage.tsx diff --git a/assets/icons/aspectRatio11_stroke2_corner0_rounded.svg b/assets/icons/aspectRatio11_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..949eba697b --- /dev/null +++ b/assets/icons/aspectRatio11_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/aspectRatio34_stroke2_corner0_rounded.svg b/assets/icons/aspectRatio34_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..50761a05c5 --- /dev/null +++ b/assets/icons/aspectRatio34_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/aspectRatio43_stroke2_corner0_rounded.svg b/assets/icons/aspectRatio43_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..4ca8362e94 --- /dev/null +++ b/assets/icons/aspectRatio43_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/flipHorizontal_stroke2_corner0_rounded.svg b/assets/icons/flipHorizontal_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..0d4c81d2c1 --- /dev/null +++ b/assets/icons/flipHorizontal_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/flipVertical_stroke2_corner0_rounded.svg b/assets/icons/flipVertical_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..42fca985c5 --- /dev/null +++ b/assets/icons/flipVertical_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/src/components/icons/AspectRatio.tsx b/src/components/icons/AspectRatio.tsx new file mode 100644 index 0000000000..b59c1680ef --- /dev/null +++ b/src/components/icons/AspectRatio.tsx @@ -0,0 +1,13 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const AspectRatio11_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 1v14h14V5H5Z', +}) + +export const AspectRatio43_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M2 20.5c-.552 0-1-.41-1-.917V4.917C1 4.41 1.448 4 2 4h20c.552 0 1 .41 1 .917v14.666c0 .507-.448.917-1 .917H2Zm1-1.833h18V5.833H3v12.834Z', +}) + +export const AspectRatio34_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M4 2c0-.552.41-1 .917-1h14.666c.507 0 .917.448.917 1v20c0 .552-.41 1-.917 1H4.917C4.41 23 4 22.552 4 22V2Zm1.833 1v18h12.834V3H5.833Z', +}) diff --git a/src/components/icons/FlipImage.tsx b/src/components/icons/FlipImage.tsx new file mode 100644 index 0000000000..deb133a5e1 --- /dev/null +++ b/src/components/icons/FlipImage.tsx @@ -0,0 +1,9 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const FlipVertical_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v5h-2V5H5v4H3V4Zm20 9H1v-2h22v2Zm-2.293 7.707A1 1 0 0 1 20 21h-1v-2h2v1a1 1 0 0 1-.293.707ZM17 19v2h-2v-2h2Zm-4 0v2h-2v-2h2Zm-4 0v2H7v-2h2Zm-4 0v2H4a1 1 0 0 1-1-1v-1h2Zm0-2H3v-2h2v2Zm14-2v2h2v-2h-2Z', +}) + +export const FlipHorizontal_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M4 21a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5v2H5v14h4v2H4Zm9-20v22h-2V1h2Zm7.707 2.293A1 1 0 0 1 21 4v1h-2V3h1a1 1 0 0 1 .707.293ZM19 7h2v2h-2V7Zm0 4h2v2h-2v-2Zm0 4h2v2h-2v-2Zm0 4h2v1a1 1 0 0 1-1 1h-1v-2Zm-2 0v2h-2v-2h2ZM15 5h2V3h-2v2Z', +}) diff --git a/src/view/com/modals/EditImage.tsx b/src/view/com/modals/EditImage.tsx index b39dcd9364..e3a770db07 100644 --- a/src/view/com/modals/EditImage.tsx +++ b/src/view/com/modals/EditImage.tsx @@ -2,7 +2,6 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react' import {Pressable, StyleSheet, View} from 'react-native' import {useWindowDimensions} from 'react-native' import {LinearGradient} from 'expo-linear-gradient' -import {MaterialIcons} from '@expo/vector-icons' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {Slider} from '@miblanchard/react-native-slider' @@ -13,13 +12,24 @@ import {useModalControls} from '#/state/modals' import {MAX_ALT_TEXT} from 'lib/constants' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {RectTallIcon, RectWideIcon, SquareIcon} from 'lib/icons' import {enforceLen} from 'lib/strings/helpers' import {gradients, s} from 'lib/styles' import {useTheme} from 'lib/ThemeContext' import {getKeys} from 'lib/type-assertions' import {GalleryModel} from 'state/models/media/gallery' import {ImageModel} from 'state/models/media/image' +import {atoms as a} from '#/alf' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import { + AspectRatio11_Stroke2_Corner0_Rounded as A11, + AspectRatio34_Stroke2_Corner0_Rounded as A34, + AspectRatio43_Stroke2_Corner0_Rounded as A43, +} from '#/components/icons/AspectRatio' +import {CircleBanSign_Stroke2_Corner0_Rounded as Ban} from '#/components/icons/CircleBanSign' +import { + FlipHorizontal_Stroke2_Corner0_Rounded as FlipHorizontal, + FlipVertical_Stroke2_Corner0_Rounded as FlipVertical, +} from '#/components/icons/FlipImage' import {Text} from '../util/text/Text' import {TextInput} from './util' @@ -27,18 +37,16 @@ export const snapPoints = ['80%'] const RATIOS = { '4:3': { - Icon: RectWideIcon, + icon: A43, }, '1:1': { - Icon: SquareIcon, + icon: A11, }, '3:4': { - Icon: RectTallIcon, + icon: A34, }, None: { - label: 'None', - Icon: MaterialIcons, - name: 'do-not-disturb-alt', + icon: Ban, }, } as const @@ -112,12 +120,12 @@ export const Component = observer(function EditImageImpl({ // }, // }, { - name: 'flip' as const, + icon: FlipHorizontal, label: _(msg`Flip horizontal`), onPress: onFlipHorizontal, }, { - name: 'flip' as const, + icon: FlipVertical, label: _(msg`Flip vertically`), onPress: onFlipVertical, }, @@ -165,17 +173,6 @@ export const Component = observer(function EditImageImpl({ onCloseModal() }, [altText, image, position, scale, onCloseModal]) - const getLabelIconSize = useCallback((as: AspectRatio) => { - switch (as) { - case 'None': - return 22 - case '1:1': - return 32 - default: - return 26 - } - }, []) - if (image.cropped === undefined) { return null } @@ -231,7 +228,7 @@ export const Component = observer(function EditImageImpl({ maximumValue={3} /> - + {!isMobile ? ( Ratios @@ -239,31 +236,25 @@ export const Component = observer(function EditImageImpl({ ) : null} {getKeys(RATIOS).map(ratio => { - const {Icon, ...props} = RATIOS[ratio] - const labelIconSize = getLabelIconSize(ratio) + const {icon} = RATIOS[ratio] const isSelected = aspectRatio === ratio return ( - { onSetRatio(ratio) - }} - accessibilityLabel={ratio} - accessibilityHint=""> - - - - {ratio} - - + }}> + + + {ratio} + + ) })} @@ -273,24 +264,17 @@ export const Component = observer(function EditImageImpl({ ) : null} - {adjustments.map(({label, name, onPress}) => ( - ( + ))} @@ -362,12 +346,6 @@ const styles = StyleSheet.create({ paddingVertical: 8, paddingHorizontal: 24, }, - imgControl: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - height: 40, - }, imgEditor: { maxWidth: '100%', }, From 8a7fc9ad3f822ba77716a6eacb4c08ab2992c506 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 19 Sep 2024 14:41:31 -0500 Subject: [PATCH 5/7] [Neue] Ligatures & composer (#5427) * Disable contextual ligatures * Ensure new type styles are applied to the composer * Clean up using real devices * Feedback --- bskyweb/templates/base.html | 1 - src/alf/fonts.ts | 6 +++ .../com/composer/text-input/TextInput.tsx | 53 ++++++++++++------- .../com/composer/text-input/TextInput.web.tsx | 30 +++++++++-- web/index.html | 1 - 5 files changed, 66 insertions(+), 25 deletions(-) diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html index 5dc5a9e8a2..f7acd46148 100644 --- a/bskyweb/templates/base.html +++ b/bskyweb/templates/base.html @@ -149,7 +149,6 @@ /* ProseMirror */ .ProseMirror { - font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif; min-height: 140px; } .ProseMirror-dark { diff --git a/src/alf/fonts.ts b/src/alf/fonts.ts index ce658fa05b..264e51fa87 100644 --- a/src/alf/fonts.ts +++ b/src/alf/fonts.ts @@ -108,4 +108,10 @@ export function applyFonts( style.fontFamily = style.fontFamily || FAMILIES } } + + /** + * Disable contextual ligatures + * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant} + */ + style.fontVariant = ['no-contextual'] } diff --git a/src/view/com/composer/text-input/TextInput.tsx b/src/view/com/composer/text-input/TextInput.tsx index f69c895693..778439259e 100644 --- a/src/view/com/composer/text-input/TextInput.tsx +++ b/src/view/com/composer/text-input/TextInput.tsx @@ -19,6 +19,7 @@ import PasteInput, { PasteInputRef, } from '@mattermost/react-native-paste-input' +import {isAndroid} from '#/platform/detection' import {POST_IMG_MAX} from 'lib/constants' import {usePalette} from 'lib/hooks/usePalette' import {downloadAndResize} from 'lib/media/manip' @@ -26,12 +27,13 @@ import {isUriImage} from 'lib/media/util' import {cleanError} from 'lib/strings/errors' import {getMentionAt, insertMentionAt} from 'lib/strings/mention-manip' import {useTheme} from 'lib/ThemeContext' -import {isIOS} from 'platform/detection' import { LinkFacetMatch, suggestLinkCardUri, } from 'view/com/composer/text-input/text-input-util' import {Text} from 'view/com/util/text/Text' +import {atoms as a, useAlf} from '#/alf' +import {normalizeTextStyles} from '#/components/Typography' import {Autocomplete} from './mobile/Autocomplete' export interface TextInputRef { @@ -67,6 +69,7 @@ export const TextInput = forwardRef(function TextInputImpl( }: TextInputProps, ref, ) { + const {theme: t, fonts} = useAlf() const pal = usePalette('default') const textInput = useRef(null) const textInputSelection = useRef({start: 0, end: 0}) @@ -180,6 +183,33 @@ export const TextInput = forwardRef(function TextInputImpl( [onChangeText, richtext, setAutocompletePrefix], ) + const inputTextStyle = React.useMemo(() => { + const style = normalizeTextStyles( + [a.text_xl, a.leading_snug, t.atoms.text], + { + fontScale: fonts.scaleMultiplier, + fontFamily: fonts.family, + flags: {}, + }, + ) + + /* + * `PasteInput` appears to prefer no `lineHeight` + */ + style.lineHeight = undefined + + /* + * Android impl of `PasteInput` doesn't support the array syntax for `fontVariant` + */ + if (isAndroid) { + // @ts-ignore + style.fontVariant = style.fontVariant + ? style.fontVariant.join(' ') + : undefined + } + return style + }, [t, fonts]) + const textDecorated = useMemo(() => { let i = 0 @@ -187,15 +217,12 @@ export const TextInput = forwardRef(function TextInputImpl( return ( + style={[inputTextStyle, segment.facet ? pal.link : pal.text]}> {segment.text} ) }) - }, [richtext, pal.link, pal.text]) + }, [richtext, pal.link, pal.text, inputTextStyle]) return ( @@ -213,12 +240,7 @@ export const TextInput = forwardRef(function TextInputImpl( multiline scrollEnabled={false} numberOfLines={4} - style={[ - pal.text, - styles.textInput, - styles.textInputFormatting, - {textAlignVertical: 'top'}, - ]} + style={[inputTextStyle, styles.textInput, {textAlignVertical: 'top'}]} {...props}> {textDecorated} @@ -242,11 +264,4 @@ const styles = StyleSheet.create({ marginLeft: 8, alignSelf: 'flex-start', }, - textInputFormatting: { - fontSize: 18, - letterSpacing: 0.2, - fontWeight: '400', - // This is broken on ios right now, so don't set it there. - lineHeight: isIOS ? undefined : 23.4, // 1.3*16 - }, }) diff --git a/src/view/com/composer/text-input/TextInput.web.tsx b/src/view/com/composer/text-input/TextInput.web.tsx index 3db25746f3..acec61516a 100644 --- a/src/view/com/composer/text-input/TextInput.web.tsx +++ b/src/view/com/composer/text-input/TextInput.web.tsx @@ -22,7 +22,9 @@ import { LinkFacetMatch, suggestLinkCardUri, } from 'view/com/composer/text-input/text-input-util' +import {atoms as a, useAlf} from '#/alf' import {Portal} from '#/components/Portal' +import {normalizeTextStyles} from '#/components/Typography' import {Text} from '../../util/text/Text' import {createSuggestion} from './web/Autocomplete' import {Emoji} from './web/EmojiPicker.web' @@ -58,6 +60,7 @@ export const TextInput = React.forwardRef(function TextInputImpl( TextInputProps, ref, ) { + const {theme: t, fonts} = useAlf() const autocomplete = useActorAutocompleteFn() const pal = usePalette('default') const modeClass = useColorSchemeStyle('ProseMirror-light', 'ProseMirror-dark') @@ -247,13 +250,32 @@ export const TextInput = React.forwardRef(function TextInputImpl( }, })) + const inputStyle = React.useMemo(() => { + const style = normalizeTextStyles( + [a.text_lg, a.leading_snug, t.atoms.text], + { + fontScale: fonts.scaleMultiplier, + fontFamily: fonts.family, + flags: {}, + }, + ) + /* + * TipTap component isn't a RN View and while it seems to convert + * `fontSize` to `px`, it doesn't convert `lineHeight`. + * + * `lineHeight` should always be defined here, this is defensive. + */ + style.lineHeight = style.lineHeight + ? ((style.lineHeight + 'px') as unknown as number) + : undefined + return style + }, [t, fonts]) + return ( <> - + {/* @ts-ignore inputStyle is fine */} + {isDropping && ( diff --git a/web/index.html b/web/index.html index 8902f7b6e0..1f2309809d 100644 --- a/web/index.html +++ b/web/index.html @@ -153,7 +153,6 @@ /* ProseMirror */ .ProseMirror { - font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif; min-height: 140px; } .ProseMirror-dark { From c0cb5936f5efbe52c0796fb649af3259684a00c0 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 19 Sep 2024 16:02:29 -0500 Subject: [PATCH 6/7] [Neue] Copy and spacing tweaks (#5428) * Copy and spacing tweaks * Copy tweaks --- src/components/dialogs/nuxs/NeueTypography.tsx | 11 +++++------ src/screens/Settings/AppearanceSettings.tsx | 2 +- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/dialogs/nuxs/NeueTypography.tsx b/src/components/dialogs/nuxs/NeueTypography.tsx index f33cea8e78..fa3936d259 100644 --- a/src/components/dialogs/nuxs/NeueTypography.tsx +++ b/src/components/dialogs/nuxs/NeueTypography.tsx @@ -49,19 +49,18 @@ export function NeueTypography() { - Introducing new font settings ✨ + New font settings ✨ - + - To the ensure the best possible experience, we're introducing a - new theme font, along with adjustable font sizing settings. + We're introducing a new theme font, along with adjustable font + sizing. - Defaults are shown below. You can edit these in your Appearance - Settings later. + You can adjust these in your Appearance Settings later. diff --git a/src/screens/Settings/AppearanceSettings.tsx b/src/screens/Settings/AppearanceSettings.tsx index d675fb38ed..69e04f4af1 100644 --- a/src/screens/Settings/AppearanceSettings.tsx +++ b/src/screens/Settings/AppearanceSettings.tsx @@ -205,7 +205,7 @@ export function AppearanceToggleButtonGroup({ }) { const t = useTheme() return ( - + From c8184e823dc79d1ff1f71571bae5cb7611f61d5d Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 19 Sep 2024 16:02:47 -0500 Subject: [PATCH 7/7] Adjust toggle components sizing (#5408) (cherry picked from commit a9cbd23fcdcbacbdd2ca5f6bbe0bc7161e6591e3) --- src/components/forms/Toggle.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/forms/Toggle.tsx b/src/components/forms/Toggle.tsx index 391b1c8b70..6dc387b239 100644 --- a/src/components/forms/Toggle.tsx +++ b/src/components/forms/Toggle.tsx @@ -351,8 +351,8 @@ export function Checkbox() { t.atoms.border_contrast_high, { borderWidth: 1, - height: 20, - width: 20, + height: 24, + width: 24, }, baseStyles, hovered ? baseHoverStyles : {}, @@ -383,9 +383,9 @@ export function Switch() { t.atoms.border_contrast_high, { borderWidth: 1, - height: 20, - width: 32, - padding: 2, + height: 24, + width: 36, + padding: 3, }, baseStyles, hovered ? baseHoverStyles : {}, @@ -395,8 +395,8 @@ export function Switch() { style={[ a.rounded_full, { - height: 14, - width: 14, + height: 16, + width: 16, }, selected ? { @@ -436,8 +436,8 @@ export function Radio() { t.atoms.border_contrast_high, { borderWidth: 1, - height: 20, - width: 20, + height: 24, + width: 24, }, baseStyles, hovered ? baseHoverStyles : {}, @@ -447,7 +447,7 @@ export function Radio() { style={[ a.absolute, a.rounded_full, - {height: 12, width: 12}, + {height: 16, width: 16}, selected ? { backgroundColor: t.palette.primary_500,