Merge pull request #1271 from thunderstore-io/12-16-package_detail_pa…

…ge_general_fixes_to_sidebar Package detail page general fixes to sidebar
thunderstore-io · Dec 18, 2024 · 7e4d7dc · 7e4d7dc
2 parents 53a2ba2 + 6fa972c
commit 7e4d7dc
Show file tree

Hide file tree

Showing 16 changed files with 289 additions and 149 deletions.
diff --git a/apps/cyberstorm-remix/app/p/components/TagList/TagList.tsx b/apps/cyberstorm-remix/app/p/components/TagList/TagList.tsx
@@ -1,6 +1,5 @@
-import { Tag } from "@thunderstore/cyberstorm";
-import { WrapperCard } from "@thunderstore/cyberstorm/src/components/WrapperCard/WrapperCard";
-import styles from "./TagList.module.css";
+import { Heading, Tag } from "@thunderstore/cyberstorm";
+import "../../packageListing.css";
 import { PackageListingDetails } from "@thunderstore/dapper/types";
 import { ReactNode } from "react";
 
@@ -9,19 +8,23 @@ import {
   faThumbtack,
   faWarning,
   faBomb,
-  faTag,
 } from "@fortawesome/free-solid-svg-icons";
 
 export default function TagList(props: { listing: PackageListingDetails }) {
   return (
     <>
-      <WrapperCard
-        title="Tags"
-        content={
-          <div className={styles.list}>{getPackageFlags(props.listing)}</div>
-        }
-        headerIcon={<FontAwesomeIcon icon={faTag} />}
-      />
+      <div className="nimbus-packagelisting__sidebar__wrapper">
+        <Heading
+          csLevel="4"
+          csSize="4"
+          className="nimbus-packagelisting__sidebar__wrapper__title"
+        >
+          Categories
+        </Heading>
+        <div className="nimbus-packagelisting__sidebar__wrapper__categories_or_tags">
+          {getPackageFlags(props.listing)}
+        </div>
+      </div>
     </>
   );
 }

diff --git a/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.module.css b/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.module.css
@@ -4,8 +4,11 @@
 
 .item {
   display: flex;
-  gap: var(--gap-md);
-  padding: var(--space-8);
+  gap: 1rem;
+  align-items: center;
+  align-self: stretch;
+  width: 100%;
+  padding: 0.5rem;
   border-radius: var(--radius-md);
 }
 
@@ -14,41 +17,42 @@
 }
 
 .itemTitle {
-  font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-body-lg);
-  line-height: var(--line-height--m);
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-weight: 700;
+  font-size: var(--font-size-body-md);
+  line-height: 150%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .itemDescription {
   color: var(--color-text-tertiary);
-  font-weight: var(--font-weight-medium);
-  font-size: var(--font-size-body-lg);
-  line-height: var(--line-height--m);
+  font-weight: 400;
+  font-size: var(--font-size-body-sm);
+  line-height: 170%;
 }
 
 .teamLink {
   display: flex;
   gap: var(--gap-xs);
   align-items: center;
-  color: var(--color-highlight);
-  font-weight: var(--font-weight-semibold);
-  font-size: var(--font-size-body-lg);
-  line-height: var(--line-height--m);
-}
+  color: var(--color-cyber-green-7, #23ffab);
+  font-weight: 400;
+  font-size: var(--font-size-body-md);
+  line-height: 150%;
 
-.teamLinkIcon {
-  width: 1em;
-  height: 1em;
-}
-
-.teamLink:hover {
-  color: var(--color-highlight--hover);
+  --icon-color: var(--color-cyber-green-7, #23ffab);
 }
 
 .crown {
   display: inline-flex;
+  align-items: center;
   width: 1em;
   height: 1em;
-  margin-left: var(--space-4);
   color: var(--color-crown);
+  line-height: 160%;
 }
diff --git a/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.tsx b/apps/cyberstorm-remix/app/p/components/TeamMembers/TeamMembers.tsx
@@ -1,76 +1,76 @@
-import { Avatar, Icon, CyberstormLink } from "@thunderstore/cyberstorm";
-import {
-  faUsers,
-  faCaretRight,
-  faCrown,
-} from "@fortawesome/free-solid-svg-icons";
+import { Avatar, Heading, NewIcon, NewLink } from "@thunderstore/cyberstorm";
+import { faCaretRight, faCrown } from "@fortawesome/free-solid-svg-icons";
+import "../../packageListing.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import styles from "./TeamMembers.module.css";
-import { WrapperCard } from "@thunderstore/cyberstorm/src/components/WrapperCard/WrapperCard";
 import { PackageListingDetails, TeamMember } from "@thunderstore/dapper/types";
 
 export default function TeamMembers(props: { listing: PackageListingDetails }) {
   const mappedPackageTeamList = props.listing.team.members
     .sort(compare)
     .map((teamMember, index) => {
-      return (
-        <div key={index}>
-          <PackageTeamListItem teamMember={teamMember} />
-        </div>
-      );
+      return <PackageTeamListItem key={index} teamMember={teamMember} />;
     });
 
   return (
-    <>
-      <WrapperCard
-        title="Team"
-        content={<div className={styles.list}>{mappedPackageTeamList}</div>}
-        headerIcon={<FontAwesomeIcon icon={faUsers} />}
-        headerRightContent={
-          props.listing.team ? (
-            <CyberstormLink
-              linkId="Team"
-              community={props.listing.community_identifier}
-              team={props.listing.team.name}
-            >
-              <div className={styles.teamLink}>
-                See team
-                <Icon inline wrapperClasses={styles.teamLinkIcon}>
-                  <FontAwesomeIcon icon={faCaretRight} />
-                </Icon>
-              </div>
-            </CyberstormLink>
-          ) : null
-        }
-      />
-    </>
+    <div className="nimbus-packagelisting__sidebar__wrapper">
+      <div className="nimbus-packagelisting__sidebar__wrapper__header">
+        <Heading
+          csLevel="4"
+          csSize="4"
+          className="nimbus-packagelisting__sidebar__wrapper__title"
+        >
+          Team
+        </Heading>
+        <NewLink
+          primitiveType="cyberstormLink"
+          linkId="Team"
+          community={props.listing.community_identifier}
+          team={props.listing.team.name}
+          rootClasses={styles.teamLink}
+        >
+          See team
+          <NewIcon csMode="inline" noWrapper>
+            <FontAwesomeIcon icon={faCaretRight} />
+          </NewIcon>
+        </NewLink>
+      </div>
+      <div className="nimbus-packagelisting__sidebar__wrapper__team_list">
+        {mappedPackageTeamList}
+      </div>
+    </div>
   );
 }
 
 interface PackageTeamListItemProps {
+  key: number;
   teamMember: TeamMember;
 }
 
 function PackageTeamListItem(props: PackageTeamListItemProps) {
-  const { teamMember } = props;
+  const { key, teamMember } = props;
 
   return (
-    <CyberstormLink linkId="User" user={teamMember.username}>
-      <div className={styles.item}>
-        <Avatar username={teamMember.username} src={teamMember.avatar} />
-        <div>
-          <div className={styles.itemTitle}>
-            {teamMember.username}
-            {teamMember.role === "owner" ? (
-              <Icon inline wrapperClasses={styles.crown}>
-                <FontAwesomeIcon icon={faCrown} />
-              </Icon>
-            ) : null}
-          </div>
-          <div className={styles.itemDescription}>{teamMember.role}</div>
+    <NewLink
+      key={key}
+      primitiveType="cyberstormLink"
+      linkId="User"
+      user={teamMember.username}
+      rootClasses={styles.item}
+    >
+      <Avatar username={teamMember.username} src={teamMember.avatar} />
+      <div>
+        <div className={styles.itemTitle}>
+          {teamMember.username}
+          {teamMember.role === "owner" ? (
+            <NewIcon csMode="inline" noWrapper rootClasses={styles.crown}>
+              <FontAwesomeIcon icon={faCrown} />
+            </NewIcon>
+          ) : null}
         </div>
+        <div className={styles.itemDescription}>{teamMember.role}</div>
       </div>
-    </CyberstormLink>
+    </NewLink>
   );
 }
 

diff --git a/apps/cyberstorm-remix/app/p/packageListing.css b/apps/cyberstorm-remix/app/p/packageListing.css
@@ -126,6 +126,7 @@
   .nimbus-packagelisting__sidebar__meta__item__content__dependencystring {
     display: -webkit-box;
     flex: 1 0 0;
+    max-width: 15ch;
     overflow: hidden;
     color: var(--color-text-primary);
     font-weight: var(--font-weight-bold);
@@ -149,4 +150,38 @@
     gap: 0.5rem;
     row-gap: 0.5rem;
   }
+
+  .nimbus-packagelisting__sidebar__wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: flex-start;
+    align-self: stretch;
+    padding: 1rem;
+    border-radius: var(--radius-md);
+    background: rgb(59 63 125 / 0.24);
+  }
+
+  .nimbus-packagelisting__sidebar__wrapper__header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .nimbus-packagelisting__sidebar__wrapper__categories_or_tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-content: flex-start;
+    align-items: flex-start;
+    align-self: stretch;
+  }
+
+  .nimbus-packagelisting__sidebar__wrapper__team_list {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+  }
 }