add discord link to risk banner

Author: imring

ui/packages/components/src/common/gcsim/Warning.tsx

@@ -7,6 +7,7 @@ interface WarningProps {
   hideKey: string;
   headerKey: string;
   bodyKey: string;
+  bodyComponents?: Record<string, React.ReactElement>;
   showButton?: boolean;
   className?: string;
 }
@@ -15,6 +16,7 @@ export function Warning({
   hideKey,
   headerKey,
   bodyKey,
+  bodyComponents,
   showButton = true,
   className = "bg-slate-900 border-blue-800",
 }: WarningProps) {
@@ -66,7 +68,7 @@ export function Warning({
         <img src={tanuki} className="w-15 h-10 mx-0" />
       </div>
       <div className="space-y-3 pb-3 text-s leading-5 text-gray-400">
-        <Trans i18nKey={bodyKey}>
+        <Trans i18nKey={bodyKey} components={bodyComponents}>
           <p />
           <p>{{ rerun: t('viewer.rerun') }}</p>
           <p className="font-semibold leading-6 text-gray-200" />
@@ -75,3 +77,18 @@ export function Warning({
     </div>
   );
 }
+
+export const RiskWarning = () => (
+  <Warning
+    hideKey="hide-warning-risk"
+    headerKey="warnings.gcsim_risk_title"
+    bodyKey="warnings.gcsim_risk_body"
+    bodyComponents={{
+      b: <b />,
+      p: <p className="text-gray-200" />,
+      discordlink: <a href="https://discord.gg/m7jvjdxx7q" target="_blank" rel="noreferrer" />,
+    }}
+    className="bg-red-950 border-red-800"
+    showButton={false}
+  />
+);

ui/packages/db/src/Pages/Database/DBVIew.tsx

@@ -3,7 +3,7 @@ import eula from 'images/eula.png';
 import {useTranslation} from 'react-i18next';
 import InfiniteScroll from 'react-infinite-scroll-component';
 import {ActionBar} from 'SharedComponents/ActionBar';
-import {Warning} from '@gcsim/components';
+import {Warning, RiskWarning} from '@gcsim/components';
 import {ListView} from '../../SharedComponents/ListView';
 
 type Props = {
@@ -17,13 +17,7 @@ export const DBView = (props: Props) => {
   return (
     <div className="flex flex-col gap-4 m-8 my-4 items-center">
       <ActionBar simCount={props.data.length} />
-      <Warning
-        hideKey="hide-warning-risk"
-        headerKey="warnings.gcsim_risk_title"
-        bodyKey="warnings.gcsim_risk_body"
-        className="bg-red-950 border-red-800"
-        showButton={false}
-      />
+      <RiskWarning />
       <Warning
         hideKey="hide-warning-db"
         headerKey="db.readme_header"

ui/packages/localization/src/locales/English.json

@@ -393,8 +393,8 @@
     "dash_data_header": "Total Sprint Delay Due To Cooldown Per Iteration",
     "ignore_burst_energy_title": "\"Ignore Elemental Burst Energy Costs\" Mode Is Enabled",
     "ignore_burst_energy_body": "The simulation is ignoring Elemental Burst energy requirements. This may result in inaccurate simulations.",
-    "gcsim_risk_title": "gcsim's future is at risk",
-    "gcsim_risk_body": "<2>We are looking for volunteers to work on updates.</2> <0>Users willing to learn the codebase to implement and review newer units/mechanics are needed to release updates in a timely manner. We are also looking for active UI developers.</0> <0>Please message on our Discord with potential interest.</0>"
+    "gcsim_risk_title": "gcsim's future is at risk!",
+    "gcsim_risk_body": "<p><b>We are looking for volunteers to work on updates.</b></p> <p>Users willing to learn the codebase to implement and review newer units/mechanics are needed to release updates in a timely manner. We are also looking for active UI developers.</p> <p>Please message on our <discordlink>Discord</discordlink> with potential interest.</p>"
   },
   "states": {
     "true": "true",

ui/packages/ui/src/Pages/Viewer/Viewer.tsx

@@ -15,7 +15,7 @@ import { RootState, useAppSelector } from "@ui/Stores/store";
 import CopyToClipboard from "@ui/Components/Buttons/CopyToClipboard";
 import SendToSimulator from "@ui/Components/Buttons/SendToSimulator";
 import { useTranslation } from "react-i18next";
-import { Warning } from "@gcsim/components";
+import { RiskWarning } from "@gcsim/components";
 
 type ViewerProps = {
   running: boolean;
@@ -63,13 +63,7 @@ export default ({ running, data, hash = "", recoveryConfig, error, src, redirect
   return (
     <div className="flex flex-col flex-grow w-full pb-6">
       <div className="flex flex-col px-2 pt-4 empty:pt-0 2xl:mx-auto items-center justify-center">
-        <Warning
-          hideKey="hide-warning-risk"
-          headerKey="warnings.gcsim_risk_title"
-          bodyKey="warnings.gcsim_risk_body"
-          className="bg-red-950 border-red-800"
-          showButton={false}
-        />
+        <RiskWarning />
       </div>
       <Warnings data={data} />
       <div className="px-2 py-4 w-full 2xl:mx-auto 2xl:container">