fixed some design

This commit is contained in:
Ida Dittrich 2025-08-22 12:49:47 +02:00
parent 9d5308206e
commit f7481b24cb
9 changed files with 56 additions and 86 deletions

View file

@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
import FileAttachmentPopup from './FileAttachmentPopup'; import FileAttachmentPopup from './FileAttachmentPopup';
import { InputAreaProps, AttachedFile } from './dashboardChatAreaTypes'; import { InputAreaProps, AttachedFile } from './dashboardChatAreaTypes';
import { useLanguage } from '../../../contexts/LanguageContext'; import { useLanguage } from '../../../contexts/LanguageContext';
import { useSimplePrompts } from '../../../hooks/usePrompts'; import { usePrompts } from '../../../hooks/usePrompts';
import styles from './DashboardChatAreaStyles/DashboardChatAreaInput.module.css'; import styles from './DashboardChatAreaStyles/DashboardChatAreaInput.module.css';
import sharedStyles from './DashboardChatAreaStyles/DashboardChat.module.css'; import sharedStyles from './DashboardChatAreaStyles/DashboardChat.module.css';
@ -16,7 +16,7 @@ const InputArea: React.FC<InputAreaProps> = ({
onAttachedFilesChange onAttachedFilesChange
}) => { }) => {
const { t } = useLanguage(); const { t } = useLanguage();
const { prompts, loading: promptsLoading } = useSimplePrompts(); const { prompts, loading: promptsLoading } = usePrompts();
const [inputValue, setInputValue] = useState(''); const [inputValue, setInputValue] = useState('');
const [showFilePopup, setShowFilePopup] = useState(false); const [showFilePopup, setShowFilePopup] = useState(false);
const [isSending, setIsSending] = useState(false); const [isSending, setIsSending] = useState(false);

View file

@ -73,7 +73,7 @@
border: 1px solid var(--color-primary); border: 1px solid var(--color-primary);
border-radius: 50%; border-radius: 50%;
background: var(--color-bg); background: var(--color-bg);
color: var(--color-gray); color: var(--color-text);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;

View file

@ -63,6 +63,7 @@
.fileInfo { .fileInfo {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
color: var(--color-text);
} }
.fileName { .fileName {
@ -79,7 +80,7 @@
.fileSize { .fileSize {
font-size: 12px; font-size: 12px;
color: var(--color-gray); color: var(--color-text);
} }
.fileActions { .fileActions {

View file

@ -153,7 +153,7 @@
/* Assistant message bubble */ /* Assistant message bubble */
.message_bubble.assistant { .message_bubble.assistant {
background-color: var(--color-highlight-gray); background-color: var(--color-highlight-gray);
color: var(--color-text); color: #181818;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
} }

View file

@ -160,28 +160,6 @@ export const pageConfigs: PageConfig[] = [
onActivate: async () => { onActivate: async () => {
if (import.meta.env.DEV) console.log('Einstellungen activated'); if (import.meta.env.DEV) console.log('Einstellungen activated');
} }
},
{
path: 'testSharepoint',
component: TestSharepoint,
persistent: false,
preload: true,
moduleEnabled: false, // Disabled by default - can be enabled for testing
// Sidebar properties
id: '8',
name: 'Test Sharepoint',
icon: FaShare,
order: 7,
showInSidebar: true,
onActivate: async () => {
if (import.meta.env.DEV) console.log('Test Sharepoint activated');
},
onLoad: async () => {
if (import.meta.env.DEV) console.log('Test Sharepoint loaded - can initialize test environment');
},
onUnload: async () => {
if (import.meta.env.DEV) console.log('Test Sharepoint unloaded - cleanup test resources');
}
} }
]; ];

View file

@ -70,49 +70,48 @@ function Einstellungen() {
<div className={sharedStyles.horizontalDivider}></div> <div className={sharedStyles.horizontalDivider}></div>
<div className={sharedStyles.contentArea}> <div className={sharedStyles.contentArea}>
<div className={styles.settingItem}> <div className={styles.settingItem}>
<div className={styles.settingInfo}> <div className={styles.settingInfo}>
<span className={styles.settingLabel}>{t('settings.theme')}</span> <span className={styles.settingLabel}>{t('settings.theme')}</span>
<span className={styles.settingDescription}> <span className={styles.settingDescription}>
{t('settings.theme.description')} {t('settings.theme.description')}
</span> </span>
</div> </div>
<button <button
className={`${styles.themeToggle} ${isDarkMode ? styles.dark : styles.light}`} className={`${styles.themeToggle} ${isDarkMode ? styles.dark : styles.light}`}
onClick={toggleTheme} onClick={toggleTheme}
aria-label={isDarkMode ? t('settings.theme.toggle.light') : t('settings.theme.toggle.dark')} aria-label={isDarkMode ? t('settings.theme.toggle.light') : t('settings.theme.toggle.dark')}
> >
<div className={styles.toggleSlider}> <div className={styles.toggleSlider}>
<div className={styles.toggleIcon}> <div className={styles.toggleIcon}>
{isDarkMode ? '🌙' : '☀️'} {isDarkMode ? '🌙' : '☀️'}
</div>
</div> </div>
<span className={styles.toggleLabel}>
{isDarkMode ? t('settings.theme.dark') : t('settings.theme.light')}
</span>
</button>
</div>
<div className={styles.settingItem}>
<div className={styles.settingInfo}>
<span className={styles.settingLabel}>{t('settings.language')}</span>
<span className={styles.settingDescription}>
{t('settings.language.description')}
</span>
</div> </div>
<span className={styles.toggleLabel}>
<select {isDarkMode ? t('settings.theme.dark') : t('settings.theme.light')}
className={styles.languageSelect} </span>
value={currentLanguage} </button>
onChange={(e) => handleLanguageChange(e.target.value as Language)} </div>
aria-label={t('settings.language')}
> <div className={styles.settingItem}>
<option value="de">{getLanguageLabel('de')}</option> <div className={styles.settingInfo}>
<option value="en">{getLanguageLabel('en')}</option> <span className={styles.settingLabel}>{t('settings.language')}</span>
<option value="fr">{getLanguageLabel('fr')}</option> <span className={styles.settingDescription}>
</select> {t('settings.language.description')}
</span>
</div> </div>
<select
className={styles.languageSelect}
value={currentLanguage}
onChange={(e) => handleLanguageChange(e.target.value as Language)}
aria-label={t('settings.language')}
>
<option value="de">{getLanguageLabel('de')}</option>
<option value="en">{getLanguageLabel('en')}</option>
<option value="fr">{getLanguageLabel('fr')}</option>
</select>
</div> </div>
<div className={styles.settingsSection}> <div className={styles.settingsSection}>
@ -126,8 +125,8 @@ function Einstellungen() {
</div> </div>
</div> </div>
</div> </div>
</div>
); );
} }
export default Einstellungen; export default Einstellungen;

View file

@ -58,10 +58,11 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 2px; gap: 2px;
color: var(--color-text);
} }
.statLabel { .statLabel {
color: var(--color-text-secondary); color: var(--color-text);
font-size: 11px; font-size: 11px;
text-transform: uppercase; text-transform: uppercase;
} }
@ -142,7 +143,8 @@
cursor: pointer; cursor: pointer;
font-family: var(--font-family); font-family: var(--font-family);
transition: 0.2s ease; transition: 0.2s ease;
border-bottom: 1px solid var(--color-gray-disabled); border-bottom: 1px solid var(--color-primary);
color: var(--color-text);
} }
.dropdownItem:hover { .dropdownItem:hover {
@ -163,26 +165,26 @@
.workflowId { .workflowId {
font-size: 12px; font-size: 12px;
color: var(--color-text-secondary); color: var(--color-text);
font-family: monospace; font-family: monospace;
} }
.workflowStatus { .workflowStatus {
font-size: 12px; font-size: 12px;
color: var(--color-text-secondary); color: var(--color-text);
text-transform: capitalize; text-transform: capitalize;
} }
.statValueSuccess { .statValueSuccess {
color: var(--color-success); color: var(--color-text);
} }
.statValueWarning { .statValueWarning {
color: var(--color-warning); color: var(--color-text);
} }
.statValueError { .statValueError {
color: var(--color-error); color: var(--color-text);
} }
.statValueBold { .statValueBold {

View file

@ -15,12 +15,3 @@
flex-direction: column; flex-direction: column;
min-height: 400px; /* Ensure minimum height for table functionality */ min-height: 400px; /* Ensure minimum height for table functionality */
} }
/* Future workflow-specific styles go here */
.workflowItem {
/* Future workflow item styling */
}
.workflowActions {
/* Future workflow action styling */
}

View file

@ -1,4 +1,3 @@
import styles from './HomeStyles/TeamBereich.module.css'
import sharedStyles from '../../components/PageManager/pages.module.css'; import sharedStyles from '../../components/PageManager/pages.module.css';
import MitgliederTable from '../../components/Mitglieder/MitgliederTable'; import MitgliederTable from '../../components/Mitglieder/MitgliederTable';