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}} -
+
+ {{#if this.playgroundLink}} {{/unless}} -
- {{/if}} + {{/if}} + + + Report crate + +
\ 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); }