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

Added onboarding checklist success state button

Browse source 
ref https://linear.app/tryghost/issue/IPC-91/add-success-state-design
This commit is contained in:
Djordje Vlaisavljevic 2024-03-27 14:07:00 +00:00
parent 7dcddb2e75
commit 71a1d825e3
2 changed files with 32 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ghost/admin/app/components/dashboard/onboarding-checklist.hbs
View file

@ -1,6 +1,6 @@
<div class="gh-onboarding-wrapper">
<div class="gh-onboarding-header">
<video width="100" height="100" loop autoplay muted playsinline preload="metadata" style="width: 100px; height: 100px; margin-bottom: 24px;">
<video width="80" height="80" loop autoplay muted playsinline preload="metadata" style="width: 80px; height: 80px; margin-bottom: 24px;">
<source src="assets/videos/logo-loader.mp4" type="video/mp4" />
</video>
<h2 class="gh-canvas-title">{{this.siteUrl}} is ready to go!</h2>
@ -76,6 +76,8 @@
</div>
</div>
<a href="#" class="gh-onboarding-explore-dashboard">Explore your dashboard</a>
<p class="gh-onboarding-help">Need some more help? Check out our <a href="https://ghost.org/help?utm_source=admin&utm_campaign=onboarding" target="_blank" rel="noopener noreferrer">Help center</a></p>
<a href="#" class="gh-onboarding-skip">Skip onboarding</a>

44
ghost/admin/app/styles/layouts/dashboard.css
View file

@ -2791,7 +2791,7 @@ Onboarding checklist */
border-radius: 6px;
padding: 16px 24px;
/* box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.04); */
border: 1px solid #ebeef0;
border: 1px solid var(--whitegrey);
/* box-shadow: -7px -6px 42px 8px rgba(75,225,226,.28),7px 6px 42px 8px rgba(202,103,255,.32); */
}
@ -2800,7 +2800,7 @@ Onboarding checklist */
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ebeef0;
border-bottom: 1px solid var(--whitegrey);
}
.gh-onboarding-item:first-child {
@ -2818,7 +2818,7 @@ Onboarding checklist */
.gh-onboarding-item--next {
margin: 0px -32px 6px;
background: white;
background: var(--white);
padding: 24px 32px;
box-shadow: 0px 1px 0px rgba(17,17,26,0.05), 0px 0px 8px rgba(17,17,26,0.1);
border-radius: 6px;
@ -2855,7 +2855,7 @@ Onboarding checklist */
font-size: 1.6rem;
line-height: 1;
letter-spacing: 0;
color: #394047;
color: var(--darkgrey);
padding: 0 32px 0 0;
text-decoration: none;
text-overflow: ellipsis;
@ -2894,7 +2894,7 @@ Onboarding checklist */
}
.gh-onboarding-item-content svg path {
stroke: #ae5aef;
stroke: var(--purple);
stroke-width: 1.5 !important;
}
@ -2913,7 +2913,7 @@ Onboarding checklist */
}
.gh-onboarding-item-action svg path {
fill: #ae5aef;
fill: var(--purple);
}
.gh-onboarding-item-checkmark {
@ -2936,25 +2936,39 @@ Onboarding checklist */
font-size: 1.5rem;
}
.gh-onboarding-help a {
color: var(--midgrey);
text-decoration: underline;
}
.gh-onboarding-skip {
display: flex;
align-items: center;
position: absolute;
bottom: 32px;
padding: 1px 14px;
border: 1px solid #e6e9eb;
border: 1px solid var(--whitegrey);
color: var(--middarkgrey);
border-radius: 3px;
transition: all .2s ease;
border-radius: 4px;
white-space: nowrap;
height: 38px;
overflow: hidden;
transition: all .1s linear;
transition: opacity .1s linear;
}
.gh-onboarding-explore-dashboard {
display: flex;
padding: 12px 12px;
align-items: center;
justify-content: center;
background: var(--black);
color: var(--white);
border-radius: 4px;
font-size: 1.6rem;
font-weight: 600;
margin-top: 24px;
max-width: 540px;
width: 100%;
transition: opacity .3s ease-in-out;
}
.gh-onboarding-explore-dashboard:hover {
opacity: 0.9;
}
/* ---------------------------------