Merge pull request metaplex-foundation#7 from Monadical-SAS/jose-dev

Work in progress - Jose's branch - Keep out - Beware of dogs ⛔
KirillLykov · Jul 16, 2021 · 39cb28b · 39cb28b
2 parents 34ad81a + 7a979fc
commit 39cb28b
Show file tree

Hide file tree

Showing 17 changed files with 283 additions and 278 deletions.
diff --git a/js/packages/common/src/components/ConnectButton/index.tsx b/js/packages/common/src/components/ConnectButton/index.tsx
@@ -28,7 +28,7 @@ export const ConnectButton = (
       onClick={connected ? onClick : connect}
       disabled={connected && disabled}
     >
-      {connected ? children : 'Connect'}
+      {connected ? children : 'Connect Wallet'}
     </Button>;
   }
 

diff --git a/js/packages/web/.env b/js/packages/web/.env
@@ -1 +1 @@
-REACT_APP_STORE_OWNER_ADDRESS_ADDRESS="38ZBERLq5Mshh8sUyAC4WbEzUUbG2JdZ2wmXE119kb6t"
+REACT_APP_STORE_OWNER_ADDRESS_ADDRESS=Dug3AQkaaxKhXNMuZ5SBdGSNf1grQx97pS3n4VzztF4N
diff --git a/js/packages/web/public/main-banner.png b/js/packages/web/public/main-banner.png
diff --git a/js/packages/web/public/main-banner.svg b/js/packages/web/public/main-banner.svg
diff --git a/js/packages/web/src/App.less b/js/packages/web/src/App.less
@@ -1,8 +1,8 @@
 
 @import '~antd/es/style/themes/dark.less';
 @import "~antd/dist/antd.dark.less";
+@import "_colors";
 
-@solana-green: #3d4844;
 
 body {
   --row-highlight: @background-color-base;
@@ -180,3 +180,29 @@ code {
   transition: 150ms;
   padding-top: 5px;
 }
+
+h1 {
+  font-style: normal;
+  font-weight: 600;
+  font-size: 2rem;
+}
+
+.ant-btn {
+  &.secondary-btn {
+    color: @black-100;
+    background: #E65C37;
+    border-color: #E65C37;
+    box-shadow: 0px 0px 24px rgba(26, 26, 26, 0.12);
+    border-radius: 8px;
+    width: fit-content;
+    height: fit-content;
+    padding: 12px 20px;
+    font-weight: bold;
+
+    &:hover, &:focus {
+      background: transparent;
+      border-color: #E65C37;
+      color: #E65C37;
+    }
+  }
+}
diff --git a/js/packages/web/src/components/AppBar/index.less b/js/packages/web/src/components/AppBar/index.less
@@ -5,21 +5,6 @@
   justify-content: space-between !important;
 }
 
-.app-bar-box {
-  background: #121212;
-  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
-  border-radius: 8px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  // padding: 8px 10px;
-  height: 56px;
-}
-
-.app-left {
-  padding: 8px 10px;
-}
-
 .title {
   font-style: normal;
   font-weight: 600;

diff --git a/js/packages/web/src/components/AppBar/index.tsx b/js/packages/web/src/components/AppBar/index.tsx
@@ -82,9 +82,7 @@ const MetaplexMenu = () => {
           trigger={['click']}
           overlay={
             <Menu>
-              {getDefaultLinkActions(connected).map(item => {
-                return <Menu.Item>{item}</Menu.Item>;
-              })}
+              {getDefaultLinkActions(connected).map((item, idx) => <Menu.Item key={idx}>{item}</Menu.Item>)}
             </Menu>
           }
         >
@@ -109,23 +107,23 @@ export const AppBar = () => {
 
   return (
     <>
-      <div className="app-left app-bar-box">
+      <div className="app-left">
         <LogoLink />
-        <div className="divider" />
-        <Notifications />
+        &nbsp;&nbsp;&nbsp;
         <MetaplexMenu />
       </div>
-      {!connected && <ConnectButton type="primary" />}
-      {connected && (
-        <div className="app-right app-bar-box">
+      <div className="app-right">
+        {!connected && <ConnectButton type="primary" />}
+        {connected && <>
           <UserActions />
+          <Notifications />
           <CurrentUserBadge
             showBalance={false}
             showAddress={false}
             iconSize={24}
           />
-        </div>
-      )}
+        </>}
+      </div>
     </>
   );
 };
diff --git a/js/packages/web/src/components/Banner/index.less b/js/packages/web/src/components/Banner/index.less
@@ -1,30 +0,0 @@
-@import "_colors";
-
-#current-banner {
-  width: 100%;
-  height: 520px;
-  background-color: @black-100;
-  background-position: top right;
-  background-size: auto 100%;
-  background-repeat: no-repeat;
-  //border: 1px solid white;
-  position: relative;
-  border-radius: 12px;
-
-  #gradient-banner {
-    position: absolute;
-    height: 100%;
-    width: 462px;
-    right: 462px;
-    top: 0;
-    background: linear-gradient(270deg, rgba(18, 18, 18, 0) 0%, #121212 100%);
-
-  }
-  #banner-inner {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-  }
-}

diff --git a/js/packages/web/src/components/Banner/index.tsx b/js/packages/web/src/components/Banner/index.tsx
@@ -1,12 +1,36 @@
 import React from 'react';
+import { useEffect } from 'react';
+
+import useWindowDimensions from '../../utils/layout';
 
 import './index.less';
 
-export const Banner = (props: any) => {
+export const Banner = (props: {
+  src: string,
+  children?: React.ReactNode,
+}) => {
+  const { width } = useWindowDimensions();
+
+  useEffect(() => {
+    const mainBg = document.getElementById("main-bg");
+    if (mainBg) mainBg.style.backgroundImage = `url(${props.src})`;
+  }, [props.src])
   return (
-    <div id={'current-banner'} style={{ backgroundImage: `url(${props.src})` }}>
-      <span id={'gradient-banner'}></span>
-      <div id="banner-inner">{props.children}</div>
+    <div style={{
+      width: "100%",
+      height: Math.min(width, 1440) * 520 / 1344, // banner size
+      borderRadius: 10,
+      position: "relative",
+    }}>
+      <img src={props.src} width="100%" style={{
+        position: "absolute",
+      }}/>
+      <div style={{
+        position: "relative",
+        height: "inherit",
+      }}>
+        {props.children}
+      </div>
     </div>
   );
 };
diff --git a/js/packages/web/src/components/Layout/index.less b/js/packages/web/src/components/Layout/index.less
@@ -10,34 +10,26 @@
   align-items: center;
   display: flex;
   flex-direction: row;
+  margin-left: 15px;
 }
+
 .app-right {
   align-items: center;
   display: flex;
   flex-direction: row;
+  margin-right: 15px;
 }
 
-section#main-layout.ant-layout {
-  background-color: @black-100 !important;
-  #bg-gradient {
-    position: absolute;
-    height: 200px;
-    width: 100%;
-    left: 0;
-    top: 510px;
-    background: linear-gradient(180deg, rgba(18, 18, 18, 0) 0%, @black-100 100%);
-  }
-  span#main-bg{
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    height: 708px;
-    background: linear-gradient(180deg, rgba(18, 18, 18, 0) 0%, @black-100 100%);;
-    background-position: top right !important;
-    background-size: 100% 100% !important;
-    background-repeat: no-repeat !important;
-    filter: blur(220px);
-    clip-path: inset(0 0 0 0);
-  }
+
+div#main-bg{
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background-position: center -50vh;
+  background-size: cover;
+  background-repeat: no-repeat;
+  filter: blur(100px) brightness(3);
+  height: 100vh;
 }
diff --git a/js/packages/web/src/components/Layout/index.tsx b/js/packages/web/src/components/Layout/index.tsx
@@ -3,43 +3,26 @@ import { Layout } from 'antd';
 
 import './../../App.less';
 import './index.less';
-import { LABELS } from '../../constants';
 import { AppBar } from '../AppBar';
-import useWindowDimensions from '../../utils/layout';
+// import useWindowDimensions from '../../utils/layout';
 
 const { Header, Content } = Layout;
 
-const paddingForLayout = (width: number) => {
-  if (width <= 768) return '5px 10px';
-  if (width > 768) return '10px 48px';
-};
 
 export const AppLayout = React.memo((props: any) => {
-  const { width } = useWindowDimensions();
+  // const { width } = useWindowDimensions();
 
   return (
     <>
-      <Layout
-        id={'main-layout'}
-        title={LABELS.APP_TITLE}
-        style={{
-          padding: paddingForLayout(width),
-          // maxWidth: 1450,
-        }}
-      >
-        {props.addBannerBg && (
-          <>
-            <span
-              id={'main-bg'}
-              style={{ backgroundImage: `url(${props.src})` }}
-            ></span>
-            <span id={'bg-gradient'}></span>
-          </>
-        )}
+      <Layout id={'main-layout'}>
+        <div id={'main-bg'}></div>
         <Header className="App-Bar">
           <AppBar />
         </Header>
-        <Content style={{ overflow: 'scroll', paddingBottom: 50 }}>
+        <Content style={{
+          overflow: "scroll",
+          padding: "30px 2vw",
+        }}>
           {props.children}
         </Content>
       </Layout>

diff --git a/js/packages/web/src/constants/labels.ts b/js/packages/web/src/constants/labels.ts
@@ -6,7 +6,6 @@ export const LABELS = {
   ACCOUNT_FUNDED: 'Account funded.',
   MENU_HOME: 'Home',
   MENU_FAUCET: 'Faucet',
-  APP_TITLE: 'Metaplex',
   CONNECT_BUTTON: 'Connect',
   WALLET_TOOLTIP: 'Wallet public key',
   WALLET_BALANCE: 'Wallet balance',
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		REACT_APP_STORE_OWNER_ADDRESS_ADDRESS="38ZBERLq5Mshh8sUyAC4WbEzUUbG2JdZ2wmXE119kb6t"
		REACT_APP_STORE_OWNER_ADDRESS_ADDRESS=Dug3AQkaaxKhXNMuZ5SBdGSNf1grQx97pS3n4VzztF4N