0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00

Updated SSO configuration settings styles in Labs

This commit is contained in:
Sanne de Vries 2021-04-26 21:27:35 +02:00
parent c105dff604
commit 63db462fbc
4 changed files with 52 additions and 24 deletions

View file

@ -1228,7 +1228,7 @@
/* Grey background modifiers */
.gh-main-section-content.grey .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red),
.gh-expandable-content .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red) {
.gh-expandable-content .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):not(.gh-btn-black) {
background: var(--whitegrey-d2);
}

View file

@ -231,9 +231,14 @@
margin-bottom: 0;
}
.gh-setting-content-extended p {
color: var(--midgrey);
font-size: 1.3rem;
}
.gh-setting-content-extended label {
display: block;
font-size: 1.25rem;
font-size: 1.3rem;
font-weight: 600;
color: var(--darkgrey);
margin-bottom: 4px;
@ -250,6 +255,18 @@
border: 1px solid var(--whitegrey-d2);
}
.gh-setting-content-extended .gh-btn span {
height: 36px;
line-height: 36px;
}
.gh-setting-content-extended svg {
position: relative;
bottom: 1px;
width: 18px;
margin-right: 8px;
}
.gh-setting-liquid-section .liquid-container,
.gh-setting-liquid-section .liquid-child {
padding: 0 20px;

View file

@ -205,15 +205,17 @@
</div>
<div class="gh-expandable-content">
{{#if this.isOAuthEnabled}}
<div class="gh-setting-content-extended pt4 pb4">
<span>
To get started, you first have to set up Ghost to allow login and registration with Google OAuth2. Read our
<div class="gh-setting-content-extended pt2 pb4">
<a href="https://console.developers.google.com/" target="_blank" rel="noopener" class="gh-btn gh-btn-white"><span>{{svg-jar "google-favicon"}}Configure Ghost in Google</span></a>
<p>
Read our
{{!-- TODO: create an help desk article and update the url here --}}
<a href="#" target="_blank" rel="noopener">setup guide here</a>
</span>
<div><a href="https://console.developers.google.com/" target="_blank">Configure Ghost in Google</a></div>
<a href="#" target="_blank" rel="noopener">setup guide </a>
to help you get started
</p>
<GhFormGroup @class="no-margin pt2" @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="password">
<label for="aouth-client-id">Google OAuth client id</label>
<div class="form-group">
<label for="aouth-client-id">Google OAuth Client ID</label>
<GhTextInput
id="oauth-client-id"
@value={{readonly this.settings.oauthClientId}}
@ -221,8 +223,10 @@
@focus-out={{action "saveOAuthSettings"}}
@input={{action (mut this.settings.oauthClientId) value="target.value"}}
/>
</div>
<label for="oauth-client-secret">Google OAuth client secret</label>
<div class="form-group">
<label for="oauth-client-secret">Google OAuth Client Secret</label>
<GhTextInput
id="oauth-client-secret"
@value={{readonly this.settings.oauthClientSecret}}
@ -230,6 +234,7 @@
@focus-out={{action "saveOAuthSettings"}}
@input={{action (mut this.settings.oauthClientSecret) value="target.value"}}
/>
</div>
</GhFormGroup>
</div>
{{/if}}

View file

@ -0,0 +1,6 @@
<svg viewBox="0 0 533.5 544.3" xmlns="http://www.w3.org/2000/svg">
<path d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z" fill="#4285f4"/>
<path d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z" fill="#34a853"/>
<path d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z" fill="#fbbc04"/>
<path d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z" fill="#ea4335"/>
</svg>

After

Width:  |  Height:  |  Size: 702 B