feat: move private badge into an tournament image block

Metaculus · Feb 27, 2025 · 5aaf877 · 5aaf877
1 parent 20c2fbb
commit 5aaf877
Showing 1 changed file with 17 additions and 16 deletions.
diff --git a/front_end/src/app/(main)/(tournaments)/tournament/[slug]/page.tsx b/front_end/src/app/(main)/(tournaments)/tournament/[slug]/page.tsx
@@ -81,12 +81,19 @@ export default async function TournamentSlug({ params }: Props) {
               "absolute z-10 flex h-6 w-full flex-wrap items-center justify-between gap-2.5 bg-transparent p-[10px] text-[20px] uppercase text-gray-100 dark:text-gray-100-dark"
             )}
           >
-            <Link
-              href={"/tournaments"}
-              className="block bg-black/30 px-1.5 py-1 text-xs font-bold leading-4 text-gray-0 no-underline hover:text-gray-400 dark:hover:text-gray-400-dark"
-            >
-              {title}
-            </Link>
+            <div className="flex items-center gap-2">
+              <Link
+                href={"/tournaments"}
+                className="block rounded-sm bg-black/30 px-1.5 py-1 text-xs font-bold leading-4 text-gray-0 no-underline hover:text-gray-400 dark:hover:text-gray-400-dark"
+              >
+                {title}
+              </Link>
+              {tournament.default_permission === null && (
+                <strong className="block rounded-sm bg-black/30 px-1.5 py-1 text-xs font-bold uppercase leading-4 text-gray-0">
+                  {t("private")}
+                </strong>
+              )}
+            </div>
             <TournamentDropdownMenu tournament={tournament} />
           </div>
           {!!tournament.header_image && (
@@ -102,16 +109,10 @@ export default async function TournamentSlug({ params }: Props) {
         </div>
         <div className="px-4 pb-5 pt-4 sm:p-8">
           <div className="flex items-start justify-between gap-1 sm:gap-4">
-            <div className="flex flex-row items-center">
-              <h1 className="m-0 text-xl text-blue-800 dark:text-blue-800-dark md:text-2xl lg:text-3xl xl:text-4xl">
-                {tournament.name}
-              </h1>
-              {tournament.default_permission === null && (
-                <strong className="self-start rounded-sm bg-blue-300 px-1 text-sm uppercase text-gray-900 dark:bg-blue-300-dark dark:text-gray-900-dark">
-                  {t("private")}
-                </strong>
-              )}
-            </div>
+            <h1 className="m-0 text-xl text-blue-800 dark:text-blue-800-dark md:text-2xl lg:text-3xl xl:text-4xl">
+              {tournament.name}
+            </h1>
+
             <div>
               <TournamentSubscribeButton
                 user={currentUser}