PR 827 fixes

refs #827 TS-1858
thunderstore-io · Nov 6, 2023 · 5c5c3b2 · 5c5c3b2
1 parent 4802b8f
commit 5c5c3b2
Show file tree

Hide file tree

Showing 12 changed files with 33 additions and 34 deletions.
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/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/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/PackageDetailLayout/PackageDetailLayout.tsx b/packages/cyberstorm/src/components/Layout/PackageDetailLayout/PackageDetailLayout.tsx
@@ -34,6 +34,7 @@ import {
   faCodeBranch,
   faFileLines,
   faFilePlus,
+  faArrowUpRight,
 } from "@fortawesome/pro-regular-svg-icons";
 import { PageHeader } from "../BaseLayout/PageHeader/PageHeader";
 import { useDapper } from "@thunderstore/dapper";
@@ -90,23 +91,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 +185,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">

diff --git a/packages/cyberstorm/src/components/Layout/Settings/Connections/Connections.module.css b/packages/cyberstorm/src/components/Layout/Settings/Connections/Connections.module.css
@@ -44,13 +44,14 @@
 
 .connectionTypeInfo {
   display: flex;
-  gap: var(--space--16);
+  gap: var(--space--24);
   align-items: center;
   justify-content: center;
 }
 
 .connectionTypeInfoIcon {
-  width: 2.5rem;
+  width: 2.5em;
+  aspect-ratio: 1;
 }
 
 .connectionTypeInfoName {

diff --git a/packages/cyberstorm/src/components/MenuItem/MenuItem.tsx b/packages/cyberstorm/src/components/MenuItem/MenuItem.tsx
@@ -3,7 +3,7 @@ import React, { ReactNode, useRef } from "react";
 import styles from "./MenuItem.module.css";
 import { classnames } from "../../utils/utils";
 
-export interface MenuItemProps {
+interface MenuItemProps {
   children?: ReactNode | ReactNode[];
   fontSize?: "medium" | "small";
 }
@@ -40,5 +40,4 @@ const getFontSize = (scheme: string) => {
 
 MenuItem.displayName = "MenuItem";
 
-const Root = MenuItem;
-export { Root };
+export { MenuItem as Root };
diff --git a/packages/cyberstorm/src/components/MenuItem/MenuItemIcon.tsx b/packages/cyberstorm/src/components/MenuItem/MenuItemIcon.tsx
@@ -1,7 +1,7 @@
 import styles from "./MenuItem.module.css";
 import { Icon } from "../Icon/Icon";
 
-export interface MenuItemIconProps {
+interface MenuItemIconProps {
   children: JSX.Element | JSX.Element[];
   iconClasses?: string;
 }

diff --git a/packages/cyberstorm/src/components/MenuItem/MenuItemLabel.tsx b/packages/cyberstorm/src/components/MenuItem/MenuItemLabel.tsx
@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 import styles from "./MenuItem.module.css";
 import { classnames } from "../../utils/utils";
 
-export interface MenuItemLabelProps {
+interface MenuItemLabelProps {
   children?: ReactNode | ReactNode[];
   fontSize?: "medium" | "small";
 }

diff --git a/packages/cyberstorm/src/index.ts b/packages/cyberstorm/src/index.ts
@@ -49,11 +49,6 @@ export {
 export { ValidationBar } from "./components/ValidationBar/ValidationBar";
 export { Markdown } from "./components/Markdown/Markdown";
 export * as MenuItem from "./components/MenuItem/";
-export type {
-  MenuItemProps,
-  MenuItemIconProps,
-  MenuItemLabelProps,
-} from "./components/MenuItem/";
 export { MetaItem, type MetaItemProps } from "./components/MetaItem/MetaItem";
 export {
   MetaInfoItem,