wip

client/cryps.css

@@ -608,7 +608,7 @@ table td svg {
     display: flex;
 }
 
-.info-cryp .skills .cryp-skill-btn {
+.info-cryp .skills button {
     border: 1px solid whitesmoke;
 }
 
@@ -694,18 +694,20 @@ table td svg {
     font-size: 1.5em;
 }
 
-.cryp-skill-btn {
+.instance-cryp button, .info-cryp button {
     flex: 1 1 100%;
+    color: whitesmoke;
     font-size: 16pt;
     padding: 0;
     margin: 0;
     border-width: 0px;
     border-bottom-width: 0px;
-    border-left-width: 0px;
+    border-left-width: 1px;
     border-right-width: 0px;
+    border-top-width: 1px;
 }
 
-.cryp-list .skills .cryp-skill-btn:first-child {
+.instance-cryp:first-child {
     border-top-width: 0;
 }
 
@@ -724,20 +726,21 @@ table td svg {
     margin-right: 0.5em;
 }
 
-.cryp-skill-btn {
+.game-cryp button {
     color: #333333;
+    flex: 1 1 100%;
 }
 
-.cryp-skill-btn.active {
+.game-cryp button.active {
     color: whitesmoke;
 }
 
-.cryp-skill-btn[disabled] {
+.game-cryp button[disabled] {
     color: #333333;
     font-size: 14pt;
 }
 
-.cryp-skill-btn:hover {
+.game-cryp button:hover {
     color: whitesmoke;
 }
 
@@ -748,7 +751,7 @@ table td svg {
     filter: grayscale(100%);
 }
 
-.game-cryp.ko .cryp-skill-btn:hover {
+.game-cryp.ko button:hover {
     color: #333;
 }
 
@@ -1020,7 +1023,7 @@ CRYP DAMAGE
         flex: unset;
     }
 
-    .cryp-skill-btn {
+    button {
         flex: 1;
         font-size: 16pt;
         padding: 0;

client/src/components/info.component.jsx

@@ -113,7 +113,7 @@ function Info(args) {
             const s = cryp.skills[i]
                 ? cryp.skills[i].skill
                 : (<span>&nbsp;</span>);
-            return <button key={i} alt={s} className="cryp-skill-btn" onClick={skillClick} >{s}</button>;
+            return <button key={i} alt={s} onClick={skillClick} >{s}</button>;
         });
 
         const stats = Object.values(STATS).map((s, j) => (

client/src/components/instance.cryps.jsx

@@ -69,7 +69,7 @@ function Cryp(props) {
             return setActiveCryp(cryp);
         }
 
-        return <button key={i} className="cryp-skill-btn right" onClick={skillClick} >{s}</button>;
+        return <button key={i} className="right" onClick={skillClick} >{s}</button>;
     });
 
     // needed for ondrop to fire