set back button and high of the example element

src/frontend/src/modals/importModal/buttonBox/index.tsx

@@ -9,7 +9,8 @@ export default function ButtonBox({
 	icon,
 	bgColor,
 	textColor,
-	deactivate
+	deactivate,
+	size
 }: {
 	onClick: () => void;
 	title: string;
@@ -18,27 +19,80 @@ export default function ButtonBox({
 	bgColor: string;
 	textColor: string;
 	deactivate?:boolean;
+	size:"small"|"medium"|"big";
 }) {
+	let bigCircle:string;
+	let smallCircle:string;
+	let titleFontSize:string;
+	let descriptionFontSize:string;
+	let padding:string;
+	let marginTop:string;
+	let height:string;
+	let widht:string;
+	switch(size){
+		case "small":
+			bigCircle="h-12 w-12";
+			smallCircle ="h-8 w-8";
+			titleFontSize="text-sm";
+			descriptionFontSize="text-xs";
+			padding="p-2";
+			marginTop="mt-2";
+			height="h-36";
+			widht="w-28";
+			break;
+		case "medium":
+			bigCircle="h-16 w-16";
+			smallCircle ="h-12 w-12";
+			titleFontSize="text-base";
+			descriptionFontSize="text-sm";
+			padding="p-4";
+			marginTop="mt-3";
+			height="h-44";
+			widht="w-36";
+			break;
+		case "big":
+			bigCircle="h-20 w-20";
+			smallCircle ="h-16 w-16";
+			titleFontSize="text-lg";
+			descriptionFontSize="text-sm";
+			padding="p-8";
+			marginTop="mt-6";
+			height="h-56";
+			widht="w-44";
+			break;
+		default:
+			bigCircle="h-20 w-20";
+			smallCircle ="h-16 w-16";
+			titleFontSize="text-lg";
+			descriptionFontSize="text-sm";
+			padding="p-8";
+			marginTop="mt-6";
+			height="h-56";
+			widht="w-44";
+			break;
+	}
 	return (
 		<button disabled={deactivate} onClick={onClick}>
 			<div
 				className={classNames(
 					"col-span-1 flex flex-col divide-y divide-gray-200 rounded-lg text-center shadow border border-gray-300 hover:shadow-lg transform hover:scale-105",
-					bgColor
+					bgColor,
+					height,
+					widht
 				)}
 			>
-				<div className="flex flex-1 flex-col p-8">
+				<div className={`flex flex-1 flex-col ${padding}`}>
-					<div className="mx-auto flex items-center justify-center h-20 w-20 bg-white/30 rounded-full">
+					<div className={`mx-auto flex items-center justify-center ${bigCircle} bg-white/30 rounded-full`}>
-						<div className="mx-auto flex items-center justify-center h-16 w-16 bg-white rounded-full">
+						<div className={`mx-auto flex items-center justify-center ${smallCircle} bg-white rounded-full`}>
                             <div className={textColor}>
                                 {icon}
                             </div>
 						</div>
 					</div>
-					<h3 className="mt-6 text-lg font-semibold text-white">{title}</h3>
+					<h3 className={classNames("font-semibold text-white",titleFontSize,marginTop)}>{title}</h3>
 					<div className="mt-1 flex flex-grow flex-col justify-between">
 						<dt className="sr-only">{title}</dt>
-						<dd className="text-sm text-gray-100">{deactivate? "Coming soon":description}</dd>
+						<dd className={classNames("text-gray-100",descriptionFontSize)}>{deactivate? "Coming soon":description}</dd>
 					</div>
 				</div>
 			</div>

src/frontend/src/modals/importModal/index.tsx

@@ -5,6 +5,7 @@ import {
 	DocumentDuplicateIcon,
 	ComputerDesktopIcon,
 	ArrowUpTrayIcon,
+	ArrowLeftIcon,
 } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
@@ -15,6 +16,7 @@ import { error } from "console";
 import { alertContext } from "../../contexts/alertContext";
 import LoadingComponent from "../../components/loadingComponent";
 import { FlowType } from "../../types/flow";
+import { classNames } from "../../utils";
 
 export default function ImportModal() {
 	const [open, setOpen] = useState(true);
@@ -49,6 +51,7 @@ export default function ImportModal() {
 			);
 	}
 
+
 	return (
 		<Transition.Root show={open} appear={true} as={Fragment}>
 			<Dialog
@@ -93,6 +96,20 @@ export default function ImportModal() {
 										<XMarkIcon className="h-6 w-6" aria-hidden="true" />
 									</button>
 								</div>
+								{showExamples && (
+									<div className="z-50 absolute top-2 left-0 hidden pt-4 pl-4 sm:block">
+										<button
+											type="button"
+											className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+											onClick={() => {
+												setShowExamples(false);
+											}}
+										>
+											<span className="sr-only">Close</span>
+											<ArrowLeftIcon className="h-6 w-6" aria-hidden="true" />
+										</button>
+									</div>
+								)}
 								<div className="h-full w-full flex flex-col justify-center items-center">
 									<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
 										<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
@@ -110,10 +127,18 @@ export default function ImportModal() {
 											</Dialog.Title>
 										</div>
 									</div>
-									<div className="h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
+									<div
+										className={classNames(
+											"h-full w-full bg-gray-200 dark:bg-gray-900 gap-4",
+											showExamples && !loadingExamples
+												? "flex flex-row start justify-start items-start p-9"
+												: "flex flex-row justify-center items-center p-4"
+										)}
+									>
 										{!showExamples && (
 											<div className="flex h-full w-full justify-evenly items-center">
 												<ButtonBox
+													size="big"
 													bgColor="bg-emerald-500"
 													description="Prebuilt Examples"
 													icon={
@@ -127,6 +152,7 @@ export default function ImportModal() {
 													title="Examples"
 												></ButtonBox>
 												<ButtonBox
+													size="big"
 													bgColor="bg-blue-500"
 													description="Import from Local"
 													icon={
@@ -146,13 +172,28 @@ export default function ImportModal() {
 												<LoadingComponent remSize={30} />
 											</div>
 										)}
-										{showExamples && !loadingExamples && (
+										{showExamples &&
-											<div>
+											!loadingExamples &&
-												{examples.map((example, index) => {
+											examples.map((example, index) => {
-													return <div id="index">{example.name}</div>;
+												return (
-												})}
+													<div id="index">
+														{" "}
+														<ButtonBox
+															size="small"
+															bgColor="bg-slate-300"
+															description="Prebuilt Examples"
+															icon={
+																<DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
+															}
+															onClick={() => {
+																console.log("click");
+															}}
+															textColor="text-slate-400"
+															title={example.name}
+														></ButtonBox>
 													</div>
-										)}
+												);
+											})}
 									</div>
 								</div>
 							</Dialog.Panel>