add ui elements

M3-org · Oct 17, 2023 · aeb65c2 · aeb65c2
1 parent 9635dea
commit aeb65c2
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 0 deletions.
diff --git a/src/components/TraitInformation.jsx b/src/components/TraitInformation.jsx
@@ -131,6 +131,18 @@ export default function TraitInformation({currentVRM, animationManager}){
                                 onClick={nextAnimation}
                             ></div>
                         </div>
+                        <div className={styles["traitInfoText"]}>
+                            <div className={styles["checkboxHolder"]}>
+                                <div>
+                                Mouse Follow
+                                </div>
+                                <label className={styles["custom-checkbox"]}>
+                                    <input type="checkbox" />
+                                    <div className={styles["checkbox-container"]}></div>
+                                </label>
+                            </div>
+                        </div>
+
                     </div>
 
             </div>

diff --git a/src/components/TraitInformation.module.css b/src/components/TraitInformation.module.css
@@ -98,4 +98,45 @@
 
 .anim-button:hover {
   opacity: 1;
+}
+
+/* Hide the default checkbox */
+.custom-checkbox input[type="checkbox"] {
+  display: none;
+}
+
+/* Style the custom checkbox */
+.custom-checkbox .checkbox-container {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #284b39; /* Change border color as needed */
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.custom-checkbox .checkbox-container.checked {
+  background-color: #5eb086; /* Change background color when checked */
+}
+
+.custom-checkbox .checkbox-container .checkmark {
+  display: none;
+}
+
+/* Style the checkmark when the checkbox is checked */
+.custom-checkbox input[type="checkbox"]:checked + .checkbox-container {
+  background-color: #5eb086; /* Change background color when checked */
+}
+
+.custom-checkbox input[type="checkbox"]:checked + .checkbox-container .checkmark {
+  display: block;
+}
+
+.checkboxHolder {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  justify-content: flex-start;
+  align-content: center;
+  height: 40px;
 }