From 54de1fd35be059198c640bec9a7dc23ffd0397e5 Mon Sep 17 00:00:00 2001 From: lakikowolfe Date: Thu, 21 Nov 2024 14:51:46 -0800 Subject: [PATCH 01/15] get assets from figma --- .../elportal/assets/access_icon.svg | 16 +++++++++ .../elportal/assets/explore_icon.svg | 34 +++++++++++++++++++ .../elportal/assets/uncover_icon.svg | 21 ++++++++++++ 3 files changed, 71 insertions(+) create mode 100644 apps/synapse-portal-framework/src/components/elportal/assets/access_icon.svg create mode 100644 apps/synapse-portal-framework/src/components/elportal/assets/explore_icon.svg create mode 100644 apps/synapse-portal-framework/src/components/elportal/assets/uncover_icon.svg diff --git a/apps/synapse-portal-framework/src/components/elportal/assets/access_icon.svg b/apps/synapse-portal-framework/src/components/elportal/assets/access_icon.svg new file mode 100644 index 0000000000..cc5b95773b --- /dev/null +++ b/apps/synapse-portal-framework/src/components/elportal/assets/access_icon.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/apps/synapse-portal-framework/src/components/elportal/assets/explore_icon.svg b/apps/synapse-portal-framework/src/components/elportal/assets/explore_icon.svg new file mode 100644 index 0000000000..1424fb5a81 --- /dev/null +++ b/apps/synapse-portal-framework/src/components/elportal/assets/explore_icon.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/synapse-portal-framework/src/components/elportal/assets/uncover_icon.svg b/apps/synapse-portal-framework/src/components/elportal/assets/uncover_icon.svg new file mode 100644 index 0000000000..dc55ba2dde --- /dev/null +++ b/apps/synapse-portal-framework/src/components/elportal/assets/uncover_icon.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + From 6ebd54b5b1a1afdaf13cbc90c37bc25cb4c38e1f Mon Sep 17 00:00:00 2001 From: lakikowolfe Date: Thu, 21 Nov 2024 16:26:05 -0800 Subject: [PATCH 02/15] connect new component to elportal infrastructure --- apps/portals/elportal/src/config/routesConfig.tsx | 4 ++++ .../src/components/elportal/ELGettingStarted.tsx | 13 +++++++++++++ .../src/components/index.ts | 2 ++ .../src/types/portal-config.ts | 5 +++++ 4 files changed, 24 insertions(+) create mode 100644 apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx diff --git a/apps/portals/elportal/src/config/routesConfig.tsx b/apps/portals/elportal/src/config/routesConfig.tsx index 9dc8dd5912..5e339f85fd 100644 --- a/apps/portals/elportal/src/config/routesConfig.tsx +++ b/apps/portals/elportal/src/config/routesConfig.tsx @@ -58,6 +58,10 @@ const routes: GenericRoute[] = [ entityId: 'syn51449135', }, }, + { + name: 'ELGettingStarted', + props: undefined, + }, // Commented out for release (see EC-485) // { // name: 'UpsetPlot', diff --git a/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx b/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx new file mode 100644 index 0000000000..98577e17b6 --- /dev/null +++ b/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx @@ -0,0 +1,13 @@ +import { Box, Link, Button, Typography, darken } from '@mui/material' +import React from 'react' +// TODO import assets + +const ELGettingStarted: React.FC = () => { + return ( + + GETTING STARTED + + ) +} + +export default ELGettingStarted diff --git a/apps/synapse-portal-framework/src/components/index.ts b/apps/synapse-portal-framework/src/components/index.ts index 498de572cc..907d65a60b 100644 --- a/apps/synapse-portal-framework/src/components/index.ts +++ b/apps/synapse-portal-framework/src/components/index.ts @@ -10,6 +10,7 @@ import NFBrowseToolsPage from './nf/NFBrowseToolsPage' import ELBrowseToolsPage from './elportal/ELBrowseToolsPage' import ELBetaLaunchBanner from './elportal/ELBetaLaunchBanner' import ELContributeYourData from './elportal/ELContributeYourData' +import ELGettingStarted from './elportal/ELGettingStarted' import ARKWelcomePage from './arkportal/ARKWelcomePage' import GenieHomePageHeader from './genie/GenieHomePageHeader' import ParticipantsBarPlot from './crc-researcher/ParticipantsBarPlot' @@ -47,6 +48,7 @@ const PortalComponents = { ELBrowseToolsPage, ELBetaLaunchBanner, ELContributeYourData, + ELGettingStarted, ARKWelcomePage, GenieHomePageHeader, TabbedSynapseObjects, diff --git a/apps/synapse-portal-framework/src/types/portal-config.ts b/apps/synapse-portal-framework/src/types/portal-config.ts index bcdc1b87a6..c35ce50a43 100644 --- a/apps/synapse-portal-framework/src/types/portal-config.ts +++ b/apps/synapse-portal-framework/src/types/portal-config.ts @@ -188,6 +188,10 @@ type ELContributeYourData = { name: 'ELContributeYourData' props: undefined } +type ELGettingStarted = { + name: 'ELGettingStarted' + props: undefined +} type ARKWelcomePage = { name: 'ARKWelcomePage' props: undefined @@ -400,6 +404,7 @@ export type SynapseConfig = ( | NFBrowseToolsPage | ELBrowseToolsPage | ELContributeYourData + | ELGettingStarted | SurveyToast | ELBetaLaunchBanner | ARKWelcomePage From 3c6198f384575f4a1dcedb4a627506d1bdeea0d3 Mon Sep 17 00:00:00 2001 From: lakikowolfe Date: Tue, 26 Nov 2024 15:31:52 -0800 Subject: [PATCH 03/15] add content and styling to getting started section --- .../components/elportal/ELGettingStarted.tsx | 66 ++++++++++++++++++- 1 file changed, 64 insertions(+), 2 deletions(-) diff --git a/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx b/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx index 98577e17b6..e20bd4d154 100644 --- a/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx +++ b/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx @@ -1,11 +1,73 @@ import { Box, Link, Button, Typography, darken } from '@mui/material' import React from 'react' // TODO import assets +import exploreIcon from './assets/explore_icon.svg' const ELGettingStarted: React.FC = () => { return ( - - GETTING STARTED + + + + Getting Started + + + We provide all the help you need for navigating the portal and + accelerating your research. + + + ) } From c6192a764c3e2b9a7675ebd5027ee2226d420777 Mon Sep 17 00:00:00 2001 From: lakikowolfe Date: Wed, 27 Nov 2024 16:15:27 -0800 Subject: [PATCH 04/15] remove center alignment, use container Box padding; wrap text --- .../src/components/elportal/ELGettingStarted.tsx | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx b/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx index e20bd4d154..b2677a71ab 100644 --- a/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx +++ b/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx @@ -8,12 +8,13 @@ const ELGettingStarted: React.FC = () => { { flex: '1 1 auto', width: '100%', height: '100%', - textAlign: 'center', - paddingTop: '50px', - paddingBottom: '100px', }} > { style={{ color: 'white' }} sx={{ pt: 2, - pb: 1, - mx: 'auto', + pb: 2, width: 'max-content', borderTop: '3px solid #ffffff88', }} @@ -45,8 +42,7 @@ const ELGettingStarted: React.FC = () => { sx={{ mb: 1, pb: 1, - mx: 'auto', - width: 'max-content', + maxWidth: '100%', }} > We provide all the help you need for navigating the portal and From 5694743f868c9157c8337982a2f66a0086144d13 Mon Sep 17 00:00:00 2001 From: lakikowolfe Date: Wed, 27 Nov 2024 19:31:18 -0800 Subject: [PATCH 05/15] sketch out explore component --- .../components/elportal/ELGettingStarted.tsx | 46 ++++++++++++++++++- 1 file changed, 45 insertions(+), 1 deletion(-) diff --git a/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx b/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx index b2677a71ab..5f6e22bd48 100644 --- a/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx +++ b/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx @@ -1,7 +1,7 @@ import { Box, Link, Button, Typography, darken } from '@mui/material' import React from 'react' // TODO import assets -import exploreIcon from './assets/explore_icon.svg' +import exploreIcon from './assets/explore_icon.png' const ELGettingStarted: React.FC = () => { return ( @@ -64,6 +64,50 @@ const ELGettingStarted: React.FC = () => { Visit Our Help Section + + + + Explore + + + Get the latest data, publications, and news from the Exceptional + Longevity research community. + + ) } From 8888ee175a80f70636f3479e7ee82f28cbce707c Mon Sep 17 00:00:00 2001 From: lakikowolfe Date: Wed, 27 Nov 2024 19:34:07 -0800 Subject: [PATCH 06/15] tweak styling a bit --- .../src/components/elportal/ELGettingStarted.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx b/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx index 5f6e22bd48..8c3016803c 100644 --- a/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx +++ b/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx @@ -7,13 +7,14 @@ const ELGettingStarted: React.FC = () => { return ( @@ -52,7 +53,7 @@ const ELGettingStarted: React.FC = () => { variant="contained" // TODO: href="" sx={{ - backgroundColor: '#5BA998', + backgroundColor: '#39AC97', border: '1px solid white', boxShadow: 'none', '&:hover': { From 002841dbee2c588a8d5125a7983c9d0b37ac4ef3 Mon Sep 17 00:00:00 2001 From: lakikowolfe Date: Mon, 2 Dec 2024 14:09:06 -0800 Subject: [PATCH 07/15] move icon into seperate component --- .../components/elportal/ELGettingStarted.tsx | 92 ++++++++++--------- 1 file changed, 50 insertions(+), 42 deletions(-) diff --git a/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx b/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx index 8c3016803c..f52290803f 100644 --- a/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx +++ b/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx @@ -65,52 +65,60 @@ const ELGettingStarted: React.FC = () => { Visit Our Help Section + + + + + ) +} + +export default ELGettingStarted + +export function IconSquare() { + return ( + + - - - Explore - - - Get the latest data, publications, and news from the Exceptional - Longevity research community. - - + Explore + + + Get the latest data, publications, and news from the Exceptional + Longevity research community. + ) } - -export default ELGettingStarted From dc2f83a3e15cfbd856874a67edd1330d9f025531 Mon Sep 17 00:00:00 2001 From: lakikowolfe Date: Mon, 2 Dec 2024 15:05:08 -0800 Subject: [PATCH 08/15] replace svg with png --- .../elportal/assets/access_icon.png | Bin 0 -> 5833 bytes .../elportal/assets/access_icon.svg | 16 --------- .../elportal/assets/explore_icon.png | Bin 0 -> 4584 bytes .../elportal/assets/explore_icon.svg | 34 ------------------ .../elportal/assets/uncover_icon.png | Bin 0 -> 6016 bytes .../elportal/assets/uncover_icon.svg | 21 ----------- 6 files changed, 71 deletions(-) create mode 100644 apps/synapse-portal-framework/src/components/elportal/assets/access_icon.png delete mode 100644 apps/synapse-portal-framework/src/components/elportal/assets/access_icon.svg create mode 100644 apps/synapse-portal-framework/src/components/elportal/assets/explore_icon.png delete mode 100644 apps/synapse-portal-framework/src/components/elportal/assets/explore_icon.svg create mode 100644 apps/synapse-portal-framework/src/components/elportal/assets/uncover_icon.png delete mode 100644 apps/synapse-portal-framework/src/components/elportal/assets/uncover_icon.svg diff --git a/apps/synapse-portal-framework/src/components/elportal/assets/access_icon.png b/apps/synapse-portal-framework/src/components/elportal/assets/access_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..6823bb5bb1f725e3140ccdeebf93abbeb8862d03 GIT binary patch literal 5833 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 Tv*v@d00000NkvXXu0mjfK2;3H literal 0 HcmV?d00001 diff --git a/apps/synapse-portal-framework/src/components/elportal/assets/access_icon.svg b/apps/synapse-portal-framework/src/components/elportal/assets/access_icon.svg deleted file mode 100644 index cc5b95773b..0000000000 --- a/apps/synapse-portal-framework/src/components/elportal/assets/access_icon.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/apps/synapse-portal-framework/src/components/elportal/assets/explore_icon.png b/apps/synapse-portal-framework/src/components/elportal/assets/explore_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..505bd76aea025887c7055840dc840117111e3b34 GIT binary patch literal 4584 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 Sg~Zta0000 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/apps/synapse-portal-framework/src/components/elportal/assets/uncover_icon.png b/apps/synapse-portal-framework/src/components/elportal/assets/uncover_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..3fa0467b7ade0f2fa29f5be69362eda24c08ac78 GIT binary patch literal 6016 zcmV-`7k}u9P)%4pY7%5TU zp=ziqdC5cENQeM7NL6UPj;IthrNxPPh#kQ?ICg9T*x0PS4&KfA%*^lZnRCzFJ2Q9w z-QE34qdPNq?!9y8{Lb(H?{@}d33>2)W?OHz0khqZMTC#Z60+j9Xj7~*+dHyIuw0gq z1#px#&bhS`63wE(62WA{oGfw-$P%((F4}G}+p_4~C9_?TB`l!>Aeh@FRDPGRge5GY zGgipFh^gbZ`v!~MtX?glXu-<)NJ8^?TB^mZ66!_oNgrS_E4^5VcSxv@u+QXyfIg7w zt)b!Q9;znR%vkIMbDP9n3+#U=A-Aat{MJng{X2}uHEA#wvq)l)W+db=3f%lv5{m-U z9L`pk9+eu4-4DZTM(KpJT$fOXsVg?5KAt7?0gAL#AU*<zt;=zn_OY`>9!R_6AZ*8|ZtFunokXr(tdYRYT}4Y!$)@_}gmq}f(V_Pi1oI7xLQqUv~V$yN5q5yS8o%UWW%=sV7ewqWMQD4{)eEC7#juw$$hi zUa)3$L@dW7RA>W0D2Gq}uN;2kCjlqPipM{DpFFhf9+&H&7~h{kG0p-PXrV|Wu8y`ldhvOrbQ}11n{XhJHoWF8edclYhSKs{NSB<#(q!xwm@ zeu=5Wu4M3K7=oEFFOTRkT;*Fo{?FJoa0$4Da-FQ$fA0gq=PgVa zf_Y4e2a^WfjAsFNL65mEHKD0yH4jMBAL0KH5263rZXb*k+>XS8GW+zGACjR}s{(~L z55eenT14}x`Rx;iXr7c}!Gt*{A>sU1YDN>Q29Vb)opUQZ=h_gNy9e|bh1Mk&0FfY~ zKnF{xEBJ0lX+F@!7(< zM%hDdUz9F#JDS;V=`qA|^wiISeK^SX_C6+qMg)EBrNf59Tnx{f<2=@q3&avSjfHgy z3NWH|y>)!q-1i?!NMvK4>rtd9r9o(FA)Cr=2mqenMl6vfWMf=+;4Vrm0CN~;+|bI^ z^7M{}f_+c~u>f?S^H*cm*FMi>h}v8AV9%aCLub#P{f30r+?e>WM;eBvS3br}M_b05 z!@x~%y}ey`0x=T-QDj>)hfluNvuW+a5sN?#{=sue%Qf)kn{WQzv(G+zY~#j_kJuMX zo;hvq{Z;$aBhoNbMKH+i4Kkm%nhAz5#*|28UdDrc(R=t?M)i7I5qX6w$04U{MY8qoBw`bU|>k!KmkWoe*K5f`MzgN8iXp$YCG)!fiCS4x+N&g!)e)sNMFpit|@L2xc(87L-!^y)tkv zt{aU;uWdxnf8hTlDc$@}%jz2C`6O6NOg^}`K4%E#11S+@6AYeN5{T@y1OCvBG$JQ_ zu%}IA`Dd|*t89C0(-u87syp_ev0tVba^Wb`Ya`#vsCyma=II>|NB8%t`7dwBtSpaM z8WX=*a!Y)fK}e0R9`U@WLWjX0fiDHc7xVbT=s|iNQySZ02CBcr2d=RQCN;LM-yr)x z_l3ZE$^r%v-%h7{@}OnqC_&gM5(F~Gx9q#w!S79 zFfH*i&@ubXP%k+XSP0$nQxsgs=Ulh`(5lrPKL@ecif~#C8&wR8>+2@sorJ;oZ<8N9 zst4o8Uk>hh*VaFlom;lG-2>;@;5uA)^z=#lZ7ji2PkJbMF(^*z41{}^s`%z57)A-M zkvAt}Laf>M@DC2<@{Jrm`IEpYXJcfrv)<>-+)U`E136r4RCh4vbt1q?*x)V)KL6#m zd*S@ZP)Ixu5Z}JQCJ&B=Mu?`;Qy#JsOiyVC3KTdqV-Qt=?t*AZiWtK|FjbNBE|`Tb z!Jy!F0$hy2P|?6(9z6cC_u6lM>8mXc7W!~H>qAbCObfox!AVfw6^N|i&SDb9J}DAj znh0`{)vShCwA%qsa)abI&7aX7pDuz)y#L-W$cqpDZJ;3fBFf6XZ7^t^qR)XYa=bk# z$@kbBzi)pJgWin`CUGvGnB_NZ0(;yz?!NN2O21PH;-b`~AL@mU13wi}mW0Bw%OZ^o3-!8I|?b;MX{N8_&l zHtaHbi4T0%M`#cK(LJ&I;Tk3Y;%e8we<$$#I)pYQ4L}xxK|Z?4$7$0J+7S5_CiR%K z$76r9FBmA7wWB*E=@0lU-1qEoKoT^)0YGGM6vg(@d5)Jx6oDjyK0bBYd*0?oN8$=@ z0EorWi4IBwkX4+}-2j~h;=x4zwe+Tyzo0uKL+$dLhlYNEM>J`MBVvx9iF;6|;8Irs1JK)YUQ=^h@a1X-0{O*=q56`_$&NLU8a zLY~b2BZkZD+!CMRaG9^Yl+Hx&6{Jk~kmMq;xe)~AT!AL}s>`2O!c8F)XlTL;owQLt-2qNZKu0}_BfvDz6GG?)27dhWJ6gx*oZ#k>g!{2YO_DN=b!cHy z8U&kQ2xL{g$O2Pv=E8*w&*=#rT-y(mhG={~82}ODfJO%59@0zMb>u>aQ^FrGz>PukhfAqf%nHGUr_S}_XI3E$aQ_? zxl~`^`eg8T@Oj%o*NbSfEg~frd^v93a5qIZjekbMw2;PFM~WhqUQHL&u>Oc-!-QD9 zPe_PX_jnc)`-nAjnXOmM?6(uY2|VVp#9R(x$ClFM4cm%r8vl&J^CcDc_k2(-`T(Pdl?p-L?}O;$xVjekb0;H(82 zE^75fEk%e$6O8*OvQFieMZm*z34%d`{i{-(6lAo0GCByh)e>4O@w^$t73bLO-({b3 z_F&pXVVmq(0*x-52{Pr$;f3NhN=PglqT|X@WX2saCYPgR%DT4mWYj0aK;!lwGXX(Y z`Au^Flk=huHH|CTaig(KTZ7HU{?9!SY%YA)YMN#qMK+CpM%qnjxb~oP&fD~{Y!pc_ z+&H76S?v6o_a!@?lBl5l@jtsS*j%d#gb{3ixwV@_J+|rhv*zM<1bPv0#gtDRxq-$s z{uya^)+HGul_gFoiq7f19BsV>CnqH$7$2b|RT8v)iMd7z1};!W^?)4~NUC{q1C2hU z2sHYtFPM;(cNi}#2|RajG7?LZVr7`6tt7C4cwj)$LEL;7HP^F%h_o$QT(0oFH(qP| zOwK^#g!lo0z}gT^LDNU60i6g&7g>N?z%{CDlZ8)aj2+nc{oj2`vO?LvdWl^&5qCnWO8gxn!tmVc56C<5C@=Ls-L zk+m(Tehf7FkYvk~&F`9RM3lQ0(HDiNzIrV9VWX>Dy^(KXCFQDQEo&JxgsVCg_hai< zN#AAvcG7=v?r+L$dkvR)T^focf}!pCC!BM&5zHb3N^j#D2`Q3966UaNf}q3}--Rau zQG1LrS)5oa4Mr!W_pF2(IoCiyMcMpRZ$XTm0-fW!)2YyGp&;~N-zWWmP6SglS8=N* zA;P5A6tVVWY3r@~72V2vn}n*0@ezGmH3`rd(UAxz#5kARB4eQwOMxI`5^=_}F3k;6 z6~UlfCsj?lf2>ucpA^hnLK`3!d=J_`5SCTST9Z{Jfv2jPbd}wtVBQki0D;)eCYhkO zO9`lQt$}xb(C?Hf`s zddiW1?K= zYuR!5jrnFlc_ZC5g9-T=37a)tSE|bZ#OE*oslJTG73tP4IrzN#C7k7pN-VfW{yk})VFdGCTZJFf{M&hAy`^9$JowR-jHpG$kQ<}1<=*aVX% z?VxCk>rNWat^y*k``CreklQosf@1sz#G>qiJD-Sj3i4RQT&ph-O+}3djy=*!B0V4vIz*X$%zEQ=hbTeOSAUZbKPLlTspFG3l1cgnfl$>C;nEEEwA%=Uncp zNhKIQsDd;p?VxBBlE!c@YKYtf<<hz@&62RxAom0(9PKKZ&$xb~$ zww3B#Tuf;Ub~%cV^EvfWC!~1z+#tDEJy8xrB^`u9MEM;l-yJ<}ACRIrlF)iRoRx1& zKLXvvu1)ey45wk^gp>oVn$$I`a#u|%!9XByN^we7x2nn5f>8&y@96ktp1%8ifo`3t z+_;#OTgX;O)ue4!7ey=(30mHY=okfyz+^zx(E{a}N-2i>C`nr3>saNY#|DTzUnY8$ zZje$Es2JT9*0BaF1A?K`lp&hO#J_sHjX#lw*XVSD%U#?y9~p}9UEnVpmT>GK7+wFN z5|lwOT^&ME!Fk7qe`zWodFZS>(iDG-BJ5^0FKT?;#nW+WLb?M{kC#s;dD;E!IC$*E>~d3`wY;1eUV`GRD95UEGaeRykj$=PE_Gs_V%hNh(Vl z`6j`m=&}YiVQTd?5mClv*Vn4*ZK(5lI%!_yYtZaT~$;i}Ml z>Y|!8uZ&&`cY{>fy#b&=y8%VG4RYI6P|oPikX44!Z*UT%d=cp)n>A}+7=6ZY@Lx%R zsJeRtTq?7S?x!AbE-GG<4?P58Sr%=W>#5hQN`tBi24W!`@1_g-SZ6D@HECU>rUUE9 zN${SOasj7yz4t4nK-AG6hICN0@{7?cu@Rqs)FK#Wsq^6b0&X=x1uMk*+#u6ZAnG6( zfXv3$PgL@v70D*`c>lc*NWZ}$m@*Q)UFe!sylPvxLaQc=A{eyNGS(oBE$LU}V&zr9 z5v5hFAAlncgJDWSf+@nUgI+}2kyX7C41`iz)uhX1@MrWB(R8S2tO7+=O|oIl-t2{7 zv@+lpiC0Y)E#_!cH>C#<4ZT)&ZrRp&y~eXrNmdX^=1;<^>hLY_`&u=LhySBq#0WkW z)>LvU4^U(at(uGq-^h;{mHx%LjO$RlX$L&pR`o?iVDgVfzx|e;$P3*0t_I%Lthoqa zT||jS2c}SMh;qOe_eET$8Ixi-nknJ}zP3H{9!0SRF+n zZIZVQpR!s#X;GFRg*D9;;JxQym)co(4j-a)6>(f?EK}+m(T6pyZ8KE zciojMzoG~K3nJgHzQE02YY(e`<01?*3!ALv6si|oP3>+e+O5F_NTrF{;flw|<265Lk4g-p= zn&ctDigleP{0gNn;^2TmDmCpOC3MXyew$|iv1H7xUK8$_`9fCotdS-DCmA3V&2 - - - - - - - - - - - - - - - - - - - - From 2f83b3d56660e5cbd68ea1b2d79b9c2c3038e71d Mon Sep 17 00:00:00 2001 From: lakikowolfe Date: Mon, 2 Dec 2024 15:05:58 -0800 Subject: [PATCH 09/15] add props to subcomponent --- .../components/elportal/ELGettingStarted.tsx | 32 ++++++++++++++----- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx b/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx index f52290803f..e9a6cb157e 100644 --- a/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx +++ b/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx @@ -2,6 +2,8 @@ import { Box, Link, Button, Typography, darken } from '@mui/material' import React from 'react' // TODO import assets import exploreIcon from './assets/explore_icon.png' +import uncoverIcon from './assets/uncover_icon.png' +import accessIcon from './assets/access_icon.png' const ELGettingStarted: React.FC = () => { return ( @@ -65,16 +67,31 @@ const ELGettingStarted: React.FC = () => { Visit Our Help Section - - - + + + ) } export default ELGettingStarted -export function IconSquare() { +export function IconSquare({ iconUrl, headline, description }) { return ( - Explore + {headline} - Get the latest data, publications, and news from the Exceptional - Longevity research community. + {description} ) From 71e3a0bc13e04c7a10c184c9614c78f0df1a8726 Mon Sep 17 00:00:00 2001 From: lakikowolfe Date: Wed, 4 Dec 2024 12:23:15 -0800 Subject: [PATCH 10/15] tweak styling to match figma design --- .../components/elportal/ELGettingStarted.tsx | 62 +++++++++++++------ 1 file changed, 42 insertions(+), 20 deletions(-) diff --git a/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx b/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx index e9a6cb157e..0b38e2921f 100644 --- a/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx +++ b/apps/synapse-portal-framework/src/components/elportal/ELGettingStarted.tsx @@ -1,10 +1,12 @@ import { Box, Link, Button, Typography, darken } from '@mui/material' import React from 'react' -// TODO import assets import exploreIcon from './assets/explore_icon.png' import uncoverIcon from './assets/uncover_icon.png' import accessIcon from './assets/access_icon.png' +// TODO Fix vertical column space (getting started section is slightly bigger) +// TODO Set padding for mobile and desktop + const ELGettingStarted: React.FC = () => { return ( { display: 'grid', gridTemplateColumns: '25% 25% 25% 25%', position: 'relative', - // TODO: Add padding for both desktop and mobile pt: '80px', pb: '80px', - pl: '50px', - pr: 3, + pl: '80px', + pr: '80px', }} > { flex: '1 1 auto', width: '100%', height: '100%', + borderTop: '3px solid #ffffff88', + pt: '20px', + pb: '20px', }} > Getting Started We provide all the help you need for navigating the portal and @@ -54,9 +65,14 @@ const ELGettingStarted: React.FC = () => {