sozsoft/sozsoft-platform
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Public sayfalarını dark mod eklendi

Browse source
This commit is contained in:
Sedat Öztürk 2026-05-26 19:09:26 +03:00
parent ef201fda13
commit b38aabb5bd
23 changed files with 389 additions and 328 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
api/src/Sozsoft.Platform.DbMigrator/Seeds/LanguagesData.json
View file

@ -6864,6 +6864,18 @@
"tr": "Satış Sipariş Kalemleri", "tr": "Satış Sipariş Kalemleri",
"en": "Sales Order Items" "en": "Sales Order Items"
}, },
{
"resourceName": "Platform",
"key": "App.Dark",
"tr": "Karanlık",
"en": "Dark"
},
{
"resourceName": "Platform",
"key": "App.Light",
"tr": "Açık",
"en": "Light"
},
{ {
"resourceName": "Platform", "resourceName": "Platform",
"key": "Public.about.description.closing", "key": "Public.about.description.closing",

2
api/src/Sozsoft.Platform.DbMigrator/Seeds/ListFormSeeder_Saas.cs
View file

@ -421,7 +421,7 @@ public class ListFormSeeder_Saas : IDataSeedContributor, ITransientDependency
Visible = true, Visible = true,
IsActive = true, IsActive = true,
AllowSearch = true, AllowSearch = true,
ValidationRuleJson = DefaultValidationRuleEmailJson, ValidationRuleJson = DefaultValidationRuleEmailRequiredJson,
ColumnCustomizationJson = DefaultColumnCustomizationJson, ColumnCustomizationJson = DefaultColumnCustomizationJson,
PermissionJson = DefaultFieldPermissionJson(TenantManagementPermissions.Tenants.Create, TenantManagementPermissions.Tenants.Default, TenantManagementPermissions.Tenants.Update, true, true, false), PermissionJson = DefaultFieldPermissionJson(TenantManagementPermissions.Tenants.Create, TenantManagementPermissions.Tenants.Default, TenantManagementPermissions.Tenants.Update, true, true, false),
PivotSettingsJson = DefaultPivotSettingsJson PivotSettingsJson = DefaultPivotSettingsJson

75
ui/src/components/layouts/PublicLayout.tsx
View file

@ -1,7 +1,7 @@
import View from '@/views/Views' import View from '@/views/Views'
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { useLocation, Link } from 'react-router-dom' import { useLocation, Link } from 'react-router-dom'
import { FaFacebook, FaTwitter, FaLinkedin, FaInstagram } from 'react-icons/fa'; import { FaFacebook, FaTwitter, FaLinkedin, FaInstagram } from 'react-icons/fa'
import { import {
LuMenu, LuMenu,
LuX, LuX,
@ -14,13 +14,17 @@ import {
LuPhone, LuPhone,
LuMapPin, LuMapPin,
LuMail, LuMail,
} from 'react-icons/lu'; LuMoon,
LuSun,
} from 'react-icons/lu'
import Logo from '@/views/public/Logo' import Logo from '@/views/public/Logo'
import { ROUTES_ENUM } from '@/routes/route.constant' import { ROUTES_ENUM } from '@/routes/route.constant'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import LanguageSelector from '../template/LanguageSelector' import LanguageSelector from '../template/LanguageSelector'
import Demo from '@/views/public/Demo' import Demo from '@/views/public/Demo'
import { ScrollContext } from '@/contexts/ScrollContext' import { ScrollContext } from '@/contexts/ScrollContext'
import useDarkMode from '@/utils/hooks/useDarkmode'
import { THEME_ENUM } from '@/constants/theme.constant'
interface NavLink { interface NavLink {
resourceKey?: string resourceKey?: string
@ -33,6 +37,7 @@ interface NavLink {
const PublicLayout = () => { const PublicLayout = () => {
const location = useLocation() const location = useLocation()
const { translate } = useLocalization() const { translate } = useLocalization()
const [isDarkMode, setThemeMode] = useDarkMode()
const [isOpen, setIsOpen] = useState(false) const [isOpen, setIsOpen] = useState(false)
const [scrolled, setScrolled] = useState(false) const [scrolled, setScrolled] = useState(false)
@ -109,6 +114,38 @@ const PublicLayout = () => {
const isLoginLink = (resourceKey?: string) => resourceKey === 'Public.nav.giris' const isLoginLink = (resourceKey?: string) => resourceKey === 'Public.nav.giris'
const themeToggle = (
<div className="inline-flex items-center rounded-lg p-0.5 shadow-inner shadow-black/10">
<button
type="button"
onClick={() => setThemeMode(THEME_ENUM.MODE_LIGHT)}
aria-pressed={!isDarkMode}
title="Light mode"
className={`inline-flex h-8 items-center gap-1.5 px-2.5 text-xs font-semibold transition-colors rounded-l-md ${
!isDarkMode
? 'bg-white text-gray-950'
: 'text-gray-300 hover:bg-white/10 hover:text-white'
}`}
>
<LuSun size={15} strokeWidth={1.8} />
{translate('::App.Light')}
</button>
<button
type="button"
onClick={() => setThemeMode(THEME_ENUM.MODE_DARK)}
aria-pressed={isDarkMode}
title="Dark mode"
className={`inline-flex h-8 items-center gap-1.5 px-2.5 text-xs font-semibold transition-colors rounded-r-md ${
isDarkMode ? 'bg-white text-gray-950' : 'text-gray-300 hover:bg-white/10 hover:text-white'
}`}
>
<LuMoon size={15} strokeWidth={1.8} />
{translate('::App.Dark')}
</button>
</div>
)
const isActiveLink = (path?: string) => { const isActiveLink = (path?: string) => {
if (!path) return false if (!path) return false
if (path === ROUTES_ENUM.public.home) return location.pathname === path if (path === ROUTES_ENUM.public.home) return location.pathname === path
@ -137,20 +174,18 @@ const PublicLayout = () => {
const active = isActiveLink(link.path) const active = isActiveLink(link.path)
const baseClass = const baseClass =
'relative flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md transition-all duration-200 group' 'relative flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md transition-all duration-200 group'
const activeClass = active const activeClass = active ? 'text-white' : 'text-gray-300 hover:text-white'
? 'text-white'
: 'text-gray-300 hover:text-white'
return link.path ? ( return link.path ? (
<Link <Link key={link.path} to={link.path} className={`${baseClass} ${activeClass}`}>
key={link.path}
to={link.path}
className={`${baseClass} ${activeClass}`}
>
{link.icon && ( {link.icon && (
<link.icon <link.icon
size={22} size={22}
strokeWidth={1.75} strokeWidth={1.75}
className={active ? 'text-blue-400' : 'text-gray-400 group-hover:text-blue-400 transition-colors'} className={
active
? 'text-blue-400'
: 'text-gray-400 group-hover:text-blue-400 transition-colors'
}
/> />
)} )}
{link.name} {link.name}
@ -183,6 +218,7 @@ const PublicLayout = () => {
{/* Right side: Language + Login */} {/* Right side: Language + Login */}
<div className="hidden md:flex items-center gap-3"> <div className="hidden md:flex items-center gap-3">
<LanguageSelector /> <LanguageSelector />
{themeToggle}
<div className="w-px h-5 bg-white/20" /> <div className="w-px h-5 bg-white/20" />
{navLinks {navLinks
.filter((l) => isLoginLink(l.resourceKey)) .filter((l) => isLoginLink(l.resourceKey))
@ -262,13 +298,18 @@ const PublicLayout = () => {
}} }}
className="flex items-center gap-2.5 px-3 py-2.5 text-sm font-medium text-gray-300 hover:bg-white/5 hover:text-white rounded-md transition-colors text-left" className="flex items-center gap-2.5 px-3 py-2.5 text-sm font-medium text-gray-300 hover:bg-white/5 hover:text-white rounded-md transition-colors text-left"
> >
{link.icon && <link.icon size={16} strokeWidth={1.75} className="text-gray-400" />} {link.icon && (
<link.icon size={16} strokeWidth={1.75} className="text-gray-400" />
)}
{link.name} {link.name}
</button> </button>
) )
})} })}
<div className="pt-2 pb-1 border-t border-white/10 mt-1"> <div className="pt-2 pb-1 border-t border-white/10 mt-1">
<div className="flex items-center justify-between gap-3">
<LanguageSelector /> <LanguageSelector />
{themeToggle}
</div>
</div> </div>
</nav> </nav>
</div> </div>
@ -440,12 +481,14 @@ const PublicLayout = () => {
{/* Contact Info */} {/* Contact Info */}
<div> <div>
<h3 className="text-lg font-bold mb-4 text-white"> <h3 className="text-lg font-bold mb-4 text-white">{translate('::App.Contact')}</h3>
{translate('::App.Contact')}
</h3>
<ul className="space-y-3"> <ul className="space-y-3">
<li className="flex items-start space-x-3"> <li className="flex items-start space-x-3">
<LuMapPin size={18} strokeWidth={1.75} className="text-gray-400 mt-1 flex-shrink-0" /> <LuMapPin
size={18}
strokeWidth={1.75}
className="text-gray-400 mt-1 flex-shrink-0"
/>
<span className="text-gray-400">{translate('::Public.footer.address')}</span> <span className="text-gray-400">{translate('::Public.footer.address')}</span>
</li> </li>
<li className="flex items-center space-x-3"> <li className="flex items-center space-x-3">

34
ui/src/components/orders/BillingControls.tsx
View file

@ -33,7 +33,7 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
return ( return (
<div <div
className={`sticky z-20 bg-white border-b border-gray-200 shadow-sm mb-6 transition-all duration-300 ${ className={`sticky z-20 bg-white border-b border-gray-200 shadow-sm mb-6 transition-all duration-300 dark:border-gray-800 dark:bg-gray-900 dark:shadow-gray-950/40 ${
isScrolled ? 'top-[5.5rem]' : 'top-[6.5rem]' isScrolled ? 'top-[5.5rem]' : 'top-[6.5rem]'
}`} }`}
> >
@ -41,8 +41,8 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
<div className="flex flex-col sm:flex-row items-center justify-between gap-4"> <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="flex items-center space-x-6"> <div className="flex items-center space-x-6">
<div className="flex items-center space-x-2 rounded-lg"> <div className="flex items-center space-x-2 rounded-lg">
<FaCalendar className="w-5 h-5 text-gray-600" /> <FaCalendar className="w-5 h-5 text-gray-600 dark:text-gray-300" />
<span className="font-medium text-gray-900"> <span className="font-medium text-gray-900 dark:text-gray-100">
{translate('::Public.products.billingcycle')} {translate('::Public.products.billingcycle')}
</span> </span>
</div> </div>
@ -55,8 +55,8 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
globalBillingCycle === 'monthly' globalBillingCycle === 'monthly'
? 'bg-blue-600 text-white shadow-md' ? 'bg-blue-600 text-white shadow-md'
: hasCartItems : hasCartItems
? 'bg-gray-200 text-gray-400 cursor-not-allowed' ? 'bg-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-800 dark:text-gray-500'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200' : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700'
}`} }`}
title={ title={
hasCartItems ? 'Sepette ürün varken faturalama döngüsü değiştirilemez' : undefined hasCartItems ? 'Sepette ürün varken faturalama döngüsü değiştirilemez' : undefined
@ -71,8 +71,8 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
globalBillingCycle === 'yearly' globalBillingCycle === 'yearly'
? 'bg-blue-600 text-white shadow-md' ? 'bg-blue-600 text-white shadow-md'
: hasCartItems : hasCartItems
? 'bg-gray-200 text-gray-400 cursor-not-allowed' ? 'bg-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-800 dark:text-gray-500'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200' : 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700'
}`} }`}
title={ title={
hasCartItems ? 'Sepette ürün varken faturalama döngüsü değiştirilemez' : undefined hasCartItems ? 'Sepette ürün varken faturalama döngüsü değiştirilemez' : undefined
@ -86,8 +86,8 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
<div className="flex items-center space-x-6"> <div className="flex items-center space-x-6">
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<FaClock className="w-5 h-5 text-gray-600" /> <FaClock className="w-5 h-5 text-gray-600 dark:text-gray-300" />
<span className="font-medium text-gray-900"> <span className="font-medium text-gray-900 dark:text-gray-100">
{translate('::Public.products.period')} {translate('::Public.products.period')}
</span> </span>
</div> </div>
@ -95,10 +95,10 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<button <button
onClick={() => !hasCartItems && setGlobalPeriod(Math.max(1, globalPeriod - 1))} onClick={() => !hasCartItems && setGlobalPeriod(Math.max(1, globalPeriod - 1))}
className={`p-2 rounded-md border border-gray-300 transition-colors ${ className={`p-2 rounded-md border border-gray-300 transition-colors dark:border-gray-700 dark:text-gray-200 ${
globalPeriod <= 1 || hasCartItems globalPeriod <= 1 || hasCartItems
? 'bg-gray-100 text-gray-400 cursor-not-allowed' ? 'bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-gray-800 dark:text-gray-500'
: 'hover:bg-gray-50' : 'hover:bg-gray-50 dark:hover:bg-gray-800'
}`} }`}
disabled={globalPeriod <= 1 || hasCartItems} disabled={globalPeriod <= 1 || hasCartItems}
title={hasCartItems ? 'Sepette ürün varken periyod değiştirilemez' : undefined} title={hasCartItems ? 'Sepette ürün varken periyod değiştirilemez' : undefined}
@ -106,9 +106,9 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
<FaMinus className="w-4 h-4" /> <FaMinus className="w-4 h-4" />
</button> </button>
<div className="flex items-center space-x-2 bg-gray-50 px-4 py-2 rounded-lg"> <div className="flex items-center space-x-2 bg-gray-50 px-4 py-2 rounded-lg dark:bg-gray-800">
<span className="font-bold text-lg text-blue-600">{globalPeriod}</span> <span className="font-bold text-lg text-blue-600">{globalPeriod}</span>
<span className="text-sm text-gray-600"> <span className="text-sm text-gray-600 dark:text-gray-300">
{globalBillingCycle === 'monthly' {globalBillingCycle === 'monthly'
? translate('::Public.products.billingcycle.month') ? translate('::Public.products.billingcycle.month')
: translate('::Public.products.billingcycle.year')} : translate('::Public.products.billingcycle.year')}
@ -117,10 +117,10 @@ export const BillingControls: React.FC<BillingControlsProps> = ({
<button <button
onClick={() => !hasCartItems && setGlobalPeriod(globalPeriod + 1)} onClick={() => !hasCartItems && setGlobalPeriod(globalPeriod + 1)}
className={`p-2 rounded-md border border-gray-300 transition-colors ${ className={`p-2 rounded-md border border-gray-300 transition-colors dark:border-gray-700 dark:text-gray-200 ${
hasCartItems hasCartItems
? 'bg-gray-100 text-gray-400 cursor-not-allowed' ? 'bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-gray-800 dark:text-gray-500'
: 'hover:bg-gray-50' : 'hover:bg-gray-50 dark:hover:bg-gray-800'
}`} }`}
disabled={hasCartItems} disabled={hasCartItems}
title={hasCartItems ? 'Sepette ürün varken periyod değiştirilemez' : undefined} title={hasCartItems ? 'Sepette ürün varken periyod değiştirilemez' : undefined}

32
ui/src/components/orders/Cart.tsx
View file

@ -51,17 +51,17 @@ export const Cart: React.FC<CartProps> = ({
<div className="fixed inset-0 z-50 overflow-hidden"> <div className="fixed inset-0 z-50 overflow-hidden">
<div className="absolute inset-0 bg-black bg-opacity-50" onClick={onClose} /> <div className="absolute inset-0 bg-black bg-opacity-50" onClick={onClose} />
<div className="absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-xl"> <div className="absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-xl dark:bg-gray-900">
<div className="flex flex-col h-full"> <div className="flex flex-col h-full">
<div className="flex items-center justify-between p-6 border-b border-gray-200"> <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
<h2 className="text-base font-semibold text-gray-900"> <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100">
{translate('::Public.cart.title')} {translate('::Public.cart.title')}
</h2> </h2>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
{cartState.items.length > 0 && ( {cartState.items.length > 0 && (
<button <button
onClick={handleClearCart} onClick={handleClearCart}
className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors" className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors dark:hover:bg-red-950/40"
title={translate('::Public.cart.clear')} title={translate('::Public.cart.clear')}
> >
<FaTrash className="w-5 h-5" /> <FaTrash className="w-5 h-5" />
@ -69,7 +69,7 @@ export const Cart: React.FC<CartProps> = ({
)} )}
<button <button
onClick={onClose} onClick={onClose}
className="p-2 hover:bg-gray-100 rounded-lg transition-colors" className="p-2 hover:bg-gray-100 rounded-lg transition-colors dark:text-gray-200 dark:hover:bg-gray-800"
> >
<FaTimes className="w-5 h-5" /> <FaTimes className="w-5 h-5" />
</button> </button>
@ -78,7 +78,7 @@ export const Cart: React.FC<CartProps> = ({
<div className="flex-1 overflow-y-auto p-6"> <div className="flex-1 overflow-y-auto p-6">
{cartState.items.length === 0 ? ( {cartState.items.length === 0 ? (
<div className="flex flex-col items-center justify-center h-full text-gray-500"> <div className="flex flex-col items-center justify-center h-full text-gray-500 dark:text-gray-400">
<FaShoppingBag className="w-16 h-16 mb-4" /> <FaShoppingBag className="w-16 h-16 mb-4" />
<p className="text-lg font-medium">{translate('::Public.cart.empty.title')}</p> <p className="text-lg font-medium">{translate('::Public.cart.empty.title')}</p>
<p className="text-sm">{translate('::Public.cart.empty.subtitle')}</p> <p className="text-sm">{translate('::Public.cart.empty.subtitle')}</p>
@ -88,10 +88,10 @@ export const Cart: React.FC<CartProps> = ({
{cartState.items.map((item: BasketItem, index: number) => ( {cartState.items.map((item: BasketItem, index: number) => (
<div <div
key={`${item.product.id}-${item.billingCycle}-${index}`} key={`${item.product.id}-${item.billingCycle}-${index}`}
className="border border-gray-200 rounded-lg p-4" className="border border-gray-200 rounded-lg p-4 dark:border-gray-700 dark:bg-gray-950"
> >
<div className="flex justify-between items-start mb-2"> <div className="flex justify-between items-start mb-2">
<h4 className="font-medium text-gray-900 text-sm leading-tight"> <h4 className="font-medium text-gray-900 text-sm leading-tight dark:text-gray-100">
{translate('::' + item.product.name)} {translate('::' + item.product.name)}
</h4> </h4>
<button <button
@ -103,9 +103,9 @@ export const Cart: React.FC<CartProps> = ({
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="text-sm text-gray-600"> <div className="text-sm text-gray-600 dark:text-gray-300">
{item.product.isQuantityBased && item.quantity > 1 && ( {item.product.isQuantityBased && item.quantity > 1 && (
<span className="font-medium text-gray-900">{item.quantity}x - </span> <span className="font-medium text-gray-900 dark:text-gray-100">{item.quantity}x - </span>
)} )}
{item.billingCycle === 'monthly' {item.billingCycle === 'monthly'
? translate('::Public.products.billingcycle.monthly') ? translate('::Public.products.billingcycle.monthly')
@ -113,7 +113,7 @@ export const Cart: React.FC<CartProps> = ({
? translate('::Public.products.billingcycle.yearly') ? translate('::Public.products.billingcycle.yearly')
: translate('::Public.products.billingcycle.monthly')} : translate('::Public.products.billingcycle.monthly')}
{cartState.globalPeriod > 1 && item.product.isQuantityBased && ( {cartState.globalPeriod > 1 && item.product.isQuantityBased && (
<span className="text-xs text-gray-500"> <span className="text-xs text-gray-500 dark:text-gray-400">
({cartState.globalPeriod}{' '} ({cartState.globalPeriod}{' '}
{item.billingCycle === 'monthly' {item.billingCycle === 'monthly'
? translate('::Public.products.billingcycle.month') ? translate('::Public.products.billingcycle.month')
@ -127,14 +127,14 @@ export const Cart: React.FC<CartProps> = ({
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<button <button
onClick={() => updateQuantity(item.product.id, item.quantity - 1)} onClick={() => updateQuantity(item.product.id, item.quantity - 1)}
className="p-1 rounded border border-gray-300 hover:bg-gray-50" className="p-1 rounded border border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
> >
<FaMinus className="w-3 h-3" /> <FaMinus className="w-3 h-3" />
</button> </button>
<span className="w-8 text-center text-sm">{item.quantity}</span> <span className="w-8 text-center text-sm dark:text-gray-100">{item.quantity}</span>
<button <button
onClick={() => updateQuantity(item.product.id, item.quantity + 1)} onClick={() => updateQuantity(item.product.id, item.quantity + 1)}
className="p-1 rounded border border-gray-300 hover:bg-gray-50" className="p-1 rounded border border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
> >
<FaPlus className="w-3 h-3" /> <FaPlus className="w-3 h-3" />
</button> </button>
@ -152,9 +152,9 @@ export const Cart: React.FC<CartProps> = ({
</div> </div>
{cartState.items.length > 0 && ( {cartState.items.length > 0 && (
<div className="border-t border-gray-200 p-6"> <div className="border-t border-gray-200 p-6 dark:border-gray-700">
<div className="flex justify-between items-center mb-4"> <div className="flex justify-between items-center mb-4">
<span className="text-lg font-semibold text-gray-900"> <span className="text-lg font-semibold text-gray-900 dark:text-gray-100">
{translate('::App.Listform.ListformField.Total')} {translate('::App.Listform.ListformField.Total')}
</span> </span>
<span className="text-xl font-bold text-blue-600"> <span className="text-xl font-bold text-blue-600">

14
ui/src/components/orders/OrderSuccess.tsx
View file

@ -15,24 +15,24 @@ export const OrderSuccess: React.FC<OrderSuccessProps> = ({ orderId, onBackToSho
return ( return (
<div className="max-w-2xl mx-auto text-center"> <div className="max-w-2xl mx-auto text-center">
<div className="bg-white rounded-xl shadow-lg border border-gray-200 p-8"> <div className="bg-white rounded-xl shadow-lg border border-gray-200 p-8 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
<div className="mb-6"> <div className="mb-6">
<FaCheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" /> <FaCheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
<h2 className="text-xl font-bold text-gray-900"> <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">
{translate('::Public.order.success.title')} {translate('::Public.order.success.title')}
</h2> </h2>
<p className="text-gray-600"> <p className="text-gray-600 dark:text-gray-300">
{translate('::Public.order.success.number')}{' '} {translate('::Public.order.success.number')}{' '}
<span className="font-semibold text-blue-600">#{orderId}</span> <span className="font-semibold text-blue-600">#{orderId}</span>
</p> </p>
</div> </div>
<div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-6"> <div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-6 dark:border-green-900/60 dark:bg-green-950/30">
<h3 className="font-semibold text-green-800 mb-2"> <h3 className="font-semibold text-green-800 mb-2 dark:text-green-300">
{translate('::Public.order.success.nextSteps')} {translate('::Public.order.success.nextSteps')}
</h3> </h3>
<ul className="text-sm text-green-700 space-y-1 text-left"> <ul className="text-sm text-green-700 space-y-1 text-left dark:text-green-200">
<li>• {translate('::Public.order.success.step1')}</li> <li>• {translate('::Public.order.success.step1')}</li>
<li>• {translate('::Public.order.success.step2')}</li> <li>• {translate('::Public.order.success.step2')}</li>
<li>• {translate('::Public.order.success.step3')}</li> <li>• {translate('::Public.order.success.step3')}</li>
@ -42,7 +42,7 @@ export const OrderSuccess: React.FC<OrderSuccessProps> = ({ orderId, onBackToSho
<div className="flex flex-col sm:flex-row gap-4 items-center justify-center"> <div className="flex flex-col sm:flex-row gap-4 items-center justify-center">
<button <button
onClick={() => navigate(ROUTES_ENUM.public.home)} onClick={() => navigate(ROUTES_ENUM.public.home)}
className="flex items-center justify-center px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors" className="flex items-center justify-center px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
> >
<FaArrowLeft className="w-4 h-4 mr-2" /> <FaArrowLeft className="w-4 h-4 mr-2" />
{translate('::Public.notFound.button')} {translate('::Public.notFound.button')}

45
ui/src/components/orders/PaymentForm.tsx
View file

@ -127,15 +127,15 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
<form onSubmit={handleSubmit} className="flex flex-col lg:flex-row gap-6"> <form onSubmit={handleSubmit} className="flex flex-col lg:flex-row gap-6">
{/* 3 Sütun: Ödeme Yöntemi | Taksit Seçenekleri | Sipariş Özeti */} {/* 3 Sütun: Ödeme Yöntemi | Taksit Seçenekleri | Sipariş Özeti */}
<div className="w-full lg:w-1/3 flex flex-col gap-6"> <div className="w-full lg:w-1/3 flex flex-col gap-6">
<div className="bg-white rounded-xl shadow border p-6"> <div className="bg-white rounded-xl shadow border p-6 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
{tenant && ( {tenant && (
<> <>
<h2 className="text-lg font-semibold mb-4 flex items-center"> <h2 className="text-lg font-semibold mb-4 flex items-center">
<FaUser className="w-5 h-5 text-green-600 mr-2" />{' '} <FaUser className="w-5 h-5 text-green-600 mr-2" />{' '}
{translate('::Public.payment.customerInfo')} {translate('::Public.payment.customerInfo')}
</h2> </h2>
<div className="pt-4 border-t border-gray-200"> <div className="pt-4 border-t border-gray-200 dark:border-gray-700">
<div className="grid grid-cols-1 gap-y-3 text-sm text-gray-700"> <div className="grid grid-cols-1 gap-y-3 text-sm text-gray-700 dark:text-gray-300">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<FaUser className="w-4 h-4 text-gray-500" /> <FaUser className="w-4 h-4 text-gray-500" />
<span className="font-medium"> <span className="font-medium">
@ -252,7 +252,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
<div className="w-full lg:w-1/3 flex flex-col gap-6"> <div className="w-full lg:w-1/3 flex flex-col gap-6">
{/* 1. Sütun: Ödeme Yöntemi */} {/* 1. Sütun: Ödeme Yöntemi */}
<div className="bg-white rounded-xl shadow border p-6"> <div className="bg-white rounded-xl shadow border p-6 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
<h2 className="text-lg font-semibold mb-4 flex items-center"> <h2 className="text-lg font-semibold mb-4 flex items-center">
<FaLock className="w-5 h-5 text-green-600 mr-2" />{' '} <FaLock className="w-5 h-5 text-green-600 mr-2" />{' '}
{translate('::Public.payment.method.title')} {translate('::Public.payment.method.title')}
@ -264,7 +264,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
className={`flex items-center p-3 border-2 rounded-lg cursor-pointer transition-all ${ className={`flex items-center p-3 border-2 rounded-lg cursor-pointer transition-all ${
selectedPaymentMethod === method.name selectedPaymentMethod === method.name
? 'border-blue-500 bg-blue-50' ? 'border-blue-500 bg-blue-50'
: 'border-gray-200 hover:border-gray-300' : 'border-gray-200 hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-500'
}`} }`}
> >
<input <input
@ -279,8 +279,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
/> />
<span className="text-2xl mr-3">{method.logo}</span> <span className="text-2xl mr-3">{method.logo}</span>
<div> <div>
<div className="font-medium text-gray-900">{method.name}</div> <div className="font-medium text-gray-900 dark:text-gray-100">{method.name}</div>
<div className="text-sm text-gray-600"> <div className="text-sm text-gray-600 dark:text-gray-300">
{method.name === defaultPaymentMethod {method.name === defaultPaymentMethod
? translate('::Public.payment.method.installmentsAvailable') ? translate('::Public.payment.method.installmentsAvailable')
: translate('::Public.payment.method.noCommission')} : translate('::Public.payment.method.noCommission')}
@ -293,8 +293,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
{/* Taksit Seçenekleri */} {/* Taksit Seçenekleri */}
{selectedPaymentMethod === defaultPaymentMethod && ( {selectedPaymentMethod === defaultPaymentMethod && (
<div className="bg-white rounded-xl shadow border p-4"> <div className="bg-white rounded-xl shadow border p-4 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
<h3 className="text-md font-medium text-gray-800 mb-2"> <h3 className="text-md font-medium text-gray-800 dark:text-gray-100 mb-2">
{translate('::App.Orders.InstallmentOptions')} {translate('::App.Orders.InstallmentOptions')}
</h3> </h3>
<div className="grid grid-cols-2 md:grid-cols-3 gap-3"> <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
@ -304,7 +304,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
className={`flex flex-col items-center justify-center h-full p-4 border-2 rounded-xl cursor-pointer transition-all text-xs md:text-sm text-center select-none ${ className={`flex flex-col items-center justify-center h-full p-4 border-2 rounded-xl cursor-pointer transition-all text-xs md:text-sm text-center select-none ${
selectedInstallment?.installment === option.installment selectedInstallment?.installment === option.installment
? 'border-blue-500 bg-blue-50 shadow-md scale-105' ? 'border-blue-500 bg-blue-50 shadow-md scale-105'
: 'border-gray-200 hover:border-blue-200' : 'border-gray-200 hover:border-blue-200 dark:border-gray-700 dark:hover:border-blue-500'
}`} }`}
> >
<input <input
@ -327,7 +327,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
? `${option.installment} ${translate('::Public.payment.installments.monthly')}` ? `${option.installment} ${translate('::Public.payment.installments.monthly')}`
: translate('::Public.payment.installments.single')} : translate('::Public.payment.installments.single')}
</div> </div>
<div className="font-extrabold text-lg text-gray-900 mt-1"> <div className="font-extrabold text-lg text-gray-900 dark:text-gray-100 mt-1">
{formatPrice( {formatPrice(
(cartState.total + cartState.total * option.commission) / (cartState.total + cartState.total * option.commission) /
option.installment, option.installment,
@ -344,8 +344,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
<div className="w-full lg:w-1/3 flex flex-col gap-6"> <div className="w-full lg:w-1/3 flex flex-col gap-6">
{/* Kart Bilgileri */} {/* Kart Bilgileri */}
{selectedPaymentMethod === defaultPaymentMethod && ( {selectedPaymentMethod === defaultPaymentMethod && (
<div className="bg-white rounded-xl shadow border p-6 space-y-3"> <div className="bg-white rounded-xl shadow border p-6 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40 space-y-3">
<h3 className="text-md font-medium text-gray-800 mb-3"> <h3 className="text-md font-medium text-gray-800 dark:text-gray-100 mb-3">
{translate('::Public.payment.card.title')} {translate('::Public.payment.card.title')}
</h3> </h3>
<input <input
@ -353,7 +353,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
required required
value={paymentData.cardName} value={paymentData.cardName}
onChange={(e) => handleInputChange('cardName', e.target.value)} onChange={(e) => handleInputChange('cardName', e.target.value)}
className="w-full px-4 py-2 border border-gray-300 rounded-lg" className="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
placeholder={translate('::Public.payment.card.name')} placeholder={translate('::Public.payment.card.name')}
/> />
<input <input
@ -361,7 +361,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
required required
value={paymentData.cardNumber} value={paymentData.cardNumber}
onChange={(e) => handleInputChange('cardNumber', e.target.value)} onChange={(e) => handleInputChange('cardNumber', e.target.value)}
className="w-full px-4 py-2 border border-gray-300 rounded-lg" className="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
placeholder={translate('::Public.payment.card.number')} placeholder={translate('::Public.payment.card.number')}
maxLength={19} maxLength={19}
/> />
@ -371,7 +371,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
required required
value={paymentData.expiryDate} value={paymentData.expiryDate}
onChange={(e) => handleInputChange('expiryDate', e.target.value)} onChange={(e) => handleInputChange('expiryDate', e.target.value)}
className="w-full px-4 py-2 border border-gray-300 rounded-lg" className="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
placeholder="MM/YY" placeholder="MM/YY"
maxLength={5} maxLength={5}
/> />
@ -380,7 +380,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
required required
value={paymentData.cvv} value={paymentData.cvv}
onChange={(e) => handleInputChange('cvv', e.target.value)} onChange={(e) => handleInputChange('cvv', e.target.value)}
className="w-full px-4 py-2 border border-gray-300 rounded-lg" className="w-full px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
placeholder="CVV" placeholder="CVV"
maxLength={4} maxLength={4}
/> />
@ -389,8 +389,8 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
)} )}
{/* Sipariş Özeti ve Butonlar */} {/* Sipariş Özeti ve Butonlar */}
<div className="bg-white rounded-xl shadow border p-6"> <div className="bg-white rounded-xl shadow border p-6 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
<h3 className="text-lg font-semibold text-gray-900 mb-4"> <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
{translate('::Public.payment.summary.title')} {translate('::Public.payment.summary.title')}
</h3> </h3>
@ -415,7 +415,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
))} ))}
</div> </div>
<div className="space-y-1 text-sm border-t border-gray-200 pt-4 text-gray-600"> <div className="space-y-1 text-sm border-t border-gray-200 dark:border-gray-700 pt-4 text-gray-600 dark:text-gray-300">
<div className="flex justify-between"> <div className="flex justify-between">
<span>{translate('::Public.payment.summary.subtotal')}</span> <span>{translate('::Public.payment.summary.subtotal')}</span>
<span>{formatPrice(cartState.total)}</span> <span>{formatPrice(cartState.total)}</span>
@ -435,7 +435,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
</span> </span>
</div> </div>
)} )}
<div className="flex justify-between text-base font-bold pt-2 text-gray-900"> <div className="flex justify-between text-base font-bold pt-2 text-gray-900 dark:text-gray-100">
<span>{translate('::App.Listform.ListformField.Total')}</span> <span>{translate('::App.Listform.ListformField.Total')}</span>
<span className="text-blue-600">{formatPrice(finalTotal)}</span> <span className="text-blue-600">{formatPrice(finalTotal)}</span>
</div> </div>
@ -446,7 +446,7 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
<button <button
type="button" type="button"
onClick={onBack} onClick={onBack}
className="flex items-center px-6 py-3 border border-gray-300 text-gray-700 rounded-lg" className="flex items-center px-6 py-3 border border-gray-300 text-gray-700 dark:text-gray-300 rounded-lg"
> >
<FaArrowLeft className="w-4 h-4 mr-2" /> <FaArrowLeft className="w-4 h-4 mr-2" />
{translate('::Back')} {translate('::Back')}
@ -468,3 +468,4 @@ export const PaymentForm: React.FC<PaymentFormProps> = ({
</div> </div>
) )
} }

22
ui/src/components/orders/ProductCard.tsx
View file

@ -89,7 +89,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
} }
return ( return (
<div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-lg transition-all duration-300 group flex flex-col h-full"> <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-lg transition-all duration-300 group flex flex-col h-full dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
{product.imageUrl && ( {product.imageUrl && (
<div className="aspect-video overflow-hidden"> <div className="aspect-video overflow-hidden">
<img <img
@ -107,28 +107,28 @@ export const ProductCard: React.FC<ProductCardProps> = ({
</span> </span>
</div> </div>
<h3 className="text-lg font-semibold text-gray-900 mb-2 line-clamp-2">{translate('::' + product.name)}</h3> <h3 className="text-lg font-semibold text-gray-900 mb-2 line-clamp-2 dark:text-gray-100">{translate('::' + product.name)}</h3>
<p className="text-gray-600 text-sm mb-4 line-clamp-3">{translate('::' + product.description)}</p> <p className="text-gray-600 text-sm mb-4 line-clamp-3 dark:text-gray-300">{translate('::' + product.description)}</p>
{/* Quantity and Yearly Savings above price */} {/* Quantity and Yearly Savings above price */}
<div className="mb-4 space-y-3"> <div className="mb-4 space-y-3">
{product.isQuantityBased && ( {product.isQuantityBased && (
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<span className="text-sm font-medium text-gray-700"> <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
{translate('::Public.products.quantity')} {translate('::Public.products.quantity')}
</span> </span>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<button <button
onClick={() => setQuantity(Math.max(1, quantity - 1))} onClick={() => setQuantity(Math.max(1, quantity - 1))}
className="p-1 rounded-md border border-gray-300 hover:bg-gray-50 transition-colors" className="p-1 rounded-md border border-gray-300 hover:bg-gray-50 transition-colors dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
> >
<FaMinus className="w-4 h-4" /> <FaMinus className="w-4 h-4" />
</button> </button>
<span className="w-12 text-center font-medium">{quantity}</span> <span className="w-12 text-center font-medium dark:text-gray-100">{quantity}</span>
<button <button
onClick={() => setQuantity(quantity + 1)} onClick={() => setQuantity(quantity + 1)}
className="p-1 rounded-md border border-gray-300 hover:bg-gray-50 transition-colors" className="p-1 rounded-md border border-gray-300 hover:bg-gray-50 transition-colors dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
> >
<FaPlus className="w-4 h-4" /> <FaPlus className="w-4 h-4" />
</button> </button>
@ -148,14 +148,14 @@ export const ProductCard: React.FC<ProductCardProps> = ({
{/* Bottom section with consistent height */} {/* Bottom section with consistent height */}
<div className="mt-auto"> <div className="mt-auto">
<div className="mb-4"> <div className="mb-4">
<div className="text-2xl font-bold text-gray-900"> <div className="text-2xl font-bold text-gray-900 dark:text-gray-100">
{formatPrice(getCurrentPrice())} {formatPrice(getCurrentPrice())}
<span className="text-sm font-normal text-gray-500 ml-1">{getUnitText()}</span> <span className="text-sm font-normal text-gray-500 ml-1 dark:text-gray-400">{getUnitText()}</span>
</div> </div>
{globalPeriod > 1 && ( {globalPeriod > 1 && (
<div className="text-lg font-semibold text-blue-600 mt-1"> <div className="text-lg font-semibold text-blue-600 mt-1">
{translate('::App.Listform.ListformField.Total')} {formatPrice(getTotalPrice())} {translate('::App.Listform.ListformField.Total')} {formatPrice(getTotalPrice())}
<span className="text-sm font-normal text-gray-500 ml-1">{getPeriodText()}</span> <span className="text-sm font-normal text-gray-500 ml-1 dark:text-gray-400">{getPeriodText()}</span>
</div> </div>
)} )}
</div> </div>
@ -170,7 +170,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
disabled={isDisabled} disabled={isDisabled}
className={`w-full font-medium py-3 px-4 rounded-lg transition-colors duration-200 transform ${ className={`w-full font-medium py-3 px-4 rounded-lg transition-colors duration-200 transform ${
isDisabled isDisabled
? 'bg-gray-400 text-gray-700 cursor-not-allowed' ? 'bg-gray-400 text-gray-700 cursor-not-allowed dark:bg-gray-700 dark:text-gray-400'
: 'bg-blue-600 hover:bg-blue-700 text-white hover:scale-[1.02] active:scale-[0.98]' : 'bg-blue-600 hover:bg-blue-700 text-white hover:scale-[1.02] active:scale-[0.98]'
}`} }`}
> >

22
ui/src/components/orders/ProductCatalog.tsx
View file

@ -88,10 +88,10 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
return ( return (
<div className="flex flex-col lg:flex-row gap-8"> <div className="flex flex-col lg:flex-row gap-8">
<aside className="lg:w-64 flex-shrink-0"> <aside className="lg:w-64 flex-shrink-0">
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 sticky top-40"> <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 sticky top-40 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
<div className="flex items-center space-x-2 mb-4"> <div className="flex items-center space-x-2 mb-4">
<FaFilter className="w-5 h-5 text-gray-600" /> <FaFilter className="w-5 h-5 text-gray-600 dark:text-gray-300" />
<h3 className="font-semibold text-gray-900"> <h3 className="font-semibold text-gray-900 dark:text-gray-100">
{translate('::Public.products.categories')} {translate('::Public.products.categories')}
</h3> </h3>
</div> </div>
@ -103,7 +103,7 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors flex items-center justify-between ${ className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-colors flex items-center justify-between ${
selectedCategory === category selectedCategory === category
? 'bg-blue-100 text-blue-800 border border-blue-200' ? 'bg-blue-100 text-blue-800 border border-blue-200'
: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100'
}`} }`}
> >
<span> <span>
@ -115,7 +115,7 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
className={`text-xs px-2 py-1 rounded-full ${ className={`text-xs px-2 py-1 rounded-full ${
selectedCategory === category selectedCategory === category
? 'bg-blue-200 text-blue-800' ? 'bg-blue-200 text-blue-800'
: 'bg-gray-200 text-gray-600' : 'bg-gray-200 text-gray-600 dark:bg-gray-800 dark:text-gray-300'
}`} }`}
> >
{getCategoryCount(category)} {getCategoryCount(category)}
@ -127,8 +127,8 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
{/* Search input moved here */} {/* Search input moved here */}
<div className="mt-6"> <div className="mt-6">
<div className="flex items-center space-x-2 mb-3"> <div className="flex items-center space-x-2 mb-3">
<FaSearch className="w-5 h-5 text-gray-600" /> <FaSearch className="w-5 h-5 text-gray-600 dark:text-gray-300" />
<h3 className="font-semibold text-gray-900"> <h3 className="font-semibold text-gray-900 dark:text-gray-100">
{translate('::ListForms.ListFormEdit.TabSearch')} {translate('::ListForms.ListFormEdit.TabSearch')}
</h3> </h3>
</div> </div>
@ -139,7 +139,7 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
placeholder={translate('::Public.products.search.placeholder')} placeholder={translate('::Public.products.search.placeholder')}
value={searchQuery} value={searchQuery}
onChange={(e) => onSearchChange(e.target.value)} onChange={(e) => onSearchChange(e.target.value)}
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all" className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
/> />
</div> </div>
</div> </div>
@ -148,7 +148,7 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
<main className="flex-1"> <main className="flex-1">
{loading ? ( {loading ? (
<div className="flex items-center justify-center min-h-screen bg-gray-50"> <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
<div className="text-center"> <div className="text-center">
<Loading loading={loading} /> <Loading loading={loading} />
</div> </div>
@ -172,10 +172,10 @@ export const ProductCatalog: React.FC<ProductCatalogProps> = ({
<div className="text-gray-400 mb-2"> <div className="text-gray-400 mb-2">
<FaFilter className="w-12 h-12 mx-auto" /> <FaFilter className="w-12 h-12 mx-auto" />
</div> </div>
<h2 className="text-2xl font-bold text-gray-900 mb-2"> <h2 className="text-2xl font-bold text-gray-900 mb-2 dark:text-gray-100">
{translate('::App.NoResults')} {translate('::App.NoResults')}
</h2> </h2>
<p className="text-gray-600">{translate('::Public.products.empty.description')}</p> <p className="text-gray-600 dark:text-gray-300">{translate('::Public.products.empty.description')}</p>
</div> </div>
)} )}
</> </>

77
ui/src/components/orders/TenantForm.tsx
View file

@ -74,7 +74,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
return ( return (
<div className="flex flex-col lg:flex-row gap-6 mb-6"> <div className="flex flex-col lg:flex-row gap-6 mb-6">
<div className="w-full lg:w-1/3 bg-white rounded-xl shadow-lg border border-gray-200 p-6"> <div className="w-full lg:w-1/3 bg-white rounded-xl shadow-lg border border-gray-200 p-6 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
<div className="mb-6"> <div className="mb-6">
<h2 className="text-lg font-semibold mb-4 flex items-center"> <h2 className="text-lg font-semibold mb-4 flex items-center">
<FaUser className="w-5 h-5 text-green-600 mr-2" />{' '} <FaUser className="w-5 h-5 text-green-600 mr-2" />{' '}
@ -88,14 +88,14 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
onClick={() => setIsExisting(true)} onClick={() => setIsExisting(true)}
className={`p-4 border-2 rounded-xl transition-all text-left select-none ${ className={`p-4 border-2 rounded-xl transition-all text-left select-none ${
isExisting === true isExisting === true
? 'border-blue-500 bg-blue-50 shadow-md scale-[1.02]' ? 'border-blue-500 bg-blue-50 shadow-md scale-[1.02] dark:bg-blue-950/30'
: 'border-gray-200 hover:border-blue-300' : 'border-gray-200 hover:border-blue-300 dark:border-gray-700 dark:hover:border-blue-500'
}`} }`}
> >
<div className="font-semibold text-gray-900 mb-2"> <div className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
{translate('::Public.products.tenantForm.existing.title')} {translate('::Public.products.tenantForm.existing.title')}
</div> </div>
<div className="text-sm text-gray-600"> <div className="text-sm text-gray-600 dark:text-gray-400">
{translate('::Public.products.tenantForm.existing.desc')} {translate('::Public.products.tenantForm.existing.desc')}
</div> </div>
</button> </button>
@ -104,14 +104,14 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
onClick={() => setIsExisting(false)} onClick={() => setIsExisting(false)}
className={`p-4 border-2 rounded-xl transition-all text-left select-none ${ className={`p-4 border-2 rounded-xl transition-all text-left select-none ${
isExisting === false isExisting === false
? 'border-blue-500 bg-blue-50 shadow-md scale-[1.02]' ? 'border-blue-500 bg-blue-50 shadow-md scale-[1.02] dark:bg-blue-950/30'
: 'border-gray-200 hover:border-blue-300' : 'border-gray-200 hover:border-blue-300 dark:border-gray-700 dark:hover:border-blue-500'
}`} }`}
> >
<div className="font-semibold text-gray-900 mb-2"> <div className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
{translate('::Public.products.tenantForm.new.title')} {translate('::Public.products.tenantForm.new.title')}
</div> </div>
<div className="text-sm text-gray-600"> <div className="text-sm text-gray-600 dark:text-gray-400">
{translate('::Public.products.tenantForm.new.desc')} {translate('::Public.products.tenantForm.new.desc')}
</div> </div>
</button> </button>
@ -119,12 +119,12 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
</div> </div>
</div> </div>
<div className="w-full lg:w-2/3 bg-white rounded-xl shadow-lg border border-gray-200 p-6"> <div className="w-full lg:w-2/3 bg-white rounded-xl shadow-lg border border-gray-200 p-6 dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-950/40">
{isExisting !== null && ( {isExisting !== null && (
<form onSubmit={handleSubmit} className="space-y-6"> <form onSubmit={handleSubmit} className="space-y-6">
{isExisting ? ( {isExisting ? (
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-2"> <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
{translate('::Public.payment.customer.code')} {translate('::Public.payment.customer.code')}
</label> </label>
<div className="relative flex flex-col sm:flex-row sm:items-stretch"> <div className="relative flex flex-col sm:flex-row sm:items-stretch">
@ -143,7 +143,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
await getTenantInfo() await getTenantInfo()
} }
}} }}
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg sm:rounded-l-lg sm:rounded-r-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all" className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 sm:rounded-l-lg sm:rounded-r-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
/> />
</div> </div>
<button <button
@ -157,7 +157,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
</div> </div>
{formData.organizationName && ( {formData.organizationName && (
<div className="grid grid-cols-1 gap-y-3 text-sm text-gray-700 p-3"> <div className="grid grid-cols-1 gap-y-3 text-sm text-gray-700 dark:text-gray-300 p-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<FaUser className="w-4 h-4 text-gray-500" /> <FaUser className="w-4 h-4 text-gray-500" />
<span className="font-medium"> <span className="font-medium">
@ -264,7 +264,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
<div className="space-y-4"> <div className="space-y-4">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-2"> <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
{translate('::Public.products.tenantForm.orgName')} {translate('::Public.products.tenantForm.orgName')}
</label> </label>
<div className="relative"> <div className="relative">
@ -276,12 +276,12 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
placeholder="Enter your organization name" placeholder="Enter your organization name"
value={formData.organizationName || ''} value={formData.organizationName || ''}
onChange={(e) => handleInputChange('organizationName', e.target.value)} onChange={(e) => handleInputChange('organizationName', e.target.value)}
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all" className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
/> />
</div> </div>
</div> </div>
<div> <div>
<label className="text-sm font-medium text-gray-700"> <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
{translate('::LoginPanel.Profil')} {translate('::LoginPanel.Profil')}
</label> </label>
<div className="relative"> <div className="relative">
@ -292,7 +292,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
placeholder="Enter founder's name" placeholder="Enter founder's name"
value={formData.founder || ''} value={formData.founder || ''}
onChange={(e) => handleInputChange('founder', e.target.value)} onChange={(e) => handleInputChange('founder', e.target.value)}
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/> />
</div> </div>
</div> </div>
@ -300,7 +300,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div> <div>
<label className="text-sm font-medium text-gray-700"> <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
{translate('::Abp.Identity.User.UserInformation.PhoneNumber')} {translate('::Abp.Identity.User.UserInformation.PhoneNumber')}
</label> </label>
<div className="relative"> <div className="relative">
@ -311,12 +311,12 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
placeholder="+90 (___) ___-____" placeholder="+90 (___) ___-____"
value={formData.phoneNumber || ''} value={formData.phoneNumber || ''}
onChange={(e) => handleInputChange('phoneNumber', e.target.value)} onChange={(e) => handleInputChange('phoneNumber', e.target.value)}
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/> />
</div> </div>
</div> </div>
<div> <div>
<label className="text-sm font-medium text-gray-700"> <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
{translate('::Abp.Account.EmailAddress')} {translate('::Abp.Account.EmailAddress')}
</label> </label>
<div className="relative"> <div className="relative">
@ -327,14 +327,14 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
placeholder="sample@email.com" placeholder="sample@email.com"
value={formData.email || ''} value={formData.email || ''}
onChange={(e) => handleInputChange('email', e.target.value)} onChange={(e) => handleInputChange('email', e.target.value)}
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/> />
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<label className="text-sm font-medium text-gray-700"> <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
{translate('::App.Address')} {translate('::App.Address')}
</label> </label>
<div className="relative"> <div className="relative">
@ -345,14 +345,14 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
value={formData.address1 || ''} value={formData.address1 || ''}
onChange={(e) => handleInputChange('address1', e.target.value)} onChange={(e) => handleInputChange('address1', e.target.value)}
rows={3} rows={3}
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/> />
</div> </div>
</div> </div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div> <div>
<label className="text-sm font-medium text-gray-700"> <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
{translate('::Public.payment.customer.country')} {translate('::Public.payment.customer.country')}
</label> </label>
<div className="relative"> <div className="relative">
@ -362,12 +362,12 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
placeholder="Türkiye" placeholder="Türkiye"
value={formData.country || ''} value={formData.country || ''}
onChange={(e) => handleInputChange('country', e.target.value)} onChange={(e) => handleInputChange('country', e.target.value)}
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/> />
</div> </div>
</div> </div>
<div> <div>
<label className="text-sm font-medium text-gray-700"> <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
{translate('::Public.common.city')} {translate('::Public.common.city')}
</label> </label>
<div className="relative"> <div className="relative">
@ -378,7 +378,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
placeholder="İstanbul" placeholder="İstanbul"
value={formData.city || ''} value={formData.city || ''}
onChange={(e) => handleInputChange('city', e.target.value)} onChange={(e) => handleInputChange('city', e.target.value)}
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/> />
</div> </div>
</div> </div>
@ -386,7 +386,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div> <div>
<label className="text-sm font-medium text-gray-700"> <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
{translate('::Public.payment.customer.district')} {translate('::Public.payment.customer.district')}
</label> </label>
<div className="relative"> <div className="relative">
@ -397,12 +397,12 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
placeholder="Çekmeköy" placeholder="Çekmeköy"
value={formData.district || ''} value={formData.district || ''}
onChange={(e) => handleInputChange('district', e.target.value)} onChange={(e) => handleInputChange('district', e.target.value)}
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/> />
</div> </div>
</div> </div>
<div> <div>
<label className="text-sm font-medium text-gray-700"> <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
{translate('::Public.payment.customer.postalCode')} {translate('::Public.payment.customer.postalCode')}
</label> </label>
<div className="relative"> <div className="relative">
@ -413,7 +413,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
placeholder="34782" placeholder="34782"
value={formData.postalCode || ''} value={formData.postalCode || ''}
onChange={(e) => handleInputChange('postalCode', e.target.value)} onChange={(e) => handleInputChange('postalCode', e.target.value)}
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/> />
</div> </div>
</div> </div>
@ -421,7 +421,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div> <div>
<label className="text-sm font-medium text-gray-700"> <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
{translate('::Public.contact.taxOffice')} {translate('::Public.contact.taxOffice')}
</label> </label>
<div className="relative"> <div className="relative">
@ -432,12 +432,12 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
placeholder="Kozyatağı" placeholder="Kozyatağı"
value={formData.taxOffice} value={formData.taxOffice}
onChange={(e) => handleInputChange('taxOffice', e.target.value)} onChange={(e) => handleInputChange('taxOffice', e.target.value)}
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/> />
</div> </div>
</div> </div>
<div> <div>
<label className="text-sm font-medium text-gray-700"> <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
{translate('::Public.contact.taxNumber')} {translate('::Public.contact.taxNumber')}
</label> </label>
<div className="relative"> <div className="relative">
@ -448,14 +448,14 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
placeholder="1234567890" placeholder="1234567890"
value={formData.vknTckn} value={formData.vknTckn}
onChange={(e) => handleInputChange('vknTckn', e.target.value)} onChange={(e) => handleInputChange('vknTckn', e.target.value)}
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/> />
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<label className="text-sm font-medium text-gray-700"> <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
{translate('::Public.payment.customer.reference')} {translate('::Public.payment.customer.reference')}
</label> </label>
<div className="relative"> <div className="relative">
@ -465,7 +465,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
placeholder={translate('::Public.payment.customer.reference')} placeholder={translate('::Public.payment.customer.reference')}
value={formData.reference || ''} value={formData.reference || ''}
onChange={(e) => handleInputChange('reference', e.target.value)} onChange={(e) => handleInputChange('reference', e.target.value)}
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/> />
</div> </div>
</div> </div>
@ -476,7 +476,7 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
<button <button
type="button" type="button"
onClick={() => navigate(ROUTES_ENUM.public.products)} onClick={() => navigate(ROUTES_ENUM.public.products)}
className="flex items-center px-6 py-3 border border-gray-300 text-gray-700 rounded-lg" className="flex items-center px-6 py-3 border border-gray-300 text-gray-700 dark:text-gray-300 rounded-lg"
> >
<FaArrowLeft className="w-4 h-4 mr-2" /> <FaArrowLeft className="w-4 h-4 mr-2" />
{translate('::Back')} {translate('::Back')}
@ -495,3 +495,4 @@ export const TenantForm: React.FC<TenantFormProps> = ({ onSubmit }) => {
</div> </div>
) )
} }

35
ui/src/views/public/About.tsx
View file

@ -218,7 +218,7 @@ function buildAboutContent(
descriptionsContainerStyleClass: resolveLocalizedValue( descriptionsContainerStyleClass: resolveLocalizedValue(
translate, translate,
ABOUT_DESCRIPTIONS_CONTAINER_STYLE_KEY, ABOUT_DESCRIPTIONS_CONTAINER_STYLE_KEY,
'p-5 mx-auto text-gray-800 text-lg leading-relaxed shadow-md bg-white border-l-4 border-blue-600', 'p-5 mx-auto text-gray-800 dark:text-gray-200 text-lg leading-relaxed shadow-md bg-white dark:bg-gray-900 border-l-4 border-blue-600',
), ),
stats: stats:
about?.statsDto.map((stat, index) => ({ about?.statsDto.map((stat, index) => ({
@ -232,13 +232,13 @@ function buildAboutContent(
valueStyleClass: resolveLocalizedValue( valueStyleClass: resolveLocalizedValue(
translate, translate,
`Public.about.dynamic.stat.${index + 1}.valueStyleClass`, `Public.about.dynamic.stat.${index + 1}.valueStyleClass`,
'text-4xl font-bold text-gray-900 mb-2', 'text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2',
), ),
labelStyleClassKey: `Public.about.dynamic.stat.${index + 1}.labelStyleClass`, labelStyleClassKey: `Public.about.dynamic.stat.${index + 1}.labelStyleClass`,
labelStyleClass: resolveLocalizedValue( labelStyleClass: resolveLocalizedValue(
translate, translate,
`Public.about.dynamic.stat.${index + 1}.labelStyleClass`, `Public.about.dynamic.stat.${index + 1}.labelStyleClass`,
'text-gray-600', 'text-gray-600 dark:text-gray-300',
), ),
icon: stat.icon || '', icon: stat.icon || '',
value: stat.value, value: stat.value,
@ -278,19 +278,19 @@ function buildAboutContent(
cardStyleClass: resolveLocalizedValue( cardStyleClass: resolveLocalizedValue(
translate, translate,
`Public.about.dynamic.section.${section.key}.cardStyleClass`, `Public.about.dynamic.section.${section.key}.cardStyleClass`,
'bg-white p-8 rounded-xl shadow-lg', 'bg-white dark:bg-gray-900 p-8 rounded-xl shadow-lg dark:shadow-gray-950/40',
), ),
titleStyleClassKey: `Public.about.dynamic.section.${section.key}.titleStyleClass`, titleStyleClassKey: `Public.about.dynamic.section.${section.key}.titleStyleClass`,
titleStyleClass: resolveLocalizedValue( titleStyleClass: resolveLocalizedValue(
translate, translate,
`Public.about.dynamic.section.${section.key}.titleStyleClass`, `Public.about.dynamic.section.${section.key}.titleStyleClass`,
'text-2xl font-bold text-gray-900 mb-4', 'text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4',
), ),
descriptionStyleClassKey: `Public.about.dynamic.section.${section.key}.descriptionStyleClass`, descriptionStyleClassKey: `Public.about.dynamic.section.${section.key}.descriptionStyleClass`,
descriptionStyleClass: resolveLocalizedValue( descriptionStyleClass: resolveLocalizedValue(
translate, translate,
`Public.about.dynamic.section.${section.key}.descriptionStyleClass`, `Public.about.dynamic.section.${section.key}.descriptionStyleClass`,
'text-gray-700', 'text-gray-700 dark:text-gray-300',
), ),
})) ?? [], })) ?? [],
} }
@ -764,7 +764,7 @@ const About: FC = () => {
if (loading) { if (loading) {
return ( return (
<div className="flex items-center justify-center min-h-screen bg-gray-50"> <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
<div className="text-center"> <div className="text-center">
<Loading loading={loading} /> <Loading loading={loading} />
</div> </div>
@ -780,7 +780,7 @@ const About: FC = () => {
defaultTitle={APP_NAME} defaultTitle={APP_NAME}
></Helmet> ></Helmet>
<div className={`min-h-screen bg-gray-50 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}> <div className={`min-h-screen bg-gray-50 dark:bg-gray-950 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
{isDesignMode && !isPanelVisible && ( {isDesignMode && !isPanelVisible && (
<Button <Button
type="button" type="button"
@ -798,15 +798,16 @@ const About: FC = () => {
isDesignMode={isDesignMode} isDesignMode={isDesignMode}
onSelect={handleSelectBlock} onSelect={handleSelectBlock}
> >
<div className={content?.heroSectionStyleClass || 'relative bg-blue-900 text-white py-12'}> <div className={`${content?.heroSectionStyleClass || 'relative bg-blue-900 py-12 text-white'} dark:bg-gray-950`}>
<div <div
className="absolute inset-0 opacity-20" className="absolute inset-0 opacity-20 dark:opacity-35"
style={{ style={{
backgroundImage: `url("${content?.heroImage ?? ABOUT_HERO_IMAGE}")`, backgroundImage: `url("${content?.heroImage ?? ABOUT_HERO_IMAGE}")`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}} }}
></div> ></div>
<div className="absolute inset-0 bg-blue-950/25 dark:bg-gray-950/45"></div>
<div className="container mx-auto pt-20 relative"> <div className="container mx-auto pt-20 relative">
<h1 className={content?.heroTitleStyleClass || 'text-5xl font-bold ml-4 mt-3 mb-2 text-white'}> <h1 className={content?.heroTitleStyleClass || 'text-5xl font-bold ml-4 mt-3 mb-2 text-white'}>
{content?.heroTitle} {content?.heroTitle}
@ -817,7 +818,7 @@ const About: FC = () => {
</SelectableBlock> </SelectableBlock>
{/* Stats Section */} {/* Stats Section */}
<div className="py-10 bg-white"> <div className="py-10 bg-white dark:bg-gray-900">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="grid grid-cols-1 md:grid-cols-5 gap-8"> <div className="grid grid-cols-1 md:grid-cols-5 gap-8">
{content?.stats.map((stat, index) => { {content?.stats.map((stat, index) => {
@ -837,10 +838,10 @@ const About: FC = () => {
className={`w-12 h-12 mx-auto mb-4 ${getIconColor(index)}`} className={`w-12 h-12 mx-auto mb-4 ${getIconColor(index)}`}
/> />
)} )}
<div className={stat.valueStyleClass || 'text-4xl font-bold text-gray-900 mb-2'}> <div className={`${stat.valueStyleClass || 'text-4xl font-bold text-gray-900 mb-2'} dark:text-gray-100`}>
<AnimatedStatValue stat={stat} /> <AnimatedStatValue stat={stat} />
</div> </div>
<div className={stat.labelStyleClass || 'text-gray-600'}>{stat.label}</div> <div className={`${stat.labelStyleClass || 'text-gray-600'} dark:text-gray-300`}>{stat.label}</div>
</div> </div>
</SelectableBlock> </SelectableBlock>
) )
@ -859,7 +860,7 @@ const About: FC = () => {
isDesignMode={isDesignMode} isDesignMode={isDesignMode}
onSelect={handleSelectBlock} onSelect={handleSelectBlock}
> >
<div className={content?.descriptionsContainerStyleClass || 'p-5 mx-auto text-gray-800 text-lg leading-relaxed shadow-md bg-white border-l-4 border-blue-600'}> <div className={`${content?.descriptionsContainerStyleClass || 'p-5 mx-auto text-gray-800 text-lg leading-relaxed shadow-md bg-white border-l-4 border-blue-600'} dark:bg-gray-900 dark:text-gray-200`}>
{content?.descriptions.map((item, index) => ( {content?.descriptions.map((item, index) => (
<p key={item.key || `description-${index}`} className={item.styleClass || ''}> <p key={item.key || `description-${index}`} className={item.styleClass || ''}>
{item.text} {item.text}
@ -878,9 +879,9 @@ const About: FC = () => {
isDesignMode={isDesignMode} isDesignMode={isDesignMode}
onSelect={handleSelectBlock} onSelect={handleSelectBlock}
> >
<div className={section.cardStyleClass || 'bg-white p-8 rounded-xl shadow-lg'}> <div className={`${section.cardStyleClass || 'bg-white p-8 rounded-xl shadow-lg'} dark:bg-gray-900 dark:shadow-gray-950/40`}>
<h3 className={section.titleStyleClass || 'text-2xl font-bold text-gray-900 mb-4'}>{section.title}</h3> <h3 className={`${section.titleStyleClass || 'text-2xl font-bold text-gray-900 mb-4'} dark:text-gray-100`}>{section.title}</h3>
<p className={section.descriptionStyleClass || 'text-gray-700'}>{section.description}</p> <p className={`${section.descriptionStyleClass || 'text-gray-700'} dark:text-gray-300`}>{section.description}</p>
</div> </div>
</SelectableBlock> </SelectableBlock>
))} ))}

52
ui/src/views/public/Blog.tsx
View file

@ -67,7 +67,7 @@ const Blog = () => {
if (loading && posts.length === 0) { if (loading && posts.length === 0) {
return ( return (
<div className="flex items-center justify-center min-h-screen bg-gray-50"> <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
<div className="text-center"> <div className="text-center">
<Loading loading={loading} /> <Loading loading={loading} />
</div> </div>
@ -76,16 +76,16 @@ const Blog = () => {
} }
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
<Helmet <Helmet
titleTemplate={`%s | ${APP_NAME}`} titleTemplate={`%s | ${APP_NAME}`}
title={translate('::' + 'App.BlogManagement')} title={translate('::' + 'App.BlogManagement')}
defaultTitle={APP_NAME} defaultTitle={APP_NAME}
></Helmet> ></Helmet>
{/* Hero Section */} {/* Hero Section */}
<div className="relative bg-blue-900 text-white py-12"> <div className="relative bg-blue-900 text-white py-12 dark:bg-gray-950">
<div <div
className="absolute inset-0 opacity-20" className="absolute inset-0 opacity-20 dark:opacity-35"
style={{ style={{
backgroundImage: backgroundImage:
'url("https://images.pexels.com/photos/3183164/pexels-photo-3183164.jpeg?auto=compress&cs=tinysrgb&w=1920")', 'url("https://images.pexels.com/photos/3183164/pexels-photo-3183164.jpeg?auto=compress&cs=tinysrgb&w=1920")',
@ -93,6 +93,7 @@ const Blog = () => {
backgroundPosition: 'center', backgroundPosition: 'center',
}} }}
></div> ></div>
<div className="absolute inset-0 bg-blue-950/25 dark:bg-gray-950/45"></div>
<div className="container mx-auto pt-20 relative"> <div className="container mx-auto pt-20 relative">
<h1 className="text-5xl font-bold ml-4 mt-3 mb-2 text-white"> <h1 className="text-5xl font-bold ml-4 mt-3 mb-2 text-white">
{translate('::App.BlogManagement')} {translate('::App.BlogManagement')}
@ -101,9 +102,14 @@ const Blog = () => {
</div> </div>
</div> </div>
{/* Search and Filter Section */}
<div className="bg-white shadow-sm border-b">
{/* Blog Posts Grid */}
<div className="container mx-auto px-4 py-6"> <div className="container mx-auto px-4 py-6">
{/* Search and Filter Section */}
<div className="shadow-sm border-b border-gray-200 dark:border-gray-800">
<div className="container mx-auto pb-4">
<div className="flex flex-col md:flex-row gap-4"> <div className="flex flex-col md:flex-row gap-4">
{/* Search */} {/* Search */}
<form onSubmit={handleSearch} className="flex-1"> <form onSubmit={handleSearch} className="flex-1">
@ -113,7 +119,7 @@ const Blog = () => {
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Blog yazılarında ara..." placeholder="Blog yazılarında ara..."
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
/> />
<FaSearch className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" /> <FaSearch className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
</div> </div>
@ -126,7 +132,7 @@ const Blog = () => {
className={`px-4 py-2 bg-blue-100 text-blue-800 text-sm font-medium rounded-lg transition-colors ${ className={`px-4 py-2 bg-blue-100 text-blue-800 text-sm font-medium rounded-lg transition-colors ${
selectedCategory === '' selectedCategory === ''
? 'bg-blue-600 text-white' ? 'bg-blue-600 text-white'
: 'bg-gray-200 text-gray-700 hover:bg-gray-300' : 'bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700'
}`} }`}
> >
{translate('::App.Reports.Search')} {translate('::App.Reports.Search')}
@ -138,7 +144,7 @@ const Blog = () => {
className={`px-4 py-2 bg-blue-100 text-blue-800 text-sm font-medium rounded-lg transition-colors ${ className={`px-4 py-2 bg-blue-100 text-blue-800 text-sm font-medium rounded-lg transition-colors ${
selectedCategory === category.id selectedCategory === category.id
? 'bg-blue-600 text-white' ? 'bg-blue-600 text-white'
: 'bg-gray-200 text-gray-700 hover:bg-gray-300' : 'bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700'
}`} }`}
> >
{translate('::Public.' + category.name)} ({category.postCount}) {translate('::Public.' + category.name)} ({category.postCount})
@ -149,17 +155,15 @@ const Blog = () => {
</div> </div>
</div> </div>
{/* Blog Posts Grid */}
<div className="container mx-auto px-4 py-16">
{!Array.isArray(posts) || posts.length === 0 ? ( {!Array.isArray(posts) || posts.length === 0 ? (
<div className="text-center py-12"> <div className="text-center py-12">
<p className="text-gray-600 text-lg">Henüz blog yazısı bulunmuyor.</p> <p className="text-gray-600 text-lg dark:text-gray-300">Henüz blog yazısı bulunmuyor.</p>
</div> </div>
) : ( ) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{posts.map((post) => ( {posts.map((post) => (
<Link to={`/blog/${post.slug || post.id}`} key={post.id} className="block"> <Link to={`/blog/${post.slug || post.id}`} key={post.id} className="block">
<article className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow h-full flex flex-col"> <article className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow h-full flex flex-col dark:bg-gray-900 dark:shadow-gray-950/40">
<div className="aspect-w-16 aspect-h-9 relative"> <div className="aspect-w-16 aspect-h-9 relative">
<img <img
src={post.coverImage} src={post.coverImage}
@ -171,10 +175,10 @@ const Blog = () => {
</div> </div>
</div> </div>
<div className="p-6 flex-1 flex flex-col"> <div className="p-6 flex-1 flex flex-col">
<h2 className="text-xl font-bold text-gray-900 mb-3 hover:text-blue-600 transition-colors"> <h2 className="text-xl font-bold text-gray-900 mb-3 hover:text-blue-600 transition-colors dark:text-gray-100 dark:hover:text-blue-400">
{translate('::Public.' + post.title)} {translate('::Public.' + post.title)}
</h2> </h2>
<p className="text-gray-600 mb-4 flex-1"> <p className="text-gray-600 mb-4 flex-1 dark:text-gray-300">
{translate('::Public.' + post.summary)} {translate('::Public.' + post.summary)}
</p> </p>
@ -184,7 +188,7 @@ const Blog = () => {
{post.tags.slice(0, 3).map((tag, index) => ( {post.tags.slice(0, 3).map((tag, index) => (
<span <span
key={index} key={index}
className="inline-flex items-center text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded" className="inline-flex items-center text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded dark:bg-gray-800 dark:text-gray-300"
> >
<FaTag className="w-3 h-3 mr-1" /> <FaTag className="w-3 h-3 mr-1" />
{tag} {tag}
@ -193,7 +197,7 @@ const Blog = () => {
</div> </div>
)} )}
<div className="flex items-center text-sm text-gray-500 space-x-4"> <div className="flex items-center text-sm text-gray-500 space-x-4 dark:text-gray-400">
<div className="flex items-center"> <div className="flex items-center">
<FaUser size={16} className="mr-1" /> <FaUser size={16} className="mr-1" />
{post.author} {post.author}
@ -217,7 +221,7 @@ const Blog = () => {
<Button <Button
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))} onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
disabled={currentPage === 1} disabled={currentPage === 1}
className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
> >
Önceki Önceki
</Button> </Button>
@ -229,7 +233,7 @@ const Blog = () => {
className={`px-4 py-2 rounded-lg ${ className={`px-4 py-2 rounded-lg ${
currentPage === i + 1 currentPage === i + 1
? 'bg-blue-600 text-white' ? 'bg-blue-600 text-white'
: 'border border-gray-300 hover:bg-gray-50' : 'border border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800'
}`} }`}
> >
{i + 1} {i + 1}
@ -239,7 +243,7 @@ const Blog = () => {
<Button <Button
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))} onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
disabled={currentPage === totalPages} disabled={currentPage === totalPages}
className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800"
> >
Sonraki Sonraki
</Button> </Button>
@ -249,19 +253,19 @@ const Blog = () => {
</div> </div>
{/* Newsletter Section */} {/* Newsletter Section */}
<div className="bg-white py-16"> <div className="bg-white py-16 dark:bg-gray-900">
<div className="container mx-auto px-4 text-center"> <div className="container mx-auto px-4 text-center">
<h2 className="text-3xl font-bold text-gray-900 mb-4"> <h2 className="text-3xl font-bold text-gray-900 mb-4 dark:text-gray-100">
{translate('::Public.blog.subscribe')} {translate('::Public.blog.subscribe')}
</h2> </h2>
<p className="text-gray-600 mb-8 max-w-2xl mx-auto"> <p className="text-gray-600 mb-8 max-w-2xl mx-auto dark:text-gray-300">
{translate('::Public.blog.subscribe.desc')} {translate('::Public.blog.subscribe.desc')}
</p> </p>
<div className="max-w-md mx-auto flex gap-4"> <div className="max-w-md mx-auto flex gap-4">
<input <input
type="email" type="email"
placeholder={translate('::Abp.Account.EmailAddress')} placeholder={translate('::Abp.Account.EmailAddress')}
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" className="flex-1 px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
/> />
<Button className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors"> <Button className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors">
{translate('::Public.common.subscribe')} {translate('::Public.common.subscribe')}

20
ui/src/views/public/BlogDetail.tsx
View file

@ -52,7 +52,7 @@ const BlogDetail: React.FC = () => {
if (loading) { if (loading) {
return ( return (
<div className="flex items-center justify-center min-h-screen bg-gray-50"> <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
<div className="text-center"> <div className="text-center">
<Loading loading={loading} /> <Loading loading={loading} />
</div> </div>
@ -62,22 +62,22 @@ const BlogDetail: React.FC = () => {
if (error) { if (error) {
return ( return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center"> <div className="min-h-screen bg-gray-50 dark:bg-gray-950 flex items-center justify-center">
<h1 className="text-2xl font-bold text-gray-900">Error: {error}</h1> <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Error: {error}</h1>
</div> </div>
) )
} }
if (!blogPost || !postData) { if (!blogPost || !postData) {
return ( return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center"> <div className="min-h-screen bg-gray-50 dark:bg-gray-950 flex items-center justify-center">
<h1 className="text-2xl font-bold text-gray-900">{translate('::Public.blog.notFound')}</h1> <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">{translate('::Public.blog.notFound')}</h1>
</div> </div>
) )
} }
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
<Helmet <Helmet
titleTemplate={`%s | ${APP_NAME}`} titleTemplate={`%s | ${APP_NAME}`}
title={translate('::' + 'App.BlogManagement')} title={translate('::' + 'App.BlogManagement')}
@ -87,7 +87,7 @@ const BlogDetail: React.FC = () => {
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<Link <Link
to={ROUTES_ENUM.public.blog} to={ROUTES_ENUM.public.blog}
className="text-blue-600 hover:underline mt-4 mb-4 inline-block" className="text-blue-600 hover:underline mt-4 mb-4 inline-block dark:text-blue-400"
> >
&larr; {translate('::App.BlogManagement')} &larr; {translate('::App.BlogManagement')}
</Link> </Link>
@ -98,10 +98,10 @@ const BlogDetail: React.FC = () => {
className="w-full h-96 object-cover rounded-lg mb-8" className="w-full h-96 object-cover rounded-lg mb-8"
/> />
)} )}
<h1 className="text-4xl font-bold text-gray-900 mb-6"> <h1 className="text-4xl font-bold text-gray-900 mb-6 dark:text-gray-100">
{translate('::Public.' + blogPost.title)} {translate('::Public.' + blogPost.title)}
</h1> </h1>
<div className="flex items-center text-sm text-gray-500 space-x-4 mb-8"> <div className="flex items-center text-sm text-gray-500 space-x-4 mb-8 dark:text-gray-400">
<div className="flex items-center"> <div className="flex items-center">
<span>{postData.author}</span> <span>{postData.author}</span>
</div> </div>
@ -110,7 +110,7 @@ const BlogDetail: React.FC = () => {
</div> </div>
</div> </div>
<div <div
className="prose max-w-none text-gray-800" className="prose max-w-none text-gray-800 dark:prose-invert dark:text-gray-200"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: __html:
currentLang == 'tr' currentLang == 'tr'

2
ui/src/views/public/Checkout.tsx
View file

@ -56,7 +56,7 @@ const Checkout: React.FC = () => {
} }
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
<Helmet <Helmet
titleTemplate={`%s | ${APP_NAME}`} titleTemplate={`%s | ${APP_NAME}`}
title={translate('::' + 'Public.nav.checkout')} title={translate('::' + 'Public.nav.checkout')}

92
ui/src/views/public/Contact.tsx
View file

@ -120,7 +120,7 @@ function buildContactContent(
heroSectionStyleClass: resolveLocalizedValue( heroSectionStyleClass: resolveLocalizedValue(
translate, translate,
CONTACT_HERO_SECTION_STYLE_KEY, CONTACT_HERO_SECTION_STYLE_KEY,
'relative bg-blue-900 py-12 text-white', 'relative bg-blue-900 py-12 text-white dark:bg-gray-950',
), ),
heroSectionStyleClassKey: CONTACT_HERO_SECTION_STYLE_KEY, heroSectionStyleClassKey: CONTACT_HERO_SECTION_STYLE_KEY,
heroTitleStyleClass: resolveLocalizedValue( heroTitleStyleClass: resolveLocalizedValue(
@ -144,13 +144,13 @@ function buildContactContent(
contactInfoCardStyleClass: resolveLocalizedValue( contactInfoCardStyleClass: resolveLocalizedValue(
translate, translate,
CONTACT_INFO_CARD_STYLE_KEY, CONTACT_INFO_CARD_STYLE_KEY,
'rounded-xl bg-white p-8 shadow-lg', 'rounded-xl bg-white p-8 shadow-lg dark:bg-gray-900 dark:shadow-gray-950/40',
), ),
contactInfoCardStyleClassKey: CONTACT_INFO_CARD_STYLE_KEY, contactInfoCardStyleClassKey: CONTACT_INFO_CARD_STYLE_KEY,
contactInfoTitleStyleClass: resolveLocalizedValue( contactInfoTitleStyleClass: resolveLocalizedValue(
translate, translate,
CONTACT_INFO_TITLE_STYLE_KEY, CONTACT_INFO_TITLE_STYLE_KEY,
'mb-6 text-2xl font-bold text-gray-900', 'mb-6 text-2xl font-bold text-gray-900 dark:text-gray-100',
), ),
contactInfoTitleStyleClassKey: CONTACT_INFO_TITLE_STYLE_KEY, contactInfoTitleStyleClassKey: CONTACT_INFO_TITLE_STYLE_KEY,
address: resolveLocalizedValue(translate, contact?.address, ''), address: resolveLocalizedValue(translate, contact?.address, ''),
@ -165,7 +165,9 @@ function buildContactContent(
bankBranch: contact?.bankDto?.branch || '', bankBranch: contact?.bankDto?.branch || '',
bankAccountNumber: contact?.bankDto?.accountNumber || '', bankAccountNumber: contact?.bankDto?.accountNumber || '',
bankIban: contact?.bankDto?.iban || '', bankIban: contact?.bankDto?.iban || '',
bankStyleClass: contact?.bankDto?.styleClass || 'rounded-xl bg-white p-8 shadow-lg', bankStyleClass:
contact?.bankDto?.styleClass ||
'rounded-xl bg-white p-8 shadow-lg dark:bg-gray-900 dark:shadow-gray-950/40',
workHoursTitle: resolveLocalizedValue(translate, CONTACT_WORK_HOURS_TITLE_KEY), workHoursTitle: resolveLocalizedValue(translate, CONTACT_WORK_HOURS_TITLE_KEY),
workHoursTitleKey: CONTACT_WORK_HOURS_TITLE_KEY, workHoursTitleKey: CONTACT_WORK_HOURS_TITLE_KEY,
workWeekday: resolveLocalizedValue(translate, contact?.workHoursDto?.weekday, ''), workWeekday: resolveLocalizedValue(translate, contact?.workHoursDto?.weekday, ''),
@ -174,7 +176,9 @@ function buildContactContent(
workWeekendKey: contact?.workHoursDto?.weekend || '', workWeekendKey: contact?.workHoursDto?.weekend || '',
workWhatsapp: resolveLocalizedValue(translate, contact?.workHoursDto?.whatsapp, ''), workWhatsapp: resolveLocalizedValue(translate, contact?.workHoursDto?.whatsapp, ''),
workWhatsappKey: contact?.workHoursDto?.whatsapp || '', workWhatsappKey: contact?.workHoursDto?.whatsapp || '',
workHoursStyleClass: contact?.workHoursDto?.styleClass || 'rounded-xl bg-white p-8 shadow-lg', workHoursStyleClass:
contact?.workHoursDto?.styleClass ||
'rounded-xl bg-white p-8 shadow-lg dark:bg-gray-900 dark:shadow-gray-950/40',
mapTitle: resolveLocalizedValue(translate, contact?.mapDto?.title, ''), mapTitle: resolveLocalizedValue(translate, contact?.mapDto?.title, ''),
mapTitleKey: contact?.mapDto?.title || '', mapTitleKey: contact?.mapDto?.title || '',
mapSrc: contact?.mapDto?.src || '', mapSrc: contact?.mapDto?.src || '',
@ -183,9 +187,12 @@ function buildContactContent(
mapAllowFullScreen: String(contact?.mapDto?.allowFullScreen ?? true), mapAllowFullScreen: String(contact?.mapDto?.allowFullScreen ?? true),
mapLoading: contact?.mapDto?.loading || 'lazy', mapLoading: contact?.mapDto?.loading || 'lazy',
mapReferrerPolicy: contact?.mapDto?.referrerPolicy || 'no-referrer-when-downgrade', mapReferrerPolicy: contact?.mapDto?.referrerPolicy || 'no-referrer-when-downgrade',
mapContainerStyleClass: contact?.mapDto?.containerStyleClass || 'rounded-xl bg-white p-8 shadow-lg', mapContainerStyleClass:
contact?.mapDto?.containerStyleClass ||
'rounded-xl bg-white p-8 shadow-lg dark:bg-gray-900 dark:shadow-gray-950/40',
mapFrameStyleClass: mapFrameStyleClass:
contact?.mapDto?.frameStyleClass || 'aspect-w-16 aspect-h-9 overflow-hidden rounded-xl bg-gray-200', contact?.mapDto?.frameStyleClass ||
'aspect-w-16 aspect-h-9 overflow-hidden rounded-xl bg-gray-200 dark:bg-gray-800',
} }
} }
@ -636,7 +643,7 @@ const Contact: React.FC = () => {
if (loading) { if (loading) {
return ( return (
<div className="flex items-center justify-center min-h-screen bg-gray-50"> <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
<div className="text-center"> <div className="text-center">
<Loading loading={loading} /> <Loading loading={loading} />
</div> </div>
@ -645,7 +652,7 @@ const Contact: React.FC = () => {
} }
return ( return (
<div className={`min-h-screen bg-gray-50 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}> <div className={`min-h-screen bg-gray-50 dark:bg-gray-950 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
<Helmet <Helmet
titleTemplate={`%s | ${APP_NAME}`} titleTemplate={`%s | ${APP_NAME}`}
title={translate('::App.Contact')} title={translate('::App.Contact')}
@ -674,15 +681,16 @@ const Contact: React.FC = () => {
isDesignMode={isDesignMode} isDesignMode={isDesignMode}
onSelect={handleSelectBlock} onSelect={handleSelectBlock}
> >
<div className={content?.heroSectionStyleClass || 'relative bg-blue-900 py-12 text-white'}> <div className={`${content?.heroSectionStyleClass || 'relative bg-blue-900 py-12 text-white'} dark:bg-gray-950`}>
<div <div
className="absolute inset-0 opacity-20" className="absolute inset-0 opacity-20 dark:opacity-35"
style={{ style={{
backgroundImage: `url("${content?.heroImage || CONTACT_HERO_IMAGE_DEFAULT}")`, backgroundImage: `url("${content?.heroImage || CONTACT_HERO_IMAGE_DEFAULT}")`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}} }}
></div> ></div>
<div className="absolute inset-0 bg-blue-950/25 dark:bg-gray-950/45"></div>
<div className="container relative mx-auto pt-20"> <div className="container relative mx-auto pt-20">
<h1 className={content?.heroTitleStyleClass || 'ml-4 mb-2 mt-3 text-5xl font-bold text-white'}>{content?.heroTitle}</h1> <h1 className={content?.heroTitleStyleClass || 'ml-4 mb-2 mt-3 text-5xl font-bold text-white'}>{content?.heroTitle}</h1>
<p className={content?.heroSubtitleStyleClass || 'ml-4 max-w-3xl text-xl'}>{content?.heroSubtitle}</p> <p className={content?.heroSubtitleStyleClass || 'ml-4 max-w-3xl text-xl'}>{content?.heroSubtitle}</p>
@ -690,7 +698,7 @@ const Contact: React.FC = () => {
</div> </div>
</SelectableBlock> </SelectableBlock>
<div className="py-16"> <div className="py-6">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="grid grid-cols-1 gap-12 lg:grid-cols-2"> <div className="grid grid-cols-1 gap-12 lg:grid-cols-2">
<div className="space-y-4"> <div className="space-y-4">
@ -700,41 +708,41 @@ const Contact: React.FC = () => {
isDesignMode={isDesignMode} isDesignMode={isDesignMode}
onSelect={handleSelectBlock} onSelect={handleSelectBlock}
> >
<div className={content?.contactInfoCardStyleClass || 'rounded-xl bg-white p-8 shadow-lg'}> <div className={`${content?.contactInfoCardStyleClass || 'rounded-xl bg-white p-8 shadow-lg'} dark:bg-gray-900 dark:shadow-gray-950/40`}>
<h2 className={content?.contactInfoTitleStyleClass || 'mb-6 text-2xl font-bold text-gray-900'}>{content?.contactInfoTitle}</h2> <h2 className={`${content?.contactInfoTitleStyleClass || 'mb-6 text-2xl font-bold text-gray-900'} dark:text-gray-100`}>{content?.contactInfoTitle}</h2>
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-start space-x-2"> <div className="flex items-start space-x-2">
<FaMapMarkerAlt className="mt-1 h-5 w-5 flex-shrink-0 text-blue-600" /> <FaMapMarkerAlt className="mt-1 h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400" />
<div> <div>
<p className="text-gray-600">{content?.address}</p> <p className="text-gray-600 dark:text-gray-300">{content?.address}</p>
</div> </div>
</div> </div>
<div className="flex items-start space-x-2"> <div className="flex items-start space-x-2">
<FaPhone className="h-5 w-5 flex-shrink-0 text-blue-600" /> <FaPhone className="h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400" />
<div> <div>
<p className="text-gray-600">{content?.phoneNumber}</p> <p className="text-gray-600 dark:text-gray-300">{content?.phoneNumber}</p>
</div> </div>
</div> </div>
<div className="flex items-start space-x-2"> <div className="flex items-start space-x-2">
<FaEnvelope className="h-5 w-5 flex-shrink-0 text-blue-600" /> <FaEnvelope className="h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400" />
<div> <div>
<p className="text-gray-600"> <p className="text-gray-600 dark:text-gray-300">
<a href={`mailto:${content?.email}`} className="text-blue-600 hover:underline"> <a href={`mailto:${content?.email}`} className="text-blue-600 hover:underline dark:text-blue-400">
{content?.email} {content?.email}
</a> </a>
</p> </p>
</div> </div>
</div> </div>
<div className="flex items-start space-x-2"> <div className="flex items-start space-x-2">
<FaBuilding className="h-5 w-5 flex-shrink-0 text-blue-600" /> <FaBuilding className="h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400" />
<div> <div>
<p className="text-gray-600">{content?.location}</p> <p className="text-gray-600 dark:text-gray-300">{content?.location}</p>
</div> </div>
</div> </div>
<div className="flex items-start space-x-2"> <div className="flex items-start space-x-2">
<FaIdCard className="h-5 w-5 flex-shrink-0 text-blue-600" /> <FaIdCard className="h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400" />
<div> <div>
<p className="text-gray-600">{content?.taxNumber}</p> <p className="text-gray-600 dark:text-gray-300">{content?.taxNumber}</p>
</div> </div>
</div> </div>
</div> </div>
@ -747,8 +755,8 @@ const Contact: React.FC = () => {
isDesignMode={isDesignMode} isDesignMode={isDesignMode}
onSelect={handleSelectBlock} onSelect={handleSelectBlock}
> >
<div className={content?.bankStyleClass || 'rounded-xl bg-white p-8 shadow-lg'}> <div className={`${content?.bankStyleClass || 'rounded-xl bg-white p-8 shadow-lg'} dark:bg-gray-900 dark:shadow-gray-950/40`}>
<h2 className="mb-6 text-2xl font-bold text-gray-900">{content?.bankTitle}</h2> <h2 className="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-100">{content?.bankTitle}</h2>
<div className="mb-2"> <div className="mb-2">
<img <img
src="/img/enpara.svg" src="/img/enpara.svg"
@ -756,10 +764,10 @@ const Contact: React.FC = () => {
className="mt-1 w-24 flex-shrink-0 object-contain" className="mt-1 w-24 flex-shrink-0 object-contain"
/> />
<div> <div>
<h3 className="mb-1 font-semibold text-gray-900">{content?.bankAccountHolder}</h3> <h3 className="mb-1 font-semibold text-gray-900 dark:text-gray-100">{content?.bankAccountHolder}</h3>
<p className="mb-1 ml-1 text-gray-600">{content?.bankBranch}</p> <p className="mb-1 ml-1 text-gray-600 dark:text-gray-300">{content?.bankBranch}</p>
<p className="mb-1 ml-1 text-gray-600">{content?.bankAccountNumber}</p> <p className="mb-1 ml-1 text-gray-600 dark:text-gray-300">{content?.bankAccountNumber}</p>
<p className="mb-1 ml-1 text-gray-600">{content?.bankIban}</p> <p className="mb-1 ml-1 text-gray-600 dark:text-gray-300">{content?.bankIban}</p>
</div> </div>
</div> </div>
</div> </div>
@ -771,20 +779,20 @@ const Contact: React.FC = () => {
isDesignMode={isDesignMode} isDesignMode={isDesignMode}
onSelect={handleSelectBlock} onSelect={handleSelectBlock}
> >
<div className={content?.workHoursStyleClass || 'rounded-xl bg-white p-8 shadow-lg'}> <div className={`${content?.workHoursStyleClass || 'rounded-xl bg-white p-8 shadow-lg'} dark:bg-gray-900 dark:shadow-gray-950/40`}>
<h2 className="mb-6 text-2xl font-bold text-gray-900">{content?.workHoursTitle}</h2> <h2 className="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-100">{content?.workHoursTitle}</h2>
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<FaCalendarAlt className="h-5 w-5 text-blue-500" /> <FaCalendarAlt className="h-5 w-5 text-blue-500 dark:text-blue-400" />
<p className="text-gray-600">{content?.workWeekday}</p> <p className="text-gray-600 dark:text-gray-300">{content?.workWeekday}</p>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<FaCalendarCheck className="h-5 w-5 text-blue-500" /> <FaCalendarCheck className="h-5 w-5 text-blue-500 dark:text-blue-400" />
<p className="text-gray-600">{content?.workWeekend}</p> <p className="text-gray-600 dark:text-gray-300">{content?.workWeekend}</p>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<FaRegComment className="h-5 w-5 text-green-500" /> <FaRegComment className="h-5 w-5 text-green-500 dark:text-green-400" />
<p className="text-gray-600">{content?.workWhatsapp}</p> <p className="text-gray-600 dark:text-gray-300">{content?.workWhatsapp}</p>
</div> </div>
</div> </div>
</div> </div>
@ -797,9 +805,9 @@ const Contact: React.FC = () => {
isDesignMode={isDesignMode} isDesignMode={isDesignMode}
onSelect={handleSelectBlock} onSelect={handleSelectBlock}
> >
<div className={content?.mapContainerStyleClass || 'rounded-xl bg-white p-8 shadow-lg'}> <div className={`${content?.mapContainerStyleClass || 'rounded-xl bg-white p-8 shadow-lg'} dark:bg-gray-900 dark:shadow-gray-950/40`}>
<h2 className="mb-2 text-center text-2xl font-bold text-gray-900">{content?.mapTitle}</h2> <h2 className="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">{content?.mapTitle}</h2>
<div className={content?.mapFrameStyleClass || 'aspect-w-16 aspect-h-9 overflow-hidden rounded-xl bg-gray-200'}> <div className={`${content?.mapFrameStyleClass || 'aspect-w-16 aspect-h-9 overflow-hidden rounded-xl bg-gray-200'} dark:bg-gray-800`}>
<iframe <iframe
src={content?.mapSrc} src={content?.mapSrc}
width={content?.mapWidth} width={content?.mapWidth}

68
ui/src/views/public/Demo.tsx
View file

@ -108,13 +108,13 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
// 🎉 Gönderim sonrası teşekkür ekranı // 🎉 Gönderim sonrası teşekkür ekranı
if (isSubmitted) { if (isSubmitted) {
return ( return (
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto py-5 z-50"> <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto py-5 z-50 dark:bg-gray-950/70">
<div className="mx-auto bg-white rounded-xl shadow-lg max-w-md w-full relative"> <div className="mx-auto bg-white rounded-xl shadow-lg max-w-md w-full relative dark:bg-gray-900">
<div className="max-w-md w-full bg-gradient-to-br from-blue-50 to-indigo-100 rounded-3xl p-8 text-center border border-blue-200 shadow-xl"> <div className="max-w-md w-full bg-gradient-to-br from-blue-50 to-indigo-100 rounded-3xl p-8 text-center border border-blue-200 shadow-xl dark:from-gray-900 dark:to-gray-800 dark:border-gray-700">
{/* Kapat Butonu */} {/* Kapat Butonu */}
<button <button
onClick={() => setIsSubmitted(false)} onClick={() => setIsSubmitted(false)}
className="absolute top-4 right-4 text-gray-500 hover:text-gray-800 text-2xl" className="absolute top-4 right-4 text-gray-500 hover:text-gray-800 text-2xl dark:text-gray-400 dark:hover:text-gray-100"
> >
&times; &times;
</button> </button>
@ -122,10 +122,10 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
<div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-6"> <div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-6">
<FaCheckCircle className="w-8 h-8 text-white" /> <FaCheckCircle className="w-8 h-8 text-white" />
</div> </div>
<h2 className="text-2xl font-bold text-gray-800 mb-4"> <h2 className="text-2xl font-bold text-gray-800 mb-4 dark:text-gray-100">
Teşekkürler! Teşekkürler!
</h2> </h2>
<p className="text-gray-600 mb-6"> <p className="text-gray-600 mb-6 dark:text-gray-300">
Demo talebiniz başarıyla gönderildi. 24 saat içinde size geri Demo talebiniz başarıyla gönderildi. 24 saat içinde size geri
dönüş yapacağız. dönüş yapacağız.
</p> </p>
@ -159,23 +159,23 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
// 🎯 Normal form ekranı // 🎯 Normal form ekranı
return ( return (
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto py-5 z-50"> <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto py-5 z-50 dark:bg-gray-950/70">
<div className="mx-auto bg-white rounded-xl shadow-lg max-w-2xl w-full relative"> <div className="mx-auto bg-white rounded-xl shadow-lg max-w-2xl w-full relative dark:bg-gray-900">
<button <button
onClick={onClose} onClick={onClose}
className="absolute top-4 right-4 text-gray-500 hover:text-gray-800 text-2xl" className="absolute top-4 right-4 text-gray-500 hover:text-gray-800 text-2xl dark:text-gray-400 dark:hover:text-gray-100"
> >
&times; &times;
</button> </button>
<form <form
onSubmit={handleSubmit} onSubmit={handleSubmit}
className="bg-white rounded-3xl p-6 lg:p-8 shadow-xl border border-gray-100" className="bg-white rounded-3xl p-6 lg:p-8 shadow-xl border border-gray-100 dark:border-gray-700 dark:bg-gray-900"
> >
<div className="space-y-3"> <div className="space-y-3">
{/* Organization Name */} {/* Organization Name */}
<div> <div>
<label className="block text-gray-700 text-sm font-medium mb-2"> <label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
{translate('::Public.common.company')} * {translate('::Public.common.company')} *
</label> </label>
<div className="relative"> <div className="relative">
@ -189,8 +189,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${ className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
errors.organizationName errors.organizationName
? "border-red-500 focus:border-red-500 focus:ring-red-500/20" ? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
: "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20" : "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-700"
} rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300`} } rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400`}
placeholder={translate('::Public.demo.organizationName')} placeholder={translate('::Public.demo.organizationName')}
/> />
</div> </div>
@ -198,7 +198,7 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
{/* Full Name */} {/* Full Name */}
<div> <div>
<label className="block text-gray-700 text-sm font-medium mb-2"> <label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
{translate('::Public.common.fullName')} * {translate('::Public.common.fullName')} *
</label> </label>
<div className="relative"> <div className="relative">
@ -211,8 +211,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${ className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
errors.name errors.name
? "border-red-500 focus:border-red-500 focus:ring-red-500/20" ? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
: "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20" : "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-700"
} rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300`} } rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400`}
placeholder={translate('::Public.demo.fullName')} placeholder={translate('::Public.demo.fullName')}
/> />
</div> </div>
@ -220,7 +220,7 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div> <div>
<label className="block text-gray-700 text-sm font-medium mb-2"> <label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
{translate('::Abp.Account.EmailAddress')} * {translate('::Abp.Account.EmailAddress')} *
</label> </label>
<div className="relative"> <div className="relative">
@ -233,15 +233,15 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${ className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
errors.email errors.email
? "border-red-500 focus:border-red-500 focus:ring-red-500/20" ? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
: "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20" : "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-700"
} rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300`} } rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400`}
placeholder={translate('::Public.demo.email')} placeholder={translate('::Public.demo.email')}
/> />
</div> </div>
</div> </div>
<div> <div>
<label className="block text-gray-700 text-sm font-medium mb-2"> <label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
{translate('::Abp.Identity.User.UserInformation.PhoneNumber')} * {translate('::Abp.Identity.User.UserInformation.PhoneNumber')} *
</label> </label>
<div className="relative"> <div className="relative">
@ -254,8 +254,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${ className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
errors.phoneNumber errors.phoneNumber
? "border-red-500 focus:border-red-500 focus:ring-red-500/20" ? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
: "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20" : "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-700"
} rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300`} } rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400`}
placeholder={translate('::Public.demo.phoneNumber')} placeholder={translate('::Public.demo.phoneNumber')}
/> />
</div> </div>
@ -264,7 +264,7 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
{/* Address */} {/* Address */}
<div> <div>
<label className="block text-gray-700 text-sm font-medium mb-2"> <label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
{translate('::App.Address')} * {translate('::App.Address')} *
</label> </label>
<div className="relative"> <div className="relative">
@ -277,8 +277,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${ className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
errors.address errors.address
? "border-red-500 focus:border-red-500 focus:ring-red-500/20" ? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
: "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20" : "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-700"
} rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300`} } rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400`}
placeholder={translate('::Public.demo.address')} placeholder={translate('::Public.demo.address')}
/> />
</div> </div>
@ -287,7 +287,7 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
{/* Branches & Users Row */} {/* Branches & Users Row */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div> <div>
<label className="block text-gray-700 text-sm font-medium mb-2"> <label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
{translate('::Public.common.branchCount')} * {translate('::Public.common.branchCount')} *
</label> </label>
<div className="relative"> <div className="relative">
@ -300,8 +300,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${ className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
errors.numberOfBranches errors.numberOfBranches
? "border-red-500 focus:border-red-500 focus:ring-red-500/20" ? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
: "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20" : "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-700"
} rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300`} } rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400`}
placeholder={translate('::Public.demo.branches')} placeholder={translate('::Public.demo.branches')}
min="1" min="1"
/> />
@ -309,7 +309,7 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
</div> </div>
<div> <div>
<label className="block text-gray-700 text-sm font-medium mb-2"> <label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
{translate('::Public.common.userCount')} * {translate('::Public.common.userCount')} *
</label> </label>
<div className="relative"> <div className="relative">
@ -322,8 +322,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${ className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
errors.numberOfUsers errors.numberOfUsers
? "border-red-500 focus:border-red-500 focus:ring-red-500/20" ? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
: "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20" : "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-700"
} rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300`} } rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400`}
placeholder={translate('::Public.demo.users')} placeholder={translate('::Public.demo.users')}
min="1" min="1"
/> />
@ -333,7 +333,7 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
{/* Message */} {/* Message */}
<div> <div>
<label className="block text-gray-700 text-sm font-medium mb-2"> <label className="block text-gray-700 text-sm font-medium mb-2 dark:text-gray-200">
{translate('::Public.common.message')} * {translate('::Public.common.message')} *
</label> </label>
<div className="relative"> <div className="relative">
@ -346,8 +346,8 @@ const Demo: React.FC<DemoModalProps> = ({ isOpen, onClose }) => {
className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${ className={`w-full pl-11 pr-4 py-2.5 bg-gray-50 border ${
errors.message errors.message
? "border-red-500 focus:border-red-500 focus:ring-red-500/20" ? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
: "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20" : "border-gray-200 focus:border-blue-500 focus:ring-blue-500/20 dark:border-gray-700"
} rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 resize-none`} } rounded-xl text-gray-800 placeholder-gray-500 focus:outline-none transition-all duration-300 resize-none dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400`}
placeholder={translate('::Public.demo.message')} placeholder={translate('::Public.demo.message')}
/> />
</div> </div>

42
ui/src/views/public/Home.tsx
View file

@ -116,10 +116,10 @@ const HOME_HERO_PRIMARY_CTA_STYLE_DEFAULT =
'inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white rounded-lg font-semibold transition-all transform hover:scale-105' 'inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 text-white rounded-lg font-semibold transition-all transform hover:scale-105'
const HOME_HERO_SECONDARY_CTA_STYLE_DEFAULT = const HOME_HERO_SECONDARY_CTA_STYLE_DEFAULT =
'inline-flex items-center justify-center px-8 py-4 bg-white/10 hover:bg-white/20 text-white rounded-lg font-semibold backdrop-blur-sm transition-all transform hover:scale-105' 'inline-flex items-center justify-center px-8 py-4 bg-white/10 hover:bg-white/20 text-white rounded-lg font-semibold backdrop-blur-sm transition-all transform hover:scale-105'
const HOME_FEATURES_TITLE_STYLE_DEFAULT = 'text-4xl font-bold text-gray-900 mb-4' const HOME_FEATURES_TITLE_STYLE_DEFAULT = 'text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4'
const HOME_FEATURES_SUBTITLE_STYLE_DEFAULT = 'text-xl text-gray-600 max-w-2xl mx-auto' const HOME_FEATURES_SUBTITLE_STYLE_DEFAULT = 'text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto'
const HOME_SOLUTIONS_TITLE_STYLE_DEFAULT = 'text-4xl font-bold text-gray-900 mb-4' const HOME_SOLUTIONS_TITLE_STYLE_DEFAULT = 'text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4'
const HOME_SOLUTIONS_SUBTITLE_STYLE_DEFAULT = 'text-xl text-gray-600 max-w-2xl mx-auto' const HOME_SOLUTIONS_SUBTITLE_STYLE_DEFAULT = 'text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto'
const HOME_CTA_TITLE_STYLE_DEFAULT = 'text-3xl font-bold text-white mb-4' const HOME_CTA_TITLE_STYLE_DEFAULT = 'text-3xl font-bold text-white mb-4'
const HOME_CTA_SUBTITLE_STYLE_DEFAULT = 'text-white text-lg mb-8' const HOME_CTA_SUBTITLE_STYLE_DEFAULT = 'text-white text-lg mb-8'
const HOME_CTA_BUTTON_STYLE_DEFAULT = const HOME_CTA_BUTTON_STYLE_DEFAULT =
@ -128,7 +128,7 @@ const HOME_SLIDE_STYLE_DEFAULT = 'max-w-4xl mx-auto text-center'
const HOME_SLIDE_SERVICE_STYLE_DEFAULT = const HOME_SLIDE_SERVICE_STYLE_DEFAULT =
'bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center hover:scale-105 hover:bg-white/10 transition-all' 'bg-white/5 backdrop-blur-sm rounded-2xl p-8 text-center hover:scale-105 hover:bg-white/10 transition-all'
const HOME_FEATURE_CARD_STYLE_DEFAULT = const HOME_FEATURE_CARD_STYLE_DEFAULT =
'p-8 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow' 'p-8 bg-white dark:bg-gray-900 rounded-xl shadow-lg hover:shadow-xl transition-shadow dark:shadow-gray-950/40'
const HOME_SOLUTION_CARD_STYLE_DEFAULT = 'p-8 h-full rounded-2xl' const HOME_SOLUTION_CARD_STYLE_DEFAULT = 'p-8 h-full rounded-2xl'
function isLikelyLocalizationKey(value?: string) { function isLikelyLocalizationKey(value?: string) {
@ -903,7 +903,7 @@ const Home: React.FC = () => {
if (loading) { if (loading) {
return ( return (
<div className="flex items-center justify-center min-h-screen bg-gray-50"> <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
<div className="text-center"> <div className="text-center">
<Loading loading={loading} /> <Loading loading={loading} />
</div> </div>
@ -912,7 +912,7 @@ const Home: React.FC = () => {
} }
return ( return (
<div className={`min-h-screen ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}> <div className={`min-h-screen bg-gray-50 dark:bg-gray-950 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
<Helmet <Helmet
titleTemplate={`%s | ${APP_NAME}`} titleTemplate={`%s | ${APP_NAME}`}
title={translate('::' + 'App.Home')} title={translate('::' + 'App.Home')}
@ -942,16 +942,17 @@ const Home: React.FC = () => {
isDesignMode={isDesignMode} isDesignMode={isDesignMode}
onSelect={handleSelectBlock} onSelect={handleSelectBlock}
> >
<div className="relative min-h-screen p-20 overflow-hidden"> <div className="relative min-h-screen overflow-hidden bg-blue-900 p-20 text-white dark:bg-gray-950">
<div className="absolute inset-0 bg-gradient-to-br from-blue-900 via-indigo-900 to-purple-900"></div> <div className="absolute inset-0 bg-gradient-to-br from-blue-900 via-indigo-900 to-purple-900 dark:from-gray-950 dark:via-gray-950 dark:to-gray-950"></div>
<div <div
className="absolute inset-0 opacity-20" className="absolute inset-0 opacity-20 dark:opacity-35"
style={{ style={{
backgroundImage: `url("${content?.heroBackgroundImage || HOME_HERO_DEFAULT_IMAGE}")`, backgroundImage: `url("${content?.heroBackgroundImage || HOME_HERO_DEFAULT_IMAGE}")`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}} }}
></div> ></div>
<div className="absolute inset-0 bg-blue-950/25 dark:bg-gray-950/45"></div>
{/* Carousel Content */} {/* Carousel Content */}
<div className="relative container mx-auto px-4 pt-32 pb-16 h-screen flex items-center"> <div className="relative container mx-auto px-4 pt-32 pb-16 h-screen flex items-center">
@ -1081,7 +1082,7 @@ const Home: React.FC = () => {
</SelectableBlock> </SelectableBlock>
{/* Features */} {/* Features */}
<section className="py-20 bg-white"> <section className="py-20 bg-white dark:bg-gray-950">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<SelectableBlock <SelectableBlock
id="features-heading" id="features-heading"
@ -1090,10 +1091,10 @@ const Home: React.FC = () => {
onSelect={handleSelectBlock} onSelect={handleSelectBlock}
> >
<div className="text-center mb-16"> <div className="text-center mb-16">
<h2 className={content?.featuresTitleStyle}> <h2 className={`${content?.featuresTitleStyle || HOME_FEATURES_TITLE_STYLE_DEFAULT} dark:text-gray-100`}>
{content?.featuresTitle} {content?.featuresTitle}
</h2> </h2>
<p className={content?.featuresSubtitleStyle}> <p className={`${content?.featuresSubtitleStyle || HOME_FEATURES_SUBTITLE_STYLE_DEFAULT} dark:text-gray-300`}>
{content?.featuresSubtitle} {content?.featuresSubtitle}
</p> </p>
</div> </div>
@ -1109,10 +1110,7 @@ const Home: React.FC = () => {
onSelect={handleSelectBlock} onSelect={handleSelectBlock}
> >
<div <div
className={ className={`${feature.styleClass || HOME_FEATURE_CARD_STYLE_DEFAULT} dark:bg-gray-900 dark:shadow-gray-950/40`}
feature.styleClass ||
'p-8 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow'
}
> >
<div className="mb-6"> <div className="mb-6">
{(() => { {(() => {
@ -1120,8 +1118,8 @@ const Home: React.FC = () => {
return IconComponent ? <IconComponent className="w-12 h-12 text-blue-500" /> : null return IconComponent ? <IconComponent className="w-12 h-12 text-blue-500" /> : null
})()} })()}
</div> </div>
<h2 className="text-2xl font-bold text-gray-900">{feature.title}</h2> <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">{feature.title}</h2>
<p className="text-gray-600">{feature.description}</p> <p className="text-gray-600 dark:text-gray-300">{feature.description}</p>
</div> </div>
</SelectableBlock> </SelectableBlock>
))} ))}
@ -1130,7 +1128,7 @@ const Home: React.FC = () => {
</section> </section>
{/* Solutions */} {/* Solutions */}
<section className="py-20 bg-gray-50"> <section className="py-20 bg-gray-50 dark:bg-gray-900">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<SelectableBlock <SelectableBlock
id="solutions-heading" id="solutions-heading"
@ -1139,10 +1137,10 @@ const Home: React.FC = () => {
onSelect={handleSelectBlock} onSelect={handleSelectBlock}
> >
<div className="text-center mb-16"> <div className="text-center mb-16">
<h2 className={content?.solutionsTitleStyle}> <h2 className={`${content?.solutionsTitleStyle || HOME_SOLUTIONS_TITLE_STYLE_DEFAULT} dark:text-gray-100`}>
{content?.solutionsTitle} {content?.solutionsTitle}
</h2> </h2>
<p className={content?.solutionsSubtitleStyle}> <p className={`${content?.solutionsSubtitleStyle || HOME_SOLUTIONS_SUBTITLE_STYLE_DEFAULT} dark:text-gray-300`}>
{content?.solutionsSubtitle} {content?.solutionsSubtitle}
</p> </p>
</div> </div>

6
ui/src/views/public/NotFound.tsx
View file

@ -7,10 +7,10 @@ const NotFound: React.FC = () => {
const { translate } = useLocalization() const { translate } = useLocalization()
return ( return (
<div className="flex flex-col items-center justify-center min-h-screen bg-white text-gray-700 p-4"> {/* Arka plan ve metin rengi güncellendi, padding eklendi */} <div className="flex flex-col items-center justify-center min-h-screen bg-white text-gray-700 p-4 dark:bg-gray-950 dark:text-gray-300"> {/* Arka plan ve metin rengi güncellendi, padding eklendi */}
<FaFrown size={128} className="text-blue-600 mb-6" /> {/* İkon boyutu ve rengi güncellendi */} <FaFrown size={128} className="text-blue-600 mb-6" /> {/* İkon boyutu ve rengi güncellendi */}
<h1 className="text-7xl font-bold text-gray-900 mb-4">404</h1> {/* Başlık boyutu ve rengi güncellendi */} <h1 className="text-7xl font-bold text-gray-900 mb-4 dark:text-gray-100">404</h1> {/* Başlık boyutu ve rengi güncellendi */}
<p className="text-xl text-gray-600 mb-8 text-center max-w-md"> {/* Metin rengi, margin ve max-width güncellendi */} <p className="text-xl text-gray-600 mb-8 text-center max-w-md dark:text-gray-300"> {/* Metin rengi, margin ve max-width güncellendi */}
{translate('::Public.notFound.message')} {translate('::Public.notFound.message')}
</p> </p>
<a href={ROUTES_ENUM.public.home} className="bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-300 text-lg font-semibold"> {/* Buton stili güncellendi */} <a href={ROUTES_ENUM.public.home} className="bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-300 text-lg font-semibold"> {/* Buton stili güncellendi */}

4
ui/src/views/public/Payment.tsx
View file

@ -107,7 +107,7 @@ const Payment: React.FC = () => {
if (!tenant) { if (!tenant) {
return ( return (
<div className="flex items-center justify-center min-h-screen bg-gray-50"> <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
<div className="text-center"> <div className="text-center">
<Loading loading={!tenant} /> <Loading loading={!tenant} />
</div> </div>
@ -116,7 +116,7 @@ const Payment: React.FC = () => {
} }
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
<Helmet <Helmet
titleTemplate={`%s | ${APP_NAME}`} titleTemplate={`%s | ${APP_NAME}`}
title={translate('::' + 'Public.nav.payment')} title={translate('::' + 'Public.nav.payment')}

12
ui/src/views/public/Products.tsx
View file

@ -75,7 +75,7 @@ const Products: React.FC = () => {
} }
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
<Helmet <Helmet
titleTemplate={`%s | ${APP_NAME}`} titleTemplate={`%s | ${APP_NAME}`}
title={translate('::App.Orders')} title={translate('::App.Orders')}
@ -83,15 +83,7 @@ const Products: React.FC = () => {
></Helmet> ></Helmet>
{/* Hero Section */} {/* Hero Section */}
<div className="relative bg-blue-900 text-white py-12"> <div className="relative bg-blue-900 py-12 text-white dark:bg-gray-950"></div>
<div
className="absolute inset-0 opacity-20"
style={{
backgroundSize: 'cover',
backgroundPosition: 'center',
}}
></div>
</div>
<div className="container mx-auto px-4 pt-4"> <div className="container mx-auto px-4 pt-4">
<BillingControls <BillingControls

39
ui/src/views/public/Services.tsx
View file

@ -176,25 +176,25 @@ function buildServicesContent(
cardStyleClass: resolveLocalizedValue( cardStyleClass: resolveLocalizedValue(
translate, translate,
`Public.services.dynamic.service.${index + 1}.cardStyleClass`, `Public.services.dynamic.service.${index + 1}.cardStyleClass`,
'bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow', 'bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow dark:shadow-gray-950/40',
), ),
titleStyleClassKey: `Public.services.dynamic.service.${index + 1}.titleStyleClass`, titleStyleClassKey: `Public.services.dynamic.service.${index + 1}.titleStyleClass`,
titleStyleClass: resolveLocalizedValue( titleStyleClass: resolveLocalizedValue(
translate, translate,
`Public.services.dynamic.service.${index + 1}.titleStyleClass`, `Public.services.dynamic.service.${index + 1}.titleStyleClass`,
'text-2xl font-bold text-gray-900 mb-4', 'text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4',
), ),
descriptionStyleClassKey: `Public.services.dynamic.service.${index + 1}.descriptionStyleClass`, descriptionStyleClassKey: `Public.services.dynamic.service.${index + 1}.descriptionStyleClass`,
descriptionStyleClass: resolveLocalizedValue( descriptionStyleClass: resolveLocalizedValue(
translate, translate,
`Public.services.dynamic.service.${index + 1}.descriptionStyleClass`, `Public.services.dynamic.service.${index + 1}.descriptionStyleClass`,
'text-gray-600 mb-6', 'text-gray-600 dark:text-gray-300 mb-6',
), ),
featureStyleClassKey: `Public.services.dynamic.service.${index + 1}.featureStyleClass`, featureStyleClassKey: `Public.services.dynamic.service.${index + 1}.featureStyleClass`,
featureStyleClass: resolveLocalizedValue( featureStyleClass: resolveLocalizedValue(
translate, translate,
`Public.services.dynamic.service.${index + 1}.featureStyleClass`, `Public.services.dynamic.service.${index + 1}.featureStyleClass`,
'flex items-center text-gray-700', 'flex items-center text-gray-700 dark:text-gray-300',
), ),
features: (item.features ?? []).map((feature, featureIndex) => ({ features: (item.features ?? []).map((feature, featureIndex) => ({
key: key:
@ -229,7 +229,7 @@ function buildServicesContent(
cardStyleClass: resolveLocalizedValue( cardStyleClass: resolveLocalizedValue(
translate, translate,
`Public.services.dynamic.support.${index + 1}.cardStyleClass`, `Public.services.dynamic.support.${index + 1}.cardStyleClass`,
'bg-white rounded-xl shadow-lg p-8 border border-gray-200', 'bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8 border border-gray-200 dark:border-gray-700 dark:shadow-gray-950/40',
), ),
titleStyleClassKey: `Public.services.dynamic.support.${index + 1}.titleStyleClass`, titleStyleClassKey: `Public.services.dynamic.support.${index + 1}.titleStyleClass`,
titleStyleClass: resolveLocalizedValue( titleStyleClass: resolveLocalizedValue(
@ -888,7 +888,7 @@ const Services: React.FC = () => {
if (loading) { if (loading) {
return ( return (
<div className="flex items-center justify-center min-h-screen bg-gray-50"> <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
<div className="text-center"> <div className="text-center">
<Loading loading={loading} /> <Loading loading={loading} />
</div> </div>
@ -897,7 +897,7 @@ const Services: React.FC = () => {
} }
return ( return (
<div className={`min-h-screen bg-gray-50 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}> <div className={`min-h-screen bg-gray-50 dark:bg-gray-950 ${isDesignMode && isPanelVisible ? 'xl:pr-[420px]' : ''}`}>
<Helmet <Helmet
titleTemplate={`%s | ${APP_NAME}`} titleTemplate={`%s | ${APP_NAME}`}
title={translate('::App.Services')} title={translate('::App.Services')}
@ -921,15 +921,16 @@ const Services: React.FC = () => {
isDesignMode={isDesignMode} isDesignMode={isDesignMode}
onSelect={handleSelectBlock} onSelect={handleSelectBlock}
> >
<div className={content?.heroSectionStyleClass || 'relative bg-blue-900 text-white py-12'}> <div className={`${content?.heroSectionStyleClass || 'relative bg-blue-900 py-12 text-white'} dark:bg-gray-950`}>
<div <div
className="absolute inset-0 opacity-20" className="absolute inset-0 opacity-20 dark:opacity-35"
style={{ style={{
backgroundImage: `url("${content?.heroImage ?? SERVICES_HERO_IMAGE}")`, backgroundImage: `url("${content?.heroImage ?? SERVICES_HERO_IMAGE}")`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}} }}
></div> ></div>
<div className="absolute inset-0 bg-blue-950/25 dark:bg-gray-950/45"></div>
<div className="container mx-auto pt-20 relative"> <div className="container mx-auto pt-20 relative">
<h1 className={content?.heroTitleStyleClass || 'text-5xl font-bold ml-4 mt-3 mb-2 text-white'}>{content?.heroTitle}</h1> <h1 className={content?.heroTitleStyleClass || 'text-5xl font-bold ml-4 mt-3 mb-2 text-white'}>{content?.heroTitle}</h1>
<p className={content?.heroSubtitleStyleClass || 'text-xl max-w-3xl ml-4'}>{content?.heroSubtitle}</p> <p className={content?.heroSubtitleStyleClass || 'text-xl max-w-3xl ml-4'}>{content?.heroSubtitle}</p>
@ -938,7 +939,7 @@ const Services: React.FC = () => {
</SelectableBlock> </SelectableBlock>
{/* Services Grid */} {/* Services Grid */}
<div className="py-16"> <div className="py-6">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{content?.serviceItems.map((service, index) => { {content?.serviceItems.map((service, index) => {
@ -951,17 +952,17 @@ const Services: React.FC = () => {
isDesignMode={isDesignMode} isDesignMode={isDesignMode}
onSelect={handleSelectBlock} onSelect={handleSelectBlock}
> >
<div className={service.cardStyleClass || 'bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow'}> <div className={`${service.cardStyleClass || 'bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow'} dark:bg-gray-900 dark:shadow-gray-950/40`}>
<div className="mb-6"> <div className="mb-6">
{IconComponent && ( {IconComponent && (
<IconComponent className={`w-12 h-12 ${getIconColor(index)}`} /> <IconComponent className={`w-12 h-12 ${getIconColor(index)}`} />
)} )}
</div> </div>
<h3 className={service.titleStyleClass || 'text-2xl font-bold text-gray-900 mb-4'}>{service.title}</h3> <h3 className={`${service.titleStyleClass || 'text-2xl font-bold text-gray-900 mb-4'} dark:text-gray-100`}>{service.title}</h3>
<p className={service.descriptionStyleClass || 'text-gray-600 mb-6'}>{service.description}</p> <p className={`${service.descriptionStyleClass || 'text-gray-600 mb-6'} dark:text-gray-300`}>{service.description}</p>
<ul className="space-y-2"> <ul className="space-y-2">
{(service.features ?? []).map((feature, fIndex) => ( {(service.features ?? []).map((feature, fIndex) => (
<li key={fIndex} className={service.featureStyleClass || 'flex items-center text-gray-700'}> <li key={fIndex} className={`${service.featureStyleClass || 'flex items-center text-gray-700'} dark:text-gray-300`}>
<span className="w-2 h-2 bg-blue-600 rounded-full mr-2"></span> <span className="w-2 h-2 bg-blue-600 rounded-full mr-2"></span>
{feature.value} {feature.value}
</li> </li>
@ -976,7 +977,7 @@ const Services: React.FC = () => {
</div> </div>
{/* Support Plans */} {/* Support Plans */}
<div className="bg-white py-10"> <div className="bg-white py-10 dark:bg-gray-900">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<SelectableBlock <SelectableBlock
id="support-heading" id="support-heading"
@ -984,7 +985,7 @@ const Services: React.FC = () => {
isDesignMode={isDesignMode} isDesignMode={isDesignMode}
onSelect={handleSelectBlock} onSelect={handleSelectBlock}
> >
<h2 className={content?.supportTitleStyleClass || 'text-3xl font-bold text-center mb-10'}>{content?.supportTitle}</h2> <h2 className={`${content?.supportTitleStyleClass || 'text-3xl font-bold text-center mb-10'} dark:text-gray-100`}>{content?.supportTitle}</h2>
</SelectableBlock> </SelectableBlock>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{content?.supportItems.map((plan, index) => { {content?.supportItems.map((plan, index) => {
@ -998,16 +999,16 @@ const Services: React.FC = () => {
isDesignMode={isDesignMode} isDesignMode={isDesignMode}
onSelect={handleSelectBlock} onSelect={handleSelectBlock}
> >
<div className={plan.cardStyleClass || 'bg-white rounded-xl shadow-lg p-8 border border-gray-200'}> <div className={`${plan.cardStyleClass || 'bg-white rounded-xl shadow-lg p-8 border border-gray-200'} dark:border-gray-700 dark:bg-gray-950 dark:shadow-gray-950/40`}>
<div className="mb-6"> <div className="mb-6">
{IconComponent && ( {IconComponent && (
<IconComponent className={`w-12 h-12 ${getIconColor(index)}`} /> <IconComponent className={`w-12 h-12 ${getIconColor(index)}`} />
)} )}
</div> </div>
<h3 className={plan.titleStyleClass || 'text-xl font-bold mb-4'}>{plan.title}</h3> <h3 className={`${plan.titleStyleClass || 'text-xl font-bold mb-4'} dark:text-gray-100`}>{plan.title}</h3>
<ul className="space-y-3 mb-8"> <ul className="space-y-3 mb-8">
{(plan.features ?? []).map((feature, fIndex) => ( {(plan.features ?? []).map((feature, fIndex) => (
<li key={fIndex} className="flex items-center space-x-2 text-gray-700"> <li key={fIndex} className="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
<FaCheckCircle className="w-5 h-5 text-green-500 flex-shrink-0" /> <FaCheckCircle className="w-5 h-5 text-green-500 flex-shrink-0" />
<span>{feature.value}</span> <span>{feature.value}</span>
</li> </li>

4
ui/src/views/public/Success.tsx
View file

@ -30,7 +30,7 @@ const Success: React.FC = () => {
if (!orderId) { if (!orderId) {
return ( return (
<div className="flex items-center justify-center min-h-screen bg-gray-50"> <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-950">
<div className="text-center"> <div className="text-center">
<Loading loading={!orderId} /> <Loading loading={!orderId} />
</div> </div>
@ -39,7 +39,7 @@ const Success: React.FC = () => {
} }
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
<Helmet <Helmet
titleTemplate={`%s | ${APP_NAME}`} titleTemplate={`%s | ${APP_NAME}`}
title={translate('::' + 'App.Platform.Success')} title={translate('::' + 'App.Platform.Success')}

4
ui/src/views/public/designer/SelectableBlock.tsx
View file

@ -26,8 +26,8 @@ const SelectableBlock: React.FC<SelectableBlockProps> = ({
className={classNames( className={classNames(
'relative rounded-xl transition-all cursor-pointer', 'relative rounded-xl transition-all cursor-pointer',
isActive isActive
? 'ring-2 ring-sky-500 ring-offset-4 ring-offset-white' ? 'ring-2 ring-sky-500 ring-offset-4 ring-offset-white dark:ring-offset-gray-950'
: 'ring-1 ring-sky-200/80 hover:ring-sky-400', : 'ring-1 ring-sky-200/80 hover:ring-sky-400 dark:ring-sky-700/80 dark:hover:ring-sky-500',
className, className,
)} )}
onClick={(e) => { onClick={(e) => {