ba8522c Get rid of .error and .error-message global CSS classes — radicle-explorer

modified 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;

modified 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}

modified 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>

modified 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" />

modified 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

modified 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>