From 1f3749d39965aecfe95af2abd138999c6cd9cb49 Mon Sep 17 00:00:00 2001
From: Luca Forstner <luca.forstner@sentry.io>
Date: Wed, 21 Aug 2024 11:00:10 +0200
Subject: [PATCH] feat(wizard): Make wizard terminal instructions more cool
 looking

---
 src/sentry/templates/sentry/setup-wizard.html | 51 +++++++++++-------
 static/app/views/setupWizard/index.tsx        |  8 ++-
 static/less/layout.less                       | 53 +++++++++++++++++++
 3 files changed, 92 insertions(+), 20 deletions(-)

diff --git a/src/sentry/templates/sentry/setup-wizard.html b/src/sentry/templates/sentry/setup-wizard.html
index e83962c62e8ff..603bb1e0403c6 100644
--- a/src/sentry/templates/sentry/setup-wizard.html
+++ b/src/sentry/templates/sentry/setup-wizard.html
@@ -1,4 +1,4 @@
-{% extends "sentry/bases/auth.html" %}
+{% extends "sentry/layout.html" %}
 
 {% load crispy_forms_tags %}
 {% load i18n %}
@@ -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 %}
diff --git a/static/app/views/setupWizard/index.tsx b/static/app/views/setupWizard/index.tsx
index 9d2691e22f609..d9f5422770fe1 100644
--- a/static/app/views/setupWizard/index.tsx
+++ b/static/app/views/setupWizard/index.tsx
@@ -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>
@@ -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;
diff --git a/static/less/layout.less b/static/less/layout.less
index e8b0a44b8ad8d..15a5c6a0254b4 100644
--- a/static/less/layout.less
+++ b/static/less/layout.less
@@ -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;
+}