Add link to preview to sideblade

flathub-infra · Jan 23, 2025 · 3dc605a · 3dc605a
1 parent c483c36
commit 3dc605a
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 3 deletions.
diff --git a/frontend/pages/apps/[appId]/bannerpreview.tsx b/frontend/pages/apps/[appId]/bannerpreview.tsx
@@ -35,14 +35,17 @@ export default function Details({
   return (
     <>
       <NextSeo
-        title={`${app?.name} banner preview`}
+        title={`${app?.name} ${t("quality.banner-preview")}`}
         nofollow={true}
         noindex={true}
       />
 
       <div className="max-w-11/12 mx-auto my-0 mt-4 w-11/12 flex flex-col gap-y-10 2xl:w-[1400px] 2xl:max-w-[1400px] pb-5">
         <div className="flex flex-wrap">
           <div>
+            <h1 className="mt-2 mb-4 text-4xl font-extrabold">
+              {t("quality.banner-preview")}
+            </h1>
             <Trans i18nKey={"common:quality.banner-preview-description"}>
               To easily experiment with your banner, use{" "}
               <a href="https://docs.flathub.org/banner-preview/">

diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
@@ -574,6 +574,7 @@
   "you-may-or-may-not-be-able-to-contribute": "You may or may not be able to contribute to this app.",
   "quality": {
     "missing-brand-colors": "Missing brand colors",
+    "banner-preview": "Banner preview",
     "banner-preview-description": "To easily experiment with your banner, use <2>the banner preview</2>"
   },
   "platform": {
@@ -633,4 +634,4 @@
     "hide-branding-preview": "Hide branding preview",
     "show-branding-preview": "Show branding preview"
   }
-}
+}
diff --git a/frontend/src/components/application/QualityModerationSlideOver.tsx b/frontend/src/components/application/QualityModerationSlideOver.tsx
@@ -42,6 +42,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
+import Link from "next/link"
 
 const ShowIconButton = ({ app }: { app: Pick<DesktopAppstream, "icon"> }) => {
   const { t } = useTranslation()
@@ -298,6 +299,16 @@ https://flathub.org/apps/details/${app.id}
         </div>
       )}
 
+      <Button className="w-fit" variant="outline" asChild>
+        <Link
+          target="_blank"
+          rel="noreferrer"
+          className="text-secondary-foreground"
+          href={`${app.id}/bannerpreview`}
+        >
+          {t("quality.banner-preview")}
+        </Link>
+      </Button>
       <div>
         <Trans i18nKey={"quality-guideline.problems"}>
           If you would like to ask us about specific quality guideline problems,

diff --git a/frontend/styles/main.scss b/frontend/styles/main.scss
@@ -163,7 +163,7 @@
   --muted: var(--flathub-arsenic);
   --muted-foreground: 0 0% 63.9%;
 
-  --accent: var(--flathub-arsenic);
+  --accent: var(--flathub-granite-gray);
   --accent-foreground: var(--flathub-lotion);
 
   --destructive: var(--flathub-vivid-crimson);