Merge pull request #887 from thunderstore-io/827-fixes

PR 827 and many other small UI fixes
thunderstore-io · Nov 6, 2023 · e759628 · e759628
2 parents d915c02 + e44a914
commit e759628
Show file tree

Hide file tree

Showing 38 changed files with 421 additions and 173 deletions.
diff --git a/packages/cyberstorm-styles/src/styles/theme.css b/packages/cyberstorm-styles/src/styles/theme.css
@@ -13,7 +13,7 @@
   --color-success-background: var(--color-green--8);
   --color-success-background--hover: var(--color-green--9);
   --color-crown: var(--color-yellow--5);
-  --color-info: var(--color-blue--60);
+  --color-info: var(--color-blue--70);
   --color-info-background: var(--color-blue--10);
   --color-surface--0: var(--color-purple--0);
   --color-surface--1: var(--color-purple--1);

diff --git a/packages/cyberstorm/src/components/Button/Button.module.css b/packages/cyberstorm/src/components/Button/Button.module.css
@@ -320,9 +320,9 @@
   font-size: var(--font-size);
 }
 
-.ButtonIcon__IconSize__tslogo_install_button {
-  width: 1.655rem;
-  height: 1.463rem;
+.ButtonIcon__IconSize__big {
+  width: 1.655em;
+  height: 1.463em;
 }
 
 .ButtonIcon__IconColor__default {

diff --git a/packages/cyberstorm/src/components/Button/Button.tsx b/packages/cyberstorm/src/components/Button/Button.tsx
@@ -186,5 +186,4 @@ const getIconAlignment = (scheme: string) => {
   }[scheme];
 };
 
-const Root = Button;
-export { Root };
+export { Button as Root };
diff --git a/packages/cyberstorm/src/components/Button/ButtonIcon.tsx b/packages/cyberstorm/src/components/Button/ButtonIcon.tsx
@@ -4,7 +4,7 @@ import { classnames } from "../../utils/utils";
 
 export interface ButtonIconProps {
   children: JSX.Element | JSX.Element[];
-  iconSize?: "default" | "tslogo_install_button";
+  iconSize?: "default" | "big";
   iconColor?: "default" | "darker";
   iconClasses?: string;
 }
@@ -32,7 +32,7 @@ export function ButtonIcon(props: ButtonIconProps) {
 const getIconSize = (scheme: string) => {
   return {
     default: styles.ButtonIcon__IconSize__default,
-    tslogo_install_button: styles.ButtonIcon__IconSize__tslogo_install_button,
+    big: styles.ButtonIcon__IconSize__big,
   }[scheme];
 };
 

diff --git a/packages/cyberstorm/src/components/CommunityCard/CommunityCard.module.css b/packages/cyberstorm/src/components/CommunityCard/CommunityCard.module.css
@@ -24,7 +24,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2.38rem;
+  width: 30%;
   aspect-ratio: 1;
   transition: 0.2s;
 }

diff --git a/packages/cyberstorm/src/components/CommunityImage/CommunityImage.module.css b/packages/cyberstorm/src/components/CommunityImage/CommunityImage.module.css
@@ -9,7 +9,5 @@
   border-radius: var(--border-radius--8);
 
   object-fit: cover;
-  box-shadow: var(--box-shadow-default);
-  transition: 0.2s;
   aspect-ratio: 3 / 4;
 }
diff --git a/packages/cyberstorm/src/components/FilterItemList/FilterItem/FilterItem.tsx b/packages/cyberstorm/src/components/FilterItemList/FilterItem/FilterItem.tsx
@@ -43,15 +43,14 @@ export function FilterItem(props: FilterItemProps) {
           style={value !== undefined ? filterColor : {}}
         >
           <Checkbox.Indicator forceMount>
-            {value === undefined && <></>}
-            {value === true && (
+            {value === undefined ? (
+              <></>
+            ) : (
               <Icon inline>
-                <FontAwesomeIcon className={styles.icon} icon={faCheck} />
-              </Icon>
-            )}
-            {value === false && (
-              <Icon inline>
-                <FontAwesomeIcon className={styles.icon} icon={faXmark} />
+                <FontAwesomeIcon
+                  className={styles.icon}
+                  icon={value ? faCheck : faXmark}
+                />
               </Icon>
             )}
           </Checkbox.Indicator>

diff --git a/packages/cyberstorm/src/components/Header/DevelopersDropDown.tsx b/packages/cyberstorm/src/components/Header/DevelopersDropDown.tsx
@@ -16,7 +16,9 @@ export const DevelopersDropDown = () => (
     triggerColorScheme="transparentDefault"
     trigger={
       <Button.Root paddingSize="large">
-        <Button.ButtonLabel fontSize="large">Developers</Button.ButtonLabel>
+        <Button.ButtonLabel fontSize="large" fontWeight="600">
+          Developers
+        </Button.ButtonLabel>
         <Button.ButtonIcon>
           <FontAwesomeIcon icon={faCaretDown} />
         </Button.ButtonIcon>

diff --git a/packages/cyberstorm/src/components/Header/Header.module.css b/packages/cyberstorm/src/components/Header/Header.module.css
@@ -5,12 +5,11 @@
   display: flex;
   gap: var(--gap--32);
   align-items: center;
+  justify-content: space-between;
   width: 100%;
   height: 3.5rem;
-  padding: 0 var(--space--24);
-  border-bottom: var(--space--px) var(--color-surface--4) solid;
-  background-color: hsl(240deg 36% 11% / 0.9);
-  backdrop-filter: blur(var(--space--20));
+  background-color: rgb(16 16 40 / 0.85);
+  backdrop-filter: blur(10px);
 }
 
 .item {
@@ -26,6 +25,7 @@
 
 .item:last-child {
   justify-content: flex-end;
+  padding-right: 0.75rem;
 }
 
 .nav {
@@ -47,13 +47,13 @@
   width: 1.655rem;
   height: 1.463rem;
   margin: 0 var(--space--18);
+  margin: 0 0.75rem 0 1.25rem;
   color: var(--color-highlight);
 }
 
 .navButtons {
   display: flex;
   gap: var(--space--8);
-  min-width: 252px;
 }
 
 .dropDownUserInfo {

diff --git a/packages/cyberstorm/src/components/Header/Header.tsx b/packages/cyberstorm/src/components/Header/Header.tsx
@@ -8,7 +8,6 @@ import * as Button from "../Button/";
 import { CommunitiesLink, IndexLink, PackageUploadLink } from "../Links/Links";
 import { ThunderstoreLogo } from "../../svg/svg";
 import { UserDropDown } from "./UserDropDown";
-import { classnames } from "../../utils/utils";
 
 /**
  * Horizontal navigation bar shown at the top of the site.
@@ -44,7 +43,7 @@ export function Header() {
                 paddingSize="large"
                 colorScheme="transparentDefault"
               >
-                <Button.ButtonLabel fontSize="large">
+                <Button.ButtonLabel fontSize="large" fontWeight="600">
                   Communities
                 </Button.ButtonLabel>
               </Button.Root>
@@ -56,19 +55,21 @@ export function Header() {
         </ul>
       </nav>
 
-      <div className={classnames(styles.item, styles.search)}></div>
-
       <nav className={styles.item}>
         <ul className={styles.nav}>
           <li className={styles.navButtons}>
             <a href="/">
               <Button.Root paddingSize="large" colorScheme="specialPurple">
-                <Button.ButtonLabel>Go Premium</Button.ButtonLabel>
+                <Button.ButtonLabel fontWeight="600">
+                  Go Premium
+                </Button.ButtonLabel>
               </Button.Root>
             </a>
             <a href="/">
               <Button.Root paddingSize="large" colorScheme="accent">
-                <Button.ButtonLabel>Get Manager</Button.ButtonLabel>
+                <Button.ButtonLabel fontWeight="800">
+                  Get Manager
+                </Button.ButtonLabel>
               </Button.Root>
             </a>
           </li>

diff --git a/packages/cyberstorm/src/components/Icon/Icon.tsx b/packages/cyberstorm/src/components/Icon/Icon.tsx
@@ -1,4 +1,3 @@
-"use client";
 import { Children, cloneElement } from "react";
 import styles from "./Icon.module.css";
 import { classnames } from "../../utils/utils";

diff --git a/packages/cyberstorm/src/components/Layout/BaseLayout/BaseLayout.module.css b/packages/cyberstorm/src/components/Layout/BaseLayout/BaseLayout.module.css
@@ -75,7 +75,7 @@
 .main {
   display: flex;
   flex-direction: column;
-  gap: 4rem;
+  gap: 2rem;
 }
 
 @media (min-width: 60rem) {

diff --git a/packages/cyberstorm/src/components/Layout/CommunityProfileLayout/CommunityProfileLayout.tsx b/packages/cyberstorm/src/components/Layout/CommunityProfileLayout/CommunityProfileLayout.tsx
@@ -13,6 +13,7 @@ import { CommunitiesLink, CommunityLink } from "../../Links/Links";
 import { MetaItem } from "../../MetaItem/MetaItem";
 import { PackageSearch } from "../../PackageSearch/PackageSearch";
 import { formatInteger } from "../../../utils/utils";
+import { faArrowUpRight } from "@fortawesome/pro-solid-svg-icons";
 
 interface Props {
   communityId: string;
@@ -72,6 +73,9 @@ export function CommunityProfileLayout(props: Props) {
                     <FontAwesomeIcon icon={faDiscord} />
                   </Button.ButtonIcon>
                   <Button.ButtonLabel>Join our community</Button.ButtonLabel>
+                  <Button.ButtonIcon>
+                    <FontAwesomeIcon icon={faArrowUpRight} />
+                  </Button.ButtonIcon>
                 </Button.Root>
               </a>
             ) : null,

diff --git a/packages/cyberstorm/src/components/Layout/PackageDetailLayout/PackageDetailLayout.module.css b/packages/cyberstorm/src/components/Layout/PackageDetailLayout/PackageDetailLayout.module.css
@@ -111,3 +111,10 @@
   max-height: 9rem;
   border-radius: var(--border-radius--8);
 }
+
+.categoriesCard {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 0.5rem;
+  row-gap: 0.5rem;
+}
diff --git a/packages/cyberstorm/src/components/Layout/PackageDetailLayout/PackageDetailLayout.tsx b/packages/cyberstorm/src/components/Layout/PackageDetailLayout/PackageDetailLayout.tsx
@@ -9,7 +9,6 @@ import {
 } from "../../Links/Links";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Button from "../../Button/";
-import { Title } from "../../Title/Title";
 import { Dialog } from "../../Dialog/Dialog";
 import { PackageManagementForm } from "./PackageManagementForm/PackageManagementForm";
 import { BaseLayout } from "../BaseLayout/BaseLayout";
@@ -20,28 +19,33 @@ import {
   faCog,
   faThumbsUp,
   faFlag,
+  faCodeBranch,
+  faFileLines,
+  faFilePlus,
+  faArrowUpRight,
+  faBoxes,
 } from "@fortawesome/pro-solid-svg-icons";
 import { faUsers } from "@fortawesome/pro-regular-svg-icons";
 import { PackageDependencyList } from "./PackageDependencyList/PackageDependencyList";
 import { CopyButton } from "../../CopyButton/CopyButton";
-import { formatInteger } from "../../../utils/utils";
+import { bankersRound, formatInteger } from "../../../utils/utils";
 import { useState } from "react";
 import { Tabs } from "../../Tabs/Tabs";
 import { PackageChangeLog } from "./PackageChangeLog/PackageChangeLog";
 import { PackageVersions } from "./PackageVersions/PackageVersions";
 import { faDiscord, faGithub } from "@fortawesome/free-brands-svg-icons";
-import {
-  faCodeBranch,
-  faFileLines,
-  faFilePlus,
-} from "@fortawesome/pro-regular-svg-icons";
 import { PageHeader } from "../BaseLayout/PageHeader/PageHeader";
 import { useDapper } from "@thunderstore/dapper";
 import { Package } from "@thunderstore/dapper/types";
 import { PackageTagList } from "./PackageTagList/PackageTagList";
 import { PackageTeamMemberList } from "./PackageTeamMemberList/PackageTeamMemberList";
 import { ThunderstoreLogo } from "../../../svg/svg";
 import { usePromise } from "@thunderstore/use-promise";
+import { WrapperCard } from "../../WrapperCard/WrapperCard";
+import { Tag } from "../../Tag/Tag";
+import { Icon } from "../../Icon/Icon";
+import { PLACEHOLDER } from "../Developers/MarkdownPreview/MarkdownPlaceholder";
+import markdownStyles from "../../Markdown/Markdown.module.css";
 
 export interface PackageDetailLayoutProps {
   community: string;
@@ -70,6 +74,19 @@ export function PackageDetailLayout(props: PackageDetailLayoutProps) {
 
   const [currentTab, setCurrentTab] = useState(1);
 
+  const mappedPackageTagList = packageData.categories?.map(
+    (category, index) => {
+      return (
+        <Tag
+          colorScheme="borderless_no_hover"
+          size="mediumPlus"
+          key={index.toString()}
+          label={category.name.toUpperCase()}
+        />
+      );
+    }
+  );
+
   const packageDetailsMeta = [];
   if (packageData.author) {
     packageDetailsMeta.push(
@@ -90,23 +107,29 @@ export function PackageDetailLayout(props: PackageDetailLayoutProps) {
   if (packageData.gitHubLink) {
     packageDetailsMeta.push(
       <a key="github" href={packageData.gitHubLink}>
-        <Button.Root>
-          <Button.ButtonLabel>GitHub</Button.ButtonLabel>
+        <Button.Root plain colorScheme="transparentPrimary" paddingSize="small">
           <Button.ButtonIcon>
             <FontAwesomeIcon icon={faGithub} />
           </Button.ButtonIcon>
+          <Button.ButtonLabel>GitHub</Button.ButtonLabel>
+          <Button.ButtonIcon>
+            <FontAwesomeIcon icon={faArrowUpRight} />
+          </Button.ButtonIcon>
         </Button.Root>
       </a>
     );
   }
   if (packageData.discordLink) {
     packageDetailsMeta.push(
       <a key="discord" href={packageData.discordLink}>
-        <Button.Root>
-          <Button.ButtonLabel>Discord</Button.ButtonLabel>
+        <Button.Root plain colorScheme="transparentPrimary" paddingSize="small">
           <Button.ButtonIcon>
             <FontAwesomeIcon icon={faDiscord} />
           </Button.ButtonIcon>
+          <Button.ButtonLabel>Discord</Button.ButtonLabel>
+          <Button.ButtonIcon>
+            <FontAwesomeIcon icon={faArrowUpRight} />
+          </Button.ButtonIcon>
         </Button.Root>
       </a>
     );
@@ -178,7 +201,7 @@ export function PackageDetailLayout(props: PackageDetailLayoutProps) {
             />
             <a className={styles.installButton} href="/">
               <Button.Root plain paddingSize="huge" colorScheme="fancyAccent">
-                <Button.ButtonIcon iconSize="tslogo_install_button">
+                <Button.ButtonIcon iconSize="big">
                   <ThunderstoreLogo />
                 </Button.ButtonIcon>
                 <Button.ButtonLabel fontSize="huge" fontWeight="800">
@@ -233,7 +256,20 @@ export function PackageDetailLayout(props: PackageDetailLayoutProps) {
             </Button.Root>
           </div>
           <MetaInfoItemList metaInfoData={metaInfoData} />
-          <PackageTagList tags={packageData.categories} />
+          <WrapperCard
+            title="Categories"
+            content={
+              <div className={styles.categoriesCard}>
+                {mappedPackageTagList}
+              </div>
+            }
+            headerIcon={
+              <Icon>
+                <FontAwesomeIcon icon={faBoxes} />
+              </Icon>
+            }
+          />
+          <PackageTagList packageData={packageData} />
           <PackageDependencyList namespace={namespace} community={community} />
           <PackageTeamMemberList
             community={packageData.community}
@@ -272,6 +308,11 @@ function getMetaInfoData(packageData: Package) {
     },
     {
       key: "5",
+      label: "Size",
+      content: <>{`${bankersRound(packageData.size / 1000, 1)} MB`}</>,
+    },
+    {
+      key: "6",
       label: "Dependency string",
       content: (
         <div className={styles.dependencyStringWrapper}>
@@ -286,7 +327,7 @@ function getMetaInfoData(packageData: Package) {
       ),
     },
     {
-      key: "6",
+      key: "7",
       label: "Dependants",
       content: (
         <PackageDependantsLink
@@ -322,13 +363,14 @@ const tabs = [
 ];
 
 function getTabContent(currentTab: number, packageData: Package) {
+  const placeholder = PLACEHOLDER();
   let tabContent = null;
   if (currentTab === 1) {
     tabContent = (
-      <>
-        <Title text={packageData.name} />
-        <p className={styles.description}>{packageData.description}</p>
-      </>
+      <div
+        dangerouslySetInnerHTML={{ __html: placeholder }}
+        className={markdownStyles.root}
+      />
     );
   } else if (currentTab === 2) {
     tabContent = <PackageChangeLog packageId={packageData.name} />;