diff --git a/app/components/crate-sidebar.hbs b/app/components/crate-sidebar.hbs
index 825722a4721..cc8da22a281 100644
--- a/app/components/crate-sidebar.hbs
+++ b/app/components/crate-sidebar.hbs
@@ -106,8 +106,8 @@
{{/if}}
{{/unless}}
- {{#if this.playgroundLink}}
-
\ No newline at end of file
diff --git a/app/components/crate-sidebar.module.css b/app/components/crate-sidebar.module.css
index c95382d5288..0ca5c3ad98f 100644
--- a/app/components/crate-sidebar.module.css
+++ b/app/components/crate-sidebar.module.css
@@ -67,12 +67,22 @@
line-height: 1.5;
}
-.playground-button {
- composes: yellow-button small from '../styles/shared/buttons.module.css';
+.button {
justify-content: center;
width: 220px;
}
+.report-button {
+ composes: button;
+ composes: red-button small from '../styles/shared/buttons.module.css';
+}
+
+.playground-button {
+ composes: button;
+ composes: yellow-button small from '../styles/shared/buttons.module.css';
+ margin-bottom: var(--space-2xs);
+}
+
.playground-help {
composes: small from '../styles/shared/typography.module.css';
max-width: 220px;
diff --git a/app/styles/shared/buttons.module.css b/app/styles/shared/buttons.module.css
index 536eb92d7a0..0c4825722e1 100644
--- a/app/styles/shared/buttons.module.css
+++ b/app/styles/shared/buttons.module.css
@@ -71,6 +71,19 @@
--bg-color-bottom-dark: #cfc487;
}
+.red-button {
+ composes: button;
+
+ --bg-color-top: #ffb8b8;
+ --bg-color-bottom: #f78888;
+
+ --bg-color-top-light: #ffcccc;
+ --bg-color-bottom-light: #f7adad;
+
+ --bg-color-top-dark: #fab4b4;
+ --bg-color-bottom-dark: #ed6b6b;
+}
+
.small {
padding: var(--space-2xs) var(--space-s);
}