feat: better error modal

ubiquity · Nov 26, 2024 · 5f48675 · 5f48675
1 parent 5b93446
commit 5f48675
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 13 deletions.
diff --git a/static/index.html b/static/index.html
@@ -23,12 +23,12 @@
     <div id="modal" class="error-modal">
       <div class="error-modal-content">
         <div class="error-modal-header">
+          <h1 class="error-title">Oops, we have an error</h1>
           <button class="close-modal">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#999">
               <path d="m336-280-56-56 144-144-144-143 56-56 144 144 143-144 56 56-144 143 144 144-56 56-143-144-144 144Z"></path>
             </svg>
           </button>
-          <h1 class="error-title">Error</h1>
         </div>
         <div class="error-modal-body">
           <div id="error-message" class="error-message"></div>

diff --git a/static/style.css b/static/style.css
@@ -70,17 +70,19 @@ header {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.6);
   justify-content: center;
   align-items: center;
   z-index: 1000;
 }
 
 .error-modal-content {
-  background-color: white;
+  border: 1px solid #f22207;
+  background-color: #111010;
   padding: 20px;
+  padding-left: 30px;
   border-radius: 8px;
-  width: 90%;
+  width: 100%;
   max-width: 500px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
@@ -93,34 +95,34 @@ header {
 
 .error-title {
   font-size: 1.5rem;
+  font-weight: 400;
   margin: 0;
-  color: #d9534f;
+  color: #f22207;
 }
 
 .close-modal {
   background: none;
   border: none;
   cursor: pointer;
-  color: #333;
 }
 
 .close-modal svg {
-  width: 24px;
-  height: 24px;
+  width: 30px;
+  height: 30px;
 }
 
 .error-modal-body {
-  margin-top: 10px;
-  color: #333;
+  margin-top: 15px;
+  color: #ffffff;
   font-size: 1rem;
   line-height: 1.5;
 }
 
 .error-message {
-  max-height: 600px;
+  max-height: 400px;
   white-space: pre-wrap;
   text-overflow: ellipsis;
-  overflow: hidden;
+  overflow-y: scroll;
   word-break: break-word;
 }