Add "start using hypofuzz" link to demo dashboard

docs/assets/styles.css

@@ -302,7 +302,6 @@ html {
 }
 
 .button--cta {
-    font-weight: 500;
     background-color: hsl(var(--primary-h), var(--primary-s), 50%);
 }
 
@@ -648,6 +647,7 @@ html {
     border: 1px solid var(--secondary);
     border-radius: 8px;
     padding: 1rem;
+    margin-bottom: -1rem;
     max-width: 800px;
     text-align: center;
     line-height: 1.4;

docs/pricing/index.html

@@ -99,10 +99,12 @@
                         <p>
                             <em>Unlimited use for the whole team.</em>
                         </p>
-                        <div class="pricing-important-notice" style="margin-bottom: 1rem;">
-                            While we work on getting the HypoFuzz paperwork together, we'd love to hand out exploratory licenses to interested companies, <strong>at no cost</strong>. Get in touch!
+                        <div class="pricing-important-notice">
+                            <div style="padding-bottom: 1rem;">
+                                While we work on getting the HypoFuzz paperwork together, we'd love to hand out exploratory licenses to interested companies, <strong>at no cost</strong>. Get in touch!
+                            </div>
+                            <a href="mailto:sales@hypofuzz.com?subject=Exploratory%20HypoFuzz%20licence" class="button button--cta pricing-card__button">Get in touch</a>
                         </div>
-                        <a href="mailto:sales@hypofuzz.com?subject=Per-seat%20HypoFuzz%20licence" class="button button--cta pricing-card__button">Get in touch</a>
                     </div>
                 </div>
             </div>

src/hypofuzz/docs/manual/cli.rst

@@ -14,6 +14,6 @@ Example usage
 
 * ``hypothesis fuzz`` starts the dashboard and fuzz workers, using all available cores.
 * ``hypothesis fuzz -n 2`` starts the dashboard and fuzz workers, using 2 cores.
-* ``hypothesis fuzz --dashboard-only`` starts just the dashboard. The dashboard works even if no fuzz workers are running.
-* ``hypothesis fuzz --no-dashboard -n 4`` starts just the fuzz workers, using 4 cores.
+* ``hypothesis fuzz --dashboard-only`` starts only the dashboard. The dashboard works even if no fuzz workers are running.
+* ``hypothesis fuzz --no-dashboard -n 4`` starts only the fuzz workers, using 4 cores.
 * ``hypothesis fuzz -- -k parse`` starts the dashboard and fuzz workers only for test names with the string ``parse`` in them.

src/hypofuzz/docs/quickstart.rst

@@ -22,16 +22,14 @@ Running HypoFuzz
 
 The main entrypoint to HypoFuzz is ``hypothesis fuzz``. Installing HypoFuzz automatically adds this ``fuzz`` sub-command to the existing :ref:`Hypothesis CLI <hypothesis:hypothesis-cli>`.
 
-The no-argument command ``hypothesis fuzz`` does two things:
+Running ``hypothesis fuzz`` does two things:
 
-* Starts a local dashboard webserver, and
-* Executes your Hypothesis tests using all available cores
+* Starts a local dashboard webserver.
+* Discovers and executes your Hypothesis tests with all available cores.
 
-These behaviors can be isolated with the ``--dashboard-only`` and ``--no-dashboard`` commands respectively. The number of cores used can be controlled with ``-n/--num-processes``.
+These behaviors can be isolated with the ``--dashboard-only`` and ``--no-dashboard`` commands, respectively. The number of cores used can be controlled with ``-n/--num-processes``.
 
-HypoFuzz uses :pypi:`pytest` to collect available tests. ``hypothesis fuzz`` should therefore be run in a directory where pytest can discover your tests.
-
-Any arguments after ``hypothesis fuzz --`` are passed through to pytest. See :doc:`/manual/collection` for how to use this to control which tests are collected.
+HypoFuzz uses :pypi:`pytest` to collect Hypothesis tests. ``hypothesis fuzz`` should therefore be run in a directory where pytest can discover your tests. To control how HypoFuzz collects tests, see :doc:`/manual/collection`.
 
 .. seealso::
 

src/hypofuzz/frontend/src/Layout.tsx

@@ -5,6 +5,7 @@ import {
   faBox,
   faCode,
   faCodeCompare,
+  faExternalLink,
   faUser,
 } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
@@ -115,6 +116,19 @@ export function Layout() {
               Docs
             </div>
           </a>
+          {import.meta.env.VITE_USE_DASHBOARD_STATE === "1" && (
+            <>
+              <div className="sidebar__separator"></div>
+              <a href={"http://hypofuzz.com/pricing"} className="sidebar__link__text">
+                <div className={`sidebar__link sidebar__link--cta`}>
+                  <span className="sidebar__link__icon">
+                    <FontAwesomeIcon icon={faExternalLink} />
+                  </span>
+                  Start using HypoFuzz
+                </div>
+              </a>
+            </>
+          )}
         </nav>
       </div>
       <div className="content">

src/hypofuzz/frontend/src/styles/styles.scss

@@ -358,12 +358,20 @@ $mobile-breakpoint: 768px;
         &--active {
             background: rgba(255, 255, 255, 0.2);
         }
+
+        &--cta {
+            background: hsl($primary-h, $primary-s, 45%);
+
+            &:hover {
+                background: hsl($primary-h, $primary-s, 40%);
+            }
+        }
     }
 
     &__separator {
         border-top: 1px solid #dee2e6;
-        margin-top: 1rem;
-        margin-bottom: 1rem;
+        margin-top: 0.8rem;
+        margin-bottom: 0.8rem;
     }
 }
 

src/hypofuzz/frontend/src/styles/theme.scss

@@ -2,7 +2,6 @@ $primary-h: 205;
 $primary-s: 75%;
 $primary-l: 30%;
 $color-primary: hsl($primary-h, $primary-s, $primary-l);
-
 $color-primary-hover: hsl($primary-h, $primary-s, 40%);
 
 $secondary-h: 24;