From 166d700b044c1ec6099872d2088c413fe94981cc Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 23 Feb 2024 23:36:20 +0100
Subject: [PATCH] ErrorCard refactor

---
 .../src/app/components/CompileErrorCard.tsx   | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/apps/vyper/src/app/components/CompileErrorCard.tsx b/apps/vyper/src/app/components/CompileErrorCard.tsx
index 4c8d1128b8..08ba821a1b 100644
--- a/apps/vyper/src/app/components/CompileErrorCard.tsx
+++ b/apps/vyper/src/app/components/CompileErrorCard.tsx
@@ -1,12 +1,19 @@
+import {CopyToClipboard} from '@remix-ui/clipboard'
 import Reaact from 'react'
 
 export function CompileErrorCard(props: any) {
   return (
-    <div id="vyperErrorResult" className="px-2 mx-3 alert alert-danger error" title={props.output.message}>
-      <i className="fas fa-exclamation-circle text-danger"></i>
+    <div
+      id="vyperErrorResult"
+      className=" d-flex flex-column p-2 alert alert-danger error vyper-compile-error"
+      title={props.output?.title}
+      style={{
+        width: '94%'
+      }}
+    >
       <span
         data-id="error-message"
-        className="text-center"
+        className="text-left"
         style={{
           overflowX: 'hidden',
           textOverflow: 'ellipsis',
@@ -14,6 +21,16 @@ export function CompileErrorCard(props: any) {
       >
         {props.output.message.trim()}
       </span>
+      <div className="d-flex flex-column pt-3 align-items-end mb-2">
+        <div>
+          <span className="border border-success text-success btn-sm" onClick={() => props.askGpt(props.output.message)}>
+            Ask GPT
+          </span>
+          <span className="ml-3 pt-1 py-1">
+            <CopyToClipboard content={props.output.message} className={`p-0 m-0 far fa-copy alert alert-danger`} direction={'top'} />
+          </span>
+        </div>
+      </div>
     </div>
   )
 }