From 77eaf070e6f89aed13829b9fad0356eafb150037 Mon Sep 17 00:00:00 2001
From: jahooma <jahooma@gmail.com>
Date: Thu, 27 Jan 2022 15:22:18 -0600
Subject: [PATCH] Make clicking feed create focus input. Shrink create market
 button

---
 web/components/contract-feed.tsx | 29 ++++++++++++++++++++---------
 web/components/feed-create.tsx   | 15 +++++++++++----
 2 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/web/components/contract-feed.tsx b/web/components/contract-feed.tsx
index 3ed63329..5627c71a 100644
--- a/web/components/contract-feed.tsx
+++ b/web/components/contract-feed.tsx
@@ -43,17 +43,28 @@ import BetRow from './bet-row'
 import clsx from 'clsx'
 import { parseTags } from '../../common/util/parse'
 
-export function AvatarWithIcon(props: { username: string; avatarUrl: string }) {
-  const { username, avatarUrl } = props
+export function AvatarWithIcon(props: {
+  username: string
+  avatarUrl: string
+  noLink?: boolean
+}) {
+  const { username, avatarUrl, noLink } = props
+
+  const image = (
+    <img
+      className="rounded-full bg-gray-400 flex items-center justify-center"
+      src={avatarUrl}
+      width={40}
+      height={40}
+      alt=""
+    />
+  )
+
+  if (noLink) return image
+
   return (
     <SiteLink className="relative" href={`/${username}`}>
-      <img
-        className="rounded-full bg-gray-400 flex items-center justify-center"
-        src={avatarUrl}
-        width={40}
-        height={40}
-        alt=""
-      />
+      {image}
     </SiteLink>
   )
 }
diff --git a/web/components/feed-create.tsx b/web/components/feed-create.tsx
index 7ca2823b..e2a2a427 100644
--- a/web/components/feed-create.tsx
+++ b/web/components/feed-create.tsx
@@ -1,7 +1,6 @@
 import { AvatarPlaceholder, AvatarWithIcon } from './contract-feed'
-import { Title } from './title'
 import Textarea from 'react-expanding-textarea'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import { Spacer } from './layout/spacer'
 import { NewContract } from '../pages/create'
 import { firebaseLogin, User } from '../lib/firebase/users'
@@ -79,13 +78,20 @@ export default function FeedCreate(props: {
   )
   const placeholder = props.placeholder ?? `e.g. ${placeholders[randIndex]}`
 
+  const inputRef = useRef<HTMLInputElement | null>()
+
   return (
     <div
       className={clsx('w-full bg-white border-2 sm:rounded-md p-4', className)}
+      onClick={() => inputRef.current?.focus()}
     >
       <div className="relative flex items-start space-x-3">
         {user?.avatarUrl ? (
-          <AvatarWithIcon username={user.username} avatarUrl={user.avatarUrl} />
+          <AvatarWithIcon
+            username={user.username}
+            avatarUrl={user.avatarUrl}
+            noLink
+          />
         ) : (
           <AvatarPlaceholder />
         )}
@@ -101,6 +107,7 @@ export default function FeedCreate(props: {
             value={question}
             onClick={(e) => e.stopPropagation()}
             onChange={(e) => setQuestion(e.target.value || '')}
+            ref={inputRef}
           />
           <Spacer h={2} />
         </div>
@@ -114,7 +121,7 @@ export default function FeedCreate(props: {
       {/* Show a fake "Create Market" button, which gets replaced with the NewContract one*/}
       {!question && (
         <div className="flex justify-end">
-          <button className="btn" disabled>
+          <button className="btn btn-sm" disabled>
             Create Market
           </button>
         </div>