Fixed Dark Mode on Import screen
This commit is contained in:
Lucas Oliveira
parent
9496728eb5
commit
6f42514fd5
2 changed files with 39 additions and 49 deletions
|
|
@ -29,47 +29,47 @@ export default function ButtonBox({
|
||||||
let padding: string;
|
let padding: string;
|
||||||
let marginTop: string;
|
let marginTop: string;
|
||||||
let height: string;
|
let height: string;
|
||||||
let widht: string;
|
let width: string;
|
||||||
switch (size) {
|
switch (size) {
|
||||||
case "small":
|
case "small":
|
||||||
bigCircle = "h-12 w-12";
|
bigCircle = "h-12 w-12";
|
||||||
smallCircle = "h-8 w-8";
|
smallCircle = "h-8 w-8";
|
||||||
titleFontSize = "text-sm";
|
titleFontSize = "text-sm";
|
||||||
descriptionFontSize = "text-xs";
|
descriptionFontSize = "text-xs";
|
||||||
padding = "p-2";
|
padding = "p-2 py-3";
|
||||||
marginTop = "mt-2";
|
marginTop = "mt-2";
|
||||||
height = "h-36";
|
height = "h-36";
|
||||||
widht = "w-32";
|
width = "w-32";
|
||||||
break;
|
break;
|
||||||
case "medium":
|
case "medium":
|
||||||
bigCircle = "h-16 w-16";
|
bigCircle = "h-16 w-16";
|
||||||
smallCircle = "h-12 w-12";
|
smallCircle = "h-12 w-12";
|
||||||
titleFontSize = "text-base";
|
titleFontSize = "text-base";
|
||||||
descriptionFontSize = "text-sm";
|
descriptionFontSize = "text-sm";
|
||||||
padding = "p-4";
|
padding = "p-4 py-5";
|
||||||
marginTop = "mt-3";
|
marginTop = "mt-3";
|
||||||
height = "h-44";
|
height = "h-44";
|
||||||
widht = "w-36";
|
width = "w-36";
|
||||||
break;
|
break;
|
||||||
case "big":
|
case "big":
|
||||||
bigCircle = "h-20 w-20";
|
bigCircle = "h-20 w-20";
|
||||||
smallCircle = "h-16 w-16";
|
smallCircle = "h-16 w-16";
|
||||||
titleFontSize = "text-lg";
|
titleFontSize = "text-lg";
|
||||||
descriptionFontSize = "text-sm";
|
descriptionFontSize = "text-sm";
|
||||||
padding = "p-8";
|
padding = "p-8 py-10";
|
||||||
marginTop = "mt-6";
|
marginTop = "mt-6";
|
||||||
height = "h-56";
|
height = "h-56";
|
||||||
widht = "w-44";
|
width = "w-44";
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
bigCircle = "h-20 w-20";
|
bigCircle = "h-20 w-20";
|
||||||
smallCircle = "h-16 w-16";
|
smallCircle = "h-16 w-16";
|
||||||
titleFontSize = "text-lg";
|
titleFontSize = "text-lg";
|
||||||
descriptionFontSize = "text-sm";
|
descriptionFontSize = "text-sm";
|
||||||
padding = "p-8";
|
padding = "p-8 py-10";
|
||||||
marginTop = "mt-6";
|
marginTop = "mt-6";
|
||||||
height = "h-56";
|
height = "h-56";
|
||||||
widht = "w-44";
|
width = "w-44";
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
|
|
@ -77,22 +77,23 @@ export default function ButtonBox({
|
||||||
<Tooltip title={description} placement="bottom">
|
<Tooltip title={description} placement="bottom">
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
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",
|
"flex flex-col justify-center items-center rounded-lg text-center shadow border border-gray-300 dark:border-gray-800 hover:shadow-lg transform hover:scale-105",
|
||||||
bgColor,
|
bgColor,
|
||||||
height,
|
height,
|
||||||
widht
|
width,
|
||||||
|
padding
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className={`flex flex-1 flex-col ${padding}`}>
|
|
||||||
<div
|
<div
|
||||||
className={`mx-auto flex items-center justify-center ${bigCircle} bg-white/30 rounded-full`}
|
className={`flex items-center justify-center ${bigCircle} bg-white/30 rounded-full`}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={`mx-auto flex items-center justify-center ${smallCircle} bg-white rounded-full`}
|
className={`flex items-center justify-center ${smallCircle} bg-white rounded-full`}
|
||||||
>
|
>
|
||||||
<div className={textColor}>{icon}</div>
|
<div className={textColor}>{icon}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="mt-auto mb-auto">
|
||||||
<h3
|
<h3
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"font-semibold text-white",
|
"font-semibold text-white",
|
||||||
|
|
@ -102,17 +103,6 @@ export default function ButtonBox({
|
||||||
>
|
>
|
||||||
{title}
|
{title}
|
||||||
</h3>
|
</h3>
|
||||||
<div className="mt-1 flex flex-grow flex-col justify-between">
|
|
||||||
<dt className="sr-only">{title}</dt>
|
|
||||||
{/* <dd
|
|
||||||
className={classNames(
|
|
||||||
"text-gray-100 line-clamp-2",
|
|
||||||
descriptionFontSize
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{deactivate ? "Coming soon" : description}
|
|
||||||
</dd> */}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
|
|
||||||
|
|
@ -82,7 +82,7 @@ export default function ImportModal() {
|
||||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||||
>
|
>
|
||||||
<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
|
<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[776px]">
|
||||||
<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
|
<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|
@ -109,28 +109,6 @@ export default function ImportModal() {
|
||||||
<ArrowLeftIcon className="h-6 w-6" aria-hidden="true" />
|
<ArrowLeftIcon className="h-6 w-6" aria-hidden="true" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="z-50 absolute bottom-2 left-1/2 transform -translate-x-1/2 hidden pt-4 pl-2 sm:block text-center">
|
|
||||||
<a
|
|
||||||
href="https://github.com/logspace-ai/langflow_examples"
|
|
||||||
target="_blank"
|
|
||||||
className="flex items-center justify-center"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
width="24"
|
|
||||||
viewBox="0 0 98 96"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fill-rule="evenodd"
|
|
||||||
clip-rule="evenodd"
|
|
||||||
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
|
|
||||||
fill="#24292f"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span className="ml-2">LangFlow Examples</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<div className="h-full w-full flex flex-col justify-center items-center">
|
<div className="h-full w-full flex flex-col justify-center items-center">
|
||||||
|
|
@ -152,7 +130,7 @@ export default function ImportModal() {
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"h-full w-full bg-gray-200 dark:bg-gray-900 gap-4",
|
"h-full w-full bg-gray-200 dark:bg-gray-900 gap-4 overflow-y-auto scrollbar-hide",
|
||||||
showExamples && !loadingExamples
|
showExamples && !loadingExamples
|
||||||
? "flex flex-row start justify-start items-start p-9 flex-wrap overflow-auto"
|
? "flex flex-row start justify-start items-start p-9 flex-wrap overflow-auto"
|
||||||
: "flex flex-row justify-center items-center p-4"
|
: "flex flex-row justify-center items-center p-4"
|
||||||
|
|
@ -221,6 +199,28 @@ export default function ImportModal() {
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="bg-white dark:bg-gray-800 w-full h-20 flex items-center justify-center">
|
||||||
|
<a
|
||||||
|
href="https://github.com/logspace-ai/langflow_examples"
|
||||||
|
target="_blank"
|
||||||
|
className="flex items-center justify-center text-gray-600 dark:text-gray-300"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
width="24"
|
||||||
|
viewBox="0 0 98 96"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span className="ml-2 ">LangFlow Examples</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Dialog.Panel>
|
</Dialog.Panel>
|
||||||
</Transition.Child>
|
</Transition.Child>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue