From b78fe4f0d6cf6f04d1b85afdd0cb4af01df94b5a Mon Sep 17 00:00:00 2001
From: fwaalkens <f.waalkens@tfe.nl>
Date: Wed, 28 Feb 2024 16:40:04 +0100
Subject: [PATCH] Simplified battery UI.

---
 .../boxes/BatteriesOverview/BatteriesOverview.tsx         | 1 -
 .../components/ui/BatterySummary/BatterySummary.tsx       | 7 +++----
 src/app/Marine2/components/ui/BatterySummary/Styles.ts    | 8 ++++----
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.tsx b/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.tsx
index 59559f04..37528cf7 100644
--- a/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.tsx
+++ b/src/app/Marine2/components/boxes/BatteriesOverview/BatteriesOverview.tsx
@@ -92,7 +92,6 @@ const BatteriesOverview = ({ componentMode = "full", pageSelectorPropsSetter }:
                       width: boxSize.width,
                       height: height,
                     }}
-                    classes="h-full flex w-[15rem] md:w-[17rem] lg:w-[22rem] xl:w-[26rem]"
                   />
                 ))}
               </div>
diff --git a/src/app/Marine2/components/ui/BatterySummary/BatterySummary.tsx b/src/app/Marine2/components/ui/BatterySummary/BatterySummary.tsx
index 85a7fe58..8ccb4439 100644
--- a/src/app/Marine2/components/ui/BatterySummary/BatterySummary.tsx
+++ b/src/app/Marine2/components/ui/BatterySummary/BatterySummary.tsx
@@ -10,14 +10,13 @@ import { Styles } from "./Styles"
 interface Props {
   battery: Battery
   boxSize: ISize
-  classes: string
 }
 
-const BatterySummary = ({ battery, boxSize, classes }: Props) => {
+const BatterySummary = ({ battery, boxSize }: Props) => {
   const activeStyles = applyStyles(boxSize, Styles)
 
   return (
-    <div className={classNames("flex flex-col justify-center items-center w-full h-full gap-4", classes)}>
+    <div className="flex flex-col justify-center items-center w-full h-full max-w-[20rem]">
       <ProgressCircle
         percentage={battery.soc ?? null}
         boxSize={{
@@ -50,7 +49,7 @@ const BatterySummary = ({ battery, boxSize, classes }: Props) => {
           <></>
         )}
       </ProgressCircle>
-      <div className={classNames("truncate mt-2 w-[inherit] text-center", activeStyles.name)}>{battery.name}</div>
+      <div className={classNames("truncate mt-2 text-center", activeStyles.name)}>{battery.name}</div>
     </div>
   )
 }
diff --git a/src/app/Marine2/components/ui/BatterySummary/Styles.ts b/src/app/Marine2/components/ui/BatterySummary/Styles.ts
index 3aa429fa..1c6416d7 100644
--- a/src/app/Marine2/components/ui/BatterySummary/Styles.ts
+++ b/src/app/Marine2/components/ui/BatterySummary/Styles.ts
@@ -3,25 +3,25 @@ import { BreakpointStylesType } from "../../../utils/media"
 export const Styles: BreakpointStylesType = {
   default: {
     voltage: "hidden",
-    name: "text-base",
+    name: "text-base max-w-[20rem]",
     state: "text-2xs",
   },
   "xs-xs": {
     voltage: "text-sm",
     batteryState: "text-xs",
-    name: "text-base",
+    name: "text-base max-w-[10rem]",
     state: "text-xs",
   },
   "sm-s": {
     voltage: "text-base",
     batteryState: "text-sm",
-    name: "text-base",
+    name: "text-base max-w-[12rem]",
     state: "text-sm",
   },
   "sm-m": {
     voltage: "text-lg",
     batteryState: "text-base",
-    name: "text-lg",
+    name: "text-lg max-w-[20rem]",
     state: "text-base",
   },
 }