Fix token styles

components/common/Token/index.module.scss

@@ -1,31 +1,32 @@
-.Token {
+.token {
   background: var(--input-bg);
   border-radius: 99px;
   display: inline-flex;
   font-size: $font-tiny;
   font-weight: $bold;
+  line-height: 1.4;
   min-width: 3rem;
   text-align: center;
   padding: $unit-three-fourth ($unit * 1.5);
   user-select: none;
 
-  &.ChargeAttack.On {
+  &.chargeAttack.on {
     background: var(--charge-attack-bg);
     color: var(--charge-attack-text);
   }
 
-  &.FullAuto.On {
+  &.fullAuto.on,
+  &.autoSummon.on {
     background: var(--full-auto-bg);
     color: var(--full-auto-text);
   }
 
-  &.AutoGuard.On,
-  &.AutoSummon.On {
+  &.autoGuard.on {
     background: var(--auto-guard-bg);
     color: var(--auto-guard-text);
   }
 
-  &.Off {
+  &.off {
     color: var(--text-secondary);
   }
 }

components/common/Token/index.tsx

@@ -7,14 +7,31 @@ interface Props
   extends React.DetailedHTMLProps<
     React.HTMLAttributes<HTMLDivElement>,
     HTMLDivElement
-  > {}
+  > {
+  active?: boolean
+}
 
-const Token = React.forwardRef<HTMLDivElement, Props>(function Token(
+const Token = React.forwardRef<HTMLDivElement, Props>(function token(
   { children, className, ...props },
   forwardedRef
 ) {
-  const classes = classNames({ Token: true }, className)
-  return <div className={classes}>{children}</div>
+  const classes = classNames(
+    {
+      [styles.token]: true,
+      [styles.on]: props.active,
+      [styles.off]: !props.active,
+    },
+    className && styles[className]
+  )
+  return (
+    <div className={classes} ref={forwardedRef}>
+      {children}
+    </div>
+  )
 })
 
+Token.defaultProps = {
+  active: true,
+}
+
 export default Token