From f7cf6a378f86a2ffed0aa06731b4a94766d6b5d3 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 23 May 2023 19:28:27 -0300
Subject: [PATCH] create min font size with truncate for buttonBox component

---
 .../modals/importModal/buttonBox/index.tsx    | 27 +++++++++++--------
 src/frontend/src/modals/importModal/index.tsx |  2 +-
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx
index 2f120d30b..d0e22611e 100644
--- a/src/frontend/src/modals/importModal/buttonBox/index.tsx
+++ b/src/frontend/src/modals/importModal/buttonBox/index.tsx
@@ -24,7 +24,7 @@ export default function ButtonBox({
 }) {
   let bigCircle: string;
   let smallCircle: string;
-  let titleFontSize: number;
+  let minTitleFontSize: number;
   let descriptionFontSize: string;
   let padding: string;
   let marginTop: string;
@@ -32,11 +32,12 @@ export default function ButtonBox({
   let width: string;
   let textHeight: number;
   let textWidth: number;
+  const [truncate, setTruncate] = useState<boolean>(false);
   switch (size) {
     case "small":
       bigCircle = "h-12 w-12";
       smallCircle = "h-8 w-8";
-      titleFontSize = 14;
+      minTitleFontSize =9;
       descriptionFontSize = "text-xs";
       padding = "p-2 py-3";
       marginTop = "mt-2";
@@ -48,7 +49,7 @@ export default function ButtonBox({
     case "medium":
       bigCircle = "h-16 w-16";
       smallCircle = "h-12 w-12";
-      titleFontSize = 16;
+      minTitleFontSize = 11;
       descriptionFontSize = "text-sm";
       padding = "p-4 py-5";
       marginTop = "mt-3";
@@ -60,7 +61,7 @@ export default function ButtonBox({
     case "big":
       bigCircle = "h-20 w-20";
       smallCircle = "h-16 w-16";
-      titleFontSize = 18;
+      minTitleFontSize = 12;
       descriptionFontSize = "text-sm";
       padding = "p-8 py-10";
       marginTop = "mt-6";
@@ -70,7 +71,7 @@ export default function ButtonBox({
     default:
       bigCircle = "h-20 w-20";
       smallCircle = "h-16 w-16";
-      titleFontSize = 18;
+      minTitleFontSize = 12;
       descriptionFontSize = "text-sm";
       padding = "p-8 py-10";
       marginTop = "mt-6";
@@ -95,7 +96,7 @@ export default function ButtonBox({
 	let textElementHeight = textElement.scrollHeight;
 	let textElementWidth = textElement.scrollWidth;
   
-	if (textElementHeight > parentDivHeight || textElementWidth > parentDivWidth) {
+	if (textElementHeight > parentDivHeight || textElementWidth > parentDivWidth && fontSize > minTitleFontSize) {
 	  let newFontSize = fontSize;
   
 	  while (textElementHeight > parentDivHeight || textElementWidth > parentDivWidth) {
@@ -104,8 +105,13 @@ export default function ButtonBox({
 		textElementHeight = textElement.scrollHeight;
 		textElementWidth = textElement.scrollWidth;
 	  }
-  
-	  setFontSize(newFontSize);
+    if(newFontSize <= minTitleFontSize){
+      setTruncate(true);
+      setFontSize(minTitleFontSize);
+    }
+    else{
+      setFontSize(newFontSize);
+    }
 	}
   }, [title, size, fontSize]);
   
@@ -133,10 +139,9 @@ export default function ButtonBox({
 		<div ref={parentDivRef} className="w-full h-1/2 mt-auto">
 		<div
           ref={titleRef}
-          className={classNames(
+          className={classNames(truncate?"truncate":"",
             " font-semibold text-white h-full dark:text-white/80",
-          )}
-        >
+          )}        >
           {title}
         </div>
 		</div>
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index ba7136bd1..2d983a685 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -180,7 +180,7 @@ export default function ImportModal() {
 													<div id="index">
 														{" "}
 														<ButtonBox
-															size="small"
+															size="big"
 															bgColor="bg-emerald-500 dark:bg-emerald-500/75"
 															description={
 																example.description ?? "Prebuilt Examples"