From 7cf7402cea76b0e6b299ab77b6a5df373cf24de8 Mon Sep 17 00:00:00 2001
From: Sophie L <beartechtalks@gmail.com>
Date: Mon, 8 Aug 2022 16:06:21 +0100
Subject: [PATCH] fix: styling fixes (#721)

---
 .../settings/roles/PermissionSelect.tsx       |  1 -
 src/lib/ErrorBoundary.tsx                     | 35 ++++++++++++++-----
 src/pages/developer/Developer.tsx             |  2 +-
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/components/settings/roles/PermissionSelect.tsx b/src/components/settings/roles/PermissionSelect.tsx
index 0afc8c08..7de9ac23 100644
--- a/src/components/settings/roles/PermissionSelect.tsx
+++ b/src/components/settings/roles/PermissionSelect.tsx
@@ -24,7 +24,6 @@ const PermissionEntry = styled.label<{ disabled?: boolean }>`
     width: 100%;
     margin: 8px 0;
     display: flex;
-    font-size: 1.1em;
     align-items: center;
 
     .title {
diff --git a/src/lib/ErrorBoundary.tsx b/src/lib/ErrorBoundary.tsx
index f755b788..4f430517 100644
--- a/src/lib/ErrorBoundary.tsx
+++ b/src/lib/ErrorBoundary.tsx
@@ -5,19 +5,33 @@ import styled from "styled-components/macro";
 
 import { useEffect, useErrorBoundary, useState } from "preact/hooks";
 
+import { Button } from "@revoltchat/ui";
+
 import { GIT_REVISION } from "../revision";
 
 const CrashContainer = styled.div`
+    // defined for the Button component
+    --error: #ed4245;
+    --primary-background: #2d2d2d;
+
     height: 100%;
     padding: 12px;
 
-    background: black;
+    background: #191919;
     color: white;
 
     h3 {
         margin: 0;
         margin-bottom: 12px;
     }
+
+    code {
+        font-size: 1.1em;
+    }
+
+    .buttonDivider {
+        margin: 8px;
+    }
 `;
 
 interface Props {
@@ -65,15 +79,17 @@ export default function ErrorBoundary({ children, section }: Props) {
                 {section === "client" ? (
                     <>
                         <h3>Client Crash Report</h3>
-                        <button onClick={ignoreError}>
+                        <Button onClick={ignoreError}>
                             Ignore error and try to reload app
-                        </button>
-                        <button onClick={reset}>
-                            {confirm ? "Are you sure?" : "Reset all app data"}
-                        </button>
-                        <button onClick={() => location.reload()}>
+                        </Button>
+                        <div class="buttonDivider" />
+                        <Button onClick={() => location.reload()}>
                             Refresh page
-                        </button>
+                        </Button>
+                        <div class="buttonDivider" />
+                        <Button palette="error" onClick={reset}>
+                            {confirm ? "Are you sure?" : "Reset all app data"}
+                        </Button>
                     </>
                 ) : (
                     <>
@@ -83,6 +99,9 @@ export default function ErrorBoundary({ children, section }: Props) {
                         </button>
                     </>
                 )}
+                <br />
+                <br />
+                <div>Revolt has crashed. Here's the error:</div>
                 <pre>
                     <code>{error?.stack}</code>
                 </pre>
diff --git a/src/pages/developer/Developer.tsx b/src/pages/developer/Developer.tsx
index aeeff64e..3c6009db 100644
--- a/src/pages/developer/Developer.tsx
+++ b/src/pages/developer/Developer.tsx
@@ -45,7 +45,7 @@ export default function Developer() {
             </div>
 
             <div style={{ padding: "16px" }}>
-                <a onClick={() => setCrash(true)}>click to crash app</a>
+                <a style={"cursor: pointer;"} onClick={() => setCrash(true)}>click to crash app</a>
                 {crash && (window as any).sus.sus()}
                 {/*<span>
                     <b>Voice Status:</b> {VoiceStatus[voice.status]}