Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(wizard/hackweek): Make wizard terminal instructions more cool looking #76451

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat(wizard/hackweek): Make wizard terminal instructions more cool looking #76451

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 33 additions & 18 deletions src/sentry/templates/sentry/setup-wizard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{% extends "sentry/bases/auth.html" %}
{% extends "sentry/layout.html" %}

{% load crispy_forms_tags %}
{% load i18n %}
Expand All @@ -7,26 +7,41 @@

{% block title %}{% trans "Sentry - Setup Wizard" %}{% endblock %}

{% block auth_main %}
<div id="setup-wizard-container">
<div class="loading">
<div class="loading-mask"></div>
<div class="loading-indicator" data-test-id="loading-indicator"></div>
{% block content %}
<div class="gradient-bg"></div>


<div class="wizard-page">
<div class="wizard-logo-container">
<a href="https://sentry.io/welcome/">
<span class="icon-sentry-logo-full"></span>
</a>
</div>
<div class="sunset-outline">
<div class="wizard-box">
<div id="setup-wizard-container">
<div class="loading">
<div class="loading-mask"></div>
<div class="loading-indicator" data-test-id="loading-indicator"></div>
</div>
</div>
<p class="wizard-help-text">Need help with your account? Click <a class="help-center-link" href="https://sentry.zendesk.com/hc/en-us">here</a> to check out our help center.</p>
</div>
</div>
</div>

{% script %}
<script>
window.__onSentryInit = window.__onSentryInit || [];
window.__onSentryInit.push({
name: 'renderReact',
component: 'SetupWizard',
container: '#setup-wizard-container',
props: {
hash: {{ hash|to_json|safe }},
organizations: {{ organizations|to_json|safe }},
},
});
</script>
<script>
window.__onSentryInit = window.__onSentryInit || [];
window.__onSentryInit.push({
name: 'renderReact',
component: 'SetupWizard',
container: '#setup-wizard-container',
props: {
hash: {{ hash|to_json|safe }},
organizations: {{ organizations|to_json|safe }},
},
});
</script>
{% endscript %}
{% endblock %}
8 changes: 6 additions & 2 deletions static/app/views/setupWizard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ function SetupWizard({hash = false, organizations}: Props) {
</LoadingIndicator>
) : (
<SuccessWrapper>
<SuccessCheckmark color="green300" size="xl" isCircled />
<SuccessCheckmark size="xl" isCircled />
<SuccessHeading>
{t('Return to your terminal to complete your setup.')}
</SuccessHeading>
Expand All @@ -94,16 +94,20 @@ function SetupWizard({hash = false, organizations}: Props) {

const SuccessCheckmark = styled(IconCheckmark)`
flex-shrink: 0;
color: #52cb8a;
`;

const SuccessHeading = styled('h5')`
margin: 0;
text-align: center;
`;

const SuccessWrapper = styled('div')`
display: flex;
align-items: center;
gap: ${space(3)};
gap: ${space(2)};
margin: 16px 0;
padding-right: 16px;
`;

export default SetupWizard;
53 changes: 53 additions & 0 deletions static/less/layout.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -521,3 +521,56 @@ body.auth {
}
}
}

// Wizard crap

.gradient-bg {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background-image: linear-gradient(180deg, #201633 0%, #7c498a 100%);
}

.wizard-page {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
margin-top: 32px;
}

.wizard-logo-container {
text-align: center;
width: min-content;
}

.wizard-logo-container a {
color: white;
font-size: 46px;
width: min-content;
text-align: center;
}

.wizard-box {
position: relative;
background-color: white;
border-radius: 7px;
padding: 16px 40px;
border: 2px solid #201633;
}

.sunset-outline {
border-radius: 11px;
background: linear-gradient(45deg, #6a5fc1 0%, #ff5980 48.96%, #f1b71c 100%);
padding: 4px;
box-shadow:
0 20px 25px -5px rgb(0 0 0 / 0.1),
0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.wizard-help-text {
text-align: center;
}
Loading