[Gekidou] Permalink UI (excluding non-happy path) (#6354)

* Permalink UI (excluding non-happy path)

* Make close icon 24 in size

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) {
                     >
                         <CompassIcon
                             name='close'
-                            size={20}
+                            size={24}
                             color={theme.centerChannelColor}
                         />
                     </TouchableOpacity>
@@ -197,9 +199,9 @@ function Permalink({channel, isCRTEnabled, postId}: Props) {
                         </Text>
                     </View>
                 </View>
-                <View style={style.dividerContainer}>
-                    <View style={style.divider}/>
-                </View>
+                {Boolean(channel?.displayName) &&
+                <View style={style.divider}/>
+                }
                 {loading ? (
                     <View style={style.loading}>
                         <Loading
@@ -222,18 +224,20 @@ function Permalink({channel, isCRTEnabled, postId}: Props) {
                         />
                     </View>
                 )}
-                <TouchableOpacity
-                    style={[style.footer, style.bottom]}
-                    onPress={handlePress}
-                    testID='permalink.jump_to_recent_messages.button'
-                >
-                    <FormattedText
-                        testID='permalink.search.jump'
-                        id='mobile.search.jump'
-                        defaultMessage='Jump to recent messages'
-                        style={style.jump}
-                    />
-                </TouchableOpacity>
+                <View style={style.footer}>
+                    <TouchableOpacity
+                        style={[buttonBackgroundStyle(theme, 'lg', 'primary'), {width: '100%'}]}
+                        onPress={handlePress}
+                        testID='permalink.jump_to_recent_messages.button'
+                    >
+                        <FormattedText
+                            testID='permalink.search.jump'
+                            id='mobile.search.jump'
+                            defaultMessage='Jump to recent messages'
+                            style={buttonTextStyle(theme, 'lg', 'primary')}
+                        />
+                    </TouchableOpacity>
+                </View>
             </Animated.View>
         </SafeAreaView>
     );