diff --git a/app/screens/permalink/permalink.tsx b/app/screens/permalink/permalink.tsx
index 206d55fc4..bffb24d54 100644
--- a/app/screens/permalink/permalink.tsx
+++ b/app/screens/permalink/permalink.tsx
@@ -15,11 +15,14 @@ import PostList from '@components/post_list';
import {Screens} from '@constants';
import {useServerUrl} from '@context/server';
import {useTheme} from '@context/theme';
+import {useIsTablet} from '@hooks/device';
import {dismissModal} from '@screens/navigation';
import EphemeralStore from '@store/ephemeral_store';
+import {buttonBackgroundStyle, buttonTextStyle} from '@utils/buttonStyles';
import {closePermalink} from '@utils/permalink';
import {preventDoubleTap} from '@utils/tap';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
+import {typography} from '@utils/typography';
import type ChannelModel from '@typings/database/models/servers/channel';
import type PostModel from '@typings/database/models/servers/post';
@@ -35,27 +38,26 @@ const edges: Edge[] = ['left', 'right', 'top'];
const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
container: {
flex: 1,
- marginTop: 20,
+ maxWidth: 680,
+ alignSelf: 'center',
+ width: '100%',
},
wrapper: {
backgroundColor: theme.centerChannelBg,
- borderRadius: 6,
+ borderRadius: 12,
flex: 1,
margin: 10,
opacity: 1,
},
header: {
alignItems: 'center',
- borderTopLeftRadius: 6,
- borderTopRightRadius: 6,
+ borderTopLeftRadius: 12,
+ borderTopRightRadius: 12,
flexDirection: 'row',
- height: 44,
+ height: 56,
paddingRight: 16,
width: '100%',
},
- dividerContainer: {
- backgroundColor: theme.centerChannelBg,
- },
divider: {
backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
height: 1,
@@ -64,7 +66,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
justifyContent: 'center',
height: 44,
width: 40,
- paddingLeft: 7,
+ paddingLeft: 16,
},
titleContainer: {
alignItems: 'center',
@@ -73,8 +75,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
},
title: {
color: theme.centerChannelColor,
- fontSize: 17,
- fontWeight: '600',
+ ...typography('Heading', 300),
},
postList: {
flex: 1,
@@ -84,18 +85,16 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
justifyContent: 'center',
alignItems: 'center',
},
- bottom: {
- borderBottomLeftRadius: 6,
- borderBottomRightRadius: 6,
- },
footer: {
alignItems: 'center',
justifyContent: 'center',
- backgroundColor: theme.buttonBg,
flexDirection: 'row',
- height: 43,
- paddingRight: 16,
+ padding: 20,
width: '100%',
+ borderBottomLeftRadius: 12,
+ borderBottomRightRadius: 12,
+ borderTopWidth: 1,
+ borderTopColor: changeOpacity(theme.centerChannelColor, 0.16),
},
jump: {
color: theme.buttonColor,
@@ -125,11 +124,14 @@ function Permalink({channel, isCRTEnabled, postId}: Props) {
const theme = useTheme();
const serverUrl = useServerUrl();
const insets = useSafeAreaInsets();
+ const isTablet = useIsTablet();
const style = getStyleSheet(theme);
- const containerStyle = useMemo(() =>
- [style.container, {marginBottom: insets.bottom}],
- [style, insets.bottom]);
+ const containerStyle = useMemo(() => {
+ const marginTop = isTablet ? 60 : 20;
+ const marginBottom = insets.bottom + (isTablet ? 60 : 20);
+ return [style.container, {marginTop, marginBottom}];
+ }, [style, insets.bottom, isTablet]);
useEffect(() => {
(async () => {
@@ -183,7 +185,7 @@ function Permalink({channel, isCRTEnabled, postId}: Props) {
>
@@ -197,9 +199,9 @@ function Permalink({channel, isCRTEnabled, postId}: Props) {
-
-
-
+ {Boolean(channel?.displayName) &&
+
+ }
{loading ? (
)}
-
-
-
+
+
+
+
+
);