Run pre-commit on all files

thunderstore-io · Dec 4, 2024 · fb3ec70 · fb3ec70
1 parent b3417c1
commit fb3ec70
Show file tree

Hide file tree

Showing 43 changed files with 7,473 additions and 7,529 deletions.
diff --git a/.yarn/releases/yarn-1.19.0.cjs b/.yarn/releases/yarn-1.19.0.cjs
diff --git a/apps/cyberstorm-remix/app/c/Community.css b/apps/cyberstorm-remix/app/c/Community.css
@@ -26,13 +26,62 @@
     }
   }
 
+  .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.3;
+
+    /* 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 {
+      width: 60vw;
+      height: 30vw;
+    }
+  }
+
+  @media (width <= 63.5rem) {
+    .nimbus-community__heroimg {
+      top: calc(-1 * var(--header-height));
+      width: 75vw;
+      height: 40vw;
+    }
+  }
+
+  @media (width < 25rem) {
+    .nimbus-community__heroimg {
+      width: 80vw;
+      height: 60vw;
+    }
+  }
+
   @media (width <= 30rem) {
     .nimbus-community__metaitem {
       font-size: var(--font-size-body-sm);
     }
-
-    .nimbus-community__metaitem__text {
-      display: none;
-    }
   }
 }
diff --git a/apps/cyberstorm-remix/app/c/CommunityCard.css b/apps/cyberstorm-remix/app/c/CommunityCard.css
@@ -1,69 +1,40 @@
-.nimbus-communitycard {
-  display: flex;
-  flex-direction: row;
-  gap: var(--space-32);
-}
-
-.nimbus-communitycard__image {
-  flex: 0 0 9rem;
-}
-
-.nimbus-communitycard__info {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
-  min-width: 0;
-}
-
-@media (width <= 30rem) {
+@layer nimbus-layout {
   .nimbus-communitycard {
-    gap: var(--space-16);
-    padding: var(--space-8) 0;
-  }
-
-  .nimbus-communitycard__info > h1 {
-    --display-font-size: 21px;
+    display: flex;
+    flex-direction: row;
+    gap: var(--space-32);
   }
 
   .nimbus-communitycard__image {
-    flex: 0 0 5rem;
+    flex: 0 0 9rem;
   }
-}
-
-.nimbus-communitycard__meta {
-  display: flex;
-  flex-flow: row wrap;
-  gap: var(--space-16);
-  padding-top: var(--space-16);
-}
 
-.nimbus-communitycard__backgroundimg {
-  --w: 56vw;
+  .nimbus-communitycard__info {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    min-width: 0;
+  }
 
-  position: fixed;
-  top: calc(-1 * (var(--header-height) + var(--content-padding-top-desktop)));
-  right: 0;
+  @media (width <= 30rem) {
+    .nimbus-communitycard {
+      gap: var(--space-16);
+      padding: var(--space-8) 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.3;
+    .nimbus-communitycard__info > h1 {
+      --display-font-size: 21px;
+    }
 
-  /* 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;
+    .nimbus-communitycard__image {
+      flex: 0 0 5rem;
+    }
+  }
 
-  --gradients: linear-gradient(
-      90deg,
-      transparent 0%,
-      white 70%,
-      transparent 100%
-    ),
-    linear-gradient(180deg, white 40%, transparent 95%);
+  .nimbus-communitycard__meta {
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--space-16);
+    padding-top: var(--space-16);
+  }
 }
diff --git a/apps/cyberstorm-remix/app/c/community.tsx b/apps/cyberstorm-remix/app/c/community.tsx
@@ -123,7 +123,7 @@ export default function Community() {
     <>
       {community.hero_image_url ? (
         <div
-          className="nimbus-communitycard__backgroundimg"
+          className="nimbus-community__heroimg"
           style={{
             backgroundImage: `url(${community.hero_image_url})`,
           }}
@@ -174,7 +174,7 @@ export default function Community() {
                       <FontAwesomeIcon icon={faBook} />
                     </NewIcon>
                     <span className="nimbus-community__metaitem__text">
-                      Modding wiki
+                      Wiki
                     </span>
                     <NewIcon csMode="inline" noWrapper>
                       <FontAwesomeIcon icon={faArrowUpRight} />
@@ -193,7 +193,7 @@ export default function Community() {
                       <FontAwesomeIcon icon={faDiscord} />
                     </NewIcon>
                     <span className="nimbus-community__metaitem__text">
-                      Join our community
+                      Discord
                     </span>
                     <NewIcon csMode="inline" noWrapper>
                       <FontAwesomeIcon icon={faArrowUpRight} />

diff --git a/apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.css b/apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.css
@@ -3,20 +3,37 @@
 }
 
 .nimbus-commoncomponents-collapsibletext__text {
+  position: relative;
+  max-width: 50vw;
+  max-height: calc(1em * 1.4); /* --line-height-md */
+  padding-right: 1em;
   overflow: hidden;
   color: var(--color-text-tertiary);
   font-weight: var(--font-weight-regular);
   font-size: var(--font-size-body-lg);
   line-height: var(--line-height-md);
-  white-space: nowrap;
-  text-overflow: ellipsis;
   text-shadow: 0 1px 1px #0d0d21;
+  word-break: break-all;
+  transition: max-height var(--animation-duration-lg);
+}
 
-  /* white-space: pre-wrap; */
+.nimbus-commoncomponents-collapsibletext__text::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0 0.2em;
+  opacity: 1;
+  transition: opacity var(--animation-duration-lg) var(--animation-duration-lg);
+  content: "...";
 }
 
 .nimbus-commoncomponents-collapsibletext__opened {
-  white-space: normal;
+  max-height: 1000px;
+
+  &::after {
+    opacity: 0;
+    transition: opacity 0s 0s;
+  }
 }
 
 .nimbus-commoncomponents-collapsibletext__show {

diff --git a/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css b/apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css
@@ -1,6 +1,7 @@
 @layer nimbus-layout {
   .nimbus-footer {
     width: 100%;
+    padding-top: 4.5rem;
 
     --border: var(--space-px) solid #27275d;
   }

diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/CollapsibleMenu.tsx
@@ -3,6 +3,7 @@ import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import styles from "./CollapsibleMenu.module.css";
 import { NewIcon } from "@thunderstore/cyberstorm";
+import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
 
 interface Props extends PropsWithChildren {
   headerTitle: string;
@@ -17,7 +18,12 @@ export const CollapsibleMenu = (props: Props) => {
 
   return (
     <details className={styles.root} open={defaultOpen}>
-      <summary className={styles.header}>
+      <summary
+        className={classnames(
+          "ts-button ts-variant--secondary ts-size--big ts-modifier--ghost ts-modifier--dimmed",
+          styles.header
+        )}
+      >
         {headerTitle}
         <NewIcon csMode="inline" noWrapper>
           <FontAwesomeIcon icon={faCaretDown} />

diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/FilterMenus/FilterMenu.module.css
@@ -6,13 +6,14 @@
   border-radius: var(--radius-md);
   color: var(--color-text-secondary);
   font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-body-md);
   cursor: pointer;
   transition: var(--animation-duration-xs);
   user-select: none;
 }
 
 .label:hover {
-  background-color: var(--color-surface-4);
+  background-color: var(--color-surface-a5);
 }
 
 /* RADIO GROUP */
@@ -60,8 +61,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--space-18);
-  height: var(--space-18);
+  width: var(--space-20);
+  height: var(--space-20);
+
+  --icon-inline-size: var(--space-20);
+
   background-color: transparent;
   transition: ease-out var(--animation-duration-xs);
 }

diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageList.module.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageList.module.css
@@ -13,6 +13,7 @@
 }
 
 .packageCount {
+  width: max-content;
   color: var(--color-text-tertiary);
   font-size: var(--font-size-body-md);
 }
@@ -34,11 +35,7 @@
 .packages {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
-  gap: var(--gap-xl);
-}
-
-.packagesIsFiltersVisible {
-  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+  gap: var(--gap-sm);
 }
 
 .packageCardSkeleton {
@@ -65,6 +62,12 @@
   height: var(--space-36);
 }
 
+@media (width < 63.5rem) {
+  .packages {
+    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+  }
+}
+
 @media (width <= 43.75rem) {
   .top {
     flex-direction: column-reverse;
@@ -80,4 +83,14 @@
   .sortByText {
     display: none;
   }
+
+  .packages {
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+  }
+}
+
+@media (width < 31rem) {
+  .packages {
+    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+  }
 }
diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.module.css b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.module.css
@@ -22,9 +22,9 @@
   position: sticky;
   top: calc(var(--header-height) + 1rem);
   display: flex;
-  flex-basis: 20%;
   flex-direction: column;
   gap: var(--gap-md);
+  width: 16.6rem;
   max-height: calc(90vh - var(--header-height));
   padding-right: var(--space-8);
   overflow-y: auto;
@@ -59,12 +59,6 @@
   transition: var(--animation-duration-md) all allow-discrete;
 }
 
-@media (width <= 63.5rem) {
-  .sidebar {
-    flex-basis: 30%;
-  }
-}
-
 .sidebarIsHidden {
   display: none;
   opacity: 0;
@@ -101,6 +95,7 @@
 }
 
 .searchText {
+  width: min-content;
   color: var(--color-text-tertiary);
   font-weight: var(--font-weight-bold);
   font-size: var(--font-size-body-md);
@@ -123,7 +118,9 @@
   .sidebar {
     position: static;
     top: 0;
+    width: 100%;
     max-height: max-content;
+    padding: 0;
     background: transparent;
     background-size: contain;
     background-attachment: scroll;

diff --git a/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx b/apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx
@@ -321,12 +321,7 @@ export function PackageSearch(props: Props) {
 
             <StalenessIndicator
               isStale={navigation.state === "loading" ? true : false}
-              className={classnames(
-                packageListStyles.packages,
-                isFiltersVisible
-                  ? undefined
-                  : packageListStyles.packagesIsFiltersVisible
-              )}
+              className={packageListStyles.packages}
             >
               {listings.results.map((p) => (
                 <CardPackage