From 67007c589748144f09980a0c3fc418117999fb39 Mon Sep 17 00:00:00 2001
From: jahooma <jahooma@gmail.com>
Date: Tue, 4 Jan 2022 16:47:56 -0600
Subject: [PATCH] Make tweet button smaller

---
 web/components/contract-card.tsx     |  4 +++-
 web/components/contract-overview.tsx |  5 +----
 web/components/tweet-button.tsx      | 15 ++++++++++-----
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/web/components/contract-card.tsx b/web/components/contract-card.tsx
index 70e5df9f..63eaf8aa 100644
--- a/web/components/contract-card.tsx
+++ b/web/components/contract-card.tsx
@@ -114,7 +114,9 @@ export function ContractDetails(props: {
         <div className="whitespace-nowrap">{formatMoney(truePool)} pool</div>
       </Row>
 
-      {inlineTags && <div className="hidden sm:block">•</div>}
+      {inlineTags && tags.length > 0 && (
+        <div className="hidden sm:block">•</div>
+      )}
 
       <Row className="gap-2 flex-wrap">
         {tags.map((tag) => (
diff --git a/web/components/contract-overview.tsx b/web/components/contract-overview.tsx
index b3703dd3..a3b1077e 100644
--- a/web/components/contract-overview.tsx
+++ b/web/components/contract-overview.tsx
@@ -68,6 +68,7 @@ export const ContractOverview = (props: {
           />
 
           <ContractDetails contract={contract} inlineTags />
+          <TweetButton tweetText={tweetText} />
         </Col>
 
         <ResolutionOrChance
@@ -80,10 +81,6 @@ export const ContractOverview = (props: {
 
       <Spacer h={4} />
 
-      <TweetButton tweetText={tweetText} />
-
-      <Spacer h={4} />
-
       <ContractProbGraph contract={contract} />
 
       <Spacer h={12} />
diff --git a/web/components/tweet-button.tsx b/web/components/tweet-button.tsx
index b3e69150..2fd4adcd 100644
--- a/web/components/tweet-button.tsx
+++ b/web/components/tweet-button.tsx
@@ -1,9 +1,14 @@
-export function TweetButton(props: { tweetText?: string }) {
-  const { tweetText } = props
+import clsx from 'clsx'
+
+export function TweetButton(props: { className?: string; tweetText?: string }) {
+  const { tweetText, className } = props
 
   return (
     <a
-      className="btn btn-sm normal-case self-start border-none"
+      className={clsx(
+        'btn btn-xs normal-case self-start border-none',
+        className
+      )}
       style={{ backgroundColor: '#1da1f2' }}
       href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
         tweetText ?? ''
@@ -13,8 +18,8 @@ export function TweetButton(props: { tweetText?: string }) {
       <img
         className="mr-2"
         src={'/twitter-icon-white.svg'}
-        width={18}
-        height={18}
+        width={15}
+        height={15}
       />
       Tweet
     </a>