From 969e0105bfdbdaa8b309869f47b71663f6220f47 Mon Sep 17 00:00:00 2001
From: memelotsqui <memelotsqui@gmail.com>
Date: Mon, 16 Oct 2023 16:29:51 -0600
Subject: [PATCH] add animation button image

---
 public/ui/backButton_small.png             | Bin 0 -> 2085 bytes
 public/ui/nextButton_small.png             | Bin 0 -> 2085 bytes
 src/components/TraitInformation.jsx        |  13 ++++----
 src/components/TraitInformation.module.css |  34 +++++++++++++++++++++
 4 files changed, 41 insertions(+), 6 deletions(-)
 create mode 100644 public/ui/backButton_small.png
 create mode 100644 public/ui/nextButton_small.png

diff --git a/public/ui/backButton_small.png b/public/ui/backButton_small.png
new file mode 100644
index 0000000000000000000000000000000000000000..4484906813dd08d2d8df3307d10c11b10ddd82c4
GIT binary patch
literal 2085
zcmcgtYiJx*6rPwgF^x$of(dCc<J2FPIy-k}cV~9SY)hJrCfJQJjbw#ldgsoa&5+%h
zab}X;#7CQo#s?`9Xni0;k+y$C6#pn`H4x%IDO3VMq^^oo5N$$BQ;0O)*_Vl=5BkGp
zX6MYk-#zC$=X`VTo4q|x)^BauN>NmOcUP>BJP-Q!z18IZ*UJ|Y<WXyPJ?BzX-2?tz
zL4ELHGeuROF!~c-BEDZiRyqJROT~d~+9qg<YTKK&AsWUWt>UC%Mw!bq-!QbHMVWzc
z9K`JoJY;l@JNUqOPd^$TMzY52-9xu!72+U`JxFKMDbrQ5Q6}$KA+|rvF?1f{4M&-F
zKOmim_tG7fgK0ScSOfr|B{{%LJQ5`RF<JnEz<~(Ii!2{efS`nebn(ZKaE_)ceX%Es
z!N^;b8S*?^;kZmD6UYPumXqXoS(Z5<aDu=R1nZ8O9?Y_)yR+mWhF#<swr5x-?R$i(
zHR44XLbZ@X+Ag~_-C~_c#kefAIX(dVobo^om2vinlgbCz5QkGZjZM!bSiX$4hb+%>
zhpd~pE>CX=Kx!M0mt$<oC7mvZaJ|k^l18y0o1)$RF&lGz*tJF+ggZwG&7FQWw$kBX
z=vhv`Wu;1;>Mc>Gg;0Q}A004E&C0mD)-Av>=;0_sx)x-C%nEWpFDe4Bge4Y;3IGLY
z+|mqvY#o#bEHCDvKnaN(phPno^x$p58d7x2Nkfvbk%mdk*=CZV%VktLtd!-Dz=T~e
z&mtaIx=q)ECc@pZC_{1%7>1@`AP0j`46%|d3oJ1pE5nG&N}?JTRWcI}hf3>X78>z8
z>#r}UT(c1I@o!Y(B%%iO5UUD0Vi67@HX_R^D}=Bp@R9^XO)hzR+A+w722<<3`m8kK
z5g=6rKnt?~1p%wdp&$#9uCYkx0f2lY2!x2Q=Da|ZF2g0Q8!LVv2k;9;D`n7mO(+og
zT8}cwZ!*@H;;^wvJ?<!SaeZb86Q{Rmej&PR>0SmpxIIZ~cUy6BHzV)D(OXm3_+VJp
zC88&Z$Pwa@#71<D^g=~Q(}N)~td~<?M}2cK-VOC)S<nzPlbGzB9CP={+?g&5EdR%3
zIDfw^D2)5B`0{h>_Eyr!{1Dl&eY1R2keBjdgH2K=ha4rJoVjm-qAJ4OvG)G#4}bpH
z-f$Fbd;OWlKaRIeUuu!QoocRyH};LaZT<Gw{5uyK&ON&j|B9w+0=d~OJH9+pxxtXU
z!+ZJ`X6ApISUI#7tGPIN?u~}CP2020t91`$t5;ub*l~T=>~Nj91oGD_sT@q@c78sw
zqE@y})t_zLe*ON>$kNKe+Kb2PUpk!1?Vd%8vn%t}H)`6By^NP0UL4rM<>aN4ivyKh
z&i#8X+SfLBY4B9y!G^@-i_6QW<+bPE`fm5kYuDx`9$%K%-ap-;ow;`9{Hf+DVJy6s
zIthEe|KiH|$<=$*N0g<dcel;X{XRR_ny6^}xYEA{ZK`e3JTCk)-IDux_`M^OT#GyP
n(eTwOKhq|=m~zQz{km!Ybk$Q=7Y>rMo}#)tdt#sNJ9P9P1y;4d

literal 0
HcmV?d00001

diff --git a/public/ui/nextButton_small.png b/public/ui/nextButton_small.png
new file mode 100644
index 0000000000000000000000000000000000000000..8b93b8d1ca2a18e1e58c296a1a3e69004f99f162
GIT binary patch
literal 2085
zcmcgtTWB0r7@jpTmzE^O7HcYL#;J%EXXnh!?(EK(wZv@FT-+Ga#YSn<o;~NxX3Xx)
zI5Wv^LTzIOK@E}z5%H2xq0|SH7Yk7gy`dBl5$%I_4HX5!CJ{m3)HA!AHIei}A6%F{
zXU_S~|9$^u{_|X4@7}siJ2o*4Q`glQ@2BGd|EZ~>|35B&K0t?ByYn%ZVK#5|p8)gf
z>vu3r)yqb5z#B+BtRX8KgxE@vU_NV8G{dy)$=eVO6OT=iv|+}$<@e8Wtbt?P{%`^$
z>^3rFbdEb@-*|5ljSnLgb9)|STk;w;kR={u^Vy8)YWWyfu&dFzzbtTU0pbnExK^K#
z9Z2-CZI(k=H3)bF0AM3(P>hI3is<*V5|AVTL<Ldd#i#}(EhMw0A4lmNtZV)8juIJt
zi*ZAqXKR9x%jJSOIcPa)K~z;$0Fod{JVo&CnCZbhZ@RlyEyRh79K-eu%Vd3vFlCK+
zF^)<t`jEBDW=*#gCmJy!4{bpV0^g?s5Ti2A9&s`Sa*PC$Az5O2F2#yvtUY9TmOEr!
z#dLXl9RZDPB2nhpP)jyjrf|LXQR+r1ARD6H<d{u_e&Sjq4kGQNROT+<8(V902=pu`
zX<3=oO!ciwW~ES2WbfT?nApm>yVo2bap;j4N3$mLK;<PhDJq&IYT*bE6b*nPG+|*w
zA6o+z0WT^AD9~hO9hBA#h90~w7$Z%$oGhdc8(Ekpf^DWbwj4&S&B|B~C8p}+f{H{!
z>oQ#rnuv78V;uE4Xc$;S5rDBys9uD0UROhyhf!VO6-AZ^j37xQq1E$o3yt`h_0Jcp
z99xLm_?K0LvZ$j7;ZqSs=M^bL_$a^;UQeY`M3TZ`h{aWFk2nVX&|qe*RbLgR76D2r
z0N^lHB?CUChGZTh9rH*R0f1su22#|o=0bsJorX(OH&*&S_K_z`vy8zOYC?m^uk{#*
z{3H|1m6nYS;&DUFrSrKVLXBP{`9*fu(!CsXNNbwL?z+V#Tur<SN3Sg%<FKr%3XK;M
zL$tMoLcEGqg~y>#1S_J9R9#<neU0>ui}7Zpm%@UEpqVDLa|+zeJ9A@oSycHyIwSb~
zvRGlle~YiMx2Ct!L>884!}h1;tAf6iFB@XgI63qxxpJbrnqdOru6S!Q|Mit`Kd!p~
znE3f^Jv}eQ556!Jy=zP0t2^P(D?46!X6v!}yI&h`W$F){dwO%!4pgt39Q*7S=jfwL
z+1bAuTN(m0HPhPzGt6`(&|EY9MxdFQZm1ZnYFPPxN~&whH-2}hyU`y$I5lZLaj2tu
zuw(x50e|>Ax1wn);$q-T^TPA>3zPLnTJjTrp07Ca!`>|2cyBRq6lg1wwz4xn(L7PV
z(DF7Dc~+=h5`KE?qXt|4gq)i_Il!OZX<oee;-||K-&{I9eD<Dq-QB%|v$ac^6PMl@
zKK?-SU}di2&3wg$rkTr4&GTP&e^GUC^42p;Q<vwS`c3$7__lU?`Q)}!e+*XMH+TE^
p@7)D&7q?7QY_}J0@qI2$=I0J;l|9LE`B(oU?`rRj&pmYb_&?emsLKEV

literal 0
HcmV?d00001

diff --git a/src/components/TraitInformation.jsx b/src/components/TraitInformation.jsx
index e8f2c220..f6fdc0d3 100644
--- a/src/components/TraitInformation.jsx
+++ b/src/components/TraitInformation.jsx
@@ -120,15 +120,16 @@ export default function TraitInformation({currentVRM, animationManager}){
                         </div>
                         <br/>
                         <div className={styles["animationSelect"]}>
-                            <button 
-                                className={styles["traitInfoText"]}
+                            <div 
+                                className={`${styles["anim-button"]} ${styles["left-button"]}`}
                                 onClick={prevAnimation}
-                            >1</button>
+                            ></div>
                             <div className={styles["traitInfoText"]}>{animationName}</div>
-                            <button 
-                                className={styles["traitInfoText"]}
+                            <div 
+                            //`${styles.class1} ${styles.class2}`
+                                className={`${styles["anim-button"]} ${styles["right-button"]}`}
                                 onClick={nextAnimation}
-                            >1</button>
+                            ></div>
                         </div>
                     </div>
 
diff --git a/src/components/TraitInformation.module.css b/src/components/TraitInformation.module.css
index cddd36d0..9e1eed72 100644
--- a/src/components/TraitInformation.module.css
+++ b/src/components/TraitInformation.module.css
@@ -65,3 +65,37 @@
   height:40px;
   align-items: center;
 }
+
+.anim-button {
+
+  cursor: pointer;
+  overflow: hidden;
+  opacity: 0.8;
+  width: 32px;
+  height: 32px;
+  margin: 2px;
+  text-align: center;
+  outline-color: #3b434f;
+  outline-width: 2px;
+  outline-style: solid;
+  align-items: center;
+  margin-bottom: 30px;
+  background-color: #1e2530;
+}
+.left-button{
+  background: url('/ui/backButton_small.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.right-button{
+  background: url('/ui/nextButton_small.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.anim-button:hover {
+  opacity: 1;
+}
\ No newline at end of file