fixed some design
This commit is contained in:
parent
9d5308206e
commit
f7481b24cb
9 changed files with 56 additions and 86 deletions
|
|
@ -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);
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -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 */
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -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';
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue