add animation button image

M3-org · Oct 16, 2023 · 969e010 · 969e010
1 parent df1c067
commit 969e010
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 6 deletions.
diff --git a/public/ui/backButton_small.png b/public/ui/backButton_small.png
diff --git a/public/ui/nextButton_small.png b/public/ui/nextButton_small.png
diff --git 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
@@ -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;
+}