From 9690797d038d79acd9ab784004a85e9ebe333478 Mon Sep 17 00:00:00 2001
From: mohelizabeth <127050603+mohelizabeth@users.noreply.github.com>
Date: Mon, 5 Feb 2024 09:48:45 -0800
Subject: [PATCH] Fixed Ladder Position (#448)

* fixed ladder height

* Fixed ladder position
---
 public/LeftLadder.png  | Bin 2387 -> 0 bytes
 public/LeftLadder.svg  |  16 ++++++++++++++++
 public/RightLadder.png | Bin 2238 -> 0 bytes
 public/RightLadder.svg |  16 ++++++++++++++++
 src/pages/Demo.tsx     |   4 ++--
 src/styles/Demo.scss   |   1 +
 6 files changed, 35 insertions(+), 2 deletions(-)
 delete mode 100644 public/LeftLadder.png
 create mode 100644 public/LeftLadder.svg
 delete mode 100644 public/RightLadder.png
 create mode 100644 public/RightLadder.svg

diff --git a/public/LeftLadder.png b/public/LeftLadder.png
deleted file mode 100644
index 49360fb74b0a3280f927e6d3d6b2479e081e4c86..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2387
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
XGo8y$3JF*Kfne?~-p&<H2QT~s+ulwh

diff --git a/public/LeftLadder.svg b/public/LeftLadder.svg
new file mode 100644
index 00000000..50a810c3
--- /dev/null
+++ b/public/LeftLadder.svg
@@ -0,0 +1,16 @@
+<svg width="36" height="490" viewBox="0 0 36 490" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="25.8873" y="36.3733" width="9.58783" height="453.504" rx="2" fill="#C4C4C4"/>
+<rect y="0.898438" width="9.58783" height="471.721" rx="2" fill="#C4C4C4"/>
+<path d="M6.23212 38.291L27.8047 62.2606" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M6.23212 150.469L27.8047 174.438" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M6.23212 258.811L27.8047 282.781" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M6.23212 370.989L27.8047 394.958" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M6.23212 75.6836L27.8047 99.6532" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M6.23212 187.861L27.8047 211.831" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M6.23212 296.204L27.8047 320.174" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M6.23212 408.381L27.8047 432.351" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M6.23212 113.076L27.8047 137.045" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M6.23212 225.254L27.8047 249.223" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M6.23212 333.596L27.8047 357.566" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M6.23212 445.774L27.8047 469.744" stroke="#C4C4C4" stroke-width="5"/>
+</svg>
diff --git a/public/RightLadder.png b/public/RightLadder.png
deleted file mode 100644
index 807d7bd92bb5a09f855f64c77eda7daec428d384..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2238
zcmY*bdpy&7AOCHrQTQ>65fjlV(PYUyKa6Eta&2x!WKR(>g?h3~HrB*ka#Zw?OB!=s
za*k^*2T|m5(jlFaip?2G+Hn{?tEY3G^ZfDsd@rx>_x1gJ-k<m9{r#r6yAqX^P)Yy*
zD3eJ9Pg!pO0I)8^2HEIGl;f<dQ;Z_{MFYSl<d+5m^8T$QTZBb>5*>i*C%PipL_P%X
zf(HOW#wO_r1pq)CArtVFf5GPRX|6hCuzMnj;87gf*bzswx1FxJu48248!dOBqf-%K
zf}k^_<nAH5i04=*X_IU0uC^*;vy_t|P0jqkPX`(bG!!t@)tL^n=CGH)X)92->FTEG
z+cBiM4BZQ73eufQKD`U7)NZedpP)rXs$6FZgm^}u_+GGz$M!2h*7A=Hd{sKmA+9^t
z>N4MfrvJYbNtCm6^u4(Fwr_c5CGOpPPibkX=#~}jfdX|8vVC@OaS>L(u-meBdC+Mk
z-~bM{vLu<C7zircfeJn|%&IYxj32PJ*4~&r^*wujmG^@20h{$Jd6T`{!exek-(2`&
zXIc#gzO3FfLy15Ov0G*+72T^FYlX=zj-TT*Uu=joO3%nh;C<fDbl=NC*waK+g`hn1
zWoO%I7#b9e1q1}l#YPy`My&jPVcwRH4&K8V-M<91(0`BItwB=m=q{^xJ`ysdUkZeA
zY(}FlCFtPe>7Uovj1Wd_l9wa=09_&;KMEe&JnW-v2*fYdv|jq-94blOtN%e*FHm#5
z6}L%AQ$K}(O&gS!Y(evdB=>C`AiFvuM*dk~8zbP;T*VUUa2%tJ46GJ;&f?Tk)#B$?
zH2_aMiC?6cbRX4eU^xmZ6;-kKa`M6uEJRK>0<JdE5w!FDBfoE;>)8^d#}D1Mv73?X
zV`avOjKLAJZ7OQbOOGEr4_|N-HiSMa>Dhv@5j5`}%OYX>T+m?v8f-L!F42$?1_<>2
zzSaO-tMhu_uSCtRN^(KWnY=?yF<1g$YuE$iDpEl0%dsMBbqs-z>e0&qBuw}1916Db
z^tII8r}!xK_DGj({}?0TIM0c_Dv#FVzw#1g3I72XIP;7zLKOaegLycoTWDBJ_HI2G
zPGloE->KUx7*w&N5H8pxhtLXx&2Y$qf*<;4g1OeC3Hxs}s=T6VfRWsU^|J)L24}0p
z%yh*`FlN`Wx28--qo$?(AWMfXbgRXb31$`+_8!$f-}FPhg{0CGv!WXZ9Mz^jFl`a=
zR13KR6NN%3XAe_Y!LH&$+37Bk;*@jL3?2H5u{S*h?`;|dysU4uZ4^Az?c_q`%PvR`
zMQXg`W;4mcqQ%@w(vCj&K_{B(miB6h<@J!pPlI3@Z62*Qo}=zRmpXDG{CH`q?A+es
zADqqE_Q`6a;2AN#-?W($A;!muyn6H~H;$ha<6}iAw}J7Yo`TujlQ#&ONKBo$C9vZ`
zW^O48Ze2%lY!L8r{^m-sUK;cU&xJ;IunwbFrmP0gFUGQAwYQ(XowAzFMp2|rkOQHI
zCd&_X&^CVG)^3_*Pr;o!60$AJHSF3x=Lo5jeAXsIl`wJn+(-o%;w-!52sUcAm0L&(
zr>yMm3V8d|#&&pgKc)PnPELa|_ZFkz+D;Tlc`J$Kwg1*~W%p&R7*8a2^*FBo4jZ-s
zD<QqHijskISCO!bk*)rG%<#Cy&RM)RJ?>}oX|>8Sf9c&xGd>r}Tz07vgp3GI<I|wr
zuuz(~FInxF79D+pfbHrZlT$Q2-^YcvbIbrMiR`)tfr%{kd|B)ziN;`Eh5u$76e9T-
zDJC%!hnNKO!q?l0aw9`(8V)+RtIU3rFbARsXV`vGo{>80ch6+Od7h`VeJgI)ni-$r
zVpM(E*fy~Sr(PabW}PU@M~$&5yVlpmR|dv5thTa|1F?C)Ne;@lek;!y2nEi=+fG?7
zoD~q|LIF%yZxHr`T32r<_H{7gPCi-rbxET4H)*Q}b8nC0eL@<e;dT`p^Z(F3j|t=^
z!<35rT(p#ml(%)DHw;SOx=!8-VYr(tjDo$$Wo)kg7&f6WS0BE7Bzi!9IIDL&x4<r8
z-C(EDfVABQxdrcAW$eE>t5<5@w8ZaMZ3PWfn0dkV<o8K6Fm&wn#*6U4>_5i!VlaWJ
zLs<xiW6I7H3MQO?BIW8nJMW^BV8o#G{<mD2T1jroDD;pEMT&FjRJZbhmruuzth8!G
ziicxFq122=r_62Dg+s%0b4E7DDveE<wMShVw6;^l<?|!X8A*P^GOgmlF;>%b#`7^&
z%U3HNDJ{sWE8;@NMI~iZS5Ir=np)p?uJt<*yTJ@S$U<%>yY_#wFRLGoKS`T6n)Di!
znIbS!+}BO(=R##)=_kmGdg`x5?*fIRNhO2?mDJIsgP?bXVk)}Q8)?SA8BSH*#VDyp
z_AYZ}UZlNh5M1%{#}J(=6p1-cFauxqpsSh%yyU+Mg{RonA7$Gh2=To4{wGTb$p^`H
z4E08`9YTGO=?*A5MRpX@qPo#mN>jej-@_68#tPe0Kz?{v0VDDK3y7(ysm?R9v~v)X
zJq2d6Sh$eKSFLc{{pS-$&9F`~V#qZ=8H@+W(jFNsVEl($;yE}eB{sH>sZDoCke-U7
z4o(Ma(cOQW<)gm}M1_wSe_rHH9ZcP7PMH}=Fr})7<($RJuT@<Tc6_M_`PM0$8`i3Y
zW&vyCiQ<v^Zl&j?6={$#e4WIFCRo*DtUN!yLD;G5F%xYT&4*=DgZ~c4Y!(zOMP$6J
zD*iE)E4Y$Axh@ike);(E<LCHED1Idd<=jesbvCeW@cWl0Q_7gXztNfo_gqz1<nPx%
q9P!Jq>Y9nav@lR#k3GU^9BQjZw!?;=b<$+t4S;;ml~C;v#QYD5Vhb4n

diff --git a/public/RightLadder.svg b/public/RightLadder.svg
new file mode 100644
index 00000000..ba5f2a55
--- /dev/null
+++ b/public/RightLadder.svg
@@ -0,0 +1,16 @@
+<svg width="36" height="490" viewBox="0 0 36 490" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="9.58783" height="453.504" rx="2" transform="matrix(-1 0 0 1 10.1129 36.3733)" fill="#C4C4C4"/>
+<rect width="9.58783" height="471.721" rx="2" transform="matrix(-1 0 0 1 36 0.898438)" fill="#C4C4C4"/>
+<path d="M29.7678 38.291L8.19514 62.2606" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M29.7678 150.469L8.19514 174.438" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M29.7678 258.811L8.19514 282.781" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M29.7678 370.989L8.19514 394.958" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M29.7678 75.6836L8.19514 99.6532" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M29.7678 187.861L8.19514 211.831" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M29.7678 296.204L8.19514 320.174" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M29.7678 408.381L8.19514 432.351" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M29.7678 113.076L8.19514 137.045" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M29.7678 225.254L8.19514 249.223" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M29.7678 333.596L8.19514 357.566" stroke="#C4C4C4" stroke-width="5"/>
+<path d="M29.7678 445.774L8.19514 469.744" stroke="#C4C4C4" stroke-width="5"/>
+</svg>
diff --git a/src/pages/Demo.tsx b/src/pages/Demo.tsx
index fbab7a21..29b4914a 100644
--- a/src/pages/Demo.tsx
+++ b/src/pages/Demo.tsx
@@ -1,7 +1,7 @@
 import { FC, useState } from 'react';
-import LeftLadder from '../../public/LeftLadder.png';
+import LeftLadder from '../../public/LeftLadder.svg';
 import Pipi from '../../public/Pipi.svg';
-import RightLadder from '../../public/RightLadder.png';
+import RightLadder from '../../public/RightLadder.svg';
 import AppWrapper from '../components/AppWrapper';
 import Box from '../components/Box';
 import Grid from '../components/Grid';
diff --git a/src/styles/Demo.scss b/src/styles/Demo.scss
index e90e7211..966900e1 100644
--- a/src/styles/Demo.scss
+++ b/src/styles/Demo.scss
@@ -50,6 +50,7 @@ p {
 }
 
 .wrap {
+  align-items: flex-end;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;