Allow link Buttons. Change tweet, dupe buttons.

web/components/button.tsx

@@ -15,6 +15,43 @@ export type ColorType =
   | 'gray-white'
   | 'highlight-blue'
 
+const sizeClasses = {
+  '2xs': 'px-2 py-1 text-xs',
+  xs: 'px-2.5 py-1.5 text-sm',
+  sm: 'px-3 py-2 text-sm',
+  md: 'px-4 py-2 text-sm',
+  lg: 'px-4 py-2 text-base',
+  xl: 'px-6 py-2.5 text-base font-semibold',
+  '2xl': 'px-6 py-3 text-xl font-semibold',
+}
+
+export function buttonClass(size: SizeType, color: ColorType | 'override') {
+  return clsx(
+    'font-md inline-flex items-center justify-center rounded-md border border-transparent shadow-sm transition-colors disabled:cursor-not-allowed',
+    sizeClasses[size],
+    color === 'green' &&
+      'disabled:bg-greyscale-2 bg-teal-500 text-white hover:bg-teal-600',
+    color === 'red' &&
+      'disabled:bg-greyscale-2 bg-red-400 text-white hover:bg-red-500',
+    color === 'yellow' &&
+      'disabled:bg-greyscale-2 bg-yellow-400 text-white hover:bg-yellow-500',
+    color === 'blue' &&
+      'disabled:bg-greyscale-2 bg-blue-400 text-white hover:bg-blue-500',
+    color === 'indigo' &&
+      'disabled:bg-greyscale-2 bg-indigo-500 text-white hover:bg-indigo-600',
+    color === 'gray' &&
+      'bg-greyscale-1 text-greyscale-6 hover:bg-greyscale-2 disabled:opacity-50',
+    color === 'gray-outline' &&
+      'border-greyscale-4 text-greyscale-4 hover:bg-greyscale-4 border-2 hover:text-white disabled:opacity-50',
+    color === 'gradient' &&
+      'disabled:bg-greyscale-2 border-none bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
+    color === 'gray-white' &&
+      'text-greyscale-6 hover:bg-greyscale-2 border-none shadow-none disabled:opacity-50',
+    color === 'highlight-blue' &&
+      'text-highlight-blue disabled:bg-greyscale-2 border-none shadow-none'
+  )
+}
+
 export function Button(props: {
   className?: string
   onClick?: MouseEventHandler<any> | undefined
@@ -36,44 +73,10 @@ export function Button(props: {
     loading,
   } = props
 
-  const sizeClasses = {
-    '2xs': 'px-2 py-1 text-xs',
-    xs: 'px-2.5 py-1.5 text-sm',
-    sm: 'px-3 py-2 text-sm',
-    md: 'px-4 py-2 text-sm',
-    lg: 'px-4 py-2 text-base',
-    xl: 'px-6 py-2.5 text-base font-semibold',
-    '2xl': 'px-6 py-3 text-xl font-semibold',
-  }[size]
-
   return (
     <button
       type={type}
-      className={clsx(
+      className={clsx(buttonClass(size, color), className)}
-        'font-md inline-flex items-center justify-center rounded-md border border-transparent shadow-sm transition-colors disabled:cursor-not-allowed',
-        sizeClasses,
-        color === 'green' &&
-          'disabled:bg-greyscale-2 bg-teal-500 text-white hover:bg-teal-600',
-        color === 'red' &&
-          'disabled:bg-greyscale-2 bg-red-400 text-white hover:bg-red-500',
-        color === 'yellow' &&
-          'disabled:bg-greyscale-2 bg-yellow-400 text-white hover:bg-yellow-500',
-        color === 'blue' &&
-          'disabled:bg-greyscale-2 bg-blue-400 text-white hover:bg-blue-500',
-        color === 'indigo' &&
-          'disabled:bg-greyscale-2 bg-indigo-500 text-white hover:bg-indigo-600',
-        color === 'gray' &&
-          'bg-greyscale-1 text-greyscale-6 hover:bg-greyscale-2 disabled:opacity-50',
-        color === 'gray-outline' &&
-          'border-greyscale-4 text-greyscale-4 hover:bg-greyscale-4 border-2 hover:text-white disabled:opacity-50',
-        color === 'gradient' &&
-          'disabled:bg-greyscale-2 border-none bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
-        color === 'gray-white' &&
-          'text-greyscale-6 hover:bg-greyscale-2 border-none shadow-none disabled:opacity-50',
-        color === 'highlight-blue' &&
-          'text-highlight-blue disabled:bg-greyscale-2 border-none shadow-none',
-        className
-      )}
       disabled={disabled || loading}
       onClick={onClick}
     >

web/components/contract/share-modal.tsx

@@ -60,10 +60,7 @@ export function ShareModal(props: {
         <CopyLinkButton url={shareUrl} tracking="copy share link" />
 
         <Row className="z-0 flex-wrap justify-center gap-4 self-center">
-          <TweetButton
+          <TweetButton tweetText={getTweetText(contract, shareUrl)} />
-            className="self-start"
-            tweetText={getTweetText(contract, shareUrl)}
-          />
 
           <ShareEmbedButton contract={contract} />
 

web/components/duplicate-contract-button.tsx

@@ -3,27 +3,22 @@ import clsx from 'clsx'
 import { Contract } from 'common/contract'
 import { getMappedValue } from 'common/pseudo-numeric'
 import { trackCallback } from 'web/lib/service/analytics'
+import { buttonClass } from './button'
 
-export function DuplicateContractButton(props: {
+export function DuplicateContractButton(props: { contract: Contract }) {
-  contract: Contract
+  const { contract } = props
-  className?: string
-}) {
-  const { contract, className } = props
 
   return (
     <a
-      className={clsx('btn btn-xs flex-nowrap normal-case', className)}
+      className={clsx(
-      style={{
+        buttonClass('2xs', 'override'),
-        backgroundColor: 'white',
+        'gap-1 border-2 border-violet-400 text-violet-400 hover:bg-violet-400 hover:text-white'
-        border: '2px solid #a78bfa',
+      )}
-        // violet-400
-        color: '#a78bfa',
-      }}
       href={duplicateContractHref(contract)}
       onClick={trackCallback('duplicate market')}
       target="_blank"
     >
-      <DuplicateIcon className="mr-1.5 h-4 w-4" aria-hidden="true" />
+      <DuplicateIcon className="h-4 w-4" aria-hidden="true" />
       <div>Duplicate</div>
     </a>
   )

web/components/share-post-modal.tsx

@@ -17,10 +17,9 @@ export function SharePostModal(props: {
       <Col className="gap-4 rounded bg-white p-4">
         <Title className="!mt-0 !mb-2" text="Share this post" />
         <CopyLinkButton url={shareUrl} tracking="copy share post link" />
-
+        <div className="self-center">
-        <Row className="z-0 justify-start gap-4 self-center">
+          <TweetButton tweetText={shareUrl} />
-          <TweetButton className="self-start" tweetText={shareUrl} />
+        </div>
-        </Row>
       </Col>
     </Modal>
   )

web/components/tweet-button.tsx

@@ -1,22 +1,23 @@
 import clsx from 'clsx'
+import TwitterLogo from 'web/lib/icons/twitter-logo'
 import { trackCallback } from 'web/lib/service/analytics'
+import { buttonClass } from './button'
 
-export function TweetButton(props: { className?: string; tweetText: string }) {
+export function TweetButton(props: { tweetText: string }) {
-  const { tweetText, className } = props
+  const { tweetText } = props
 
   return (
     <a
-      className={clsx('btn btn-xs flex-nowrap normal-case', className)}
+      // #1da1f2 is twitter blue
-      style={{
+      className={clsx(
-        backgroundColor: 'white',
+        buttonClass('2xs', 'override'),
-        border: '2px solid #1da1f2',
+        'gap-1 border-2 border-[#1da1f2] text-[#1da1f2] hover:bg-[#1da1f2] hover:text-white'
-        color: '#1da1f2',
+      )}
-      }}
       href={getTweetHref(tweetText)}
       onClick={trackCallback('share tweet')}
       target="_blank"
     >
-      <img className="mr-2" src={'/twitter-logo.svg'} width={15} height={15} />
+      <TwitterLogo width={15} height={15} />
       <div>Tweet</div>
     </a>
   )

web/lib/icons/twitter-logo.tsx

@@ -0,0 +1,28 @@
+export default function TwitterLogo(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      version="1.1"
+      id="Logo"
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      viewBox="0 0 248 204"
+      stroke="currentColor"
+      fill="currentColor"
+      {...props}
+    >
+      <g id="Logo_1_">
+        <path
+          id="white_background"
+          className="st0"
+          d="M221.95,51.29c0.15,2.17,0.15,4.34,0.15,6.53c0,66.73-50.8,143.69-143.69,143.69v-0.04
+		C50.97,201.51,24.1,193.65,1,178.83c3.99,0.48,8,0.72,12.02,0.73c22.74,0.02,44.83-7.61,62.72-21.66
+		c-21.61-0.41-40.56-14.5-47.18-35.07c7.57,1.46,15.37,1.16,22.8-0.87C27.8,117.2,10.85,96.5,10.85,72.46c0-0.22,0-0.43,0-0.64
+		c7.02,3.91,14.88,6.08,22.92,6.32C11.58,63.31,4.74,33.79,18.14,10.71c25.64,31.55,63.47,50.73,104.08,52.76
+		c-4.07-17.54,1.49-35.92,14.61-48.25c20.34-19.12,52.33-18.14,71.45,2.19c11.31-2.23,22.15-6.38,32.07-12.26
+		c-3.77,11.69-11.66,21.62-22.2,27.93c10.01-1.18,19.79-3.86,29-7.95C240.37,35.29,231.83,44.14,221.95,51.29z"
+        />
+      </g>
+    </svg>
+  )
+}

web/public/twitter-icon-white.svg

@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 248 204" style="enable-background:new 0 0 248 204;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-</style>
-<g id="Logo_1_">
-	<path id="white_background" class="st0" d="M221.95,51.29c0.15,2.17,0.15,4.34,0.15,6.53c0,66.73-50.8,143.69-143.69,143.69v-0.04
-		C50.97,201.51,24.1,193.65,1,178.83c3.99,0.48,8,0.72,12.02,0.73c22.74,0.02,44.83-7.61,62.72-21.66
-		c-21.61-0.41-40.56-14.5-47.18-35.07c7.57,1.46,15.37,1.16,22.8-0.87C27.8,117.2,10.85,96.5,10.85,72.46c0-0.22,0-0.43,0-0.64
-		c7.02,3.91,14.88,6.08,22.92,6.32C11.58,63.31,4.74,33.79,18.14,10.71c25.64,31.55,63.47,50.73,104.08,52.76
-		c-4.07-17.54,1.49-35.92,14.61-48.25c20.34-19.12,52.33-18.14,71.45,2.19c11.31-2.23,22.15-6.38,32.07-12.26
-		c-3.77,11.69-11.66,21.62-22.2,27.93c10.01-1.18,19.79-3.86,29-7.95C240.37,35.29,231.83,44.14,221.95,51.29z"/>
-</g>
-</svg>