Refactor/Convert Package Detail header and tabs

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

@@ -13,108 +13,9 @@
     }
   }
 
-  .nimbus-community__metalink {
-    display: flex;
-    gap: var(--gap-xs);
-    align-items: center;
-    font-weight: var(--font-weight-bold);
-    font-size: var(--font-size-body-md);
-    line-height: var(--line-height-lg);
-
-    & > svg {
-      inline-size: var(--space-16);
-    }
-  }
-
-  .nimbus-community__heroimg__wrapper {
-    --w: 56vw;
-
-    position: absolute;
-    top: calc(-1 * (var(--header-height) + var(--content-padding-top-desktop)));
-    right: 0;
-
-    z-index: -1;
-    width: var(--w);
-    height: calc(var(--w) * 0.45);
-    overflow: hidden;
-  }
-
-  .nimbus-community__heroimg {
-    --w: 56vw;
-
-    position: absolute;
-
-    /* top: calc(-1 * (var(--header-height) + var(--content-padding-top-desktop))); */
-    right: 0;
-
-    z-index: -1;
-    width: var(--w);
-    height: calc(var(--w) * 0.45);
-    background-repeat: no-repeat;
-    background-position: 50%;
-    background-size: cover;
-    opacity: 0.6;
-
-    /* stylelint-disable property-no-vendor-prefix */
-    -webkit-mask-image: var(--gradients);
-    -webkit-mask-composite: source-in;
-    /* stylelint-enable property-no-vendor-prefix */
-    mask-image: var(--gradients);
-    mask-composite: intersect;
-
-    --gradients: linear-gradient(
-        90deg,
-        transparent 0%,
-        white 70%,
-        transparent 100%
-      ),
-      linear-gradient(180deg, white 40%, transparent 95%);
-  }
-
-  @media (width < 87.5rem) {
-    .nimbus-community__heroimg__wrapper {
-      width: 60vw;
-      height: 30vw;
-    }
-
-    .nimbus-community__heroimg {
-      width: 60vw;
-      height: 30vw;
-    }
-  }
-
-  @media (width <= 63.5rem) {
-    .nimbus-community__heroimg__wrapper {
-      top: calc(-1 * var(--header-height));
-      width: 75vw;
-      height: 40vw;
-    }
-
-    .nimbus-community__heroimg {
-      width: 75vw;
-      height: 40vw;
-    }
-  }
-
   @media (width <= 48rem) {
     .nimbus-community__metaitem {
       font-size: var(--font-size-body-sm);
     }
-
-    .nimbus-community__heroimg {
-      right: -2.5rem;
-    }
-  }
-
-  @media (width < 25rem) {
-    .nimbus-community__heroimg__wrapper {
-      width: 80vw;
-      height: 60vw;
-    }
-
-    .nimbus-community__heroimg {
-      width: 80vw;
-      height: 60vw;
-    }
   }
 }

apps/cyberstorm-remix/app/c/community.tsx

@@ -136,9 +136,9 @@ export default function Community() {
   return (
     <>
       {community.hero_image_url ? (
-        <div className="nimbus-community__heroimg__wrapper">
+        <div className="nimbus-root__outlet__heroimg__wrapper">
           <div
-            className="nimbus-community__heroimg"
+            className="nimbus-root__outlet__heroimg"
             style={{
               backgroundImage: `url(${community.hero_image_url})`,
             }}
@@ -174,9 +174,8 @@ export default function Community() {
               <NewLink
                 primitiveType="link"
                 href={community.wiki_url}
-                key="meta-wiki"
                 csVariant="cyber"
-                rootClasses="nimbus-community__metalink"
+                rootClasses="nimbus-commoncomponents-page-header__meta__item"
               >
                 <NewIcon csMode="inline" noWrapper>
                   <FontAwesomeIcon icon={faBook} />
@@ -196,9 +195,8 @@ export default function Community() {
               <NewLink
                 primitiveType="link"
                 href={community.discord_url}
-                key="meta-discord"
                 csVariant="cyber"
-                rootClasses="nimbus-community__metalink"
+                rootClasses="nimbus-commoncomponents-page-header__meta__item"
               >
                 <NewIcon csMode="inline" noWrapper>
                   <FontAwesomeIcon icon={faDiscord} />

apps/cyberstorm-remix/app/commonComponents/PageHeader/PageHeader.css

@@ -39,6 +39,19 @@
     gap: var(--space-32);
   }
 
+  .nimbus-commoncomponents-page-header__meta__item {
+    display: flex;
+    gap: var(--gap-xs);
+    align-items: center;
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-body-md);
+    line-height: var(--line-height-lg);
+
+    & > svg {
+      inline-size: var(--space-16);
+    }
+  }
+
   @media (width <= 48rem) {
     .nimbus-commoncomponents-page-header {
       gap: var(--space-16);