refactor: error page sends email

apps/client/src/common/components/error-boundary/ErrorBoundary.jsx

@@ -49,15 +49,14 @@ class ErrorBoundary extends React.Component {
       return (
         <div className={style.errorContainer} data-testid='error-container'>
           <div>
-            <p className={style.error}>:/</p>
+            <p className={style.error}>: /</p>
-            <p>Something went wrong</p>
+            <p>Something went wrong.</p>
-            <div
+            <a
-              role='button'
               className={style.report}
-              onClick={() => Sentry.showReportDialog({ eventId: this.state.eventId })}
+              href={`mailto:mail@getontime.no?subject=Error%20Report&body=${encodeURIComponent(this.reportContent)}`}
             >
               Report error
-            </div>
+            </a>
             <div
               role='button'
               className={style.report}

apps/client/src/common/components/error-boundary/ErrorBoundary.module.scss

@@ -3,24 +3,21 @@
   height: 100%;
   display: grid;
   place-content: center;
-  background-color: #121212;
+  background-color: $ui-black;
-  color: white;
+  color: $ui-white;
+}
 
-  .error {
+.error {
-    color: $error-red;
+  color: $error-red;
-    font-weight: 600;
+}
-  }
 
-  .report {
+.report {
-    text-decoration: underline  $error-red;
+  color: $blue-500;
-    cursor: pointer;
+  text-decoration: underline;
-  }
+  text-underline-offset: 2px;
+  cursor: pointer;
 
-  .report:hover {
+  &:hover {
-    color: $error-red;
+    color: $ontime-color;
-  }
-
-  .report:active {
-    color: white;
   }
 }

apps/client/src/common/components/link/app-link/AppLink.tsx

@@ -11,8 +11,7 @@ interface AppLinkProps {
  * Component used to navigate to an editor link inside the same window
  * Handles the path to respect Ontime Clouds base URL
  */
-export default function AppLink(props: PropsWithChildren<AppLinkProps>) {
+export default function AppLink({ search, children }: PropsWithChildren<AppLinkProps>) {
-  const { search, children } = props;
   const navigate = useNavigate();
 
   const handleClick = () => navigate({ search });

apps/client/src/common/components/link/external-link/ExternalLink.tsx

@@ -12,9 +12,7 @@ interface ExternalLinkProps {
   inline?: boolean;
 }
 
-export default function ExternalLink(props: ExternalLinkProps) {
+export default function ExternalLink({ href, inline, children }: ExternalLinkProps) {
-  const { href, inline, children } = props;
-
   const handleClick = (event: MouseEvent) => {
     event.preventDefault();
     openLink(href);