From 9302f3ca7dd7ba0a017f4ceb0db20f04e0b350b7 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 23 Aug 2024 10:32:12 +0200
Subject: [PATCH 1/2] styles: Add `red-button` class

---
 app/styles/shared/buttons.module.css | 13 +++++++++++++
 1 file changed, 13 insertions(+)

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);
 }

From 003ee200eafb0149c85050dc285659f4dc984a63 Mon Sep 17 00:00:00 2001
From: Tobias Bieniek <tobias@bieniek.cloud>
Date: Fri, 23 Aug 2024 10:39:28 +0200
Subject: [PATCH 2/2] CrateSidebar: Add a "Report crate" button

This button is a `mailto:help@crates.io` link with a prefilled subject and body, that should make it easier for users to report crates which are violating our usage policies or are otherwise worth reporting to us.
---
 app/components/crate-sidebar.hbs        | 15 +++++++++++----
 app/components/crate-sidebar.module.css | 14 ++++++++++++--
 2 files changed, 23 insertions(+), 6 deletions(-)

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}}
-    <div>
+  <div>
+    {{#if this.playgroundLink}}
       <a
         href={{this.playgroundLink}}
         target="_blank"
@@ -128,6 +128,13 @@
           try out directly in your browser.
         </p>
       {{/unless}}
-    </div>
-  {{/if}}
+    {{/if}}
+
+    <a
+      href="mailto:help@crates.io?subject=The%20%22{{@crate.name}}%22%20crate&body=I'm%20reporting%20the%20%22{{@crate.name}}%22%20crate%20because%3A%0A%0A-%20%5B%20%5D%20it%20contains%20spam%0A-%20%5B%20%5D%20it%20is%20name-squatting%20(reserving%20a%20crate%20name%20without%20content)%0A-%20%5B%20%5D%20it%20is%20abusive%20or%20otherwise%20harmful%0A-%20%5B%20%5D%20it%20contains%20a%20vulnerability%20(please%20try%20to%20contact%20the%20crate%20author%20first)%0A-%20%5B%20%5D%20it%20is%20violating%20the%20usage%20policy%20in%20some%20other%20way%20(please%20specify%20below)%0A%0AAdditional%20details%3A%0A%0A%3Cplease%20add%20more%20information%20if%20you%20can%3E"
+      local-class="report-button"
+    >
+      Report crate
+    </a>
+  </div>
 </section>
\ 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;