diff --git a/src/components/Admonition.tsx b/src/components/Admonition.tsx
index ea6751955f..961d94b37e 100644
--- a/src/components/Admonition.tsx
+++ b/src/components/Admonition.tsx
@@ -3,17 +3,13 @@ import {type StyleProp, View, type ViewStyle} from 'react-native'
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
import {Button as BaseButton, type ButtonProps} from '#/components/Button'
-import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo'
-import {Eye_Stroke2_Corner0_Rounded as InfoIcon} from '#/components/icons/Eye'
-import {Leaf_Stroke2_Corner0_Rounded as TipIcon} from '#/components/icons/Leaf'
+import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfoIcon} from '#/components/icons/CircleInfo'
+import {CircleX_Stroke2_Corner0_Rounded as CircleXIcon} from '#/components/icons/CircleX'
import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
import {Text as BaseText, type TextProps} from '#/components/Typography'
export const colors = {
- warning: {
- light: '#DFBC00',
- dark: '#BFAF1F',
- },
+ warning: '#FFC404',
}
type Context = {
@@ -29,29 +25,44 @@ export function Icon() {
const t = useTheme()
const {type} = useContext(Context)
const Icon = {
- info: InfoIcon,
- tip: TipIcon,
+ info: CircleInfoIcon,
+ tip: CircleInfoIcon,
warning: WarningIcon,
- error: ErrorIcon,
+ error: CircleXIcon,
}[type]
const fill = {
info: t.atoms.text_contrast_medium.color,
tip: t.palette.primary_500,
- warning: colors.warning.light,
+ warning: colors.warning,
error: t.palette.negative_500,
}[type]
return
}
+export function Content({
+ children,
+ style,
+ ...rest
+}: {
+ children: React.ReactNode
+ style?: StyleProp
+}) {
+ return (
+
+ {children}
+
+ )
+}
+
export function Text({
children,
style,
...rest
}: Pick) {
return (
-
+
{children}
)
@@ -60,17 +71,23 @@ export function Text({
export function Button({
children,
...props
-}: Omit) {
+}: Omit) {
return (
-
+
{children}
)
}
-export function Row({children}: {children: React.ReactNode}) {
+export function Row({
+ children,
+ style,
+}: {
+ children: React.ReactNode
+ style?: StyleProp
+}) {
return (
-
+
{children}
)
@@ -88,19 +105,20 @@ export function Outer({
const t = useTheme()
const {gtMobile} = useBreakpoints()
const borderColor = {
- info: t.atoms.border_contrast_low.borderColor,
- tip: t.atoms.border_contrast_low.borderColor,
- warning: t.atoms.border_contrast_low.borderColor,
- error: t.atoms.border_contrast_low.borderColor,
+ info: t.atoms.border_contrast_high.borderColor,
+ tip: t.palette.primary_500,
+ warning: colors.warning,
+ error: t.palette.negative_500,
}[type]
return (
@@ -123,7 +141,9 @@ export function Admonition({
- {children}
+
+ {children}
+
)
diff --git a/src/components/moderation/ReportDialog/index.tsx b/src/components/moderation/ReportDialog/index.tsx
index 9293f75306..ebfbe0dcd3 100644
--- a/src/components/moderation/ReportDialog/index.tsx
+++ b/src/components/moderation/ReportDialog/index.tsx
@@ -219,10 +219,13 @@ function Inner(props: ReportDialogProps) {
-
- Something went wrong, please try again
-
+
+
+ Something went wrong, please try again
+
+
refetchLabelers()}>
diff --git a/src/screens/PostThread/components/ThreadItemAnchor.tsx b/src/screens/PostThread/components/ThreadItemAnchor.tsx
index f11748d6dd..301124aaa8 100644
--- a/src/screens/PostThread/components/ThreadItemAnchor.tsx
+++ b/src/screens/PostThread/components/ThreadItemAnchor.tsx
@@ -621,7 +621,7 @@ function BackdatedPostIndicator({post}: {post: AppBskyFeedDefs.PostView}) {
if (!isBackdated) return null
- const orange = t.name === 'light' ? colors.warning.dark : colors.warning.light
+ const orange = colors.warning
return (
<>
diff --git a/src/screens/Settings/AppPasswords.tsx b/src/screens/Settings/AppPasswords.tsx
index ef73390733..9bacf67cb3 100644
--- a/src/screens/Settings/AppPasswords.tsx
+++ b/src/screens/Settings/AppPasswords.tsx
@@ -195,7 +195,7 @@ function AppPasswordCard({
{appPassword.privileged && (
-
+
Allows access to direct messages
diff --git a/src/screens/Settings/NotificationSettings/ActivityNotificationSettings.tsx b/src/screens/Settings/NotificationSettings/ActivityNotificationSettings.tsx
index 3f2503bb85..73613c4c33 100644
--- a/src/screens/Settings/NotificationSettings/ActivityNotificationSettings.tsx
+++ b/src/screens/Settings/NotificationSettings/ActivityNotificationSettings.tsx
@@ -134,7 +134,7 @@ export function ActivityNotificationSettingsScreen({}: Props) {
-
+
Enable notifications for an account by visiting their
@@ -166,7 +166,7 @@ export function ActivityNotificationSettingsScreen({}: Props) {
.
-
+
) : (
diff --git a/src/screens/Settings/PrivacyAndSecuritySettings.tsx b/src/screens/Settings/PrivacyAndSecuritySettings.tsx
index 9cf83f479c..2e8ffdd61c 100644
--- a/src/screens/Settings/PrivacyAndSecuritySettings.tsx
+++ b/src/screens/Settings/PrivacyAndSecuritySettings.tsx
@@ -1,4 +1,3 @@
-import {View} from 'react-native'
import {type AppBskyNotificationDeclaration} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
@@ -112,7 +111,7 @@ export function PrivacyAndSecuritySettingsScreen({}: Props) {
-
+
Note: Bluesky is an open and public network. This setting
@@ -131,7 +130,7 @@ export function PrivacyAndSecuritySettingsScreen({}: Props) {
Learn more about what is public on Bluesky.
-
+
diff --git a/src/view/screens/Storybook/Admonitions.tsx b/src/view/screens/Storybook/Admonitions.tsx
index 988342f171..6badb9ddfc 100644
--- a/src/view/screens/Storybook/Admonitions.tsx
+++ b/src/view/screens/Storybook/Admonitions.tsx
@@ -1,11 +1,27 @@
-import {View} from 'react-native'
+import {Text as RNText, View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
-import {atoms as a} from '#/alf'
-import {Admonition} from '#/components/Admonition'
+import {atoms as a, useTheme} from '#/alf'
+import {
+ Admonition,
+ Button as AdmonitionButton,
+ Content as AdmonitionContent,
+ Icon as AdmonitionIcon,
+ Outer as AdmonitionOuter,
+ Row as AdmonitionRow,
+ Text as AdmonitionText,
+} from '#/components/Admonition'
+import {ButtonIcon, ButtonText} from '#/components/Button'
+import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Retry} from '#/components/icons/ArrowRotateCounterClockwise'
+import {BellRinging_Filled_Corner0_Rounded as BellRingingFilledIcon} from '#/components/icons/BellRinging'
import {InlineLinkText} from '#/components/Link'
import {H1} from '#/components/Typography'
export function Admonitions() {
+ const {_} = useLingui()
+ const t = useTheme()
+
return (
Admonitions
@@ -30,6 +46,61 @@ export function Admonitions() {
The quick brown fox jumps over the lazy dog.
+
+
+
+
+
+
+ Something went wrong, please try again
+
+
+ {}}>
+
+ Retry
+
+
+
+
+
+
+
+
+
+
+
+
+ Enable notifications for an account by visiting their profile
+ and pressing the{' '}
+
+ bell icon
+ {' '}
+
+ .
+
+
+
+
+ If you want to restrict who can receive notifications for your
+ account's activity, you can change this in{' '}
+
+ Settings → Privacy and Security
+
+ .
+
+
+
+
+
)
}