diff --git a/.gitignore b/.gitignore index 028a655..d821fd9 100644 --- a/.gitignore +++ b/.gitignore @@ -39,3 +39,4 @@ area/ # Deployment .env.upload +.code-workspace \ No newline at end of file diff --git a/adspreview_react.code-workspace b/adspreview_react.code-workspace new file mode 100644 index 0000000..ef9f5d2 --- /dev/null +++ b/adspreview_react.code-workspace @@ -0,0 +1,7 @@ +{ + "folders": [ + { + "path": "." + } + ] +} \ No newline at end of file diff --git a/frontend/public/index.html b/frontend/public/index.html index 6149494..310e6a2 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -2,8 +2,8 @@ - - adspreview + + AdsPreview
diff --git a/frontend/src/App.js b/frontend/src/App.js index 40e1368..fa804e6 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -19,6 +19,41 @@ function App() { return stored === 'true'; }); + // Set initial background colors immediately on component mount + useEffect(() => { + const htmlElement = document.documentElement; + const bodyElement = document.body; + + // Set initial colors based on current darkMode state + const bgColor = darkMode ? '#181818' : '#f5f5f5'; + htmlElement.style.backgroundColor = bgColor; + bodyElement.style.backgroundColor = bgColor; + + if (darkMode) { + htmlElement.classList.add('dark-mode'); + } else { + htmlElement.classList.remove('dark-mode'); + } + }, []); // Run only once on mount + + // Update HTML class and background color when darkMode changes + useEffect(() => { + const htmlElement = document.documentElement; + const bodyElement = document.body; + + if (darkMode) { + htmlElement.classList.add('dark-mode'); + // Set dark mode background colors to prevent white overscroll areas + htmlElement.style.backgroundColor = '#181818'; + bodyElement.style.backgroundColor = '#181818'; + } else { + htmlElement.classList.remove('dark-mode'); + // Set light mode background colors + htmlElement.style.backgroundColor = '#ebebeb'; + bodyElement.style.backgroundColor = '#f5f5f5'; + } + }, [darkMode]); + useEffect(() => { const token = localStorage.getItem('jwt'); @@ -99,8 +134,7 @@ function App() { > - - {/* Kein globaler Header mehr, Header wird ggf. in einzelnen Seiten eingebunden */} + {user.role === 'admin' ? ( diff --git a/frontend/src/global.css b/frontend/src/global.css index bda4678..1b64c8c 100644 --- a/frontend/src/global.css +++ b/frontend/src/global.css @@ -11,7 +11,29 @@ margin-bottom: 0px; } +.ant-layout-header.overview-header { + padding: 0 32px; +} + .ant-tabs-content { padding: 0px 32px; overflow: auto; +} + +/* Adjust tab navigation padding on mobile */ +@media (max-width: 768px) { + .ant-tabs > .ant-tabs-nav { + padding: 9px 16px; /* Reduced padding on mobile */ + } + .ant-layout-header.overview-header { + padding: 0 16px; + } + .ant-tabs-content { + padding: 0px 16px; /* Reduced padding on mobile */ + } +} + +/* Global anticon color override */ +.anticon { + color: rgb(0, 31, 30) !important; } \ No newline at end of file diff --git a/frontend/src/pages/ClientProjects.js b/frontend/src/pages/ClientProjects.js index b0257e5..f51921e 100644 --- a/frontend/src/pages/ClientProjects.js +++ b/frontend/src/pages/ClientProjects.js @@ -198,7 +198,7 @@ export default function ClientProjects({ user, darkMode, onLogout, onToggleDarkM cursor: ${sortMode ? 'grabbing' : 'default'}; } `} -
Übersicht
diff --git a/frontend/src/pages/LoginPage.js b/frontend/src/pages/LoginPage.js index 4d21f39..5c6783a 100644 --- a/frontend/src/pages/LoginPage.js +++ b/frontend/src/pages/LoginPage.js @@ -40,7 +40,7 @@ export default function LoginPage({ onLogin }) { return (
navigate('/')} style={{ marginRight: projectLogo ? 12 : 0 }} /> - {projectLogo && ( + {projectLogo && !isMobile && (