feat: ✨ update comment styles

ed-software · Nov 5, 2022 · 3ce67e5 · 3ce67e5
1 parent e696ead
commit 3ce67e5
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 13 deletions.
diff --git a/src/screens/recipe/recipe-comment.tsx b/src/screens/recipe/recipe-comment.tsx
@@ -94,7 +94,7 @@ export function RecipeComment({ comment, replyButton }: RecipeCommentProps): Rea
                   submittedById={comment.submittedBy.id}
                 />
                 <LabelledIcon
-                  label='Reply'
+                  label='REPLY'
                   iconName='message-square-outline'
                   onPress={() =>
                     navigation.navigate('RecipeCommentReplies', {
@@ -132,7 +132,8 @@ export function RecipeComment({ comment, replyButton }: RecipeCommentProps): Rea
                 }
                 size='small'
                 status='basic'
-              >{`SHOW ALL REPLIES (${comment.replyCount.toString()})`}</Button>
+                appearance='ghost'
+              >{`REPLIES (${comment.replyCount.toString()})`}</Button>
             </View>
           )}
         </View>

diff --git a/src/screens/recipe/recipe.tsx b/src/screens/recipe/recipe.tsx
@@ -5,7 +5,7 @@ import React, { useContext, useState } from 'react'
 import { useQuery } from '@apollo/client'
 import { ImageBackground, View, StyleSheet } from 'react-native'
 import { Queries } from '@greeneggs/graphql'
-import { IndexPath, SelectItem, Text } from '@ui-kitten/components'
+import { Button, IndexPath, SelectItem, Text } from '@ui-kitten/components'
 import { recipe, recipeVariables } from '@greeneggs/types/graphql'
 import ParallaxHeader from '@fabfit/react-native-parallax-header'
 import { LinearGradient } from 'expo-linear-gradient'
@@ -99,7 +99,9 @@ export function Recipe() {
     >
       <Background style={styles.content}>
         <RecipeDetailsCard {...recipe} />
-        <RecipeAllergies allergies={recipe.allergies} />
+        <View style={{ marginVertical: 16 }}>
+          <RecipeAllergies allergies={recipe.allergies} />
+        </View>
         <View
           style={{
             flexDirection: 'row',
@@ -150,13 +152,20 @@ export function Recipe() {
             <EmptyState description='This recipe has no steps.' />
           </View>
         )}
-        <Text category='h5' style={styles.heading}>
-          {`Comments (${recipe.commentCount.toString()})`}
-        </Text>
-        <RecipeCommentList comments={recipe.comments.slice(0, 3)} />
-        {recipe.comments.length >= 3 && (
-          <ViewMore
-            style={{ marginHorizontal: -16 }}
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}
+        >
+          <Text category='h5' style={styles.heading}>
+            {`Comments`}
+          </Text>
+          <Button
+            size='small'
+            status='basic'
+            appearance='ghost'
             onPress={() =>
               navigation.navigate('RecipeAllComments', {
                 comments: recipe.comments,
@@ -165,8 +174,11 @@ export function Recipe() {
                 isReply: false,
               })
             }
-          />
-        )}
+          >
+            {`VIEW ALL (${recipe.commentCount.toString()})`}
+          </Button>
+        </View>
+        <RecipeCommentList comments={recipe.comments.slice(0, 3)} />
         <View style={{ marginTop: 24 }}>
           <RecipeAddComment recipeId={recipe.id} />
         </View>