Fix some style regressions in patch view

Signed-off-by: Sebastian Martinez <me@sebastinez.dev>

src/components/ErrorMessage.svelte

@@ -7,14 +7,14 @@
 
 <style>
   .error {
-    padding: 1rem;
-    font-size: var(--font-size-regular);
-    font-family: var(--font-family-sans-serif);
-    color: var(--color-negative);
-    border-radius: var(--border-radius);
-    background-color: var(--color-negative-3);
-    display: flex;
     align-items: center;
+    background-color: var(--color-negative-3);
+    border-radius: inherit;
+    color: var(--color-negative);
+    display: flex;
+    font-family: var(--font-family-sans-serif);
+    font-size: inherit;
+    padding: 1rem;
     width: 100%;
   }
   .stack-trace {

src/views/projects/Cob/Revision.svelte

@@ -82,6 +82,7 @@
 <style>
   .action {
     border-radius: var(--border-radius-small);
+    min-height: 3rem;
   }
   .merge {
     background-color: var(--color-primary-3);
@@ -91,10 +92,16 @@
     color: var(--color-positive-6);
     background-color: var(--color-positive-3);
   }
+  .comment-review {
+    background-color: var(--color-foreground-1);
+  }
   .negative-review {
     color: var(--color-negative-6);
     background-color: var(--color-negative-3);
   }
+  .diff-error {
+    margin: 1rem 1.5rem;
+  }
   .revision {
     display: flex;
     flex-direction: column;
@@ -315,14 +322,16 @@
             </div>
           {/if}
         </div>
-        {#if error}
-          <div class="txt-monospace">
-            <ErrorMessage
-              message="Failed to load diff for this revision."
-              stackTrace={error.stack.toString()} />
-          </div>
-        {/if}
       </div>
+      {#if error}
+        <div
+          class="diff-error txt-monospace txt-small"
+          style:border-radius="var(--border-radius-small">
+          <ErrorMessage
+            message="Failed to load diff for this revision."
+            stackTrace={error.stack.toString()} />
+        </div>
+      {/if}
     {/if}
   </div>
   {#if expanded}
@@ -361,6 +370,7 @@
             {#if review.comment}
               <div
                 class="action"
+                class:comment-review={review.verdict === null}
                 class:positive-review={review.verdict === "accept"}
                 class:negative-review={review.verdict === "reject"}>
                 <CommentComponent
@@ -378,7 +388,8 @@
               </div>
             {:else}
               <div
-                class="action layout-desktop txt-tiny"
+                class="action layout-desktop-flex txt-tiny"
+                class:comment-review={review.verdict === null}
                 class:positive-review={review.verdict === "accept"}
                 class:negative-review={review.verdict === "reject"}>
                 <Authorship
@@ -390,7 +401,8 @@
                 </Authorship>
               </div>
               <div
-                class="action layout-mobile txt-tiny"
+                class="action layout-mobile-flex txt-tiny"
+                class:comment-review={review.verdict === null}
                 class:positive-review={review.verdict === "accept"}
                 class:negative-review={review.verdict === "reject"}>
                 <Authorship

tests/support/fixtures.ts

@@ -533,9 +533,10 @@ export async function createCobsFixture(peer: RadiclePeer) {
     [],
     { cwd: projectFolder },
   );
+  await peer.rad(["review", patchFour], createOptions(projectFolder, 1));
   await peer.rad(
     ["patch", "archive", patchFour],
-    createOptions(projectFolder, 1),
+    createOptions(projectFolder, 2),
   );
 
   const patchFive = await patch.create(

tests/visual/cob.spec.ts

@@ -97,3 +97,13 @@ test("patch page", async ({ page }) => {
   );
   await expect(page).toHaveScreenshot({ fullPage: true });
 });
+
+test("failed diff loading for a specific revision", async ({ page }) => {
+  await page.route(
+    "**/api/v1/projects/rad:z3fpY7nttPPa6MBnAv2DccHzQJnqe/diff/38c225e2a0b47ba59def211f4e4825c31d9463ec/9898da6155467adad511f63bf0fb5aa4156b92ef",
+    route => route.fulfill({ status: 500 }),
+  );
+
+  await page.goto(`${cobUrl}/patches/0f3697fed2743549e3bf531e9fa81284a6de1466`);
+  await expect(page).toHaveScreenshot({ fullPage: true });
+});