From fc320ca1e45bb46a1a377debd9563b11b8f29c19 Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Mon, 23 May 2022 16:09:40 -0600
Subject: [PATCH] Shrink avatar, paddding, gaps for mobile screens (#275)

* Shrink avatar, paddding, gaps for mobile screens

* Adjust padding, add arrow to input area

* Padding and reply ui adjustments
---
 web/components/feed/feed-comments.tsx   | 88 ++++++++++++++++++-------
 web/components/feed/feed-items.tsx      |  8 +--
 web/pages/[username]/[contractSlug].tsx |  2 +-
 3 files changed, 69 insertions(+), 29 deletions(-)

diff --git a/web/components/feed/feed-comments.tsx b/web/components/feed/feed-comments.tsx
index dbaccde5..55bfe0f6 100644
--- a/web/components/feed/feed-comments.tsx
+++ b/web/components/feed/feed-comments.tsx
@@ -23,6 +23,7 @@ import { BetStatusText } from 'web/components/feed/feed-bets'
 import { Col } from 'web/components/layout/col'
 import { getProbability } from 'common/calculate'
 import { LoadingIndicator } from 'web/components/loading-indicator'
+import { PaperAirplaneIcon } from '@heroicons/react/outline'
 
 export function FeedCommentThread(props: {
   contract: Contract
@@ -53,13 +54,20 @@ export function FeedCommentThread(props: {
     if (showReply && inputRef) inputRef.focus()
   }, [inputRef, showReply])
   return (
-    <div className={'w-full flex-col flex-col pr-6'}>
+    <div className={'flex-col pr-1'}>
       {commentsList.map((comment, commentIdx) => (
         <div
           key={comment.id}
           id={comment.id}
-          className={commentIdx === 0 ? '' : 'mt-4 ml-8'}
+          className={clsx('relative', commentIdx === 0 ? '' : 'mt-3 ml-6')}
         >
+          {/*draw a gray line from the comment to the left:*/}
+          {commentIdx != 0 && (
+            <span
+              className="absolute -ml-[1px] mt-[0.8rem] h-2 w-0.5 rotate-90 bg-gray-200"
+              aria-hidden="true"
+            />
+          )}
           <FeedComment
             contract={contract}
             comment={comment}
@@ -80,7 +88,11 @@ export function FeedCommentThread(props: {
         </div>
       ))}
       {showReply && (
-        <div className={'ml-8 w-full pt-6'}>
+        <div className={'-pb-2 ml-6 flex flex-col pt-5'}>
+          <span
+            className="absolute -ml-[1px] mt-[0.8rem] h-2 w-0.5 rotate-90 bg-gray-200"
+            aria-hidden="true"
+          />
           <CommentInput
             contract={contract}
             betsByCurrentUser={(user && betsByUserId[user.id]) ?? []}
@@ -111,7 +123,6 @@ export function FeedComment(props: {
     betsBySameUser,
     probAtCreatedTime,
     truncate,
-    smallAvatar,
     onReplyClick,
   } = props
   const { text, userUsername, userName, userAvatarUrl, createdTime } = comment
@@ -144,18 +155,18 @@ export function FeedComment(props: {
   return (
     <Row
       className={clsx(
-        'flex space-x-3 transition-all duration-1000',
+        'flex space-x-1.5 transition-all duration-1000 sm:space-x-3',
         highlighted ? `-m-2 rounded bg-indigo-500/[0.2] p-2` : ''
       )}
     >
       <Avatar
-        className={clsx(smallAvatar && 'ml-1')}
-        size={smallAvatar ? 'sm' : undefined}
+        className={'ml-1'}
+        size={'sm'}
         username={userUsername}
         avatarUrl={userAvatarUrl}
       />
       <div className="min-w-0 flex-1">
-        <p className="mt-0.5 text-sm text-gray-500">
+        <p className="mt-0.5 pl-0.5 text-sm text-gray-500">
           <UserLink
             className="text-gray-500"
             username={userUsername}
@@ -321,12 +332,17 @@ export function CommentInput(props: {
 
   return (
     <>
-      <Row className={'mb-2 flex w-full gap-2'}>
-        <div className={'mt-1'}>
-          <Avatar avatarUrl={user?.avatarUrl} username={user?.username} />
+      <Row className={'mb-2 gap-1 sm:gap-2'}>
+        <div className={''}>
+          <Avatar
+            avatarUrl={user?.avatarUrl}
+            username={user?.username}
+            size={'sm'}
+            className={'ml-1'}
+          />
         </div>
         <div className={'min-w-0 flex-1'}>
-          <div className="text-sm text-gray-500">
+          <div className="pl-0.5 text-sm text-gray-500">
             <div className={'mb-1'}>
               {mostRecentCommentableBet && (
                 <BetStatusText
@@ -358,7 +374,12 @@ export function CommentInput(props: {
             </div>
 
             <Row className="grid grid-cols-8 gap-1.5 text-gray-700">
-              <Col className={'col-span-8 sm:col-span-6'}>
+              <Col
+                className={clsx(
+                  'col-span-8 sm:col-span-6',
+                  !user && 'col-span-8'
+                )}
+              >
                 <Textarea
                   ref={setRef}
                   value={comment}
@@ -386,13 +407,13 @@ export function CommentInput(props: {
                   }}
                 />
               </Col>
-              <Col
-                className={clsx(
-                  'col-span-8 sm:col-span-2',
-                  focused ? 'justify-end' : 'justify-center'
-                )}
-              >
-                {!user && (
+              {!user && (
+                <Col
+                  className={clsx(
+                    'col-span-8 sm:col-span-2',
+                    focused ? 'justify-end' : 'justify-center'
+                  )}
+                >
                   <button
                     className={
                       'btn btn-outline btn-sm text-transform: capitalize'
@@ -401,14 +422,25 @@ export function CommentInput(props: {
                   >
                     Sign in to Comment
                   </button>
+                </Col>
+              )}
+
+              <Col
+                className={clsx(
+                  'col-span-1 sm:col-span-2',
+                  focused ? 'justify-end' : 'justify-center'
                 )}
+              >
                 {user && !isSubmitting && (
                   <button
                     className={clsx(
-                      'btn text-transform: col-span-8 block capitalize sm:col-span-2',
+                      'btn btn-ghost btn-sm block flex flex-row capitalize',
+                      'absolute bottom-4 right-1 col-span-1',
+                      parentComment ? ' bottom-6 right-2.5' : '',
+                      'sm:relative sm:bottom-0 sm:right-0 sm:col-span-2',
                       focused && comment
-                        ? 'btn-outline btn-sm '
-                        : 'btn-ghost btn-sm pointer-events-none text-gray-500'
+                        ? 'sm:btn-outline'
+                        : 'pointer-events-none text-gray-500'
                     )}
                     onClick={() => {
                       if (!focused) return
@@ -417,7 +449,15 @@ export function CommentInput(props: {
                       }
                     }}
                   >
-                    {parentComment || answerOutcome ? 'Reply' : 'Comment'}
+                    <span className={'hidden sm:block'}>
+                      {parentComment || answerOutcome ? 'Reply' : 'Comment'}
+                    </span>
+                    {focused && (
+                      <PaperAirplaneIcon
+                        className={'m-0 min-w-[22px] rotate-90 p-0 sm:hidden'}
+                        height={25}
+                      />
+                    )}
                   </button>
                 )}
                 {isSubmitting && (
diff --git a/web/components/feed/feed-items.tsx b/web/components/feed/feed-items.tsx
index 94811cd5..05ea14ff 100644
--- a/web/components/feed/feed-items.tsx
+++ b/web/components/feed/feed-items.tsx
@@ -54,7 +54,7 @@ export function FeedItems(props: {
     <div className={clsx('flow-root', className)} ref={setElem}>
       <div className={clsx(tradingAllowed(contract) ? '' : '-mb-6')}>
         {items.map((item, activityItemIdx) => (
-          <div key={item.id} className={'relative pb-6'}>
+          <div key={item.id} className={'relative pb-4'}>
             {activityItemIdx !== items.length - 1 ||
             item.type === 'answergroup' ? (
               <span
@@ -62,7 +62,7 @@ export function FeedItems(props: {
                 aria-hidden="true"
               />
             ) : null}
-            <div className="relative flex items-start space-x-3">
+            <div className="relative flex-col items-start space-x-3">
               <FeedItem item={item} />
             </div>
           </div>
@@ -121,7 +121,7 @@ export function FeedQuestion(props: {
   const isNew = createdTime > Date.now() - DAY_MS
 
   return (
-    <>
+    <div className={'flex gap-2'}>
       <Avatar
         username={contract.creatorUsername}
         avatarUrl={contract.creatorAvatarUrl}
@@ -170,7 +170,7 @@ export function FeedQuestion(props: {
           />
         )}
       </div>
-    </>
+    </div>
   )
 }
 
diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx
index 5ccd61ea..120f3cb7 100644
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/web/pages/[username]/[contractSlug].tsx
@@ -185,7 +185,7 @@ export function ContractPageContent(props: FirstArgument<typeof ContractPage>) {
         />
       )}
 
-      <Col className="w-full justify-between rounded border-0 border-gray-100 bg-white px-2 py-6 md:px-6 md:py-8">
+      <Col className="w-full justify-between rounded border-0 border-gray-100 bg-white py-6 pl-1 pr-2 sm:px-2 md:px-6 md:py-8">
         {backToHome && (
           <button
             className="btn btn-sm mb-4 items-center gap-2 self-start border-0 border-gray-700 bg-white normal-case text-gray-700 hover:bg-white hover:text-gray-700 lg:hidden"