Even more eye candy

src/components/calculator.jsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from 'preact/hooks';
+import { CloudLightning, Delete } from 'preact-feather';
 
 import { Help } from './help';
 import { ResultsPanel } from './results';
@@ -90,9 +91,11 @@ export function Calculator() {
           />
         </label>
         <div class="grid">
-          <button onClick={showResultsPanel}>{text.buttonCalc}</button>
+          <button onClick={showResultsPanel}>
+            <CloudLightning /> {text.buttonCalc}
+          </button>
           <button class="outline" onClick={() => setResultsVisible(false)}>
-            {text.buttonClear}
+            <Delete /> {text.buttonClear}
           </button>
         </div>
         {resultsVisible && (

src/components/result.json

@@ -0,0 +1,11 @@
+{
+  "text": {
+    "title": "Wyniki obliczeń",
+    "water": "Ilość wody",
+    "saltMin": "Ilość soli, minimum",
+    "saltMax": "Ilość soli, maksimum",
+    "injMin": "Nastrzyk przy minimalnej ilości soli",
+    "injMax": "Nastrzyk przy maksymalnej ilości soli",
+    "massageReqWarning": "Uwaga, wymagane będzie masowanie mięsa w trakcie procesu peklowania!"
+  }
+}

src/components/results.jsx

@@ -6,6 +6,8 @@ import {
   WATER_RATIO,
 } from '../tables';
 
+import { text } from './result.json';
+
 /**
  * @typedef {object} Props
  * @property {string} table
@@ -33,30 +35,26 @@ export function ResultsPanel({ table, days, weight }) {
   return (
     <article>
       <header>
-        <h2>Wyniki obliczeń</h2>
+        <h2>{text.title}</h2>
       </header>
       <ul>
         <li>
-          <strong>Ilość wody:</strong> {water.toFixed(1)} l
+          <strong>{text.water}:</strong> {water.toFixed(1)} l
         </li>
         <li>
-          <strong>Ilość soli, minimum:</strong> {saltLow.toFixed()} g
+          <strong>{text.saltMin}:</strong> {saltLow.toFixed()} g
         </li>
         <li>
-          <strong>Ilość soli, maksimum:</strong> {saltHigh.toFixed()} g
+          <strong>{text.saltMax}:</strong> {saltHigh.toFixed()} g
         </li>
         <li>
-          <strong>Nastrzyk przy minimalnej ilości soli:</strong>{' '}
-          {injectionLow.toFixed()} ml
+          <strong>{text.injMin}:</strong> {injectionLow.toFixed()} ml
         </li>
         <li>
-          <strong>Nastrzyk przy maksymalnej ilości soli:</strong>{' '}
-          {injectionHigh.toFixed()} ml
+          <strong>{text.injMax}:</strong> {injectionHigh.toFixed()} ml
         </li>
       </ul>
-      {massageRequired && (
-        <p>Uwaga, wymagane będzie masowanie mięsa podczas peklowania!</p>
-      )}
+      {massageRequired && <p class="warning">{text.massageReqWarning}</p>}
     </article>
   );
 }

src/style.scss

@@ -3,3 +3,12 @@ $primary-600: #c0ca33;
 $primary-700: #afb42b;
 
 @import '../node_modules/@picocss/pico/scss/pico.scss';
+
+footer > div.grid > div {
+  text-align: center;
+}
+
+.warning {
+  color: darkgoldenrod;
+  font-weight: bold;
+}