Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-04 02:01:58 -05:00
Code Issues Activity

Added UI refinements

Browse source 
refs. https://github.com/TryGhost/Team/issues/2348

- spacing and typography was off on the receiving FAQ page
- longform popup size missed mobile sizes
This commit is contained in:
Peter Zimon 2022-12-12 10:24:26 +01:00 • committed by Rishabh Garg
parent ce45571dc0
commit bd92b3ac89
6 changed files with 70 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ghost/portal/src/components/Frame.styles.js
View file

@ -323,7 +323,8 @@ const FrameStyles = `
}
.gh-portal-popup-container.large-size {
width: 720px;
width: 100%;
max-width: 720px;
justify-content: flex-start;
padding: 0;
}
@ -804,7 +805,8 @@ const MobileStyles = `
}
.gh-portal-popup-container.large-size {
width: 600px;
width: 100%;
max-width: 600px;
}
.gh-portal-input {

28
ghost/portal/src/components/Global.styles.js
View file

@ -121,22 +121,27 @@ export const GlobalStyles = `
}
.gh-longform {
padding: 6vmin;
padding: 56px 6vmin 6vmin;
}
.gh-longform p {
color: var(--grey3);
margin-bottom: 1.2em;
}
.gh-longform p:last-of-type {
margin-bottom: 0.2em;
}
.gh-longform h3 {
font-size: 27px;
margin-top: 0;
margin-bottom: 0.4em;
margin-top: 0px;
margin-bottom: 0.25em;
}
.gh-longform h4 {
font-size: 17.5px;
margin-top: 2.5em;
margin-top: 1.85em;
margin-bottom: 0.4em;
}
@ -150,6 +155,10 @@ export const GlobalStyles = `
font-weight: 500;
}
.gh-longform strong {
color: var(--grey1);
}
.gh-longform .ul {
text-decoration: underline;
}
@ -160,6 +169,15 @@ export const GlobalStyles = `
margin-right: -4vmin;
}
.gh-longform .gh-portal-btn-text {
color: var(--brandcolor);
cursor: pointer;
background: none;
transition: color linear 100ms;
font-size: 1.45rem;
text-decoration: underline;
}
@media (max-width: 1440px) {
h1 {
font-size: 32px;
@ -194,7 +212,7 @@ export const GlobalStyles = `
}
.gh-longform {
padding: 10vmin 12vmin 10vmin 10vmin;
padding: 10vmin 28px;
}
.gh-mobile-shortener {

9
ghost/portal/src/components/common/BackButton.js
View file

@ -10,7 +10,7 @@ export const BackButtonStyles = `
min-width: unset;
position: fixed;
top: 29px;
left: 25px;
left: 20px;
background: none;
padding: 8px;
margin: 0;
@ -20,6 +20,13 @@ export const BackButtonStyles = `
z-index: 10000;
}
@media (max-width: 480px) {
.gh-portal-btn-back,
.gh-portal-btn-back:hover {
left: 16px;
}
}
.gh-portal-btn-back:hover {
color: var(--grey1);
transform: translateX(-4px);

2
ghost/portal/src/components/pages/AccountHomePage/components/EmailNewsletterAction.js
View file

@ -18,7 +18,7 @@ function EmailNewsletterAction() {
return (
<section>
<div className='gh-portal-list-detail'>
<div className='gh-portal-list-detail email-newsletter'>
<h3>Email newsletter</h3>
<p>{label} {hasMemberGotEmailSuppression({member}) && subscribed && <button
className='gh-portal-btn-text gh-email-faq-page-button'

8
ghost/portal/src/components/pages/EmailReceivingFAQ.js
View file

@ -30,7 +30,7 @@ export default function EmailReceivingPage() {
<h4>Verify your email address is correct</h4>
<p>The email address we have for you is <strong className="ul">{member.email}</strong> &mdash; if that's not correct, you can update it in your <a onClick={() => onAction('switchPage', {lastPage: 'emailReceivingFAQ', page: 'accountProfile'})}>account settings area</a>.</p>
<p>The email address we have for you is <strong>{member.email}</strong> &mdash; if that's not correct, you can update it in your <button className="gh-portal-btn-text" onClick={() => onAction('switchPage', {lastPage: 'emailReceivingFAQ', page: 'accountProfile'})}>account settings area</button>.</p>
<h4>Check spam & promotions folders</h4>
@ -38,15 +38,15 @@ export default function EmailReceivingPage() {
<h4>Create a new contact</h4>
<p>In your email client add <strong className="ul">{defaultNewsletterSenderEmail}</strong> to your contacts list. This signals to your mail provider that emails sent from this address should be trusted.</p>
<p>In your email client add <strong>{defaultNewsletterSenderEmail}</strong> to your contacts list. This signals to your mail provider that emails sent from this address should be trusted.</p>
<h4>Send an email and say hi!</h4>
<p>Send an email to <strong className="ul">{defaultNewsletterSenderEmail}</strong> and say hello. This can also help signal to your mail provider that emails to-and-from this address should be trusted.</p>
<p>Send an email to <strong>{defaultNewsletterSenderEmail}</strong> and say hello. This can also help signal to your mail provider that emails to-and-from this address should be trusted.</p>
<h4>Check with your mail provider</h4>
<p>If you have a corporate or government email account, reach out to your IT department and ask them to allow emails to be received from <strong className="ul">{defaultNewsletterSenderEmail}</strong></p>
<p>If you have a corporate or government email account, reach out to your IT department and ask them to allow emails to be received from <strong>{defaultNewsletterSenderEmail}</strong></p>
<h4>Get in touch for help</h4>

34
ghost/portal/src/components/pages/EmailSuppressedPage.css
View file

@ -19,15 +19,39 @@
color: var(--grey8);
}
.gh-portal-list-detail.email-newsletter .gh-email-faq-page-button {
display: block;
margin-top: 3px;
}
.accountEmail .gh-email-faq-page-button {
margin-left: 4px;
}
.emailReceivingFAQ .gh-portal-btn-back,
.emailReceivingFAQ .gh-portal-btn-back:hover {
left: calc(6vmin - 14px);
}
.emailReceivingFAQ .gh-portal-closeicon-container {
right: calc(6vmin - 20px);
}
@media (max-width: 480px) {
.emailReceivingFAQ .gh-portal-btn-back,
.emailReceivingFAQ .gh-portal-btn-back:hover {
left: 16px;
}
.emailReceivingFAQ .gh-portal-closeicon-container {
right: 24px;
}
}
.gh-email-faq-page-button {
color: var(--brandcolor);
cursor: pointer;
background: none;
transition: color linear 100ms;
margin-left: 6px;
font-size: 1.45rem;
}
.gh-email-faq-page-button:hover {
color: var(--grey5);
}