Merge pull request #1270 from thunderstore-io/12-16-minor_fixes_arise…

…d_in_qa Minor fixes arised in QA
thunderstore-io · Dec 16, 2024 · 53a2ba2 · 53a2ba2
2 parents f97ea4d + 1a40b29
commit 53a2ba2
Show file tree

Hide file tree

Showing 16 changed files with 62 additions and 189 deletions.
diff --git a/apps/cyberstorm-remix/app/c/community.tsx b/apps/cyberstorm-remix/app/c/community.tsx
@@ -136,14 +136,12 @@ export default function Community() {
   return (
     <>
       {community.hero_image_url ? (
-        <div className="nimbus-root__outlet__heroimg__wrapper">
-          <div
-            className="nimbus-root__outlet__heroimg"
-            style={{
-              backgroundImage: `url(${community.hero_image_url})`,
-            }}
-          />
-        </div>
+        <div
+          className="nimbus-root__outlet__heroimg"
+          style={{
+            backgroundImage: `url(${community.hero_image_url})`,
+          }}
+        />
       ) : null}
       <NewBreadCrumbs rootClasses="nimbus-root__breadcrumbs">
         <NewLink

diff --git a/apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.css b/apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.css
@@ -26,7 +26,7 @@
   line-height: var(--line-height-md);
   white-space: nowrap;
   text-overflow: ellipsis;
-  text-shadow: 0 1px 1px #0d0d21;
+  text-shadow: var(--textshadow-default);
   transition: max-height 500ms cubic-bezier(0, 1, 0, 1);
 }
 
@@ -42,6 +42,7 @@
   font-size: var(--font-size-body-md);
   line-height: normal;
   text-wrap: nowrap;
+  text-shadow: var(--textshadow-default);
   background-color: transparent;
 }
 

diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.module.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.module.css
@@ -29,7 +29,6 @@
   gap: var(--gap-md);
   width: 16.6rem;
   max-height: calc(100vh - var(--header-height) - 1rem);
-  padding-right: var(--space-8);
   padding-bottom: var(--space-16);
   overflow-y: auto;
 
@@ -61,6 +60,10 @@
     100% 14px;
   background-attachment: local, local, scroll, scroll;
   transition: var(--animation-duration-md) all allow-discrete;
+
+  &:where(:not(:hover)) {
+    scrollbar-color: transparent transparent;
+  }
 }
 
 .sidebarIsHidden {
@@ -168,6 +171,10 @@
   .listingOptions {
     width: 100%;
   }
+
+  .searchGroupOne {
+    flex-direction: row-reverse;
+  }
 }
 
 @keyframes fade-in {

diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx
@@ -434,7 +434,7 @@ export function PackageSearch(props: Props) {
                     onClick={resetParams}
                     rootClasses="nimbus-noresult__button"
                   >
-                    Clean all filters
+                    Clear all filters
                   </NewButton>
                 </EmptyState.Root>
               ) : (

diff --git a/apps/cyberstorm-remix/app/commonComponents/PageHeader/PageHeader.css b/apps/cyberstorm-remix/app/commonComponents/PageHeader/PageHeader.css
@@ -46,6 +46,7 @@
     font-weight: var(--font-weight-bold);
     font-size: var(--font-size-body-md);
     line-height: var(--line-height-lg);
+    text-shadow: var(--textshadow-default);
 
     & > svg {
       inline-size: var(--space-16);

diff --git a/apps/cyberstorm-remix/app/globals.css b/apps/cyberstorm-remix/app/globals.css
diff --git a/apps/cyberstorm-remix/app/p/packageListing.tsx b/apps/cyberstorm-remix/app/p/packageListing.tsx
@@ -229,14 +229,12 @@ export default function Community() {
   return (
     <>
       {community.hero_image_url ? (
-        <div className="nimbus-root__outlet__heroimg__wrapper">
-          <div
-            className="nimbus-root__outlet__heroimg"
-            style={{
-              backgroundImage: `url(${community.hero_image_url})`,
-            }}
-          />
-        </div>
+        <div
+          className="nimbus-root__outlet__heroimg"
+          style={{
+            backgroundImage: `url(${community.hero_image_url})`,
+          }}
+        />
       ) : null}
       <NewBreadCrumbs rootClasses="nimbus-root__breadcrumbs">
         <NewLink

diff --git a/apps/cyberstorm-remix/app/styles/layout.css b/apps/cyberstorm-remix/app/styles/layout.css
@@ -2,14 +2,16 @@
   :root {
     /* Header dimensions */
     --header-height: 3.5rem;
-    --content-padding-top-desktop: 2rem;
+    --content-padding-top: 1.5rem;
   }
 
   .nimbus-root {
     display: flex;
     flex-direction: column;
     align-items: center;
-    min-height: 100vh;
+    width: 100%;
+    min-height: 100dvh;
+    overflow-x: hidden;
   }
 
   .nimbus-root__content {
@@ -18,6 +20,7 @@
     align-items: flex-start;
     justify-content: center;
     width: 100%;
+    padding: 1.5rem 1.5rem 3rem;
   }
 
   .nimbus-root__outlet {
@@ -27,39 +30,23 @@
     flex-direction: column;
     gap: 1rem;
     min-width: 0;
-    padding: 1rem 0 2rem 2rem;
-  }
-
-  .nimbus-root__outlet__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-root__outlet__heroimg {
-    --w: 56vw;
-
     position: absolute;
-
-    right: 0;
+    top: calc(-1 * var(--content-padding-top));
+    right: -10rem;
 
     z-index: -1;
-    width: var(--w);
-    height: calc(var(--w) * 0.45);
+    width: 60rem;
     background-color: var(--body-bg-color);
     background-repeat: no-repeat;
     background-position: 50%;
     background-size: cover;
 
     background-blend-mode: luminosity;
-    opacity: 0.3;
+    opacity: 0.4;
+    aspect-ratio: 3/1;
     mask-image: var(--gradients);
     mask-composite: intersect;
 
@@ -74,13 +61,11 @@
 
   .nimbus-root__ads-container {
     position: sticky;
-    top: var(--header-height);
+    top: calc(var(--header-height) + var(--content-padding-top));
     display: flex;
     flex-direction: column;
     gap: 1rem;
     align-items: flex-start;
-    padding-top: 4.5rem;
-    padding-right: 2rem;
   }
 
   .nimbus-root__page-body {
@@ -99,33 +84,14 @@
       display: none;
     }
 
-    .nimbus-root__outlet {
+    .nimbus-root__content {
       padding: 1rem 2rem 2rem;
     }
   }
 
-  @media (width < 87.5rem) {
-    .nimbus-root__outlet__heroimg__wrapper {
-      width: 60vw;
-      height: 30vw;
-    }
-
-    .nimbus-root__outlet__heroimg {
-      width: 60vw;
-      height: 30vw;
-    }
-  }
-
   @media (width <= 63.5rem) {
-    .nimbus-root__outlet__heroimg__wrapper {
-      top: calc(-1 * var(--header-height));
-      width: 75vw;
-      height: 40vw;
-    }
-
     .nimbus-root__outlet__heroimg {
-      width: 75vw;
-      height: 40vw;
+      top: calc(-1 * var(--content-padding-top));
     }
   }
 
@@ -140,24 +106,14 @@
   }
 
   @media (width <= 48rem) {
-    .nimbus-root__outlet {
+    .nimbus-root__content {
       padding: 1rem;
     }
 
     .nimbus-root__outlet__heroimg {
       right: -2.5rem;
-    }
-  }
-
-  @media (width < 25rem) {
-    .nimbus-root__outlet__heroimg__wrapper {
-      width: 80vw;
-      height: 60vw;
-    }
-
-    .nimbus-root__outlet__heroimg {
-      width: 80vw;
-      height: 60vw;
+      width: 30rem;
+      max-width: 100vw;
     }
   }
 }
diff --git a/packages/cyberstorm-theme/src/components/Link/Link.css b/packages/cyberstorm-theme/src/components/Link/Link.css
@@ -18,6 +18,10 @@
     }
   }
 
+  .ts-link > svg {
+    filter: var(--dropshadow-default);
+  }
+
   /* TOKENS */
   :root {
     --link-primary-color--default: var(--color-text-accent);

diff --git a/packages/cyberstorm-theme/src/components/Tag/Tag.css b/packages/cyberstorm-theme/src/components/Tag/Tag.css
@@ -214,8 +214,8 @@
     --tag-dark-pink-text-color--hover: var(--color-accent-pink-9);
     --tag-dark-primary-bg-color--default: var(--color-surface-8);
     --tag-dark-primary-bg-color--hover: var(--color-surface-9);
-    --tag-dark-primary-text-color--default: var(--color--primary);
-    --tag-dark-primary-text-color--hover: var(--color--primary);
+    --tag-dark-primary-text-color--default: var(--color-text-primary);
+    --tag-dark-primary-text-color--hover: var(--color-text-primary);
     --tag-dark-purple-bg-color--default: var(--color-accent-purple-2);
     --tag-dark-purple-bg-color--hover: var(--color-accent-purple-3);
     --tag-dark-purple-text-color--default: var(--color-accent-purple-9);

diff --git a/packages/cyberstorm-theme/src/styles/colors.css b/packages/cyberstorm-theme/src/styles/colors.css
@@ -17,6 +17,8 @@
       0px 6px 8px 0px rgb(0 0 0 / 0.5);
     --color-text-a--default: var(--color-cyber-green-7);
     --color-text-a--hover: var(--color-cyber-green-6);
+    --dropshadow-default: drop-shadow(0 1px 1px #0d0d21);
+    --textshadow-default: 0 1px 1px #0d0d21;
 
     /* Color tokens */
     --color-black: rgb(0 0 0);

diff --git a/packages/cyberstorm/src/components/EmptyState/EmptyState.module.css b/packages/cyberstorm/src/components/EmptyState/EmptyState.module.css
@@ -12,8 +12,8 @@
 }
 
 .title {
-  color: #c9c5d8;
-  font-weight: var(--font-weight-boldest);
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-bold);
 
   line-height: var(--line-height-md);
   text-align: center;