Dodaj widok Pomoc i kontakt w panelu uzytkownika
This commit is contained in:
+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 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 = {
|
||||
listingId: number;
|
||||
@@ -110,7 +110,7 @@ const LIVE_LISTINGS_REFRESH_MS = 15000;
|
||||
|
||||
const PROTECTED_VIEWS = new Set<View>([
|
||||
'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';
|
||||
@@ -2914,6 +2914,7 @@ function App() {
|
||||
{view === 'accountSecurity' && <AccountSecurityPage onNavigate={navigate} activeView={view} />}
|
||||
{view === 'accountProfileEdit' && <AccountProfileEditPage onNavigate={navigate} activeView={view} />}
|
||||
{view === 'accountPublicProfile' && <AccountPublicProfilePage onNavigate={navigate} activeView={view} />}
|
||||
{view === 'accountHelpContact' && <AccountHelpContactPage onNavigate={navigate} activeView={view} />}
|
||||
{view === 'notifications' && <NotificationsPage />}
|
||||
{view === 'messages' && (
|
||||
<MessagesPage
|
||||
@@ -4412,6 +4413,7 @@ function AccountSidebar({ onNavigate, activeView }: { onNavigate: (view: View) =
|
||||
const { user } = useAuth();
|
||||
const isSettingsView = activeView === 'accountSettings' || activeView === 'accountProfileEdit' || activeView === 'accountPublicProfile';
|
||||
const isSecurityView = activeView === 'accountSecurity';
|
||||
const isHelpContactView = activeView === 'accountHelpContact';
|
||||
const isDashboardView = activeView === 'account';
|
||||
const isPriceAlertsView = activeView === 'accountPriceAlerts';
|
||||
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={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><Icon name="phone" /> Pomoc i kontakt</button>
|
||||
<button className={isHelpContactView ? 'active' : ''} onClick={() => onNavigate('accountHelpContact')}><Icon name="phone" /> Pomoc i kontakt</button>
|
||||
</div>
|
||||
|
||||
<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({
|
||||
onNavigate,
|
||||
activeView,
|
||||
|
||||
@@ -13948,6 +13948,412 @@ svg {
|
||||
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 {
|
||||
background: linear-gradient(180deg, #f4f7fb 0%, #eef3f8 100%);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user