Apply pill tab style across all portal pages (team, client, external)
This commit is contained in:
Krao Hasanee
@@ -153,37 +153,22 @@ export default function MyRequests() {
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div>
|
<div>
|
||||||
<div style={{ marginBottom: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
|
<div style={{ marginBottom: 20, display: 'flex', gap: 4, flexWrap: 'wrap' }}>
|
||||||
<div className="card-title" style={{ marginBottom: 0, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
|
{[
|
||||||
{[
|
{ id: 'active', label: 'Active', count: activeTasks.length },
|
||||||
{ id: 'active', label: 'Active', count: activeTasks.length },
|
{ id: 'client-review', label: 'Client Review', count: reviewTasks.length },
|
||||||
{ id: 'client-review', label: 'Client Review', count: reviewTasks.length },
|
{ id: 'completed', label: 'Completed', count: completedTasks.length },
|
||||||
{ id: 'completed', label: 'Completed', count: completedTasks.length },
|
{ id: 'closed', label: 'Fully Closed', count: closedTasks.length },
|
||||||
{ id: 'closed', label: 'Fully Closed', count: closedTasks.length },
|
].map(tab => (
|
||||||
].map((tab, index) => (
|
<button
|
||||||
<span key={tab.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
|
key={tab.id}
|
||||||
{index > 0 && <span style={{ color: 'var(--text-muted)' }}>|</span>}
|
type="button"
|
||||||
<button
|
className={`tab-btn${activeTab === tab.id ? ' active' : ''}`}
|
||||||
type="button"
|
onClick={() => setActiveTab(tab.id)}
|
||||||
onClick={() => setActiveTab(tab.id)}
|
>
|
||||||
style={{
|
{tab.label} ({tab.count})
|
||||||
background: 'none',
|
</button>
|
||||||
border: 'none',
|
))}
|
||||||
padding: 0,
|
|
||||||
margin: 0,
|
|
||||||
cursor: 'pointer',
|
|
||||||
color: activeTab === tab.id ? 'var(--text-primary)' : 'var(--text-muted)',
|
|
||||||
font: 'inherit',
|
|
||||||
textTransform: 'inherit',
|
|
||||||
letterSpacing: 'inherit',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{tab.label}
|
|
||||||
<span className="request-company-count" style={{ marginLeft: 6 }}>{tab.count}</span>
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{[
|
{[
|
||||||
|
|||||||
Vendored
+11
-20
@@ -204,26 +204,17 @@ export default function ExternalMyRequests() {
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div>
|
<div>
|
||||||
<div style={{ marginBottom: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
|
<div style={{ marginBottom: 20, display: 'flex', gap: 4, flexWrap: 'wrap' }}>
|
||||||
<div className="card-title" style={{ marginBottom: 0, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
|
{tabList.map(tab => (
|
||||||
{tabList.map((tab, index) => (
|
<button
|
||||||
<span key={tab.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
|
key={tab.id}
|
||||||
{index > 0 && <span style={{ color: 'var(--text-muted)' }}>|</span>}
|
type="button"
|
||||||
<button
|
className={`tab-btn${activeTab === tab.id ? ' active' : ''}`}
|
||||||
type="button"
|
onClick={() => setActiveTab(tab.id)}
|
||||||
onClick={() => setActiveTab(tab.id)}
|
>
|
||||||
style={{
|
{tab.label} ({tab.groups.length})
|
||||||
background: 'none', border: 'none', padding: 0, margin: 0, cursor: 'pointer',
|
</button>
|
||||||
color: activeTab === tab.id ? 'var(--text-primary)' : 'var(--text-muted)',
|
))}
|
||||||
font: 'inherit', textTransform: 'inherit', letterSpacing: 'inherit',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{tab.label}
|
|
||||||
<span className="request-company-count" style={{ marginLeft: 6 }}>{tab.groups.length}</span>
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{currentGroups.length === 0 ? (
|
{currentGroups.length === 0 ? (
|
||||||
|
|||||||
@@ -275,33 +275,21 @@ export default function Companies() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div style={{ marginBottom: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
|
<div style={{ marginBottom: 20, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
|
||||||
<div className="card-title" style={{ marginBottom: 0, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
|
<div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
|
||||||
{[
|
{[
|
||||||
{ id: 'companies', label: 'Companies' },
|
{ id: 'companies', label: 'Companies' },
|
||||||
{ id: 'clients', label: 'Clients' },
|
{ id: 'clients', label: 'Clients' },
|
||||||
{ id: 'subcontractors', label: 'Subcontractors' },
|
{ id: 'subcontractors', label: 'Subcontractors' },
|
||||||
].map((tab, index) => (
|
].map(tab => (
|
||||||
<span key={tab.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
|
<button
|
||||||
{index > 0 && <span style={{ color: 'var(--text-muted)' }}>|</span>}
|
key={tab.id}
|
||||||
<button
|
type="button"
|
||||||
type="button"
|
className={`tab-btn${activeTab === tab.id ? ' active' : ''}`}
|
||||||
onClick={() => setActiveTab(tab.id)}
|
onClick={() => setActiveTab(tab.id)}
|
||||||
style={{
|
>
|
||||||
background: 'none',
|
{tab.label}
|
||||||
border: 'none',
|
</button>
|
||||||
padding: 0,
|
|
||||||
margin: 0,
|
|
||||||
cursor: 'pointer',
|
|
||||||
color: activeTab === tab.id ? 'var(--text-primary)' : 'var(--text-muted)',
|
|
||||||
font: 'inherit',
|
|
||||||
textTransform: 'inherit',
|
|
||||||
letterSpacing: 'inherit',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{tab.label}
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
{activeTab === 'companies' && (
|
{activeTab === 'companies' && (
|
||||||
|
|||||||
@@ -267,22 +267,17 @@ export default function CompanyDetail() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Tabs */}
|
{/* Tabs */}
|
||||||
<div style={{ display: 'flex', gap: 4, marginBottom: 24, borderBottom: '1px solid var(--border)', paddingBottom: 0 }}>
|
<div style={{ display: 'flex', gap: 4, marginBottom: 24, flexWrap: 'wrap' }}>
|
||||||
{['users', 'projects', 'pricing'].map(t => (
|
{['users', 'projects', 'pricing'].map(t => (
|
||||||
<button
|
<button
|
||||||
key={t}
|
key={t}
|
||||||
onClick={() => setTab(t)}
|
onClick={() => setTab(t)}
|
||||||
style={{
|
className={`tab-btn${tab === t ? ' active' : ''}`}
|
||||||
background: 'none', border: 'none', cursor: 'pointer',
|
style={{ textTransform: 'capitalize' }}
|
||||||
padding: '8px 16px', fontSize: 13, fontWeight: 600,
|
|
||||||
color: tab === t ? 'var(--accent)' : 'var(--text-muted)',
|
|
||||||
borderBottom: tab === t ? '2px solid var(--accent)' : '2px solid transparent',
|
|
||||||
marginBottom: -1, textTransform: 'capitalize', fontFamily: 'inherit',
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{t}
|
{t}
|
||||||
{t === 'users' && availableUsers.length > 0 && (
|
{t === 'users' && availableUsers.length > 0 && (
|
||||||
<span style={{ marginLeft: 6, fontSize: 10, background: 'var(--danger)', color: 'white', padding: '1px 5px', borderRadius: 10, fontWeight: 700 }}>
|
<span style={{ marginLeft: 6, fontSize: 10, background: tab === t ? 'rgba(0,0,0,0.3)' : 'var(--danger)', color: 'white', padding: '1px 5px', borderRadius: 10, fontWeight: 700 }}>
|
||||||
{availableUsers.length}
|
{availableUsers.length}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
|||||||
+11
-23
@@ -498,33 +498,21 @@ export default function Invoices() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style={{ marginBottom: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
|
<div style={{ marginBottom: 20, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
|
||||||
<div className="card-title" style={{ marginBottom: 0, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
|
<div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
|
||||||
{[
|
{[
|
||||||
{ id: 'invoices', label: 'Invoices' },
|
{ id: 'invoices', label: 'Invoices' },
|
||||||
{ id: 'sub-invoices', label: 'Subcontractor Invoices' },
|
{ id: 'sub-invoices', label: 'Subcontractor Invoices' },
|
||||||
{ id: 'expenses', label: 'Expenses' },
|
{ id: 'expenses', label: 'Expenses' },
|
||||||
].map((tab, index) => (
|
].map(tab => (
|
||||||
<span key={tab.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
|
<button
|
||||||
{index > 0 && <span style={{ color: 'var(--text-muted)' }}>|</span>}
|
key={tab.id}
|
||||||
<button
|
type="button"
|
||||||
type="button"
|
className={`tab-btn${activeTab === tab.id ? ' active' : ''}`}
|
||||||
onClick={() => setActiveTab(tab.id)}
|
onClick={() => setActiveTab(tab.id)}
|
||||||
style={{
|
>
|
||||||
background: 'none',
|
{tab.label}
|
||||||
border: 'none',
|
</button>
|
||||||
padding: 0,
|
|
||||||
margin: 0,
|
|
||||||
cursor: 'pointer',
|
|
||||||
color: activeTab === tab.id ? 'var(--text-primary)' : 'var(--text-muted)',
|
|
||||||
font: 'inherit',
|
|
||||||
textTransform: 'inherit',
|
|
||||||
letterSpacing: 'inherit',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{tab.label}
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
{activeTab === 'invoices' && (
|
{activeTab === 'invoices' && (
|
||||||
|
|||||||
+16
-31
@@ -419,37 +419,22 @@ export default function Requests() {
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div>
|
<div>
|
||||||
<div style={{ marginBottom: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
|
<div style={{ marginBottom: 20, display: 'flex', gap: 4, flexWrap: 'wrap' }}>
|
||||||
<div className="card-title" style={{ marginBottom: 0, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
|
{[
|
||||||
{[
|
{ id: 'active', label: 'Active', count: activeGroups.length },
|
||||||
{ id: 'active', label: 'Active', count: activeGroups.length },
|
{ id: 'client-review', label: 'Client Review', count: clientReviewGroups.length },
|
||||||
{ id: 'client-review', label: 'Client Review', count: clientReviewGroups.length },
|
{ id: 'completed', label: 'Completed', count: completedGroups.length },
|
||||||
{ id: 'completed', label: 'Completed', count: completedGroups.length },
|
{ id: 'closed', label: 'Fully Closed', count: closedGroups.length },
|
||||||
{ id: 'closed', label: 'Fully Closed', count: closedGroups.length },
|
].map(tab => (
|
||||||
].map((tab, index) => (
|
<button
|
||||||
<span key={tab.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
|
key={tab.id}
|
||||||
{index > 0 && <span style={{ color: 'var(--text-muted)' }}>|</span>}
|
type="button"
|
||||||
<button
|
className={`tab-btn${activeTab === tab.id ? ' active' : ''}`}
|
||||||
type="button"
|
onClick={() => setActiveTab(tab.id)}
|
||||||
onClick={() => setActiveTab(tab.id)}
|
>
|
||||||
style={{
|
{tab.label} ({tab.count})
|
||||||
background: 'none',
|
</button>
|
||||||
border: 'none',
|
))}
|
||||||
padding: 0,
|
|
||||||
margin: 0,
|
|
||||||
cursor: 'pointer',
|
|
||||||
color: activeTab === tab.id ? 'var(--text-primary)' : 'var(--text-muted)',
|
|
||||||
font: 'inherit',
|
|
||||||
textTransform: 'inherit',
|
|
||||||
letterSpacing: 'inherit',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{tab.label}
|
|
||||||
<span className="request-company-count" style={{ marginLeft: 6 }}>{tab.count}</span>
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{activeTab === 'active' && (
|
{activeTab === 'active' && (
|
||||||
|
|||||||
Reference in New Issue
Block a user