Fix food group legend bottom spacing (#242)

Make them less packed.
ZengLawrence · Nov 16, 2024 · 366876d · 366876d
1 parent 1637c7f
commit 366876d
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 8 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "diet-diary",
-  "version": "2.30.0",
+  "version": "2.30.1",
   "private": true,
   "homepage": ".",
   "dependencies": {

diff --git a/src/components/FoodGroupLegend.tsx b/src/components/FoodGroupLegend.tsx
@@ -1,11 +1,12 @@
+import _ from "lodash";
 import { displayName, FoodGroup } from "../model/Food";
 import { FoodGroupLabelBadge } from "./badge";
 import { Legend } from "./Legend";
 
-export const FoodGroupLegend = (props: { foodGroup: FoodGroup; }) => {
+export const FoodGroupLegend = (props: { foodGroup: FoodGroup; className?: string }) => {
   const { foodGroup } = props;
   return (
-    <Legend className="d-flex flex-nowrap">
+    <Legend className={_.join(["d-flex", "flex-nowrap", props.className], " ")}>
       <FoodGroupLabelBadge foodGroup={foodGroup} />{displayName(foodGroup)}
     </Legend>
   );

diff --git a/src/components/day-page/Footer.tsx b/src/components/day-page/Footer.tsx
@@ -28,15 +28,15 @@ const Icons8Referral = () => {
 const FoodGroupLegends = () => (
   <div className="d-flex justify-content-between flex-wrap grid">
     <div className="column">
-      <FoodGroupLegend foodGroup="vegetable" />
+      <FoodGroupLegend foodGroup="vegetable" className="mb-1" />
       <FoodGroupLegend foodGroup="proteinDiary" />
     </div>
     <div className="column">
-      <FoodGroupLegend foodGroup="fruit" />
+      <FoodGroupLegend foodGroup="fruit" className="mb-1" />
       <FoodGroupLegend foodGroup="fat" />
     </div>
     <div className="column">
-      <FoodGroupLegend foodGroup="carbohydrate" />
+      <FoodGroupLegend foodGroup="carbohydrate" className="mb-1" />
       <FoodGroupLegend foodGroup="sweet" />
     </div>
   </div>