Get rid of .error and .error-message global CSS classes

Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>

public/index.css

@@ -60,10 +60,6 @@ body {
   }
 }
 
-::-moz-selection {
-  background: var(--color-primary);
-  color: var(--color-background);
-}
 ::selection {
   background: var(--color-primary);
   color: var(--color-background);
@@ -89,11 +85,6 @@ body::-webkit-scrollbar-thumb {
   background-color: var(--color-foreground-4);
 }
 
-.error::selection,
-.error ::selection {
-  background: var(--color-negative);
-}
-
 main {
   display: block;
 }
@@ -122,18 +113,6 @@ a.link.primary:hover {
 a.address {
   border-bottom-color: transparent;
 }
-
-.error {
-  color: var(--color-negative) !important;
-  border-color: var(--color-negative) !important;
-}
-.error-message {
-  background-color: var(--color-negative-2);
-  word-wrap: break-word;
-  text-overflow: ellipsis;
-  overflow-x: hidden;
-  padding: 1rem;
-}
 .off-centered {
   height: 100%;
   padding-top: 5rem;

src/Async.svelte

@@ -6,17 +6,30 @@
   export let fetch: Promise<T>;
 </script>
 
+<style>
+  .error {
+    color: var(--color-negative);
+    background-color: var(--color-negative-2);
+    word-wrap: break-word;
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+    padding: 1rem;
+  }
+  .error::selection,
+  .error ::selection {
+    background-color: var(--color-negative);
+  }
+</style>
+
 {#await fetch}
   <Loading center />
 {:then result}
   <slot {result} />
 {:catch err}
-  <div class="commit">
-    <div class="error error-message txt-tiny">
-      <div>
-        API request to <span class="txt-monospace">{err.url}</span>
-        failed.
-      </div>
+  <div class="error txt-tiny">
+    <div>
+      API request to <span class="txt-monospace">{err.url}</span>
+      failed.
     </div>
   </div>
 {/await}

src/Modal.svelte

@@ -8,8 +8,8 @@
 </script>
 
 <style>
-  .modal-floating,
-  .modal-overlay {
+  .floating,
+  .overlay {
     position: fixed;
     top: 0;
     left: 0;
@@ -17,13 +17,13 @@
     height: 100%;
     overflow: hidden;
   }
-  .modal-floating {
+  .floating {
     z-index: 300;
     display: flex;
     align-items: center;
     justify-content: center;
   }
-  .modal-overlay {
+  .overlay {
     z-index: 200;
     background-color: #00000075;
   }
@@ -37,27 +37,18 @@
     max-width: 760px;
     text-align: center;
   }
-  .modal.error {
-    box-shadow: var(--elevation-high-negative);
-  }
-  .modal.error .modal-title,
-  .modal.error .modal-subtitle,
-  .modal.error .modal-body,
-  .modal.error .modal-actions {
-    color: var(--color-negative);
-  }
-  .modal.modal-narrow {
+  .narrow {
     max-width: 600px;
   }
-  .modal.modal-subtle {
+  .subtle {
     border: none;
     box-shadow: none;
     background: radial-gradient(var(--glow) 0%, transparent 70%);
   }
-  .modal.modal-subtle.error {
+  .subtle.error {
     background: radial-gradient(var(--glow-error) 0%, transparent 70%);
   }
-  .modal-title {
+  .title {
     color: var(--color-foreground);
     font-size: var(--font-size-medium);
     font-weight: var(--font-weight-bold);
@@ -67,28 +58,37 @@
     text-overflow: ellipsis;
     overflow: hidden;
   }
-  .modal-subtitle {
+  .subtitle {
     color: var(--color-secondary);
     font-size: var(--font-size-regular);
     max-width: 90%;
     margin: 0 auto;
     line-height: 1.5;
   }
-  .modal-body {
+  .body {
     color: var(--color-foreground);
     font-size: var(--font-size-regular);
     overflow-x: hidden;
     text-overflow: ellipsis;
     margin: 3rem 0;
   }
-  .modal-actions {
+  .actions {
     padding-top: 0.5rem;
     margin-top: 2rem;
     text-align: center;
   }
-  .modal-small .modal-subtitle {
+  .small .subtitle {
     color: var(--color-foreground);
   }
+  .error {
+    box-shadow: var(--elevation-high-negative);
+    border-color: var(--color-negative);
+  }
+
+  .error > * {
+    color: var(--color-negative);
+  }
+
   @media (max-width: 720px) {
     .modal {
       width: 90%;
@@ -98,28 +98,23 @@
 </style>
 
 {#if floating}
-  <div class="modal-overlay" />
+  <div class="overlay" />
 {/if}
 
-<div class:modal-floating={floating} class:off-centered={!center}>
-  <div
-    class="modal"
-    class:error
-    class:modal-subtle={subtle}
-    class:modal-narrow={narrow}
-    class:modal-small={small}>
-    <div class="modal-title">
+<div class:floating class:off-centered={!center}>
+  <div class="modal" class:subtle class:narrow class:small class:error>
+    <div class="title">
       <slot name="title" />
     </div>
-    <div class="modal-subtitle">
+    <div class="subtitle">
       <slot name="subtitle" />
     </div>
     {#if $$slots.body && !small}
-      <div class="modal-body">
+      <div class="body">
         <slot name="body" />
       </div>
     {/if}
-    <div class="modal-actions">
+    <div class="actions">
       <slot name="actions" />
     </div>
   </div>

src/Placeholder.svelte

@@ -4,11 +4,14 @@
 
 <style>
   .placeholder {
-    text-align: center;
-    border-radius: var(--border-radius-small);
-    padding-bottom: 2rem;
-    color: var(--color-foreground-5) !important;
     background-color: var(--color-foreground-1);
+    border-radius: var(--border-radius-small);
+    color: var(--color-foreground-5);
+    overflow-x: hidden;
+    padding: 1rem 1rem 2rem 1rem;
+    text-align: center;
+    text-overflow: ellipsis;
+    word-wrap: break-word;
   }
   .placeholder header {
     padding: 1rem 0;
@@ -19,7 +22,7 @@
   }
 </style>
 
-<div class="error error-message placeholder">
+<div class="placeholder">
   <header>
     <div class="icon txt-large">{icon}</div>
     <slot name="title" />

src/base/projects/Project.svelte

@@ -51,6 +51,18 @@
 </script>
 
 <style>
+  .error {
+    color: var(--color-negative);
+    background-color: var(--color-negative-2);
+    word-wrap: break-word;
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+    padding: 1rem;
+  }
+  .error::selection,
+  .error ::selection {
+    background-color: var(--color-negative);
+  }
   .content {
     padding: 0 2rem 0 8rem;
   }
@@ -93,8 +105,8 @@
       </Async>
     {/if}
   {:catch err}
-    <div class="container center-content">
-      <div class="error error-message txt-tiny">
+    <div class="content">
+      <div class="error txt-tiny">
         <!-- TODO: Differentiate between (1) commit doesn't exist and (2) failed
              to fetch - this needs a change to the backend. -->
         API request to

src/base/registrations/Update.svelte

@@ -63,10 +63,8 @@
     {:else if state.status === Status.Success}
       <p>Your registration was successfully updated.</p>
     {:else if state.status === Status.Failed}
-      <p class="error">
-        <span class="txt-bold">Error:</span>
-        {state.error}
-      </p>
+      <span class="txt-bold">Error:</span>
+      {state.error}
     {/if}
   </span>
   <span slot="actions">
@@ -75,7 +73,7 @@
     {:else if state.status === Status.Success}
       <Button variant="foreground" on:click={onDone}>Done</Button>
     {:else if state.status === Status.Failed}
-      <Button variant="foreground" on:click={onClose}>Close</Button>
+      <Button variant="negative" on:click={onClose}>Close</Button>
     {/if}
   </span>
 </Modal>