feat(account-setup): enhance localization and UI for account setup process
- Added new language support and improved translations for account setup steps across multiple languages. - Updated the organization step to streamline user input and enhance suggestions for organization names. - Refactored task management components to improve user experience when adding and managing tasks. - Removed outdated CSS for admin center components to simplify styling and improve maintainability. - Introduced new UI elements and transitions for a more engaging account setup experience. - Enhanced Redux state management to accommodate new features and localization updates.
This commit is contained in:
chamikaJ
@@ -10,6 +10,7 @@ import {
|
||||
Image,
|
||||
Input,
|
||||
Flex,
|
||||
theme,
|
||||
} from '@/shared/antd-imports';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
@@ -44,6 +45,7 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
|
||||
},
|
||||
}) => {
|
||||
const themeMode = useSelector((state: RootState) => state.themeReducer.mode);
|
||||
const { token } = theme.useToken();
|
||||
const { t } = useTranslation('template-drawer');
|
||||
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
@@ -149,7 +151,12 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
|
||||
<Tag
|
||||
key={phase.name}
|
||||
color={phase.color_code}
|
||||
style={{ color: 'black', marginBottom: '8px' }}
|
||||
style={{
|
||||
color: token.colorText,
|
||||
marginBottom: '8px',
|
||||
backgroundColor: phase.color_code ? undefined : token.colorBgContainer,
|
||||
borderColor: phase.color_code ? undefined : token.colorBorder
|
||||
}}
|
||||
>
|
||||
{phase.name}
|
||||
</Tag>
|
||||
@@ -171,7 +178,12 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
|
||||
<Tag
|
||||
key={status.name}
|
||||
color={status.color_code}
|
||||
style={{ color: 'black', marginBottom: '8px' }}
|
||||
style={{
|
||||
color: token.colorText,
|
||||
marginBottom: '8px',
|
||||
backgroundColor: status.color_code ? undefined : token.colorBgContainer,
|
||||
borderColor: status.color_code ? undefined : token.colorBorder
|
||||
}}
|
||||
>
|
||||
{status.name}
|
||||
</Tag>
|
||||
@@ -193,7 +205,12 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
|
||||
<Tag
|
||||
key={priority.name}
|
||||
color={priority.color_code}
|
||||
style={{ color: 'black', marginBottom: '8px' }}
|
||||
style={{
|
||||
color: token.colorText,
|
||||
marginBottom: '8px',
|
||||
backgroundColor: priority.color_code ? undefined : token.colorBgContainer,
|
||||
borderColor: priority.color_code ? undefined : token.colorBorder
|
||||
}}
|
||||
>
|
||||
{priority.name}
|
||||
</Tag>
|
||||
@@ -215,7 +232,12 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
|
||||
<Tag
|
||||
key={label.name}
|
||||
color={label.color_code}
|
||||
style={{ color: 'black', marginBottom: '8px' }}
|
||||
style={{
|
||||
color: token.colorText,
|
||||
marginBottom: '8px',
|
||||
backgroundColor: label.color_code ? undefined : token.colorBgContainer,
|
||||
borderColor: label.color_code ? undefined : token.colorBorder
|
||||
}}
|
||||
>
|
||||
{label.name}
|
||||
</Tag>
|
||||
@@ -251,14 +273,24 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
|
||||
};
|
||||
|
||||
const menuContent = (
|
||||
<div style={{ display: 'flex' }}>
|
||||
<div style={{ display: 'flex', backgroundColor: token.colorBgContainer }}>
|
||||
{/* Menu Area */}
|
||||
<div style={{ minWidth: '250px', overflowY: 'auto', height: '100%' }}>
|
||||
<div style={{
|
||||
minWidth: '250px',
|
||||
overflowY: 'auto',
|
||||
height: '100%',
|
||||
backgroundColor: token.colorBgContainer,
|
||||
borderRight: `1px solid ${token.colorBorder}`
|
||||
}}>
|
||||
<Skeleton loading={loadingTemplates} active>
|
||||
<Menu
|
||||
className="template-menu"
|
||||
onClick={({ key }) => handleMenuClick(key)}
|
||||
style={{ width: 256 }}
|
||||
style={{
|
||||
width: 256,
|
||||
backgroundColor: token.colorBgContainer,
|
||||
borderColor: token.colorBorder
|
||||
}}
|
||||
defaultSelectedKeys={[templates[0]?.id || '']}
|
||||
mode="inline"
|
||||
items={menuItems}
|
||||
@@ -272,9 +304,11 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
|
||||
flex: 1,
|
||||
maxHeight: 'calc(100vh - 200px)',
|
||||
padding: '16px',
|
||||
backgroundColor: token.colorBgContainer,
|
||||
color: token.colorText
|
||||
}}
|
||||
>
|
||||
<Title level={4}>Details</Title>
|
||||
<Title level={4} style={{ color: token.colorText }}>Details</Title>
|
||||
<Skeleton loading={loadingSelectedTemplate} active>
|
||||
{selectedTemplate?.image_url && (
|
||||
<Image preview={false} src={selectedTemplate.image_url} alt={selectedTemplate.name} />
|
||||
@@ -297,12 +331,17 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
|
||||
};
|
||||
|
||||
const customTemplatesContent = (
|
||||
<div>
|
||||
<div style={{ backgroundColor: token.colorBgContainer, padding: '16px' }}>
|
||||
<Flex justify="space-between" align="center">
|
||||
<Input
|
||||
placeholder={t('searchTemplates')}
|
||||
suffix={<SearchOutlined />}
|
||||
style={{ maxWidth: '300px' }}
|
||||
suffix={<SearchOutlined style={{ color: token.colorTextTertiary }} />}
|
||||
style={{
|
||||
maxWidth: '300px',
|
||||
backgroundColor: token.colorBgContainer,
|
||||
borderColor: token.colorBorder,
|
||||
color: token.colorText
|
||||
}}
|
||||
onChange={e => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</Flex>
|
||||
@@ -312,10 +351,20 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
|
||||
bordered
|
||||
dataSource={filteredCustomTemplates}
|
||||
loading={loadingCustomTemplates}
|
||||
style={{
|
||||
backgroundColor: token.colorBgContainer,
|
||||
borderColor: token.colorBorder
|
||||
}}
|
||||
renderItem={item => (
|
||||
<List.Item
|
||||
key={item.id}
|
||||
onClick={() => handleCustomTemplateClick(item.id || '')}
|
||||
style={{
|
||||
backgroundColor: item.selected ? token.colorPrimaryBg : token.colorBgContainer,
|
||||
borderColor: item.selected ? token.colorPrimary : token.colorBorder,
|
||||
color: token.colorText,
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
className={
|
||||
item.selected && themeMode === 'dark'
|
||||
? 'selected-custom-template-dark'
|
||||
@@ -324,7 +373,7 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
|
||||
: ''
|
||||
}
|
||||
>
|
||||
{item.name}
|
||||
<span style={{ color: token.colorText }}>{item.name}</span>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
@@ -355,18 +404,31 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ height: '100vh', overflow: 'hidden' }}>
|
||||
<div style={{
|
||||
height: '100vh',
|
||||
overflow: 'hidden',
|
||||
backgroundColor: token.colorBgLayout
|
||||
}}>
|
||||
<div
|
||||
style={{
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 100,
|
||||
backgroundColor: themeMode === 'dark' ? '' : '#fff',
|
||||
backgroundColor: token.colorBgContainer,
|
||||
overflow: 'hidden',
|
||||
borderBottom: `1px solid ${token.colorBorder}`
|
||||
}}
|
||||
>
|
||||
{showBothTabs ? (
|
||||
<Tabs type="card" items={tabs} onChange={handleTabChange} destroyInactiveTabPane />
|
||||
<Tabs
|
||||
type="card"
|
||||
items={tabs}
|
||||
onChange={handleTabChange}
|
||||
destroyInactiveTabPane
|
||||
style={{
|
||||
backgroundColor: token.colorBgContainer
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
menuContent
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user