Pascal zmiany Alerty cenowe + Pomoc i kontakt #1
+188
-3
@@ -9,7 +9,7 @@ const cityImage = new URL('./assets/city-panorama.png', import.meta.url).href;
|
|||||||
const loginRoomImage = new URL('./assets/login-room.png', import.meta.url).href;
|
const loginRoomImage = new URL('./assets/login-room.png', import.meta.url).href;
|
||||||
const SMS_VERIFICATION_CODE = '123456';
|
const SMS_VERIFICATION_CODE = '123456';
|
||||||
|
|
||||||
type View = 'home' | 'buy' | 'rent' | 'sell' | 'valuation' | 'priceHistory' | 'districtRanking' | 'negotiation' | 'comparison' | 'add' | 'services' | 'guides' | 'map' | 'login' | 'account' | 'accountPriceAlerts' | 'accountMeetings' | 'accountListings' | 'accountSettings' | 'accountSecurity' | 'accountProfileEdit' | 'accountPublicProfile' | 'notifications' | 'favorites' | 'messages' | 'admin' | 'listingDetail';
|
type View = 'home' | 'buy' | 'rent' | 'sell' | 'valuation' | 'priceHistory' | 'districtRanking' | 'negotiation' | 'comparison' | 'add' | 'services' | 'guides' | 'map' | 'login' | 'account' | 'accountPriceAlerts' | 'accountMeetings' | 'accountListings' | 'accountSettings' | 'accountSecurity' | 'accountProfileEdit' | 'accountPublicProfile' | 'accountHelpContact' | 'notifications' | 'favorites' | 'messages' | 'admin' | 'listingDetail';
|
||||||
|
|
||||||
type MessageThreadListing = {
|
type MessageThreadListing = {
|
||||||
listingId: number;
|
listingId: number;
|
||||||
@@ -110,7 +110,7 @@ const LIVE_LISTINGS_REFRESH_MS = 15000;
|
|||||||
|
|
||||||
const PROTECTED_VIEWS = new Set<View>([
|
const PROTECTED_VIEWS = new Set<View>([
|
||||||
'add', 'admin', 'account', 'accountPriceAlerts', 'accountMeetings', 'accountListings', 'accountSettings',
|
'add', 'admin', 'account', 'accountPriceAlerts', 'accountMeetings', 'accountListings', 'accountSettings',
|
||||||
'accountSecurity', 'accountProfileEdit', 'accountPublicProfile', 'notifications', 'favorites', 'messages', 'comparison',
|
'accountSecurity', 'accountProfileEdit', 'accountPublicProfile', 'accountHelpContact', 'notifications', 'favorites', 'messages', 'comparison',
|
||||||
]);
|
]);
|
||||||
|
|
||||||
type NotificationCategory = 'listing' | 'messages' | 'system';
|
type NotificationCategory = 'listing' | 'messages' | 'system';
|
||||||
@@ -2914,6 +2914,7 @@ function App() {
|
|||||||
{view === 'accountSecurity' && <AccountSecurityPage onNavigate={navigate} activeView={view} />}
|
{view === 'accountSecurity' && <AccountSecurityPage onNavigate={navigate} activeView={view} />}
|
||||||
{view === 'accountProfileEdit' && <AccountProfileEditPage onNavigate={navigate} activeView={view} />}
|
{view === 'accountProfileEdit' && <AccountProfileEditPage onNavigate={navigate} activeView={view} />}
|
||||||
{view === 'accountPublicProfile' && <AccountPublicProfilePage onNavigate={navigate} activeView={view} />}
|
{view === 'accountPublicProfile' && <AccountPublicProfilePage onNavigate={navigate} activeView={view} />}
|
||||||
|
{view === 'accountHelpContact' && <AccountHelpContactPage onNavigate={navigate} activeView={view} />}
|
||||||
{view === 'notifications' && <NotificationsPage />}
|
{view === 'notifications' && <NotificationsPage />}
|
||||||
{view === 'messages' && (
|
{view === 'messages' && (
|
||||||
<MessagesPage
|
<MessagesPage
|
||||||
@@ -4412,6 +4413,7 @@ function AccountSidebar({ onNavigate, activeView }: { onNavigate: (view: View) =
|
|||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
const isSettingsView = activeView === 'accountSettings' || activeView === 'accountProfileEdit' || activeView === 'accountPublicProfile';
|
const isSettingsView = activeView === 'accountSettings' || activeView === 'accountProfileEdit' || activeView === 'accountPublicProfile';
|
||||||
const isSecurityView = activeView === 'accountSecurity';
|
const isSecurityView = activeView === 'accountSecurity';
|
||||||
|
const isHelpContactView = activeView === 'accountHelpContact';
|
||||||
const isDashboardView = activeView === 'account';
|
const isDashboardView = activeView === 'account';
|
||||||
const isPriceAlertsView = activeView === 'accountPriceAlerts';
|
const isPriceAlertsView = activeView === 'accountPriceAlerts';
|
||||||
const isMeetingsView = activeView === 'accountMeetings';
|
const isMeetingsView = activeView === 'accountMeetings';
|
||||||
@@ -4483,7 +4485,7 @@ function AccountSidebar({ onNavigate, activeView }: { onNavigate: (view: View) =
|
|||||||
<button className={isSettingsView ? 'active' : ''} onClick={() => onNavigate('accountSettings')}><Icon name="gear" /> Dane i ustawienia</button>
|
<button className={isSettingsView ? 'active' : ''} onClick={() => onNavigate('accountSettings')}><Icon name="gear" /> Dane i ustawienia</button>
|
||||||
<button className={activeView === 'notifications' ? 'active' : ''} onClick={() => onNavigate('notifications')}><Icon name="bell" /> Powiadomienia</button>
|
<button className={activeView === 'notifications' ? 'active' : ''} onClick={() => onNavigate('notifications')}><Icon name="bell" /> Powiadomienia</button>
|
||||||
<button className={isSecurityView ? 'active' : ''} onClick={() => onNavigate('accountSecurity')}><Icon name="shield" /> Bezpieczeństwo</button>
|
<button className={isSecurityView ? 'active' : ''} onClick={() => onNavigate('accountSecurity')}><Icon name="shield" /> Bezpieczeństwo</button>
|
||||||
<button><Icon name="phone" /> Pomoc i kontakt</button>
|
<button className={isHelpContactView ? 'active' : ''} onClick={() => onNavigate('accountHelpContact')}><Icon name="phone" /> Pomoc i kontakt</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="account-premium-card">
|
<div className="account-premium-card">
|
||||||
@@ -4942,6 +4944,189 @@ function AccountDashboardPage({ onNavigate, activeView }: { onNavigate: (view: V
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function AccountHelpContactPage({ onNavigate, activeView }: { onNavigate: (view: View) => void; activeView: View }) {
|
||||||
|
const supportChannels = [
|
||||||
|
{
|
||||||
|
id: 'live-chat',
|
||||||
|
icon: 'message',
|
||||||
|
iconTone: 'green',
|
||||||
|
title: 'Czat na żywo',
|
||||||
|
badge: 'Najszybsza pomoc',
|
||||||
|
description: 'Porozmawiaj z naszym konsultantem w czasie rzeczywistym.',
|
||||||
|
action: 'Dostępny 8:00 - 20:00',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'email',
|
||||||
|
icon: 'mail',
|
||||||
|
iconTone: 'blue',
|
||||||
|
title: 'E-mail',
|
||||||
|
description: 'Napisz do nas, odpowiemy najszybciej jak to możliwe.',
|
||||||
|
action: 'bok@mieszko.pl',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'phone',
|
||||||
|
icon: 'phone',
|
||||||
|
iconTone: 'violet',
|
||||||
|
title: 'Telefon',
|
||||||
|
description: 'Zadzwoń do nas, chętnie odpowiemy na Twoje pytania.',
|
||||||
|
action: '+48 22 123 45 67',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'form',
|
||||||
|
icon: 'document',
|
||||||
|
iconTone: 'orange',
|
||||||
|
title: 'Formularz kontaktowy',
|
||||||
|
description: 'Wyślij nam wiadomość, a my skontaktujemy się z Tobą.',
|
||||||
|
action: 'Przejdź do formularza',
|
||||||
|
},
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
const faqItems = [
|
||||||
|
'Jak dodać ogłoszenie?',
|
||||||
|
'Ile kosztuje dodanie ogłoszenia?',
|
||||||
|
'Jak wyróżnić moje ogłoszenie?',
|
||||||
|
'Jak edytować lub usunąć ogłoszenie?',
|
||||||
|
'Jak działa porównywarka mieszkań?',
|
||||||
|
'Jak ustawić alerty cenowe?',
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
const moreHelpCards = [
|
||||||
|
{
|
||||||
|
id: 'guides',
|
||||||
|
icon: 'document',
|
||||||
|
iconTone: 'green',
|
||||||
|
title: 'Poradniki',
|
||||||
|
description: 'Praktyczne artykuły i wskazówki dotyczące kupna, sprzedaży i wynajmu nieruchomości.',
|
||||||
|
action: 'Zobacz poradniki',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'security',
|
||||||
|
icon: 'shield',
|
||||||
|
iconTone: 'gold',
|
||||||
|
title: 'Bezpieczeństwo',
|
||||||
|
description: 'Dowiedz się jak bezpiecznie korzystać z serwisu i unikać oszustw.',
|
||||||
|
action: 'Zasady bezpieczeństwa',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'rules',
|
||||||
|
icon: 'list',
|
||||||
|
iconTone: 'blue',
|
||||||
|
title: 'Regulamin i zasady',
|
||||||
|
description: 'Zapoznaj się z regulaminem serwisu oraz zasadami korzystania.',
|
||||||
|
action: 'Przeczytaj regulamin',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'report',
|
||||||
|
icon: 'warning',
|
||||||
|
iconTone: 'red',
|
||||||
|
title: 'Zgłoś problem',
|
||||||
|
description: 'Zgłoś nieodpowiednie treści lub problemy techniczne.',
|
||||||
|
action: 'Zgłoś',
|
||||||
|
},
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="account-page account-help-contact-page" aria-label="Pomoc i kontakt">
|
||||||
|
<div className="account-layout">
|
||||||
|
<AccountSidebar onNavigate={onNavigate} activeView={activeView} />
|
||||||
|
|
||||||
|
<div className="account-main">
|
||||||
|
<section className="help-contact-panel">
|
||||||
|
<header className="help-contact-header">
|
||||||
|
<div>
|
||||||
|
<h1>Pomoc i kontakt</h1>
|
||||||
|
<p>Jesteśmy tutaj, aby Ci pomóc. Skontaktuj się z nami lub znajdź odpowiedzi na najczęściej zadawane pytania.</p>
|
||||||
|
</div>
|
||||||
|
<div className="help-contact-visual" aria-hidden="true">
|
||||||
|
<span><Icon name="mail" /></span>
|
||||||
|
<strong><Icon name="phone" /></strong>
|
||||||
|
<span><Icon name="message" /></span>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section className="help-contact-section">
|
||||||
|
<h2>Jak możemy Ci pomóc?</h2>
|
||||||
|
<div className="help-contact-channel-grid">
|
||||||
|
{supportChannels.map((channel) => (
|
||||||
|
<article key={channel.id} className="help-contact-channel-card">
|
||||||
|
<div className="help-contact-channel-head">
|
||||||
|
<span className={`help-contact-channel-icon ${channel.iconTone}`}><Icon name={channel.icon} /></span>
|
||||||
|
<div>
|
||||||
|
<h3>{channel.title}</h3>
|
||||||
|
{'badge' in channel && channel.badge ? <em>{channel.badge}</em> : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>{channel.description}</p>
|
||||||
|
<button type="button" className="help-contact-channel-action">
|
||||||
|
{channel.action}
|
||||||
|
<Icon name="chevron" />
|
||||||
|
</button>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="help-contact-section help-contact-middle-grid">
|
||||||
|
<article className="help-contact-faq-card">
|
||||||
|
<header>
|
||||||
|
<h2>Najczęściej zadawane pytania</h2>
|
||||||
|
<button type="button">Zobacz wszystkie <Icon name="arrow" /></button>
|
||||||
|
</header>
|
||||||
|
<div className="help-contact-faq-list">
|
||||||
|
{faqItems.map((question) => (
|
||||||
|
<details key={question}>
|
||||||
|
<summary>
|
||||||
|
<span>{question}</span>
|
||||||
|
<Icon name="chevron" />
|
||||||
|
</summary>
|
||||||
|
<p>Znajdziesz odpowiedź w naszym centrum pomocy. W razie potrzeby skorzystaj z formularza kontaktowego obok.</p>
|
||||||
|
</details>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article className="help-contact-form-card">
|
||||||
|
<h2>Napisz do nas</h2>
|
||||||
|
<form>
|
||||||
|
<div className="help-contact-form-row">
|
||||||
|
<input type="text" placeholder="Imię i nazwisko" />
|
||||||
|
<input type="email" placeholder="Adres e-mail" />
|
||||||
|
</div>
|
||||||
|
<select defaultValue="">
|
||||||
|
<option value="" disabled>Temat</option>
|
||||||
|
<option value="ogloszenie">Pytanie o ogłoszenie</option>
|
||||||
|
<option value="konto">Problemy z kontem</option>
|
||||||
|
<option value="platnosci">Płatności i faktury</option>
|
||||||
|
<option value="techniczne">Problem techniczny</option>
|
||||||
|
</select>
|
||||||
|
<textarea rows={5} placeholder="Wiadomość Opisz swój problem lub pytanie..." />
|
||||||
|
<button type="button">Wyślij wiadomość</button>
|
||||||
|
</form>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="help-contact-section">
|
||||||
|
<h2>Więcej sposobów na pomoc</h2>
|
||||||
|
<div className="help-contact-more-grid">
|
||||||
|
{moreHelpCards.map((card) => (
|
||||||
|
<article key={card.id} className="help-contact-more-card">
|
||||||
|
<span className={`help-contact-more-icon ${card.iconTone}`}><Icon name={card.icon} /></span>
|
||||||
|
<div>
|
||||||
|
<h3>{card.title}</h3>
|
||||||
|
<p>{card.description}</p>
|
||||||
|
<button type="button">{card.action} <Icon name="arrow" /></button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
function AccountPriceAlertsPage({
|
function AccountPriceAlertsPage({
|
||||||
onNavigate,
|
onNavigate,
|
||||||
activeView,
|
activeView,
|
||||||
|
|||||||
@@ -13948,6 +13948,412 @@ svg {
|
|||||||
align-content: start;
|
align-content: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.account-help-contact-page {
|
||||||
|
background: linear-gradient(180deg, #f6f8fb 0%, #eef3f7 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-panel {
|
||||||
|
background: #f6f8fb;
|
||||||
|
border: 1px solid #dee7f0;
|
||||||
|
border-radius: 16px;
|
||||||
|
display: grid;
|
||||||
|
gap: 18px;
|
||||||
|
padding: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-header {
|
||||||
|
align-items: start;
|
||||||
|
display: grid;
|
||||||
|
gap: 18px;
|
||||||
|
grid-template-columns: minmax(0, 1fr) auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-header h1 {
|
||||||
|
color: #192b45;
|
||||||
|
font-size: 38px;
|
||||||
|
line-height: 1.02;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-header p {
|
||||||
|
color: #5f7187;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 750;
|
||||||
|
line-height: 1.45;
|
||||||
|
margin: 10px 0 0;
|
||||||
|
max-width: 640px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-visual {
|
||||||
|
align-items: center;
|
||||||
|
background: radial-gradient(circle at 20% 20%, rgba(12, 165, 95, 0.13), rgba(12, 165, 95, 0));
|
||||||
|
border-radius: 999px;
|
||||||
|
display: inline-flex;
|
||||||
|
gap: 14px;
|
||||||
|
padding: 10px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-visual span,
|
||||||
|
.help-contact-visual strong {
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 999px;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-visual span {
|
||||||
|
background: #f4fbf7;
|
||||||
|
border: 1px solid #d9ece2;
|
||||||
|
color: #44aa75;
|
||||||
|
font-size: 18px;
|
||||||
|
height: 34px;
|
||||||
|
width: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-visual strong {
|
||||||
|
background: #ddf6e8;
|
||||||
|
border: 1px solid #c9ead9;
|
||||||
|
color: #109a5a;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 700;
|
||||||
|
height: 48px;
|
||||||
|
width: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-section {
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid #dfe7f0;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-section > h2 {
|
||||||
|
color: #1d2f49;
|
||||||
|
font-size: 30px;
|
||||||
|
margin: 0 0 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-channel-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-channel-card {
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid #e3e9f1;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
min-height: 190px;
|
||||||
|
padding: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-channel-head {
|
||||||
|
align-items: start;
|
||||||
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
grid-template-columns: 40px minmax(0, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-channel-icon,
|
||||||
|
.help-contact-more-icon {
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 999px;
|
||||||
|
display: inline-flex;
|
||||||
|
font-size: 19px;
|
||||||
|
height: 40px;
|
||||||
|
justify-content: center;
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-channel-icon.green,
|
||||||
|
.help-contact-more-icon.green {
|
||||||
|
background: #e6f8ef;
|
||||||
|
color: #109a5a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-channel-icon.blue,
|
||||||
|
.help-contact-more-icon.blue {
|
||||||
|
background: #e8f0ff;
|
||||||
|
color: #2f6de3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-channel-icon.violet {
|
||||||
|
background: #f0ecff;
|
||||||
|
color: #7454d8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-channel-icon.orange {
|
||||||
|
background: #fff0df;
|
||||||
|
color: #ef9123;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-more-icon.gold {
|
||||||
|
background: #fff4d8;
|
||||||
|
color: #c78907;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-more-icon.red {
|
||||||
|
background: #ffe7eb;
|
||||||
|
color: #d63c5f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-channel-head h3 {
|
||||||
|
color: #1f3049;
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-channel-head em {
|
||||||
|
background: #ddf5e8;
|
||||||
|
border-radius: 999px;
|
||||||
|
color: #109253;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 10px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 900;
|
||||||
|
margin-top: 5px;
|
||||||
|
padding: 3px 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-channel-card p {
|
||||||
|
color: #5f7187;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 750;
|
||||||
|
line-height: 1.42;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-channel-action {
|
||||||
|
align-items: center;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
border-top: 1px solid #e5ecf4;
|
||||||
|
color: #3e546f;
|
||||||
|
display: inline-flex;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 850;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: auto;
|
||||||
|
min-height: 40px;
|
||||||
|
padding: 9px 0 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-channel-action svg {
|
||||||
|
font-size: 15px;
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-middle-grid {
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 14px;
|
||||||
|
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-faq-card,
|
||||||
|
.help-contact-form-card {
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid #dfe7f0;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-faq-card header {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-faq-card h2,
|
||||||
|
.help-contact-form-card h2 {
|
||||||
|
color: #1d2f49;
|
||||||
|
font-size: 24px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-faq-card header button {
|
||||||
|
align-items: center;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
color: #0f9c5b;
|
||||||
|
display: inline-flex;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 900;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-faq-card header button svg,
|
||||||
|
.help-contact-more-card button svg {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-faq-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-faq-list details {
|
||||||
|
border: 1px solid #e3eaf2;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-faq-list summary {
|
||||||
|
align-items: center;
|
||||||
|
color: #2a3d57;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 800;
|
||||||
|
justify-content: space-between;
|
||||||
|
list-style: none;
|
||||||
|
min-height: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-faq-list summary::-webkit-details-marker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-faq-list summary svg {
|
||||||
|
color: #7a8ca2;
|
||||||
|
font-size: 14px;
|
||||||
|
transform: rotate(0deg);
|
||||||
|
transition: transform 0.16s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-faq-list details[open] summary svg {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-faq-list details p {
|
||||||
|
color: #60748c;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 740;
|
||||||
|
line-height: 1.42;
|
||||||
|
margin: 0 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-form-card form {
|
||||||
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-form-row {
|
||||||
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-form-card input,
|
||||||
|
.help-contact-form-card select,
|
||||||
|
.help-contact-form-card textarea {
|
||||||
|
background: #fbfdff;
|
||||||
|
border: 1px solid #dde5ef;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #2a3d57;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 760;
|
||||||
|
min-height: 44px;
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-form-card textarea {
|
||||||
|
min-height: 128px;
|
||||||
|
padding: 11px 12px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-form-card button {
|
||||||
|
background: linear-gradient(90deg, #10a15e 0%, #0fbf6b 100%);
|
||||||
|
border: 0;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 900;
|
||||||
|
min-height: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-more-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-more-card {
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid #e3eaf2;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
grid-template-columns: auto minmax(0, 1fr);
|
||||||
|
min-height: 180px;
|
||||||
|
padding: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-more-card h3 {
|
||||||
|
color: #1f3049;
|
||||||
|
font-size: 15px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-more-card p {
|
||||||
|
color: #5f7187;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 750;
|
||||||
|
line-height: 1.42;
|
||||||
|
margin: 8px 0 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-more-card button {
|
||||||
|
align-items: center;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
color: #109253;
|
||||||
|
display: inline-flex;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 900;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1280px) {
|
||||||
|
.help-contact-channel-grid,
|
||||||
|
.help-contact-more-grid {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-middle-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.help-contact-header {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-header h1,
|
||||||
|
.help-contact-section > h2,
|
||||||
|
.help-contact-faq-card h2,
|
||||||
|
.help-contact-form-card h2 {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-contact-form-row,
|
||||||
|
.help-contact-channel-grid,
|
||||||
|
.help-contact-more-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.account-listings-page {
|
.account-listings-page {
|
||||||
background: linear-gradient(180deg, #f4f7fb 0%, #eef3f8 100%);
|
background: linear-gradient(180deg, #f4f7fb 0%, #eef3f8 100%);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user