diff --git a/servers/nextjs/app/(presentation-generator)/outline/components/EmptyStateView.tsx b/servers/nextjs/app/(presentation-generator)/outline/components/EmptyStateView.tsx index 583c3bf0..518efbd2 100644 --- a/servers/nextjs/app/(presentation-generator)/outline/components/EmptyStateView.tsx +++ b/servers/nextjs/app/(presentation-generator)/outline/components/EmptyStateView.tsx @@ -2,24 +2,50 @@ import React from "react"; import { useRouter } from "next/navigation"; import { Button } from "@/components/ui/button"; import Wrapper from "@/components/Wrapper"; +import { FileText, Plus, ArrowRight } from "lucide-react"; const EmptyStateView: React.FC = () => { const router = useRouter(); return ( -
-
-

- No Presentation ID Found -

-

Please start a new presentation.

- +
+
+ {/* Icon */} +
+
+
+ +
+
+ +
+
+
+ + {/* Content */} +
+

+ No Presentation Found +

+

+ It looks like the presentation you are looking for is not found. + Let's create a brand new presentation! +

+
+ + {/* Action Button */} +
+ +
+
diff --git a/servers/nextjs/app/(presentation-generator)/outline/components/GenerateButton.tsx b/servers/nextjs/app/(presentation-generator)/outline/components/GenerateButton.tsx index 62176970..f0ccc554 100644 --- a/servers/nextjs/app/(presentation-generator)/outline/components/GenerateButton.tsx +++ b/servers/nextjs/app/(presentation-generator)/outline/components/GenerateButton.tsx @@ -31,40 +31,39 @@ const GenerateButton: React.FC = ({ }; return ( -
- -
+ + + + {getButtonText()} + + ); }; diff --git a/servers/nextjs/app/(presentation-generator)/outline/components/LayoutSelection.tsx b/servers/nextjs/app/(presentation-generator)/outline/components/LayoutSelection.tsx index a8f5aa58..285b4422 100644 --- a/servers/nextjs/app/(presentation-generator)/outline/components/LayoutSelection.tsx +++ b/servers/nextjs/app/(presentation-generator)/outline/components/LayoutSelection.tsx @@ -101,7 +101,7 @@ const LayoutSelection: React.FC = ({ } return ( -
+
{layoutGroups.map((group) => ( = ({ return (
-
+ {/*
Presentation Outline
@@ -52,7 +52,7 @@ const OutlineContent: React.FC = ({ Generating outlines...
)} -
+
*/} {/* Skeleton loading state */} {isLoading && (
@@ -77,7 +77,7 @@ const OutlineContent: React.FC = ({ {/* Outlines content */} {outlines && outlines.length > 0 && ( -
+
= ({ variant="outline" onClick={onAddSlide} disabled={isLoading || isStreaming} - className="w-full mt-4 text-blue-600 border-blue-200" + className="w-full my-4 text-blue-600 border-blue-200" > + Add Slide diff --git a/servers/nextjs/app/(presentation-generator)/outline/components/OutlineItem.tsx b/servers/nextjs/app/(presentation-generator)/outline/components/OutlineItem.tsx index cdfc4374..4030603b 100644 --- a/servers/nextjs/app/(presentation-generator)/outline/components/OutlineItem.tsx +++ b/servers/nextjs/app/(presentation-generator)/outline/components/OutlineItem.tsx @@ -72,26 +72,26 @@ export function OutlineItem({ } return ( -
+
{/* Main Title Row */}
{/* Drag Handle with Number - Make it smaller on mobile */}
-
-
-
-
+
+
+
+
- {index} + {index}
{/* Main Title Input - Add onFocus handler */} @@ -100,7 +100,7 @@ export function OutlineItem({ type="text" defaultValue={slideOutline.title || ''} onBlur={(e) => handleSlideChange({ ...slideOutline, title: e.target.value })} - className="text-md sm:text-lg flex-1 font-semibold bg-transparent outline-none" + className="text-lg mt-4 sm:text-xl flex-1 font-semibold bg-transparent outline-none" placeholder="Title goes here" /> @@ -124,9 +124,9 @@ export function OutlineItem({
diff --git a/servers/nextjs/app/(presentation-generator)/outline/components/OutlinePage.tsx b/servers/nextjs/app/(presentation-generator)/outline/components/OutlinePage.tsx index d1e66075..438795e6 100644 --- a/servers/nextjs/app/(presentation-generator)/outline/components/OutlinePage.tsx +++ b/servers/nextjs/app/(presentation-generator)/outline/components/OutlinePage.tsx @@ -40,7 +40,7 @@ const OutlinePage: React.FC = () => { return ( - +
{ duration={loadingState.duration} /> -
-
- - - - + +
+ + Outline & Content Layout Style - - - +
+ +
+ +
+ - - - + +
+ +
+ +
- -
-
- + + {/* Fixed Button */} +
+
+ +
+
+ +
); }; diff --git a/servers/nextjs/app/(presentation-generator)/outline/components/PageHeader.tsx b/servers/nextjs/app/(presentation-generator)/outline/components/PageHeader.tsx index 65cafcdd..8a20c78f 100644 --- a/servers/nextjs/app/(presentation-generator)/outline/components/PageHeader.tsx +++ b/servers/nextjs/app/(presentation-generator)/outline/components/PageHeader.tsx @@ -2,12 +2,12 @@ import React from "react"; const PageHeader: React.FC = () => (
-

+ {/*

Customize Your Presentation -

-

+ */} + {/*

Review your outline and select a layout style for your presentation. -

+

*/}
); diff --git a/servers/nextjs/app/globals.css b/servers/nextjs/app/globals.css index 82300405..a96bd7d9 100644 --- a/servers/nextjs/app/globals.css +++ b/servers/nextjs/app/globals.css @@ -249,15 +249,27 @@ thead { } .markdown-content h1 { - @apply text-3xl font-bold mb-6 text-gray-900; + @apply text-xl font-bold mb-4 text-gray-900; } .markdown-content h2 { - @apply text-2xl font-bold mb-4 text-gray-900; + @apply text-lg font-bold mb-3 text-gray-900; } .markdown-content h3 { - @apply text-xl font-bold mb-3 text-gray-900; + @apply text-base font-bold mb-2 text-gray-900; +} + +.markdown-content h4 { + @apply text-sm font-bold mb-2 text-gray-900; +} + +.markdown-content h5 { + @apply text-xs font-bold mb-1 text-gray-900; +} + +.markdown-content h6 { + @apply text-xs font-semibold mb-1 text-gray-900; } .markdown-content p { @@ -313,6 +325,49 @@ thead { @apply border border-gray-300 px-4 py-2; } +/* Override Tailwind Typography prose heading sizes for markdown editor */ +.prose h1 { + font-size: 18px !important; + font-weight: bold !important; + margin-bottom: 1rem !important; + color: rgb(17 24 39) !important; +} + +.prose h2 { + font-size: 16px !important; + font-weight: bold !important; + margin-bottom: 0.75rem !important; + color: rgb(17 24 39) !important; +} + +.prose h3 { + font-size: 14px !important; + font-weight: bold !important; + margin-bottom: 0.5rem !important; + color: rgb(17 24 39) !important; +} + +.prose h4 { + font-size: 12px !important; + font-weight: bold !important; + margin-bottom: 0.5rem !important; + color: rgb(17 24 39) !important; +} + +.prose h5 { + font-size: 11px !important; + font-weight: bold !important; + margin-bottom: 0.25rem !important; + color: rgb(17 24 39) !important; +} + +.prose h6 { + font-size: 10px !important; + font-weight: 600 !important; + margin-bottom: 0.25rem !important; + color: rgb(17 24 39) !important; +} + /* MDXEditor styles */ .mdxeditor-toolbar-group { @apply flex items-center gap-1 p-1; diff --git a/servers/nextjs/app/loading.tsx b/servers/nextjs/app/loading.tsx index ac6fb49a..7fc5be3b 100644 --- a/servers/nextjs/app/loading.tsx +++ b/servers/nextjs/app/loading.tsx @@ -1,12 +1,73 @@ -import { Loader2 } from 'lucide-react' -import React from 'react' +import { Card } from "@/components/ui/card"; const loading = () => { return ( -
- -
- ) -} +
+
+ {/* Branding Header Skeleton */} +
+
+
+
+
+
-export default loading + {/* Main Configuration Content Skeleton */} +
+
+ {/* Page Title */} +
+
+
+
+ + {/* LLM Provider Cards */} +
+ {[...Array(3)].map((_, index) => ( + +
+
+
+
+
+
+
+
+
+
+ + {/* Configuration Fields */} +
+ {[...Array(2)].map((_, fieldIndex) => ( +
+
+
+
+ ))} +
+ + ))} +
+ + {/* Model Selection */} + +
+
+
+
+ +
+
+
+ + {/* Fixed Bottom Button Skeleton */} +
+
+
+
+
+
+ ); +}; + +export default loading; diff --git a/servers/nextjs/app/settings/loading.tsx b/servers/nextjs/app/settings/loading.tsx index 7254c5f3..04f33049 100644 --- a/servers/nextjs/app/settings/loading.tsx +++ b/servers/nextjs/app/settings/loading.tsx @@ -2,71 +2,75 @@ import { Card } from "@/components/ui/card"; export default function LoadingProfile() { return ( -
-
- {/* Header Section Skeleton */} -
-
-
+
+ {/* Header Skeleton */} +
+
+
+
+
+
+
+
+
+
-
- {/* Subscription Card Skeleton */} - -
-
-
-
-
-
+ {/* Main Content Skeleton */} +
+
+ {/* LLM Selection Content Skeleton */} +
+ {/* Page Title */} +
+
+
- {/* Current Plan Details Skeleton */} -
-
-
-
-
-
-
-
-
-
-
-
- - {/* Usage Stats Skeleton */} + {/* LLM Provider Cards */}
-
-
- {[...Array(3)].map((_, index) => ( -
-
-
-
+ {[...Array(3)].map((_, index) => ( + +
+
+
+
+
+
+
-
+
- ))} -
+ + {/* Configuration Fields */} +
+ {[...Array(2)].map((_, fieldIndex) => ( +
+
+
+
+ ))} +
+ + ))}
- - {/* Quick Actions Skeleton */} -
+ {/* Model Selection */} -
-
- {[...Array(4)].map((_, index) => ( -
-
-
-
- ))} +
+
+
+
+ + {/* Fixed Bottom Button Skeleton */} +
+
+
+
); diff --git a/servers/nextjs/app/storeInitializer.tsx b/servers/nextjs/app/storeInitializer.tsx index 04eff944..ce2a067f 100644 --- a/servers/nextjs/app/storeInitializer.tsx +++ b/servers/nextjs/app/storeInitializer.tsx @@ -2,7 +2,6 @@ import { useEffect, useState } from 'react'; import { setCanChangeKeys, setLLMConfig } from '@/store/slices/userConfig'; -import { Loader2 } from 'lucide-react'; import { hasValidLLMConfig } from '@/utils/storeHelpers'; import { usePathname, useRouter } from 'next/navigation'; import { useDispatch } from 'react-redux'; @@ -103,10 +102,47 @@ export function StoreInitializer({ children }: { children: React.ReactNode }) { if (isLoading) { return ( -
-
- -

Loading configuration...

+
+
+
+ {/* Logo/Branding */} +
+ PresentOn +
+
+ + {/* Loading Animation */} +
+ Loading +
+ + {/* Loading Text */} +
+

+ Initializing Application +

+

+ Loading configuration and checking model availability... +

+
+ + {/* Progress Indicator */} +
+
+
+
+
+
+
+
);