Enhance error handling in route: /c

Author: Oksamies

apps/cyberstorm-remix/app/c/Community.css

@@ -5,10 +5,10 @@
     z-index: 1;
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--space-16);
     align-items: flex-start;
     align-self: stretch;
-    padding: 1rem 3rem 2rem;
+    padding: var(--space-16) var(--space-48) var(--space-32);
   }
 
   .community__header {
@@ -27,14 +27,14 @@
     align-self: stretch;
     justify-content: center;
     max-height: 12.5rem;
-    border-radius: 0.5rem;
+    border-radius: var(--radius-md);
     overflow-y: hidden;
     transition: height 2s;
 
     > img {
       width: 100%;
       height: 100%;
-      border-radius: 0.5rem;
+      border-radius: var(--radius-md);
       object-fit: cover;
       background: var(--color-ui-surface-1);
       opacity: 0.8;
@@ -58,13 +58,13 @@
     z-index: 1;
     display: flex;
     flex-wrap: wrap;
-    gap: 1.5rem;
+    gap: var(--space-24);
     place-items: flex-end stretch;
     align-self: stretch;
     justify-content: space-between;
     height: max-content;
-    margin-top: -1rem;
-    padding-left: 1rem;
+    margin-top: calc(var(--space-16) * -1);
+    padding-left: var(--space-16);
     transition:
       height ease 1s,
       opacity 0.2s,
@@ -74,7 +74,7 @@
   .community__content-header {
     display: flex;
     flex-grow: 1;
-    gap: 1.5rem;
+    gap: var(--space-24);
     align-items: flex-end;
     align-self: stretch;
     min-width: 75%;
@@ -93,14 +93,14 @@
 
   .community__game-icon {
     display: flex;
-    gap: 0.5rem;
+    gap: var(--space-8);
     align-items: center;
     width: 7rem;
     height: 7rem;
-    padding: var(--Space-12, 0.75rem);
-    border: 1px solid var(--Color-border-bright, rgb(70 70 149 / 0.66));
-    border-radius: var(--Radius-xl, 1rem);
-    background: var(--Color-Surface-1, #070721);
+    padding: var(--space-12);
+    border: var(--border-width--px) solid var(--color-ui-border-2);
+    border-radius: var(--radius-xl);
+    background: var(--color-surface-1);
     aspect-ratio: 1/1;
   }
 
@@ -121,7 +121,7 @@
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    gap: 0.75rem;
+    gap: var(--space-12);
     align-items: flex-start;
     justify-content: center;
   }
@@ -130,7 +130,7 @@
     display: flex;
     flex: 1 0 0;
     flex-direction: column;
-    gap: 0.25rem;
+    gap: var(--space-4);
     align-items: flex-start;
     align-self: stretch;
     min-width: 60%;
@@ -145,10 +145,10 @@
   .community__header-meta {
     display: flex;
     flex: 0 1 60%;
-    gap: 1.5rem;
+    gap: var(--space-24);
     align-items: center;
     min-width: 60%;
-    height: 16px;
+    height: var(--space-16);
 
     > .skeleton {
       height: 1rem;
@@ -197,6 +197,19 @@
     }
   }
 
+  .community__error {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-16);
+    align-items: flex-start;
+    padding: var(--space-48) 0;
+  }
+
+  .community__error-description {
+    max-width: 40rem;
+    color: var(--color-text-tertiary);
+  }
+
   @media (width >= 41rem) {
     .community__background {
       height: 12.5rem;
@@ -211,7 +224,7 @@
     }
 
     .community__header {
-      gap: 1rem;
+      gap: var(--space-16);
     }
 
     .community__content-header-wrapper {