From 3a6a324f77357776babea58ae9390c69edfad4fc Mon Sep 17 00:00:00 2001 From: sky Date: Fri, 23 Dec 2022 15:33:02 +0530 Subject: [PATCH 1/2] changes color of stock cards and position of sell stocks button --- components/stock-card/index.js | 15 ++++++++------- components/stock-operation/index.js | 2 +- pages/trading/index.js | 10 +++++----- public/assets/stock.png | Bin 0 -> 5651 bytes styles/globals.css | 2 +- 5 files changed, 15 insertions(+), 14 deletions(-) create mode 100644 public/assets/stock.png diff --git a/components/stock-card/index.js b/components/stock-card/index.js index 2a8a5f0..0a94fd3 100644 --- a/components/stock-card/index.js +++ b/components/stock-card/index.js @@ -13,7 +13,7 @@ export const Card = ({ stock, operationType }) => { return (
{stock.name {

{stock.name || stock.stockName}

-

- {stock.price || stock.initialStockValue} 💲 -

{' '} Quantity : {stock.quantity}

+

+ {stock.price || stock.initialStockValue} 💲 +

{ box-shadow: 0 2px 2px #ccc; text-align: center; min-width: 300px; - border-radius: 4px; + border-radius: 24px; transition: 0.2s; - background: #ffffff; + background: #F6FDFB; } .stock-card:hover { box-shadow: 0px 4px 10px #ccc; @@ -70,7 +70,8 @@ export const Card = ({ stock, operationType }) => { text-align: center; width: 100%; padding: 1rem; - background-color: #ffffff; + background-color: #F6FDFB; + border-radius: 24px; } .stock-card-product-name { diff --git a/components/stock-operation/index.js b/components/stock-operation/index.js index 7b3b8ad..3a6a514 100644 --- a/components/stock-operation/index.js +++ b/components/stock-operation/index.js @@ -21,7 +21,7 @@ const StockOperation = (props) => { className={`${styles.button} ${styles.greenButton}`} onClick={() => setTransaction('BUY')} > - BUY + Buy Now
)} {router.pathname == '/trading/sell' && ( diff --git a/pages/trading/index.js b/pages/trading/index.js index 36759b9..715cd4c 100644 --- a/pages/trading/index.js +++ b/pages/trading/index.js @@ -24,6 +24,11 @@ const Invest = () => {
+
+ +
Sell Stocks
+ +
{stocks.map((itemName) => ( { /> ))}
-
- -
Sell Stocks
- -
diff --git a/public/assets/stock.png b/public/assets/stock.png new file mode 100644 index 0000000000000000000000000000000000000000..8ab033cb6165ef09dc5bdf8c10cee0d1944b13a8 GIT binary patch literal 5651 zcmV+u7VPPXP)v0nVI|8Z8w?B zWADtIIiK@=f6w=nN(JEy|+(XgCeMHlbRcN-qOlSKB>1^M?+)V%8x$5pGFU{=QPLB^%$JmWcldD+JYjm#vS&!73fB$AvZRMdR2qwyz*-6ovZ`A=ku-Xb{1L%X-61}~I zXsD-7q4JpkSaJ)_{=~{U;FSm6?UT>xC4g^zlCEk)ChG+FBOBShnC>;7xmrlR(URO#Q= z1hUzN^tJ8>nTAWfJ}sFH;L_Mv`K%a<(>sf;tT@3n@Ge*2Vdil{dlL5)0kmY@X%Jli z1zzwF_A&1?ncB*;|?OX-Za4eDl)O%WS47P1}x9eKhfE)~N2-Sje z1F1GeVX+O1SaE85cWvvaS05-oQ_wH~Iu3FybKRY!%3Qbz58c9J$p=>OWv$+s-Fl9` zm{OEI1E@MxcT6V7-YI*`7M-ksOXK(RfCbh5<2vDeN>O9C0vFgW5zA(P8-rcDSlzj$ ztui^bbKN06*txNSAsiL}jV^+I52^OfI+Ag!0UZ4X&Zn;}C4ji~gF68cPf8CGFVafQ7PPuBJ z|IB9h`(i4(bm$tIJ05OI1>HBg%xvz!GnU6;5&&|`0u(HzDwexJlna@wusV^;tSKO_ z&inMQOKJ9nwN!a(z1U`+yOk~-S(13B`h0nu^*(Ze!5oaT4T-($xyk;hwItNYmAk@$ z!KGZ7LNcr;Ob9~=u8OFV*@Fe@oBF}J2Dkuu>V-{o_SbjNWyFD%fukO0y|3{Mv=wqV z+41%B>4!5@v-O$!d(QR^7OGX#iJoU0A7|+_k)I4ZHw0Yioq`iUbz#a6g0C3a6_$5? z@Y0P5a4S!5pz2F^itVG<1MYijedE3lU%T1*zEnGqldZ~RwcQA2SlaEn&b5;ZW7RCy z4CQ0un|vn*20{DOYyT>`$7k8Pq%ZOcUS_et(;_gU|hJO=4hh@00IM z?QQJ!^j+3Aq@E!MgW@|datJwyX8Vg_)l^SHcQzDGeRj|Q;2vEjo@WdOfNGg8M95ny zdqV)udY=^(fMat-W|7MbAG!cPFRPAITbk`ZyNQ1@+&J)S?_ZK43LE$ zVQ@ue0GaFU%9WDKQmjth%Lf;O010pgaH(>imnG{RoE507_v!Dqog0;

^AgndEzu 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 Date: Wed, 18 Jan 2023 13:37:58 +0530 Subject: [PATCH 2/2] revamped UI as per figma --- components/stock-card/index.js | 46 +++++++++++++++++++++------- components/stock-operation/index.js | 4 +-- pages/trading/index.js | 15 +++++++-- public/assets/dollar.png | Bin 0 -> 1272 bytes styles/Home.module.css | 37 +++++++++++++++++----- 5 files changed, 79 insertions(+), 23 deletions(-) create mode 100644 public/assets/dollar.png diff --git a/components/stock-card/index.js b/components/stock-card/index.js index 0a94fd3..6405a3c 100644 --- a/components/stock-card/index.js +++ b/components/stock-card/index.js @@ -15,8 +15,8 @@ export const Card = ({ stock, operationType }) => { {stock.name @@ -30,7 +30,16 @@ export const Card = ({ stock, operationType }) => { Quantity : {stock.quantity}

- {stock.price || stock.initialStockValue} 💲 + + {"dollar + {stock.price || stock.initialStockValue}

{ display: flex; flex-direction: column; align-items: center; - justify-content: space-between; + justify-content: flex-start; + font-family: 'Poppins'; margin: 10px; padding-top: 16px; border: 1px solid #eee; box-shadow: 0 2px 2px #ccc; text-align: center; - min-width: 300px; - border-radius: 24px; + min-width: 250px; + min-height: 297px; + border-radius: 1.5em; transition: 0.2s; background: #F6FDFB; } @@ -71,13 +82,14 @@ export const Card = ({ stock, operationType }) => { width: 100%; padding: 1rem; background-color: #F6FDFB; - border-radius: 24px; + border-radius: 1.5em; } .stock-card-product-name { - font-weight: bold; - font-size: 1.3em; + font-weight: 500; + font-size: 1.125em; color: #540075; + margin: 0; } p { margin-block-start: 0.5rem; @@ -85,12 +97,24 @@ export const Card = ({ stock, operationType }) => { } .stock-card-product-price { font-weight: bold; - font-size: 1.3em; + font-size: 1.125em; color: #e30062; + display: flex; + justify-content: center; + align-items: center; + margin: 0; + } + .stock-card-product-price .dollar{ + font-style: normal; + font-size: 1.1em; + display: flex; + justify-content: center; + align-items: end; } .stock-card-product-quantity { - font-size: 1.3em; + font-size: 0.875em; color: #540075; + margin: 2px; } `} diff --git a/components/stock-operation/index.js b/components/stock-operation/index.js index 3a6a514..ad8d24c 100644 --- a/components/stock-operation/index.js +++ b/components/stock-operation/index.js @@ -18,10 +18,10 @@ const StockOperation = (props) => {
{router.pathname == '/trading' && (
setTransaction('BUY')} > - Buy Now + Buy Now
)} {router.pathname == '/trading/sell' && ( diff --git a/pages/trading/index.js b/pages/trading/index.js index 715cd4c..92ca80a 100644 --- a/pages/trading/index.js +++ b/pages/trading/index.js @@ -24,10 +24,11 @@ const Invest = () => {
-
+
Sell Stocks
+

Stocks

{stocks.map((itemName) => ( @@ -46,7 +47,6 @@ const Invest = () => { min-height: calc(100vh-58px); position: relative; } - .content { min-height: 87vh; padding-bottom: 75px; @@ -57,6 +57,17 @@ const Invest = () => { justify-content: space-evenly; align-items: stretch; } + .stocks-header{ + display: flex; + flex-direction: column; + padding: 0rem 5rem; + } + .stocks-header h2{ + font-family: 'Poppins'; + font-weight: 600; + font-size: 1.375rem; + line-height: 2rem; + } `}
diff --git a/public/assets/dollar.png b/public/assets/dollar.png new file mode 100644 index 0000000000000000000000000000000000000000..8ceb7d6808a49528cce1c3945145163099f5fb04 GIT binary patch literal 1272 zcmVPZn&+BNsi^X_hL_b$DAFPCGl2^+aw2v~c6k|QRp zKg39A4zCmpqEv|W1EKmuM8z+pqGCl5RIn%oEhwdkrfqC#B2(^;>yq0vNl*OIh2i$y zd1vOCd1q#4FBH0RH8BE2^e})IiRdLJDdh`FsVz-38LXO!6o7L87MKjfm`kVAcCb_v zxd4(<%75wrol2+EolP_utor{1XpLbQ>vdi418}w)A=5NZ#pCf*dwcu!p-`wL*qv2! z7Zw&;G)>zSi9~cEL>a)B0DcEBUj-zkJWoW&0DJ)8835bE;c)9JO)o0m0w67={H#7A zRUiSsXNc%yUDvfmwXWo0I2^tPzRRUe~L>RJF# z`lCWb3zlWgWipwsdwY8i_4f82bR6gHR4Vm(G#Wj*7$^YjP`9ROSFa>67i0k3S;>={ z=L{y9O#W6Z7PEWz?rkfV%j+j6C)Z6(Ol%k(9c^=6SH$D-14LBoPjvu~M5EE$R}6@V zxQc2?%ZjCxX9oudi$O|bu~-{`j~IMCaTATjVj@U3kOyF-&btdyl2XnprILYyp-_uq z7;aZr7q@}gD)Bm#$@DED+n7y6c|RbI7!e(oQf}siZzSz`-r91xeB0F2)UEZz$J&701;B~LKvi<d`5suIlUSvy@WrSeErS8(s!Dc7S`(Yo=*#s@J=!dk%dzn_ZXB=ePFv_wVlM>3MVK z&Yj=cw*9A+k`ujF;&qX#MU#j)YM%nQZ&g4V2)7Im4{zABXV2ZaT<%fVb%%EC+O;p4 zOnzwF_AwsR0*-dSZQDEzEbroy=A`DgwT~K=ddtYj$i_mU@Sx*3!ZkAGh<3B!K*Uu}ZmfswO5VDet z7kQ}b`g4~8i1!E~p76H}!!YI@$9e2hb=3AnB9Z(3FV>2;M}-iN)HXJ_;kP<~SNsvO zZTn(P%wk7F2S`dYjZRj z{edf{0kDg5%nyXuJXIzViIZbvV`UrKR-QC^0>qk|?FwP7N4CG6t(p@t%GwYjTJV>dOGI8Zo zIw(T??}rfLY&DS$!#JHvrK}*Crt*|hJ6zZO!gbxRm~y$?;emmHNK=glDd)j$dV0FG io-S)?2O0mbc>e-pt_nSp=AWtn0000 literal 0 HcmV?d00001 diff --git a/styles/Home.module.css b/styles/Home.module.css index e05e993..0af7cbb 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -1,3 +1,7 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@600&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@700&display=swap'); + .leftSection { display: flex; flex-direction: column; @@ -21,13 +25,24 @@ font-size: 20px; cursor: pointer; margin: 1.5rem 1.5rem 0 1.5rem; - width: 7rem; + width: 8rem; } .greenButton { background-color: #2ecc71; text-align: center; border: none; } +.blueButton { + width: 9.6rem; + height: 2.75rem; + font-family: 'Work Sans', sans-serif; + background-color: #041187; + font-size: 1rem; + text-align: center; + border: none; + border-radius: 0.625em; + margin-top: 2.125em; +} .redButton { background-color: #ff3838; text-align: center; @@ -74,15 +89,21 @@ } .trade { - width: 100%; - text-align: center; + width: 13.125rem; + height: 3.125rem; + align-self: end; margin: 0; - padding: 1rem; - display: block; - color:#540075; - font-weight: bold; - font-size: 1.2rem; + display: flex; + align-items: center; + justify-content: center; + font-family: 'Heebo', sans-serif; + font-size: 0.875rem; + font-weight: 700; + line-height: 1.313rem; + color: #FFFFFF; cursor: pointer; + border-radius: 0.3rem; + background-color: #0094B6; } @media only screen and (max-width: 600px) {