diff --git a/packages/cyberstorm/src/components/Layout/PackageDetailLayout/PackageVersions/PackageVersions.module.css b/packages/cyberstorm/src/components/Layout/PackageDetailLayout/PackageVersions/PackageVersions.module.css index 3a8724599..5d22fea5b 100644 --- a/packages/cyberstorm/src/components/Layout/PackageDetailLayout/PackageVersions/PackageVersions.module.css +++ b/packages/cyberstorm/src/components/Layout/PackageDetailLayout/PackageVersions/PackageVersions.module.css @@ -6,7 +6,7 @@ } .title { - margin-bottom: var(--space--24); + padding: 1.5rem 0; font-weight: var(--font-weight-bold); font-size: var(--font-size--xxl); line-height: var(--line-height--xxl); @@ -22,3 +22,7 @@ flex-direction: row; gap: 1.5rem; } + +.alertLink { + color: #e7f5fe; +} diff --git a/packages/cyberstorm/src/components/Layout/PackageDetailLayout/PackageVersions/PackageVersions.tsx b/packages/cyberstorm/src/components/Layout/PackageDetailLayout/PackageVersions/PackageVersions.tsx index a42542f15..8dd8b6ad6 100644 --- a/packages/cyberstorm/src/components/Layout/PackageDetailLayout/PackageVersions/PackageVersions.tsx +++ b/packages/cyberstorm/src/components/Layout/PackageDetailLayout/PackageVersions/PackageVersions.tsx @@ -1,12 +1,31 @@ import styles from "./PackageVersions.module.css"; import * as Button from "../../../Button/"; import { Table, Sort } from "../../../Table/Table"; +import { Alert } from "../../../Alert/Alert"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faBoltLightning } from "@fortawesome/pro-solid-svg-icons"; +import { faCircleExclamation } from "@fortawesome/free-solid-svg-icons"; export function PackageVersions() { return (
+ + Please note that the install buttons only work if you have + compatible client software installed, such as the{" "} + + Thunderstore Mod Manager. + {" "} + Otherwise use the zip download links instead. + + } + variant={"info"} + icon={} + />
Versions