settings/tokens/new: Add help button to "Scopes" section (#6431)

Author: Turbo87

app/styles/settings/tokens/new.module.css

@@ -4,11 +4,32 @@
 }
 
 .form-group-name {
-    display: block;
+    display: flex;
+    gap: var(--space-2xs);
     margin-bottom: var(--space-2xs);
     font-weight: 600;
 }
 
+.help-link {
+    flex-shrink: 0;
+    color: var(--grey600);
+    padding: var(--space-3xs);
+    margin: calc(-1 * var(--space-3xs));
+
+    &:hover {
+        color: var(--grey700);
+    }
+
+    svg {
+        width: 1em;
+        height: 1em;
+    }
+}
+
+.hidden-label {
+    composes: sr-only from '../../shared/a11y.module.css';
+}
+
 .form-group-error {
     display: block;
     color: red;

app/templates/settings/tokens/new.hbs

@@ -27,7 +27,19 @@
   </div>
 
   <div local-class="form-group" data-test-scopes-group>
-    <div local-class="form-group-name">Scopes</div>
+    <div local-class="form-group-name">
+      Scopes
+
+      <a
+        href="https://rust-lang.github.io/rfcs/2947-crates-io-token-scopes.html"
+        target="_blank"
+        rel="noopener noreferrer"
+        local-class="help-link"
+      >
+        <span local-class="hidden-label">Help</span>
+        {{svg-jar "circle-question"}}
+      </a>
+    </div>
 
     <ul role="list" local-class="scopes-list {{if this.scopesInvalid "invalid"}}">
       {{#each this.ENDPOINT_SCOPES as |scope|}}