[PE-6078] Add borders to remix contest info and comment sections (#11959)

Author: Kyle-Shanks

packages/mobile/src/components/comments/CommentPreview.tsx

@@ -181,7 +181,7 @@ export const CommentPreview = (props: CommentPreviewProps) => {
     >
       <Flex gap='s' direction='column' w='100%' alignItems='flex-start'>
         <CommentPreviewHeader openCommentDrawer={openCommentDrawer} />
-        <Paper w='100%' direction='column' gap='s' p='l'>
+        <Paper w='100%' direction='column' gap='s' p='l' border='default'>
           <CommentPreviewContent openCommentDrawer={openCommentDrawer} />
         </Paper>
       </Flex>

packages/mobile/src/screens/track-screen/RemixContestDetailsTab.tsx

@@ -33,7 +33,7 @@ export const RemixContestDetailsTab = ({ trackId, scrollRef }: Props) => {
   if (!remixContest) return null
 
   return (
-    <Flex column gap='s' p='xl' borderTop='default'>
+    <Flex column gap='s' p='xl' pb='2xl' borderTop='default'>
       <Flex row gap='s'>
         <Text variant='title' color='accent'>
           {messages.due}

packages/mobile/src/screens/track-screen/RemixContestPrizesTab.tsx

@@ -17,7 +17,7 @@ export const RemixContestPrizesTab = ({ trackId }: Props) => {
   if (!remixContest) return null
 
   return (
-    <Flex p='xl' borderTop='default'>
+    <Flex p='xl' pb='2xl' borderTop='default'>
       <UserGeneratedText variant='body' size='l'>
         {remixContest.eventData?.prizeInfo ?? ''}
       </UserGeneratedText>

packages/mobile/src/screens/track-screen/RemixContestSection.tsx

@@ -32,6 +32,7 @@ const useStyles = makeStyles(({ palette, typography, spacing }) => ({
     height: spacing(10)
   },
   tabLabel: {
+    marginHorizontal: 0,
     textTransform: 'none',
     fontFamily: typography.fontByWeight.demiBold,
     fontSize: typography.fontSize.medium
@@ -185,7 +186,11 @@ export const RemixContestSection = ({
   if (!remixContest) return null
 
   return (
-    <AnimatedPaper backgroundColor='white' style={animatedStyle}>
+    <AnimatedPaper
+      backgroundColor='white'
+      border='default'
+      style={animatedStyle}
+    >
       <TabView
         navigationState={{ index, routes }}
         renderScene={renderScene}

packages/mobile/src/screens/track-screen/RemixContestSubmissionsTab.tsx

@@ -119,7 +119,7 @@ const RemixContestSubmissions = ({
   const navigation = useNavigation()
 
   return (
-    <Flex w='100%' column gap='2xl' pv='xl' ph='l' borderTop='default'>
+    <Flex w='100%' column gap='2xl' pt='xl' pb='2xl' ph='l' borderTop='default'>
       <Flex gap='2xl' wrap='wrap'>
         {submissions.map((submission) => (
           <SubmissionCard key={submission.id} submission={submission} />

packages/web/src/components/comments/CommentPreview.tsx

@@ -84,7 +84,7 @@ const CommentPreviewContent = () => {
   // Loading state
   if (isLoading) {
     return (
-      <Paper w='100%' direction='column' gap='s' p='l'>
+      <Paper w='100%' direction='column' gap='s' p='l' border='default'>
         <Flex direction='row' gap='s' alignItems='center'>
           <Skeleton w={40} h={40} css={{ borderRadius: 100 }} />
           <Flex gap='s' direction='column'>
@@ -99,7 +99,7 @@ const CommentPreviewContent = () => {
   // Empty state
   if (!commentIds || !commentIds.length) {
     return (
-      <Paper w='100%' direction='column' gap='s' p='l'>
+      <Paper w='100%' direction='column' gap='s' p='l' border='default'>
         <Flex gap='m' column alignItems='flex-start'>
           <Text variant='body'>{messages.noComments}</Text>
           <CommentForm hideAvatar={!currentUserId} />
@@ -109,7 +109,14 @@ const CommentPreviewContent = () => {
   }
 
   return (
-    <Paper w='100%' direction='column' gap='s' p='l' onClick={handleClick}>
+    <Paper
+      w='100%'
+      direction='column'
+      gap='s'
+      p='l'
+      border='default'
+      onClick={handleClick}
+    >
       <CommentBlock commentId={commentIds[0]} isPreview />
     </Paper>
   )

packages/web/src/components/comments/CommentSection.tsx

@@ -114,7 +114,12 @@ const CommentSectionInner = (props: CommentSectionInnerProps) => {
       ref={commentSectionRef}
     >
       <CommentHeader />
-      <Paper w='100%' direction='column' css={{ overflow: 'visible' }}>
+      <Paper
+        w='100%'
+        direction='column'
+        css={{ overflow: 'visible' }}
+        border='default'
+      >
         {commentPostAllowed ? (
           <>
             <Flex gap='s' p='xl' w='100%' direction='column'>

packages/web/src/pages/track-page/components/desktop/RemixContestSection.tsx

@@ -119,6 +119,7 @@ export const RemixContestSection = ({
         backgroundColor='white'
         shadow='mid'
         borderRadius='l'
+        border='default'
         css={{
           transition: motion.quick,
           overflow: 'hidden',

packages/web/src/pages/track-page/components/mobile/remix-contests/RemixContestSection.tsx

@@ -78,6 +78,7 @@ export const RemixContestSection = ({
         backgroundColor='white'
         shadow='mid'
         borderRadius='l'
+        border='default'
         css={{ overflow: 'hidden' }}
       >
         <Flex column pv='m'>