From 320b1a34b2e2b07cab505f5a08ca76098006b41f Mon Sep 17 00:00:00 2001
From: bartosz-lipinski <264380+bartosz-lipinski@users.noreply.github.com>
Date: Tue, 29 Jun 2021 19:35:48 -0500
Subject: [PATCH] feat: style changes

---
 .../web/src/components/ArtContent/index.tsx   |   2 +-
 .../src/components/PreSaleBanner/index.tsx    |   1 +
 .../web/src/components/ViewOn/index.tsx       |  46 +++++
 js/packages/web/src/views/art/index.less      |   2 +-
 js/packages/web/src/views/art/index.tsx       | 160 ++++++++++--------
 js/packages/web/src/views/auction/index.tsx   |  20 +--
 6 files changed, 144 insertions(+), 87 deletions(-)
 create mode 100644 js/packages/web/src/components/ViewOn/index.tsx

diff --git a/js/packages/web/src/components/ArtContent/index.tsx b/js/packages/web/src/components/ArtContent/index.tsx
index dc001ad..c3ff69c 100644
--- a/js/packages/web/src/components/ArtContent/index.tsx
+++ b/js/packages/web/src/components/ArtContent/index.tsx
@@ -212,5 +212,5 @@ export const ArtContent = ({
       style={style}/>
   );
 
-  return <div ref={ref as any}>{content}</div>;
+  return <div ref={ref as any} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{content}</div>;
 };
diff --git a/js/packages/web/src/components/PreSaleBanner/index.tsx b/js/packages/web/src/components/PreSaleBanner/index.tsx
index f42113b..fb919b5 100644
--- a/js/packages/web/src/components/PreSaleBanner/index.tsx
+++ b/js/packages/web/src/components/PreSaleBanner/index.tsx
@@ -27,6 +27,7 @@ export const PreSaleBanner = ({ auction }: IPreSaleBanner) => {
         <ArtContent
           pubkey={id}
           className="artwork-image"
+          allowMeshRender={true}
         />
       </Col>
       <Col md={12} className="presale-info">
diff --git a/js/packages/web/src/components/ViewOn/index.tsx b/js/packages/web/src/components/ViewOn/index.tsx
new file mode 100644
index 0000000..8d4b918
--- /dev/null
+++ b/js/packages/web/src/components/ViewOn/index.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { Row, Col, Button } from 'antd';
+import {
+  useArt,
+  useAuction,
+} from '../../hooks';
+import {
+  useConnectionConfig,
+} from '@oyster/common';
+
+export const ViewOn = () => {
+  const { id } = useParams<{ id: string }>();
+  const { env } = useConnectionConfig();
+  const auction = useAuction(id);
+  const art = useArt(auction?.thumbnail.metadata.pubkey);
+
+  return (
+    <>
+      <Col>
+        <h6>View on</h6>
+        <div style={{ display: 'flex' }}>
+          <Button
+            className="tag"
+            onClick={() => window.open(art.uri || '', '_blank')}
+          >
+            Arweave
+          </Button>
+          <Button
+            className="tag"
+            onClick={() =>
+              window.open(
+                `https://explorer.solana.com/account/${art?.mint || ''}${
+                  env.indexOf('main') >= 0 ? '' : `?cluster=${env}`
+                }`,
+                '_blank',
+              )
+            }
+          >
+            Solana
+          </Button>
+        </div>
+      </Col>
+    </>
+  );
+};
diff --git a/js/packages/web/src/views/art/index.less b/js/packages/web/src/views/art/index.less
index 276a0a1..b07bdbd 100644
--- a/js/packages/web/src/views/art/index.less
+++ b/js/packages/web/src/views/art/index.less
@@ -31,5 +31,5 @@
 
 .royalties {
   font-weight: 600;
-  font-size: 2rem;
+  font-size: 1.3rem;
 }
diff --git a/js/packages/web/src/views/art/index.tsx b/js/packages/web/src/views/art/index.tsx
index cea7721..8fda3f4 100644
--- a/js/packages/web/src/views/art/index.tsx
+++ b/js/packages/web/src/views/art/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Row, Col, Divider, Layout, Tag, Button } from 'antd';
+import { Row, Col, Divider, Layout, Tag, Button, Skeleton } from 'antd';
 import { useParams } from 'react-router-dom';
 import { useArt, useExtendedArt } from './../../hooks';
 
@@ -9,6 +9,7 @@ import { shortenAddress, TokenAccount, useConnection, useUserAccounts, useWallet
 import { MetaAvatar } from '../../components/MetaAvatar';
 import { sendSignMetadata } from '../../actions/sendSignMetadata';
 import { PublicKey } from '@solana/web3.js';
+import { ViewOn } from './../../components/ViewOn';
 
 const { Content } = Layout;
 
@@ -72,85 +73,96 @@ export const ArtView = () => {
             md={{ span: 12 }}
             style={{ textAlign: 'left', fontSize: '1.4rem' }}
           >
-            <div style={{ fontWeight: 700, fontSize: '4rem' }}>{art.title}</div>
-            <br />
-            <div className="info-header">CREATED BY</div>
-            <div className="creators">
-              {(art.creators || [])
-                .map(creator => {
-                return (
-                  <div
-                    className="info-content"
-                    style={{ display: 'flex', alignItems: 'center' }}
-                  >
-                    <MetaAvatar creators={[creator]} size={64} />
-                    <div>
-                      <span className="creator-name">
-                        {creator.name || shortenAddress(creator.address || '')}
-                      </span>
-                      {/* <Button
-                        onClick={async () => {
-                          if(!art.mint) {
-                            return;
-                          }
-                          const mint = new PublicKey(art.mint);
-
-                          const account = accountByMint.get(art.mint);
-                          if(!account) {
-                            return;
-                          }
-
-                          const owner = wallet?.publicKey;
-
-                          if(!owner) {
-                            return;
-                          }
-                          const instructions: any[] = [];
-                          await updateMetadata(undefined, undefined, true, mint, owner, instructions)
-
-                          sendTransaction(connection, wallet, instructions, [], true);
-                        }}
+            <Row>
+              <div style={{ fontWeight: 700, fontSize: '4rem' }}>{art.title || <Skeleton paragraph={{ rows: 0 }} />}</div>
+            </Row>
+            <Row>
+              <Col span={6}>
+                <h6>Royalties</h6>
+                <div className="royalties">
+                  {((art.seller_fee_basis_points || 0) / 100).toFixed(2)}%
+                </div>
+              </Col>
+              <Col span={12}>
+                <ViewOn  />
+              </Col>
+            </Row>
+            <Row>
+              <Col>
+                <h6 style={{ marginTop: 5 }}>Created By</h6>
+                <div className="creators">
+                  {(art.creators || [])
+                    .map(creator => {
+                    return (
+                      <div
+                        style={{ display: 'flex', alignItems: 'center', marginBottom: 5 }}
                       >
-                        Mark as Sold
-                      </Button> */}
-                      <div style={{ marginLeft: 10 }}>
-                        {!creator.verified &&
-                          (creator.address === pubkey ? (
-                            <Button
-                              onClick={async () => {
-                                try {
-                                  await sendSignMetadata(
-                                    connection,
-                                    wallet,
-                                    new PublicKey(id),
-                                  );
-                                } catch (e) {
-                                  console.error(e);
-                                  return false;
-                                }
-                                return true;
-                              }}
-                            >
-                              Approve
-                            </Button>
-                          ) : (
-                            tag
-                          ))}
+                        <MetaAvatar creators={[creator]} size={64} />
+                        <div>
+                          <span className="creator-name">
+                            {creator.name || shortenAddress(creator.address || '')}
+                          </span>
+                          <div style={{ marginLeft: 10 }}>
+                            {!creator.verified &&
+                              (creator.address === pubkey ? (
+                                <Button
+                                  onClick={async () => {
+                                    try {
+                                      await sendSignMetadata(
+                                        connection,
+                                        wallet,
+                                        new PublicKey(id),
+                                      );
+                                    } catch (e) {
+                                      console.error(e);
+                                      return false;
+                                    }
+                                    return true;
+                                  }}
+                                >
+                                  Approve
+                                </Button>
+                              ) : (
+                                tag
+                              ))}
+                          </div>
+                        </div>
                       </div>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
+                    );
+                  })}
+                </div>
+              </Col>
+            </Row>
+
+            {/* <Button
+                  onClick={async () => {
+                    if(!art.mint) {
+                      return;
+                    }
+                    const mint = new PublicKey(art.mint);
+
+                    const account = accountByMint.get(art.mint);
+                    if(!account) {
+                      return;
+                    }
+
+                    const owner = wallet?.publicKey;
+
+                    if(!owner) {
+                      return;
+                    }
+                    const instructions: any[] = [];
+                    await updateMetadata(undefined, undefined, true, mint, owner, instructions)
+
+                    sendTransaction(connection, wallet, instructions, [], true);
+                  }}
+                >
+                  Mark as Sold
+                </Button> */}
           </Col>
           <Col span="24">
             <Divider />
-            <br />
             {art.creators?.find(c => !c.verified) && unverified}
-            <div className="info-header">CREATOR ROYALTIES</div>
-            <div className="royalties">
-              {((art.seller_fee_basis_points || 0) / 100).toFixed(2)}%
-            </div>
             <br />
             <div className="info-header">ABOUT THE CREATION</div>
             <div className="info-content">{description}</div>
diff --git a/js/packages/web/src/views/auction/index.tsx b/js/packages/web/src/views/auction/index.tsx
index 8c52829..e9f0c37 100644
--- a/js/packages/web/src/views/auction/index.tsx
+++ b/js/packages/web/src/views/auction/index.tsx
@@ -58,15 +58,13 @@ export const AuctionItem = ({
     height: 300,
   };
   return (
-    <div>
-      <ArtContent
-        pubkey={id}
-        className="artwork-image stack-item"
-        style={style}
-        active={active}
-        allowMeshRender={true}
-      />
-    </div>
+    <ArtContent
+      pubkey={id}
+      className="artwork-image stack-item"
+      style={style}
+      active={active}
+      allowMeshRender={true}
+    />
   );
 };
 
@@ -124,9 +122,9 @@ export const AuctionView = () => {
               {items}
             </Carousel>
           </div>
-          <h6>NUMBER OF WINNERS</h6>
+          <h6>Number Of Winners</h6>
           <h1>{winnerCount === undefined ?  <Skeleton paragraph={{ rows: 0 }} /> : winnerCount}</h1>
-          <h6>NUMBER OF NFTs</h6>
+          <h6>Number Of NFTs</h6>
           <h1>{nftCount === undefined ?  <Skeleton paragraph={{ rows: 0 }} /> : nftCount}</h1>
           <h6>About this {nftCount === 1 ? 'NFT' : 'Collection'}</h6>
           <p>