Merge pull request #4 from PapperlapappYT/styling

Styling

Author: stefan-spittank

src/components/bohnen/Bohnen.tsx

@@ -9,17 +9,23 @@ export const Bohnen = () => {
   const t = useTranslations("beanOverview");
 
   return (
-    <div className="tableContainer">
-      <table className="border-separate border-spacing-2">
+    <div>
+      <table className="border-separate border-spacing-2 table-fixed">
         <thead className="text-1xl text-gray-700 font-bold mb-5">
           <tr>
-            <th>{t("beanType")}</th>
-            <th>{t("ekp")}</th>
-            <th>{t("marge")}</th>
-            <th>{t("discount")}</th>
-            <th>{t("vkpWithoutDiscount")}</th>
-            <th>{t("aiPredictedSalesPrices")}</th>
-            <th>{t("salesPrices")}</th>
+            <th className="w-3 text-left align-text-top">{t("beanType")}</th>
+            <th className="text-right pr-1 align-text-top">{t("ekp")}</th>
+            <th className="text-right pr-1 align-text-top">{t("marge")}</th>
+            <th className="text-right pr-1 align-text-top">{t("discount")}</th>
+            <th className="text-right pr-1 align-text-top">
+              {t("vkpWithoutDiscount")}
+            </th>
+            <th className="text-right pr-1 align-text-top">
+              {t("aiPredictedSalesPrices")}
+            </th>
+            <th className="text-right pr-1 align-text-top">
+              {t("salesPrices")}
+            </th>
           </tr>
         </thead>
         <tbody>

src/components/bohnen/BohnenRow.tsx

@@ -10,14 +10,19 @@ type BohnenRowProps = {
 const BohnenRow = ({ bohne }: BohnenRowProps) => {
   const dispatch = useContext(BohnenDispatchContext);
 
+  const inputClasses =
+    "w-full border-1 border-slate-400 p-1 outline-1 outline-transparent focus:border-cyan-600 focus:outline-1 focus:outline-cyan-600 disabled:bg-slate-200";
+
+  const numberInputClasses = `${inputClasses} text-right font-mono`;
+
   return (
     <tr key={bohne.id}>
       <td>
         <input
           type="text"
           data-testid="art"
           aria-label="Bohnenart"
-          className="border-2 border-slate-400"
+          className={inputClasses}
           onChange={(event) => {
             console.log("event.target.value", event.target.value);
             dispatch({
@@ -32,7 +37,7 @@ const BohnenRow = ({ bohne }: BohnenRowProps) => {
         <input
           type="number"
           data-testid="ekp"
-          className="border-2 border-slate-400"
+          className={numberInputClasses}
           onChange={(event) =>
             dispatch({
               type: BohnenActionTypes.UPDATE,
@@ -49,7 +54,7 @@ const BohnenRow = ({ bohne }: BohnenRowProps) => {
         <input
           type="number"
           data-testid="marge"
-          className="border-2 border-slate-400 disabled:bg-slate-200"
+          className={numberInputClasses}
           disabled={true}
           onChange={(event) =>
             dispatch({
@@ -67,7 +72,7 @@ const BohnenRow = ({ bohne }: BohnenRowProps) => {
         <input
           type="number"
           data-testid="rabatt"
-          className="border-2 border-slate-400"
+          className={numberInputClasses}
           onChange={(event) =>
             dispatch({
               type: BohnenActionTypes.UPDATE,
@@ -85,7 +90,7 @@ const BohnenRow = ({ bohne }: BohnenRowProps) => {
           type="number"
           id="vkp"
           data-testid="vkp"
-          className="border-2 border-slate-400"
+          className={numberInputClasses}
           onChange={(event) =>
             dispatch({
               type: BohnenActionTypes.UPDATE,
@@ -104,7 +109,7 @@ const BohnenRow = ({ bohne }: BohnenRowProps) => {
           disabled={true}
           id="precictedVKP"
           data-testid="precictedVKP"
-          className="border-2 border-slate-400 disabled:bg-slate-200"
+          className={numberInputClasses}
           value={bohne.predictedVKP || "0.0"}
         />
       </td>
@@ -114,7 +119,7 @@ const BohnenRow = ({ bohne }: BohnenRowProps) => {
           id="vkpRabatt"
           data-testid="vkpRabatt"
           disabled={true}
-          className="border-2 border-slate-400 disabled:bg-slate-200"
+          className={numberInputClasses}
           onChange={(event) =>
             dispatch({
               type: BohnenActionTypes.UPDATE,