feat: [console-lite] - trade screen - bunch of animations (#706)

* feat: [console-lite] - trade screen - bunch of animations

* feat: [console-lite] - trade screen - bunch of animations

Co-authored-by: maciek <maciek@vegaprotocol.io>

apps/simple-trading-app/src/app/components/deal-ticket/baubles-decor.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Video from '../header/video';
+import Comet from '../header/comet';
+import Star from '../icons/star';
+
+const Baubles = () => {
+  return (
+    <div className="relative right-0 top-0 h-[700px] hidden md:block md:w-1/2 overflow-hidden">
+      <div className="absolute top-[100px] w-[393px] left-[19%] h-[517px]">
+        <div className="absolute top-[82px] right-[34px] w-[100px] h-[100px] clip-path-rounded">
+          <Video />
+        </div>
+        <div className="absolute bottom-[100px] left-[59px] w-[200px] h-[200px] clip-path-rounded">
+          <Video />
+        </div>
+        <div className="absolute w-[118px] h-[85px] right-0 bottom-[178px]">
+          <Comet />
+        </div>
+        <div className="absolute w-[118px] h-[82px] left-0 bottom-[120px]">
+          <Comet />
+        </div>
+        <div className="absolute w-[20px] h-[20px] top-0 left-[49px]">
+          <Star />
+        </div>
+        <div className="absolute w-[20px] h-[20px] top-[89px] left-[184px]">
+          <Star />
+        </div>
+        <div className="absolute w-[10px] h-[10px] bottom-0 right-[137px]">
+          <Star />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Baubles;

apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-container.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useParams } from 'react-router-dom';
 import {
   DealTicketManager,
@@ -8,6 +9,7 @@ import { useVegaWallet } from '@vegaprotocol/wallet';
 import { gql, useQuery } from '@apollo/client';
 import { DealTicketBalance } from './deal-ticket-balance';
 import type { PartyBalanceQuery } from './__generated__/PartyBalanceQuery';
+import Baubles from './baubles-decor';
 
 const tempEmptyText = <p>Please select a market from the markets page</p>;
 
@@ -39,27 +41,34 @@ export const DealTicketContainer = () => {
     }
   );
 
-  return marketId ? (
+  return (
-    <Container marketId={marketId}>
+    <div className="flex">
-      {(data) => (
+      <div className="md:w-1/2 md:min-w-[500px]">
-        <DealTicketManager market={data.market}>
+        {marketId ? (
-          {loading ? (
+          <Container marketId={marketId}>
-            'Loading...'
+            {(data) => (
-          ) : (
+              <DealTicketManager market={data.market}>
-            <DealTicketBalance
+                {loading ? (
-              settlementAsset={
+                  'Loading...'
-                data.market.tradableInstrument.instrument.product
+                ) : (
-                  ?.settlementAsset
+                  <DealTicketBalance
-              }
+                    settlementAsset={
-              accounts={partyData?.party?.accounts || []}
+                      data.market.tradableInstrument.instrument.product
-              isWalletConnected={!!keypair?.pub}
+                        ?.settlementAsset
-            />
+                    }
-          )}
+                    accounts={partyData?.party?.accounts || []}
-          <DealTicketSteps market={data.market} />
+                    isWalletConnected={!!keypair?.pub}
-        </DealTicketManager>
+                  />
-      )}
+                )}
-    </Container>
+                <DealTicketSteps market={data.market} />
-  ) : (
+              </DealTicketManager>
-    tempEmptyText
+            )}
+          </Container>
+        ) : (
+          tempEmptyText
+        )}
+      </div>
+      <Baubles />
+    </div>
   );
 };

apps/simple-trading-app/src/app/components/header/comet.tsx

@@ -5,9 +5,9 @@ const Comet = () => {
     <svg
       viewBox="0 0 118 82"
       fill="currentColor"
-      className="max-w-[7.5rem] mx-auto hidden md:block absolute right-[365px] rotate-180"
+      className="max-w-[7.5rem] mx-auto"
     >
-      <g className="fill-white">
+      <g className="fill-black dark:fill-white">
         <path d="M44.3791 67.5864H41.5859V70.3796H44.3791V67.5864Z"></path>
         <path d="M47.173 64.7932V62H44.3799V64.7932V67.5863H47.173V64.7932Z"></path>
         <path d="M41.5863 70.3794H36V73.1726H41.5863V70.3794Z"></path>

apps/simple-trading-app/src/app/components/header/video.tsx

@@ -1,15 +1,26 @@
 import React from 'react';
+import classNames from 'classnames';
 
-const Video = () => {
+interface Props {
+  width: number;
+  height: number;
+  className: string;
+}
+
+const Video = ({ width = 60, height = 60, className = '' }: Partial<Props>) => {
   return (
     <video
-      width={500}
+      width={width}
-      height={100}
+      height={height}
       autoPlay
       muted
       loop
       playsInline
-      className="absolute left-0 top-0 w-full h-full object-cover"
+      className={classNames(
+        'absolute left-0 top-0 w-full h-full object-cover',
+        className
+      )}
+      poster="https://vega.xyz/static/poster-image.jpg"
     >
       <source
         src="https://d33wubrfki0l68.cloudfront.net/2500bc5ef1b96927e0220eeb2bef0b22b87bcda1/3e0d3/static/moshed-aa65f0933af9abe9afb5e5663c9b3f68.mp4"

apps/simple-trading-app/src/app/components/icons/star.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const Star = () => {
+  return (
+    <svg width="100%" height="100%" viewBox="0 0 21 21" fill="currentColor">
+      <g className="fill-black dark:fill-white">
+        <path d="M8.99996 5.99976H6V8.99972H8.99996V5.99976Z" />
+        <path d="M12.0009 2.99996V0H9.00098V2.99996V5.99993H12.0009V2.99996Z" />
+        <path d="M5.99993 9H0V12H5.99993V9Z" />
+        <path d="M8.99996 11.9998H6V14.9997H8.99996V11.9998Z" />
+        <path d="M12.0009 15H9.00098V20.9999H12.0009V15Z" />
+        <path d="M15 11.9998H12V14.9997H15V11.9998Z" />
+        <path d="M20.9999 9H15V12H20.9999V9Z" />
+        <path d="M15 5.99976H12V8.99972H15V5.99976Z" />
+      </g>
+    </svg>
+  );
+};
+
+export default Star;

libs/tailwindcss-config/src/vega-custom-classes.js

@@ -48,6 +48,9 @@ const vegaCustomClasses = plugin(function ({ addUtilities }) {
     '.color-scheme-dark': {
       colorScheme: 'dark',
     },
+    '.clip-path-rounded': {
+      clipPath: 'circle(50%)',
+    },
   });
 });