add names to side buttons

M3-org · Dec 5, 2023 · d0c6663 · d0c6663
1 parent d93a286
commit d0c6663
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 2 deletions.
diff --git a/src/components/Editor.jsx b/src/components/Editor.jsx
@@ -108,6 +108,7 @@ export default function Editor({uploadTextureURL, uploadVRMURL,confirmDialog,ani
             {templateInfo.traits &&
               templateInfo.traits.map((item, index) => (
                 <div key={index} className={styles["selectorButton"]}>
+
                   <TokenBox
                     size={56}
                     resolution={2048}
@@ -118,6 +119,7 @@ export default function Editor({uploadTextureURL, uploadVRMURL,confirmDialog,ani
                       selectOption(item)
                     }}
                   />
+                  {item.name}
                 </div>
               ))}
           </div>

diff --git a/src/components/Editor.module.css b/src/components/Editor.module.css
@@ -24,7 +24,7 @@
 .selector-container {
   user-select: none;
   flex: 1;
-  width: 110px;
+  width: 190px;
   position: relative;
   text-align: center;
 }
@@ -33,6 +33,10 @@
   padding: 0.15em;
   display: block;
   position: relative;
+  display: flex;
+  align-items: center;
+  color: #ffffff;
+  font-size: 10px;
 }
 
 .bottomLine {

diff --git a/src/components/Selector.module.css b/src/components/Selector.module.css
@@ -1,7 +1,7 @@
 .SelectorContainerPos {
   position: absolute;
   top: 98px;
-  left: 180px;
+  left: 260px;
   height: -webkit-calc(100vh - 176px);
   height: calc(100vh - 176px);
   backdrop-filter: blur(22.5px);

diff --git a/src/components/token-box/TokenBox.jsx b/src/components/token-box/TokenBox.jsx
@@ -18,12 +18,14 @@ export const TokenBox = (props) => {
             style={{width: size, height: size}}
             onClick={onClick}
         >
+
             {active && (
                 <div className={classnames(styles.frame, styles.frameActive)} />
             )}
             <div
                 className={classnames(styles.frame, rarity && styles[rarity])}
             />
+
             <img src={icon} className={styles.emptyIcon} style={style}/>
             {level && (
                 <div
@@ -35,6 +37,7 @@ export const TokenBox = (props) => {
                     Lv.{level}
                 </div>
             )}
+
         </div>
     );
 };