fix(website): hotfixes

packages/website/guides/test-with-cannon.mdx

@@ -41,9 +41,9 @@ To install it, run:
 forge install usecannon/cannon-std
 ```
 
-```solidity
-// ./test/Counter.t.sol
+Then create `./test/Counter.t.sol` with the following code:
 
+```solidity
 // SPDX-License-Identifier: UNLICENSED
 pragma solidity ^0.8.13;
 
@@ -53,7 +53,7 @@ import { Test } from "forge-std/Test.sol";
 import { Counter } from "../src/Counter.sol";
 
 contract CounterTest is Test {
-		using Cannon for Vm;
+    using Cannon for Vm;
     Counter public counter;
 
     Counter counter

packages/website/src/features/Deploy/PublishUtility.tsx

@@ -224,10 +224,9 @@ export default function PublishUtility(props: {
 
         {!!existingRegistryUrl && (
           <Alert variant="warning" className="mb-4">
-            <InfoCircledIcon className="h-4 w-4" />
             <AlertDescription>
-              A different package has already been published to {packageDisplay}
-              . Publishing again will overwrite it.
+              A package has already been published to {packageDisplay}.
+              Publishing again will overwrite it.
             </AlertDescription>
           </Alert>
         )}

packages/website/src/features/Deploy/SignTransactionsPage.tsx

@@ -112,7 +112,7 @@ export default function SignTransactionsPage() {
             </p>
           ) : (
             <div
-              className="overflow-y-auto"
+              className="overflow-y-auto max-h-[418px]"
               id="executed-transactions-container"
             >
               <InfiniteScroll

packages/website/src/features/Deploy/TransactionDisplay.tsx

@@ -30,6 +30,12 @@ import {
 } from '@/components/ui/tooltip';
 import { Skeleton } from '@/components/ui/skeleton';
 
+// Add diff styles
+const diffStyles = `
+.diff-gutter-delete, .diff-code-delete { background: #63171b; }
+.diff-gutter-insert, .diff-code-insert { background: #1c4532; }
+`;
+
 const CommitLink = ({ gitUrl, hash }: { gitUrl?: string; hash?: string }) => {
   if (!gitUrl || !hash) return null;
 
@@ -146,6 +152,7 @@ export function TransactionDisplay(props: {
 
   return (
     <div className="max-w-full overflow-x-auto">
+      <style>{diffStyles}</style>
       {/* Code diff */}
       {props.showQueueSource && props.queuedWithGitOps && (
         <Card
@@ -207,7 +214,7 @@ export function TransactionDisplay(props: {
               ) : (
                 <>
                   {prevDeployGitHash == '' && <NoDiffWarning />}
-                  <div>
+                  <div className="dark">
                     {/* Commit hashes */}
                     <div className="flex pb-1">
                       {areDiff && (

packages/website/src/styles/globals.css

@@ -131,3 +131,57 @@
   justify-content: center !important;
   z-index: 2147483646;
 }
+
+/* react-diff-view styles */
+.diff {
+  font-family: var(--diff-font-family);
+  color: var(--diff-text-color);
+  background-color: var(--diff-background-color);
+}
+
+.diff-gutter {
+  padding: 0 1em;
+  cursor: pointer;
+  text-align: right;
+  background-color: var(--diff-background-color);
+}
+
+.diff-code {
+  padding: 0 1em;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+/* Light mode */
+.diff-line.diff-line-add {
+  background-color: rgba(0, 200, 0, 0.1);
+}
+
+.diff-line.diff-line-add .diff-gutter {
+  background-color: rgba(0, 200, 0, 0.15);
+}
+
+.diff-line.diff-line-delete {
+  background-color: rgba(255, 0, 0, 0.1);
+}
+
+.diff-line.diff-line-delete .diff-gutter {
+  background-color: rgba(255, 0, 0, 0.15);
+}
+
+/* Dark mode */
+.dark .diff-line.diff-line-add {
+  background-color: rgba(0, 200, 0, 0.15);
+}
+
+.dark .diff-line.diff-line-add .diff-gutter {
+  background-color: rgba(0, 200, 0, 0.2);
+}
+
+.dark .diff-line.diff-line-delete {
+  background-color: rgba(255, 0, 0, 0.15);
+}
+
+.dark .diff-line.diff-line-delete .diff-gutter {
+  background-color: rgba(255, 0, 0, 0.2);
+}