new share card design

components/Modal.tsx

@@ -16,7 +16,7 @@ const Modal: any = React.forwardRef<any, any>((props, ref) => {
   return (
     <Portal>
       <div
-        className="fixed z-30 inset-0 overflow-y-auto sm:py-8"
+        className="fixed z-30 inset-0 overflow-y-auto"
         aria-labelledby="modal-title"
         role="dialog"
         aria-modal="true"

components/ShareModal.tsx

@@ -10,7 +10,8 @@ import { getWeights, MarketConfig } from '@blockworks-foundation/mango-client'
 import useMangoStore from '../stores/useMangoStore'
 import Modal from './Modal'
 import { useScreenshot } from '../hooks/useScreenshot'
-import { ExternalLinkIcon } from '@heroicons/react/outline'
+import * as MonoIcons from './icons'
+import { TwitterIcon } from './icons'
 
 interface ShareModalProps {
   onClose: () => void
@@ -43,9 +44,15 @@ const ShareModal: FunctionComponent<ShareModalProps> = ({
   }, [mangoGroup, marketConfig])
 
   const positionPercentage =
-    ((position.indexPrice - position.avgEntryPrice) / position.avgEntryPrice) *
+    position.basePosition > 0
-    100 *
+      ? ((position.indexPrice - position.avgEntryPrice) /
-    initLeverage
+          position.avgEntryPrice) *
+        100 *
+        initLeverage
+      : ((position.avgEntryPrice - position.indexPrice) /
+          position.avgEntryPrice) *
+        100 *
+        initLeverage
 
   const side = position.basePosition > 0 ? 'LONG' : 'SHORT'
 
@@ -80,99 +87,96 @@ const ShareModal: FunctionComponent<ShareModalProps> = ({
 
   const isProfit = positionPercentage > 0
 
+  const iconName = `${marketConfig.baseSymbol.slice(
+    0,
+    1
+  )}${marketConfig.baseSymbol.slice(1, 4).toLowerCase()}MonoIcon`
+
+  const SymbolIcon = MonoIcons[iconName]
+
   return (
     <Modal
       isOpen={isOpen}
       onClose={onClose}
-      className="md:max-w-sm"
+      className={`${
+        side === 'LONG'
+          ? isProfit
+            ? 'bg-long-profit'
+            : 'bg-long-loss'
+          : isProfit
+          ? 'bg-short-profit'
+          : 'bg-short-loss'
+      } bg-contain h-[337.5px] w-[600px] sm:max-w-7xl`}
       noPadding
       hideClose
       ref={ref}
     >
-      <div className="relative overflow-hidden px-8 pt-6 pb-6 rounded-lg">
+      <div
-        <div id="share-image" className="relative z-20">
+        id="share-image"
-          <div className="flex justify-center p-4 pt-0">
+        className="drop-shadow-lg flex flex-col h-full items-center justify-center space-y-4 relative z-20"
-            <img
+      >
-              className={`h-32 w-auto`}
+        <div className="flex items-center text-lg text-th-fgd-3 text-center">
-              src="/assets/icons/logo.svg"
+          <SymbolIcon className="h-6 w-auto mr-2" />
-              alt="next"
+          <span className="mr-2">{position.marketConfig.name}</span>
-            />
+          <span
-          </div>
+            className={`border px-1 rounded ${
-          <div className="text-th-fgd-1 text-center text-xl">
+              position.basePosition > 0
-            <span className="font-bold">Mango</span>
+                ? 'border-th-green text-th-green'
-            <span className="font-extralight"> Markets</span>
+                : 'border-th-red text-th-red'
-          </div>
+            }`}
-          <div className="pb-4 text-lg text-center">
+          >
-            <span className="text-th-fgd-3">{position.marketConfig.name}</span>
+            {side}
-            <span className="px-2 text-th-fgd-4">|</span>
+          </span>
-
-            <span
-              className={`${
-                position.basePosition > 0 ? 'text-th-green' : 'text-th-red'
-              }`}
-            >
-              {side}
-            </span>
-          </div>
-          <div className="flex justify-center items-center">
-            <div
-              className={`border mb-6 px-4 ${
-                !showButton ? 'pt-2' : 'py-2'
-              } rounded-lg text-5xl text-center font-light ${
-                isProfit
-                  ? 'border-th-green text-th-green'
-                  : 'border-th-red text-th-red'
-              }`}
-            >
-              {isProfit
-                ? `${positionPercentage.toFixed(2)}`
-                : positionPercentage.toFixed(2)}
-              %
-            </div>
-          </div>
-          <div className="space-y-2 text-th-fgd-1">
-            <div className="flex items-center justify-between">
-              <span className="text-th-fgd-2">Avg Entry Price:</span>
-              <span>${position.avgEntryPrice.toFixed(2)}</span>
-            </div>
-            <div className="flex items-center justify-between">
-              <span className="text-th-fgd-2">Mark Price:</span>
-              <span>${position.indexPrice.toFixed(2)}</span>
-            </div>
-            <div className="flex items-center justify-between">
-              <span className="text-th-fgd-2">Max Leverage:</span>
-              <span>{initLeverage}x</span>
-            </div>
-          </div>
-          {copied ? (
-            <a
-              className="bg-th-bkg-3 hover:cursor-pointer block mt-6 px-4 py-3 rounded-full text-center text-th-fgd-1 w-full"
-              href={`https://twitter.com/intent/tweet?text=I'm ${side} %24${position.marketConfig.baseSymbol} perp on %40mangomarkets%0A[PASTE IMAGE HERE]`}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <div className="flex items-center justify-center">
-                <div>Tweet</div>
-                <ExternalLinkIcon className="ml-1 h-4 w-4" />
-              </div>
-            </a>
-          ) : (
-            <a
-              className={`${
-                !showButton ? 'hidden' : ''
-              } bg-th-bkg-3 hover:cursor-pointer block mt-6 px-4 py-3 rounded-full text-center text-th-fgd-1 w-full`}
-              onClick={handleCopyToClipboard}
-            >
-              Copy Image to Clipboard & Share
-            </a>
-          )}
-          {!showButton ? <div className="mb-6">.</div> : null}
         </div>
         <div
-          className={`absolute h-full w-full opacity-75 bottom-2/3 left-0 pointer-events-none bg-gradient-to-b ${
+          className={`font-bold text-6xl text-center ${
-            isProfit ? 'from-th-green' : 'from-th-red'
+            isProfit
-          } to-th-bkg-2 z-10`}
+              ? 'border-th-green text-th-green'
-        ></div>
+              : 'border-th-red text-th-red'
+          }`}
+        >
+          {positionPercentage > 0 ? '+' : null}
+          {positionPercentage.toFixed(2)}%
+        </div>
+        <div className="pt-2 space-y-1 text-base text-th-fgd-1 w-2/3">
+          <div className="flex items-center justify-between">
+            <span className="text-th-fgd-2">Avg Entry Price</span>
+            <span className="font-bold">
+              ${position.avgEntryPrice.toFixed(2)}
+            </span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-th-fgd-2">Mark Price</span>
+            <span className="font-bold">${position.indexPrice.toFixed(2)}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-th-fgd-2">Max Leverage</span>
+            <span className="font-bold">{initLeverage}x</span>
+          </div>
+        </div>
+      </div>
+      <div className="absolute -bottom-16 left-1/2 transform -translate-x-1/2">
+        {copied ? (
+          <a
+            className="bg-th-primary font-bold block mt-6 px-4 py-3 rounded-full text-center text-th-bkg-1 w-full hover:cursor-pointer hover:text-th-bkg-1 hover:brightness-[1.15]"
+            href={`https://twitter.com/intent/tweet?text=I'm ${side} %24${position.marketConfig.baseSymbol} perp on %40mangomarkets%0A[PASTE IMAGE HERE]`}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <div className="flex items-center justify-center">
+              <TwitterIcon className="h-4 mr-1.5 w-4" />
+              <div>Tweet Position</div>
+            </div>
+          </a>
+        ) : (
+          <a
+            className={`bg-th-primary flex font-bold items-center mt-6 px-4 py-3 rounded-full text-center text-th-bkg-1 w-full hover:cursor-pointer hover:text-th-bkg-1 hover:brightness-[1.15]`}
+            onClick={handleCopyToClipboard}
+          >
+            <TwitterIcon className="h-4 mr-1.5 w-4" />
+            Copy Image and Share
+          </a>
+        )}
       </div>
     </Modal>
   )

components/SideBadge.tsx

@@ -1,6 +1,5 @@
 import React, { FunctionComponent } from 'react'
 import { useTranslation } from 'next-i18next'
-import { capitalize } from 'lodash'
 
 type SideBadgeProps = {
   side: string
@@ -11,14 +10,14 @@ const SideBadge: FunctionComponent<SideBadgeProps> = ({ side }) => {
 
   return (
     <div
-      className={`rounded inline-block ${
+      className={`rounded inline-block uppercase ${
         side === 'buy' || side === 'long'
           ? 'border border-th-green text-th-green'
           : 'border border-th-red text-th-red'
       }
        px-2 py-0.5 -my-0.5 text-xs`}
     >
-      {capitalize(t(side))}
+      {t(side)}
     </div>
   )
 }

tailwind.config.js

@@ -107,6 +107,12 @@ module.exports = {
           },
         },
       },
+      backgroundImage: {
+        'long-loss': "url('/share_images/bg-long-loss.png')",
+        'long-profit': "url('/share_images/bg-long-profit.png')",
+        'short-loss': "url('/share_images/bg-short-loss.png')",
+        'short-profit': "url('/share_images/bg-short-profit.png')",
+      },
     },
   },
   variants: {