feat: UI changes accoding to Design
This commit is contained in:
shiva raj badu
parent
c208639a15
commit
052340275b
11 changed files with 54 additions and 102 deletions
|
|
@ -32,12 +32,12 @@ const DashboardSidebar = () => {
|
|||
|
||||
return (
|
||||
<aside
|
||||
className="sticky top-0 h-screen w-[115px] flex flex-col justify-between bg-[#F6F6F9] backdrop-blur border-r border-slate-200/60 px-4 py-8"
|
||||
className="sticky top-0 h-screen w-[115px] flex flex-col justify-between bg-[#F6F6F9] backdrop-blur border-r border-[#E1E1E5] px-4 py-8"
|
||||
aria-label="Dashboard sidebar"
|
||||
>
|
||||
<div>
|
||||
|
||||
<div onClick={() => router.push("/dashboard")} className="flex items-center pb-6 border-b border-slate-200/60 gap-2 ">
|
||||
<div onClick={() => router.push("/dashboard")} className="flex items-center pb-6 border-b border-[#E1E1E5] gap-2 ">
|
||||
<div className="bg-[#7C51F8] rounded-full cursor-pointer p-1 flex justify-center items-center mx-auto">
|
||||
<img src="/logo-with-bg.png" alt="Presenton logo" className="h-[40px] object-contain w-full" />
|
||||
</div>
|
||||
|
|
@ -70,7 +70,7 @@ const DashboardSidebar = () => {
|
|||
title="Templates"
|
||||
>
|
||||
<div className="flex flex-col cursor-pointer tex-center items-center gap-2 transition-colors">
|
||||
<Star className={`h-4 w-4 ${pathname === "/templates" ? "text-[#5146E5]" : "text-slate-600"}`} />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={`${pathname === "/templates" ? "#5146E5" : "#475569"}`} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4"><path d="M4 14h6" /><path d="M4 2h10" /><rect x="4" y="18" width="16" height="4" rx="1" /><rect x="4" y="6" width="16" height="4" rx="1" /></svg>
|
||||
<span className="text-[11px] text-slate-800">Templates</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
|
@ -93,7 +93,7 @@ const DashboardSidebar = () => {
|
|||
</nav>
|
||||
</div>
|
||||
|
||||
<div className=" pt-5 border-t border-slate-200/60 font-syne "
|
||||
<div className=" pt-5 border-t border-[#E1E1E5] font-syne "
|
||||
>
|
||||
{BelongingNavItems.map(({ key, label: itemLabel, icon: Icon }) => {
|
||||
const isActive = activeTab === key;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import DashboardSidebar from './Components/DashboardSidebar'
|
|||
|
||||
const layout = ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
<div className='flex pr-4 bg-white'>
|
||||
<div className='flex pr-6 bg-white'>
|
||||
<DashboardSidebar />
|
||||
<div className='w-full'>
|
||||
|
||||
|
|
|
|||
|
|
@ -845,7 +845,7 @@ const ThemePanel: React.FC = () => {
|
|||
|
||||
|
||||
return (
|
||||
<div className="space-y-6 px-6 font-syne">
|
||||
<div className="space-y-6 pl-6 font-syne mb-10">
|
||||
<div className='py-[28px] flex justify-between'>
|
||||
|
||||
<h3 className=" text-[28px] tracking-[-0.84px] font-unbounded font-normal text-[#101828] flex items-center gap-2">
|
||||
|
|
@ -867,11 +867,11 @@ const ThemePanel: React.FC = () => {
|
|||
</Link>
|
||||
</div>
|
||||
{/* Tabs */}
|
||||
<div className='p-1 rounded-[40px] bg-[#F7F6F9] w-fit border border-[#F4F4F4] flex items-center justify-center '>
|
||||
<div className='p-1 rounded-[40px] bg-[#ffffff] w-fit border border-[#EDEEEF] flex items-center justify-center '>
|
||||
<button className='px-5 py-2 text-xs font-medium text-[#3A3A3A] rounded-[70px]'
|
||||
onClick={() => setTab('custom')}
|
||||
style={{
|
||||
background: tab === 'custom' ? 'linear-gradient(270deg, #D5CAFC 2.4%, #E3D2EB 27.88%, #F4DCD3 69.23%, #FDE4C2 100%)' : 'transparent'
|
||||
background: tab === 'custom' ? '#F4F3FF' : 'transparent'
|
||||
}}
|
||||
>Custom</button>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className='mx-1' width="2" height="17" viewBox="0 0 2 17" fill="none">
|
||||
|
|
@ -880,13 +880,13 @@ const ThemePanel: React.FC = () => {
|
|||
<button className='px-5 py-2 text-xs font-medium text-[#3A3A3A] rounded-[70px]'
|
||||
onClick={() => setTab('default')}
|
||||
style={{
|
||||
background: tab === 'default' ? 'linear-gradient(270deg, #D5CAFC 2.4%, #E3D2EB 27.88%, #F4DCD3 69.23%, #FDE4C2 100%)' : 'transparent'
|
||||
background: tab === 'default' ? '#F4F3FF' : 'transparent'
|
||||
}}
|
||||
>Built-in</button>
|
||||
</div>
|
||||
{/* Built-in Themes */}
|
||||
|
||||
{tab === 'default' && <div className="flex flex-wrap gap-6">
|
||||
{tab === 'default' && <div className="flex flex-wrap gap-x-5 gap-y-3.5">
|
||||
{
|
||||
defaultThemes.map((theme) => (
|
||||
<ThemeCard
|
||||
|
|
@ -904,7 +904,7 @@ const ThemePanel: React.FC = () => {
|
|||
{/* Custom Themes Section */}
|
||||
{tab === 'custom' && customThemes.length > 0 && (
|
||||
|
||||
<div className="flex flex-wrap gap-6">
|
||||
<div className="flex flex-wrap gap-x-5 gap-y-3.5">
|
||||
{customThemes.map((theme) => (
|
||||
<ThemeCard
|
||||
key={theme.id}
|
||||
|
|
|
|||
|
|
@ -31,49 +31,6 @@ interface ButtonState {
|
|||
status?: string;
|
||||
}
|
||||
|
||||
const FINAL_STEP_CONFETTI_PIECES = [
|
||||
// left: denser at top
|
||||
{ side: "left", offset: 1, top: 3, width: 28, height: 10, color: "#F59E0B", rotate: 12 },
|
||||
{ side: "left", offset: 7, top: 5, width: 18, height: 7, color: "#7C3AED", rotate: -10 },
|
||||
{ side: "left", offset: 12, top: 7, width: 20, height: 7, color: "#14B8A6", rotate: 22 },
|
||||
{ side: "left", offset: 3, top: 10, width: 22, height: 8, color: "#22C55E", rotate: -18 },
|
||||
{ side: "left", offset: 9, top: 12, width: 24, height: 8, color: "#E11D48", rotate: 18 },
|
||||
{ side: "left", offset: 14, top: 15, width: 18, height: 7, color: "#F43F5E", rotate: 23 },
|
||||
{ side: "left", offset: 5, top: 18, width: 20, height: 7, color: "#0EA5E9", rotate: -12 },
|
||||
{ side: "left", offset: 11, top: 21, width: 26, height: 9, color: "#2563EB", rotate: 20 },
|
||||
{ side: "left", offset: 2, top: 24, width: 19, height: 7, color: "#14B8A6", rotate: -16 },
|
||||
{ side: "left", offset: 8, top: 28, width: 21, height: 8, color: "#FB7185", rotate: 27 },
|
||||
{ side: "left", offset: 13, top: 32, width: 20, height: 7, color: "#06B6D4", rotate: 16 },
|
||||
{ side: "left", offset: 3, top: 36, width: 24, height: 9, color: "#EAB308", rotate: -22 },
|
||||
{ side: "left", offset: 10, top: 41, width: 18, height: 7, color: "#A855F7", rotate: -14 },
|
||||
{ side: "left", offset: 2, top: 50, width: 30, height: 10, color: "#EC4899", rotate: -28 },
|
||||
{ side: "left", offset: 13, top: 58, width: 19, height: 7, color: "#22C55E", rotate: 17 },
|
||||
{ side: "left", offset: 5, top: 66, width: 24, height: 8, color: "#8B5CF6", rotate: 14 },
|
||||
{ side: "left", offset: 11, top: 74, width: 18, height: 7, color: "#3B82F6", rotate: 12 },
|
||||
{ side: "left", offset: 4, top: 82, width: 20, height: 7, color: "#14B8A6", rotate: 21 },
|
||||
{ side: "left", offset: 7, top: 90, width: 24, height: 8, color: "#D946EF", rotate: -26 },
|
||||
|
||||
// right: denser at top
|
||||
{ side: "right", offset: 1, top: 4, width: 30, height: 10, color: "#F97316", rotate: -14 },
|
||||
{ side: "right", offset: 8, top: 6, width: 19, height: 7, color: "#0EA5E9", rotate: 12 },
|
||||
{ side: "right", offset: 13, top: 9, width: 20, height: 7, color: "#22C55E", rotate: -20 },
|
||||
{ side: "right", offset: 4, top: 12, width: 24, height: 8, color: "#EC4899", rotate: 20 },
|
||||
{ side: "right", offset: 10, top: 15, width: 22, height: 8, color: "#06B6D4", rotate: -18 },
|
||||
{ side: "right", offset: 15, top: 18, width: 20, height: 7, color: "#22C55E", rotate: -25 },
|
||||
{ side: "right", offset: 5, top: 21, width: 18, height: 7, color: "#8B5CF6", rotate: 19 },
|
||||
{ side: "right", offset: 12, top: 24, width: 21, height: 8, color: "#F43F5E", rotate: 14 },
|
||||
{ side: "right", offset: 2, top: 28, width: 26, height: 9, color: "#84CC16", rotate: 15 },
|
||||
{ side: "right", offset: 9, top: 33, width: 21, height: 8, color: "#F97316", rotate: -11 },
|
||||
{ side: "right", offset: 14, top: 38, width: 20, height: 7, color: "#A855F7", rotate: -19 },
|
||||
{ side: "right", offset: 4, top: 44, width: 19, height: 7, color: "#F43F5E", rotate: 20 },
|
||||
{ side: "right", offset: 2, top: 52, width: 28, height: 10, color: "#FACC15", rotate: 25 },
|
||||
{ side: "right", offset: 12, top: 60, width: 18, height: 7, color: "#14B8A6", rotate: -15 },
|
||||
{ side: "right", offset: 6, top: 68, width: 24, height: 8, color: "#22C55E", rotate: -17 },
|
||||
{ side: "right", offset: 1, top: 76, width: 20, height: 7, color: "#A855F7", rotate: 14 },
|
||||
{ side: "right", offset: 13, top: 84, width: 20, height: 7, color: "#3B82F6", rotate: -24 },
|
||||
{ side: "right", offset: 5, top: 92, width: 26, height: 9, color: "#EAB308", rotate: 18 },
|
||||
] as const;
|
||||
|
||||
const getTaperedSideOffset = (offset: number, top: number) => {
|
||||
const taperMultiplier = Math.max(0.72, 1.85 - top * 0.012);
|
||||
return Math.min(29, Number((offset * taperMultiplier).toFixed(2)));
|
||||
|
|
@ -320,30 +277,20 @@ export default function Home() {
|
|||
// </div>
|
||||
// </div>
|
||||
<div className="flex h-screen">
|
||||
<OnBoardingSlidebar />
|
||||
<OnBoardingSlidebar step={step} />
|
||||
<main className="w-full pl-20 pr-8 max-w-[1440px] mx-auto relative z-10">
|
||||
{step === 3 && (
|
||||
<div className="pointer-events-none fixed inset-0 z-0 overflow-hidden" aria-hidden>
|
||||
{FINAL_STEP_CONFETTI_PIECES.map((piece, index) => (
|
||||
<span
|
||||
key={`${piece.side}-${index}`}
|
||||
className="absolute rounded-[3px]"
|
||||
style={{
|
||||
top: `${piece.top}%`,
|
||||
...(piece.side === "left"
|
||||
? { left: `${getTaperedSideOffset(piece.offset, piece.top)}%` }
|
||||
: { right: `${getTaperedSideOffset(piece.offset, piece.top)}%` }),
|
||||
width: `${piece.width}px`,
|
||||
height: `${piece.height}px`,
|
||||
backgroundColor: piece.color,
|
||||
transform: `rotate(${piece.rotate}deg)`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<div className="pointer-events-none fixed left-0 top-0 z-0 overflow-hidden" aria-hidden>
|
||||
<img src="/left-confetti.png" alt="presenton" className='w-full h-full object-contain' />
|
||||
</div>
|
||||
)}
|
||||
{step === 3 && (
|
||||
<div className="pointer-events-none fixed right-0 top-0 z-0 overflow-hidden" aria-hidden>
|
||||
<img src="/right-confetti.png" alt="presenton" className='w-full h-full object-contain' />
|
||||
</div>
|
||||
)}
|
||||
<OnBoardingHeader currentStep={step} />
|
||||
{step === 1 && <ModeSelectStep setStep={setStep} setSelectedMode={setSelectedMode} />}
|
||||
{step === 1 && <ModeSelectStep selectedMode={selectedMode} setStep={setStep} setSelectedMode={setSelectedMode} />}
|
||||
{step === 2 && selectedMode === "presenton" && <PresentonMode currentStep={step} setStep={setStep} />}
|
||||
{step === 2 && selectedMode === "image" && <GenerationWithImage />}
|
||||
{step === 3 && <FinalStep />}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const FinalStep = () => {
|
|||
<p className='text-[#000000CC] text-xl font-normal font-syne'>Your AI workspace is ready. Let’s create your first presentation.</p>
|
||||
<button onClick={handleGoToUpload} className='bg-[#7C51F8] px-[23px] mt-14 py-[15px] rounded-[70px] text-white text-lg font-syne font-semibold'>My First Presentation</button>
|
||||
</div>
|
||||
<button onClick={handleGoToDashboard} className='absolute bottom-20 text-[#7A5AF8] flex items-center gap-2 right-10 text-xs font-normal font-syne'>Go to your dashboard <ArrowRight className='w-4 h-4 text-[#7A5AF8]' /></button>
|
||||
<button onClick={handleGoToDashboard} className='absolute uppercase bottom-20 text-[#7A5AF8] flex items-center gap-2 right-10 text-xs font-normal font-syne'>Go to your dashboard <ArrowRight className='w-4 h-4 text-[#7A5AF8]' /></button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { ChevronRight } from 'lucide-react'
|
||||
import React from 'react'
|
||||
|
||||
const ModeSelectStep = ({ setStep, setSelectedMode }: { setStep: (step: number) => void, setSelectedMode: (mode: string) => void }) => {
|
||||
const ModeSelectStep = ({ selectedMode, setStep, setSelectedMode }: { selectedMode: string, setStep: (step: number) => void, setSelectedMode: (mode: string) => void }) => {
|
||||
return (
|
||||
<div className='max-w-[650px]'>
|
||||
<div className='mb-[70px]'>
|
||||
|
|
@ -12,11 +12,11 @@ const ModeSelectStep = ({ setStep, setSelectedMode }: { setStep: (step: number)
|
|||
<div className='space-y-5'>
|
||||
<div onClick={() => {
|
||||
setSelectedMode("presenton")
|
||||
setStep(2)
|
||||
}} className='border font-syne border-[#EDEEEF] rounded-[11px] p-3 flex items-center justify-between gap-6 cursor-pointer'>
|
||||
|
||||
}} className={`border font-syne rounded-[11px] p-3 flex items-center justify-between gap-6 cursor-pointer ${selectedMode === "presenton" ? "border-[#a49cfc]" : "border-[#EDEEEF]"}`}>
|
||||
<div className='flex items-center gap-6'>
|
||||
<div className='rounded-[4px] bg-[#F4F3FF] p-[12px] w-[58px] h-[58px] flex items-center justify-center'>
|
||||
<img src='/logo-with-bg.png' alt='presenton' className='w-full h-full object-contain' />
|
||||
<div className='rounded-[4px] bg-[#F4F3FF] pt-[16.8px] pl-[16.8px] pb-[15.8px] pr-[17.1px] w-[74px] h-[74px] flex items-center justify-center'>
|
||||
<img src='/logo-with-bg.png' alt='presenton' className='w-[40px] h-[41.4px] object-contain' />
|
||||
</div>
|
||||
<div className=''>
|
||||
<div className='flex items-start gap-2 relative '>
|
||||
|
|
@ -30,16 +30,11 @@ const ModeSelectStep = ({ setStep, setSelectedMode }: { setStep: (step: number)
|
|||
<ChevronRight className='w-6 h-6 text-[#B3B3B3]' />
|
||||
</div>
|
||||
<div
|
||||
|
||||
// onClick={() => {
|
||||
// setSelectedMode("image")
|
||||
// setStep(2)
|
||||
// }}
|
||||
className='border font-syne border-[#EDEEEF] cursor-not-allowed rounded-[11px] p-3 flex items-center justify-between gap-6 relative'>
|
||||
<p className='text-black absolute top-1/2 -translate-y-1/2 right-14 flex items-center justify-center text-[14px] font-normal bg-[#F4F3FF] px-3 py-1.5 rounded-[30px]'>Coming soon</p>
|
||||
|
||||
<div className='flex items-center gap-6'>
|
||||
<div className='rounded-[4px] bg-[#FFF6ED] p-[12px] w-[58px] h-[58px] flex items-center justify-center'>
|
||||
<div className='rounded-[4px] bg-[#FFF6ED] p-[12px] w-[74px] h-[74px] flex items-center justify-center'>
|
||||
<img src='/image_mode.png' alt='presenton' className='w-full h-full object-contain' />
|
||||
</div>
|
||||
<div className=''>
|
||||
|
|
@ -48,12 +43,22 @@ const ModeSelectStep = ({ setStep, setSelectedMode }: { setStep: (step: number)
|
|||
<h3 className='text-black text-[18px] font-medium font-syne'>Generate with Image Model</h3>
|
||||
|
||||
</div>
|
||||
<p className='text-[#999999] text-[14px] font-normal font-syne'>Generate presentations with visual layouts and elements.</p>
|
||||
<p className='text-[#999999] text-[14px] font-normal font-syne'>Instantly generate presentation slides as images.</p>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight className='w-6 h-6 text-[#B3B3B3]' />
|
||||
</div>
|
||||
</div>
|
||||
<div className='absolute bottom-16 mr-8 max-w-[1440px] right-0 flex justify-end items-center gap-2.5 '>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
setStep(2);
|
||||
}}
|
||||
className='border border-[#EDEEEF] bg-[#7C51F8] rounded-[58px] px-5 py-2.5 text-white text-xs font-semibold'>
|
||||
Start With {selectedMode === "presenton" ? "Presenton" : "Image Model"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
import React from 'react'
|
||||
|
||||
const OnBoardingSlidebar = () => {
|
||||
const OnBoardingSlidebar = ({ step }: { step: number }) => {
|
||||
return (
|
||||
<div className='bg-[#F6F6F9] w-[300px] relative'>
|
||||
<div className={`${step === 3 ? "bg-white" : "bg-[#F6F6F9]"} w-[300px] relative`}>
|
||||
<img src="/Logo.png" alt="Presenton logo" className="absolute top-0 left-0 w-[128px] m-6" />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="296" height="591" viewBox="0 0 296 591" fill="none">
|
||||
{step !== 3 && <svg xmlns="http://www.w3.org/2000/svg" width="296" height="591" viewBox="0 0 296 591" fill="none">
|
||||
<path d="M291.5 183.5C311.916 183.5 328.5 200.271 328.5 221C328.5 241.729 311.916 258.5 291.5 258.5C271.084 258.5 254.5 241.729 254.5 221C254.5 200.271 271.084 183.5 291.5 183.5Z" stroke="#EDEEEF" strokeWidth="3" />
|
||||
<path d="M291.5 131.238C340.408 131.238 380.089 171.407 380.09 220.998C380.09 270.589 340.408 310.758 291.5 310.758C242.591 310.758 202.91 270.589 202.91 220.998C202.91 171.407 242.591 131.238 291.5 131.238Z" stroke="#EDEEEF" strokeWidth="3" />
|
||||
<path d="M291.5 43.6289C388.173 43.6289 466.576 123.021 466.576 220.998C466.576 318.975 388.174 398.368 291.5 398.368C194.826 398.368 116.424 318.975 116.424 220.998C116.424 123.022 194.826 43.629 291.5 43.6289Z" stroke="#EDEEEF" strokeWidth="3" />
|
||||
<path d="M287.5 -62.5C434.322 -62.5 553.5 64.115 553.5 220.5C553.5 376.885 434.322 503.5 287.5 503.5C140.678 503.5 21.5 376.885 21.5 220.5C21.5 64.115 140.678 -62.5 287.5 -62.5Z" stroke="#EDEEEF" strokeWidth="3" />
|
||||
<path d="M291 -176.5C495.019 -176.5 660.5 -5.07604 660.5 206.5C660.5 418.076 495.019 589.5 291 589.5C86.9809 589.5 -78.5 418.076 -78.5 206.5C-78.5 -5.07604 86.9809 -176.5 291 -176.5Z" stroke="#EDEEEF" strokeWidth="3" />
|
||||
</svg>
|
||||
</svg>}
|
||||
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -329,8 +329,8 @@ const PresentonMode = ({ currentStep, setStep }: { currentStep: number, setStep:
|
|||
</div>
|
||||
{/* Text Provider */}
|
||||
<div className='p-3 border border-[#EDEEEF] rounded-[11px] '>
|
||||
<div className="flex items-center gap-6 mb-7">
|
||||
<div className='w-[60px] h-[60px] rounded-[4px] flex items-center justify-center'
|
||||
<div className="flex items-center gap-[24.3px] mb-[42px]">
|
||||
<div className='w-[74px] h-[74px] rounded-[4px] pt-[16.8px] pr-[17.15px] pb-[17.2px] pl-[16.85px] flex items-center justify-center'
|
||||
style={{ backgroundColor: '#4C55541A' }}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
|
||||
|
|
@ -362,7 +362,7 @@ const PresentonMode = ({ currentStep, setStep }: { currentStep: number, setStep:
|
|||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={openProviderSelect}
|
||||
className=" h-12 px-4 py-4 outline-none border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors hover:border-gray-400 justify-between"
|
||||
className=" h-12 px-4 py-4 outline-none border border-[#E8E8E9] rounded-lg focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors hover:border-gray-400 justify-between"
|
||||
>
|
||||
<div className="flex gap-3 items-center">
|
||||
<span className="text-sm font-medium text-gray-900">
|
||||
|
|
@ -536,7 +536,7 @@ const PresentonMode = ({ currentStep, setStep }: { currentStep: number, setStep:
|
|||
(llmConfig.LLM === 'anthropic' && !currentApiKey) ||
|
||||
(llmConfig.LLM === 'custom' && !llmConfig.CUSTOM_LLM_URL)
|
||||
}
|
||||
className={`mt-4 py-2.5 bg-[#EDEEEF] px-3.5 w-fit rounded-[48px] text-xs font-semibold text-[#101323] transition-all duration-200 border ${modelsLoading
|
||||
className={`mt-4 py-2.5 bg-[#EDEEEF] disabled:opacity-50 disabled:cursor-not-allowed px-3.5 w-fit rounded-[48px] text-xs font-semibold text-[#101323] transition-all duration-200 border ${modelsLoading
|
||||
? " border-gray-300 cursor-not-allowed text-gray-500"
|
||||
: " border-[#EDEEEF] text-[#101323] hover:bg-[#E8F0FF]/90 focus:ring-2 focus:ring-blue-500/20"
|
||||
}`}
|
||||
|
|
@ -643,12 +643,12 @@ const PresentonMode = ({ currentStep, setStep }: { currentStep: number, setStep:
|
|||
</div>
|
||||
</div>
|
||||
{/* Image Provider */}
|
||||
<div className='p-3 border border-[#EDEEEF] rounded-[11px] mt-5'>
|
||||
<ToolTip content="Enable/Disable Image Generation" className='flex justify-end items-center'>
|
||||
<div className={`p-3 border border-[#EDEEEF] rounded-[11px] relative mt-5 ${llmConfig.DISABLE_IMAGE_GENERATION ? "bg-[#F9FAFB]" : ""}`}>
|
||||
<ToolTip content="Enable/Disable Image Generation" className='flex justify-end items-center absolute top-3 right-3'>
|
||||
<div className='flex justify-end items-center'>
|
||||
<Switch
|
||||
checked={!llmConfig.DISABLE_IMAGE_GENERATION}
|
||||
className='data-[state=checked]:bg-[#4791FF] data-[state=unchecked]:bg-gray-400'
|
||||
className='data-[state=checked]:bg-[#4791FF] h-[22px] w-[36px] data-[state=unchecked]:bg-[#E2E0E1]'
|
||||
onCheckedChange={(checked) => setLlmConfig(prev => ({
|
||||
...prev,
|
||||
DISABLE_IMAGE_GENERATION: !checked
|
||||
|
|
@ -657,8 +657,8 @@ const PresentonMode = ({ currentStep, setStep }: { currentStep: number, setStep:
|
|||
</div>
|
||||
|
||||
</ToolTip>
|
||||
<div className=" mb-7 flex items-center gap-6">
|
||||
<div className='w-[60px] h-[60px] px-[13.5px] py-[14.2px] rounded-[4px] flex items-center justify-center'
|
||||
<div className={` flex items-center gap-6 ${llmConfig.DISABLE_IMAGE_GENERATION ? "" : "mb-[42px]"}`}>
|
||||
<div className='w-[74px] h-[74px] px-[13.5px] py-[14.2px] rounded-[4px] flex items-center justify-center'
|
||||
style={{ backgroundColor: '#F4F3FF' }}
|
||||
>
|
||||
<img src="/image-markup.svg" className='w-full h-full object-cover' alt='image-markup' />
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ const SelectTrigger = React.forwardRef<
|
|||
>
|
||||
{children}
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<CaretSortIcon className="h-4 w-4 opacity-50" />
|
||||
<ChevronUpIcon className="h-4 w-4 opacity-50" />
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
))
|
||||
|
|
@ -82,7 +82,7 @@ const SelectContent = React.forwardRef<
|
|||
className={cn(
|
||||
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
position === "popper" &&
|
||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||
className
|
||||
)}
|
||||
position={position}
|
||||
|
|
@ -93,7 +93,7 @@ const SelectContent = React.forwardRef<
|
|||
className={cn(
|
||||
"p-1",
|
||||
position === "popper" &&
|
||||
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
||||
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
|
|
|
|||
BIN
electron/servers/nextjs/public/left-confetti.png
Normal file
BIN
electron/servers/nextjs/public/left-confetti.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
electron/servers/nextjs/public/right-confetti.png
Normal file
BIN
electron/servers/nextjs/public/right-confetti.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Loading…
Add table
Reference in a new issue