ui fixes

mythz · mythz · commit 7cbcca4587eb · 2025-11-14T11:22:29.000+08:00
diff --git a/MyApp.Client/components/container.tsx b/MyApp.Client/components/container.tsx
@@ -1,7 +1,7 @@
 import { FC, PropsWithChildren } from "react"
 
 const Container: FC<PropsWithChildren> = ({ children }) => {
-  return <div className="container mx-auto px-5">{children}</div>
+  return <div className="max-w-7xl mx-auto px-5">{children}</div>
 }
 
 export default Container
diff --git a/MyApp.Client/components/layout-article.tsx b/MyApp.Client/components/layout-article.tsx
@@ -3,7 +3,6 @@ import Head from "next/head"
 import Nav from "./nav"
 import Footer from "./footer"
 import Meta from "./meta"
-import Breadcrumbs from "./breadcrumbs"
 
 type Props = {
   title: string,
@@ -19,10 +18,10 @@ const Page: FC<Props> = ({ title, children }) => {
       </Head>
       <Nav />
         <div className="min-h-screen">
-            <main className="flex justify-center">
-                <div className="mx-auto px-5">
-                    <Breadcrumbs className="my-8" name={title} />
-                    <article className="prose lg:prose-xl mb-32">
+            <main>
+                <div className="max-w-7xl mx-auto px-5">
+                    <h1 className="text-4xl font-bold my-8 text-gray-900 dark:text-gray-100">{title}</h1>
+                    <article className="prose lg:prose-xl max-w-4xl mb-32">
                         {children}
                     </article>
                 </div>
diff --git a/MyApp.Client/components/layout-page.tsx b/MyApp.Client/components/layout-page.tsx
@@ -3,15 +3,15 @@ import Head from "next/head"
 import Nav from "./nav"
 import Footer from "./footer"
 import Meta from "./meta"
-import Breadcrumbs from "./breadcrumbs"
 
 type Props = {
   title: string,
   className?: string,
+  bodyClass?: string,
   children: React.ReactNode,
 }
 
-const Page: FC<Props> = ({ title, className, children }) => {
+const Page: FC<Props> = ({ title, className, bodyClass, children }) => {
   return (
     <>
       <Meta />
@@ -21,9 +21,11 @@ const Page: FC<Props> = ({ title, className, children }) => {
       <Nav />
       <div className="min-h-screen">
         <main>
-          <div className={`container mx-auto px-5 ${className ?? ''}`}>
-            <Breadcrumbs className="my-8" name={title} />
-            {children}
+          <div className={`max-w-7xl mx-auto px-5 ${className ?? ''}`}>
+            <div className={bodyClass ?? 'max-w-5xl'}>
+              <h1 className="text-4xl font-bold my-8 text-gray-900 dark:text-gray-100">{title}</h1>
+              {children}
+            </div>
           </div>
         </main>
       </div>
diff --git a/MyApp.Client/components/post-header.tsx b/MyApp.Client/components/post-header.tsx
@@ -21,11 +21,11 @@ const PostHeader = ({ title, coverImage, date, author }: Props) => {
       <div className="mb-8 md:mb-16 sm:mx-0">
         <CoverImage title={title} src={coverImage} />
       </div>
-      <div className="max-w-4xl mx-auto">
+      <div className="mx-auto max-w-4xl">
         <div className="block md:hidden mb-6">
           <Avatar name={author.name} picture={author.picture} />
         </div>
-        <div className="mb-6 text-lg text-gray-600 dark:text-gray-400">
+        <div className="mb-6 text-lg font-semibold text-gray-600 dark:text-gray-400">
           <DateFormatter dateString={date} />
         </div>
       </div>
diff --git a/MyApp.Client/pages/_app.tsx b/MyApp.Client/pages/_app.tsx
@@ -1,7 +1,7 @@
 import { AppProps } from "next/app"
 import "../styles/index.css"
 import "../styles/main.css"
-import "prismjs/themes/prism-tomorrow.css"
+import "../styles/prism-dark-blue.css"
 
 import Link from 'next/link'
 import { setLinkComponent, Loading, ClientContext } from '@servicestack/react'
diff --git a/MyApp.Client/pages/admin.tsx b/MyApp.Client/pages/admin.tsx
@@ -5,7 +5,7 @@ import { ValidateAuth, appAuth } from "@/lib/auth"
 function Admin () {
     const { user, signOut } = appAuth()
     return (<Page title="Admin Page">
-        <div className="flex flex-col items-center justify-center">
+        <div className="max-w-3xs flex flex-col justify-center items-center">
             <svg className="w-36 h-36 text-gray-700" viewBox="0 0 24 24" fill="currentColor">
                 <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
             </svg>
diff --git a/MyApp.Client/pages/bookings-auto.tsx b/MyApp.Client/pages/bookings-auto.tsx
@@ -7,7 +7,7 @@ import SrcPage from "@/components/src-page"
 function Index() {
 
 
-    return (<Page title="Bookings CRUD (Auto Columns)" className="max-w-screen-lg">
+    return (<Page title="Bookings CRUD (Auto Columns)">
 
         <div className="mb-4 flex justify-end">
             <Link href="/bookings-custom" className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
diff --git a/MyApp.Client/pages/bookings-custom.tsx b/MyApp.Client/pages/bookings-custom.tsx
@@ -9,7 +9,7 @@ function Index() {
     const { currency } = useFormatters()
     const [coupon, setCoupon] = useState<any>(null)
 
-    return (<Page title="Bookings CRUD (Custom Columns)" className="max-w-screen-lg">
+    return (<Page title="Bookings CRUD (Custom Columns)">
 
         <div className="mb-4 flex justify-end">
             <Link href="/bookings-auto" className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
diff --git a/MyApp.Client/pages/index.tsx b/MyApp.Client/pages/index.tsx
@@ -41,8 +41,8 @@ const Index = ({ allPosts }: Props) => {
                 </div>
             </div>
 
-            <div className="mb-40 mx-auto max-w-7xl">
-                <p className="mt-4 mb-10 mx-auto max-w-4xl text-xl text-gray-600 dark:text-gray-400">
+            <div className="mb-40">
+                <p className="mt-4 mb-10 text-xl text-gray-600 dark:text-gray-400">
                     Manage your ServiceStack App and explore, discover, query and call APIs instantly with
                     built-in Auto UIs dynamically generated from the rich metadata of your App's typed C# APIs &amp; DTOs
                 </p>
diff --git a/MyApp.Client/pages/posts.tsx b/MyApp.Client/pages/posts.tsx
@@ -1,6 +1,5 @@
 import React from "react"
 import Layout from "../components/layout"
-import Breadcrumbs from "../components/breadcrumbs"
 import { getAllPosts } from "../lib/api"
 import Post from "../types/post"
 
@@ -9,12 +8,12 @@ type Props = {
 }
 const Posts = ({ allPosts }: Props) => {
     return (<Layout>
-        <main className="flex justify-center">
-            <div className="mx-auto px-5">
-                <Breadcrumbs className="my-8" name="Markdown Posts" />
+        <main>
+            <div className="max-w-7xl mx-auto px-5">
+                <h1 className="text-4xl font-bold my-8 text-gray-900 dark:text-gray-100">Markdown Posts</h1>
                 <h3 className="text-lg mb-8">
                     List of Markdown Posts in <span
-                    className="bg-blue-50 text-blue-500 py-1 px-2 rounded">/pages</span>
+                    className="bg-blue-50 text-blue-500 dark:bg-blue-900 dark:text-blue-200 py-1 px-2 rounded">/pages</span>
                 </h3>
                 {allPosts.map((post) => (
                     <div className="mb-8" key={post.slug}>
diff --git a/MyApp.Client/pages/profile.tsx b/MyApp.Client/pages/profile.tsx
@@ -6,7 +6,7 @@ import {appAuth, ValidateAuth} from "@/lib/auth"
 function Profile() {
     const {user, signOut} = appAuth()
     return (<Page title={user.displayName + ' Profile'}>
-        <div className="flex flex-col items-center justify-center">
+        <div className="max-w-3xs flex flex-col justify-center items-center">
             <svg className="w-36 h-36 text-gray-700 dark:text-gray-300" viewBox="0 0 24 24" fill="currentColor">
                 <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
             </svg>
diff --git a/MyApp.Client/pages/signin.tsx b/MyApp.Client/pages/signin.tsx
@@ -36,9 +36,9 @@ export default () => {
             await revalidate()
     }
 
-    return (<Page title="Use a local account to log in." className="max-w-xl">
+    return (<Page title="Use a local account to log in.">
         <ApiStateContext.Provider value={client}>
-            <section className="mt-4 sm:shadow overflow-hidden sm:rounded-md">
+            <section className="mt-4 max-w-xl sm:shadow overflow-hidden sm:rounded-md">
                 <form onSubmit={onSubmit}>
                     <div className="shadow overflow-hidden sm:rounded-md">
                         <ErrorSummary except="userName,password,rememberMe"/>
diff --git a/MyApp.Client/pages/signup-confirm.tsx b/MyApp.Client/pages/signup-confirm.tsx
@@ -5,7 +5,7 @@ export default () => {
     const router = useRouter()
     const confirmLink = router.query.confirmLink as string | undefined
 
-    return (<Page title="Signup confirmation" className="max-w-lg">
+    return (<Page title="Signup confirmation">
         <div className="mt-8 mb-20">
             {!confirmLink ? null :
                 <p className="my-4">
diff --git a/MyApp.Client/pages/signup.tsx b/MyApp.Client/pages/signup.tsx
@@ -52,9 +52,9 @@ export default () => {
         }
     }
 
-    return (<Page title="Sign Up" className="max-w-xl">
+    return (<Page title="Sign Up">
         <ApiStateContext.Provider value={client}>
-            <section className="mt-4 sm:shadow overflow-hidden sm:rounded-md">
+            <section className="mt-4 max-w-xl sm:shadow overflow-hidden sm:rounded-md">
                 <form onSubmit={onSubmit} className="max-w-prose">
                     <div className="shadow overflow-hidden sm:rounded-md">
                         <ErrorSummary except="displayName,userName,password,confirmPassword"/>
diff --git a/MyApp.Client/pages/todomvc.tsx b/MyApp.Client/pages/todomvc.tsx
@@ -64,8 +64,8 @@ const TodosMvc = () => {
         })()
     }, [])
 
-    return (<Page title="Todos Application" className="max-w-xl">
-        <div>
+    return (<Page title="Todos Application">
+        <div className="max-w-xl">
             <div className="mb-3">
                 <TextInput status={error} id="Text" placeholder="What needs to be done?" label=""
                            value={newTodo} onChange={setNewTodo}
diff --git a/MyApp.Client/public/modules/ui/docs/TodosDocs.html b/MyApp.Client/public/modules/ui/docs/TodosDocs.html
@@ -22,7 +22,7 @@
 })() 
 </script>
 <template id="Todos-docs">
-<div class="mx-auto max-w-screen-md text-center py-8">
+<div class="max-w-screen-md text-center py-8">
     <h2 class="text-center text-3xl">{{humanize(op.request.name)}}</h2>
     <p class="text-gray-500 text-lg my-3">{{apis[op.request.name]}}</p>
     <div class="flex justify-center text-left">
diff --git a/MyApp.Client/styles/prism-dark-blue.css b/MyApp.Client/styles/prism-dark-blue.css
@@ -0,0 +1,164 @@
+/**
+ * Dark Blue theme for Prism
+ * Inspired by VS Code Dark+ and Night Owl themes
+ * Features a very dark blue background
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #d4d4d4;
+  background: none;
+  font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+  border-radius: 0.5em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #0d1117; /* Very dark blue-black */
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em 0.3em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #6a9955; /* Green comments */
+  font-style: italic;
+}
+
+.token.punctuation {
+  color: #d4d4d4;
+}
+
+.token.namespace {
+  opacity: 0.7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #b5cea8; /* Light green for numbers */
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #ce9178; /* Orange-ish for strings */
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #d4d4d4;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #569cd6; /* Blue for keywords */
+}
+
+.token.function,
+.token.class-name {
+  color: #dcdcaa; /* Yellow for functions */
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #d16969; /* Red-ish */
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+/* Additional token types for better syntax highlighting */
+.token.parameter {
+  color: #9cdcfe; /* Light blue for parameters */
+}
+
+.token.type-class-name {
+  color: #4ec9b0; /* Teal for type names */
+}
+
+.token.decorator,
+.token.annotation {
+  color: #dcdcaa;
+}
+
+/* Line highlighting */
+.line-highlight {
+  background: rgba(255, 255, 255, 0.05);
+  border-left: 3px solid #569cd6;
+}
+
+/* Line numbers */
+.line-numbers .line-numbers-rows {
+  border-right: 1px solid #1e2a3a;
+}
+
+.line-numbers-rows > span:before {
+  color: #4b5563;
+}
+
+/* Selection */
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  background: rgba(86, 156, 214, 0.2);
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  background: rgba(86, 156, 214, 0.2);
+}
+

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`import { FC, PropsWithChildren } from "react"`
`2`	`2`
`3`	`3`	`const Container: FC<PropsWithChildren> = ({ children }) => {`
`4`		`- return <div className="container mx-auto px-5">{children}</div>`
	`4`	`+ return <div className="max-w-7xl mx-auto px-5">{children}</div>`
`5`	`5`	`}`
`6`	`6`
`7`	`7`	`export default Container`