chg: dev: massive refactor on front-end for unification and readiness #8

assets/js/components/battle-dialog/StatRow.jsx

@@ -8,33 +8,24 @@
  */
 
 import React from 'react';
+import { node, string } from 'prop-types';
 
-export default function StatRow({ icon, label, value, valueColor }) {
-  return (
-    <div style={{
-      display: 'flex', alignItems: 'center',
-      gap: 10, padding: '9px 0',
-      borderBottom: '1px solid rgba(255,255,255,0.05)',
-    }}
+export const StatRow = ({ icon, label, value, valueColor }) => (
+  <div className="bd-stat-row">
+    <i className={`fa ${icon} bd-stat-row__icon`} />
+    <span className="bd-stat-row__label">{label}</span>
+    <span
+      className="bd-stat-row__value"
+      style={valueColor ? { '--bd-stat-value-color': valueColor } : undefined}
     >
-      <i className={`fa ${icon}`} style={{ width: 16, color: 'rgba(149,207,245,0.4)', fontSize: 13 }} />
-      <span style={{
-        font: '500 13px \'Rajdhani\', sans-serif',
-        color: 'rgba(255,255,255,0.45)',
-        flex: 1,
-        letterSpacing: 0.5,
-      }}
-      >
-        {label}
-      </span>
-      <span style={{
-        font: '700 13px \'Rajdhani\', sans-serif',
-        color: valueColor || 'rgba(255,255,255,0.75)',
-        letterSpacing: 0.5,
-      }}
-      >
-        {value}
-      </span>
-    </div>
-  );
-}
+      {value}
+    </span>
+  </div>
+);
+
+StatRow.propTypes = {
+  icon:       string.isRequired,
+  label:      string.isRequired,
+  value:      node.isRequired,
+  valueColor: string,
+};