Metaculus · hlbmtc · Nov 27, 2024 · Nov 26, 2024 · Nov 26, 2024 · Nov 26, 2024
diff --git a/front_end/src/app/(main)/questions/[id]/[[...slug]]/page.tsx b/front_end/src/app/(main)/questions/[id]/[[...slug]]/page.tsx
@@ -135,25 +135,6 @@ export default async function IndividualQuestion({
 
   const preselectedGroupQuestionId =
     extractPreselectedGroupQuestionId(searchParams);
-  const t = await getTranslations();
-
-  let typeLabel = t("notebook");
-  if (postData.group_of_questions) {
-    typeLabel = t("group");
-  } else if (postData.conditional) {
-    typeLabel = t("conditional");
-  } else if (postData.question) {
-    typeLabel = t("question");
-  }
-
-  let edit_type = "question";
-  if (postData.group_of_questions) {
-    edit_type = "group";
-  } else if (postData.conditional) {
-    edit_type = "conditional";
-  } else if (postData.notebook) {
-    edit_type = "notebook";
-  }
 
   const allowModifications =
     postData.user_permission === ProjectPermissions.ADMIN ||
@@ -171,23 +152,10 @@ export default async function IndividualQuestion({
         ) : (
           <Header />
         )}
-        <main className="mx-auto flex w-full max-w-max flex-col scroll-smooth py-4">
-          <div className="hidden gap-3 lg:flex">
-            <span className="bg-blue-400 px-1.5 py-1 text-sm font-bold uppercase text-blue-700 dark:bg-blue-400-dark dark:text-blue-700-dark">
-              {typeLabel}
-            </span>
-            {allowModifications && (
-              <a
-                className="bg-blue-400 px-1.5 py-1 text-sm font-bold uppercase text-blue-700 no-underline dark:bg-blue-400-dark dark:text-blue-700-dark"
-                href={`/questions/create/${edit_type}?post_id=${postData.id}`}
-              >
-                {t("edit")}
-              </a>
-            )}
-          </div>
+        <main className="mx-auto flex w-full max-w-max flex-col scroll-smooth py-4 md:py-10">
           <div className="flex gap-4">
             <div className="flex w-full flex-col gap-4">
-              <section className="w-[48rem] max-w-full border-transparent bg-gray-0 px-3 text-gray-900 after:mt-6 after:block after:w-full after:content-[''] dark:border-blue-200-dark dark:bg-gray-0-dark dark:text-gray-900-dark xs:px-4 lg:border">
+              <section className="w-[48rem] max-w-full rounded border-transparent bg-gray-0 px-3 text-gray-900 after:mt-6 after:block after:w-full after:content-[''] dark:border-blue-200-dark dark:bg-gray-0-dark dark:text-gray-900-dark xs:px-4 lg:border">
                 <PostHeader post={postData} questionTitle={questionTitle} />
                 {!postData.conditional && (
                   <div className="mt-2 flex justify-between gap-2 xs:gap-4 sm:gap-8 lg:mb-2 lg:mt-4">
@@ -251,16 +219,17 @@ export default async function IndividualQuestion({
                     preselectedQuestionId={preselectedGroupQuestionId}
                   />
                 )}
-
-                <BackgroundInfo post={postData} />
-                <HistogramDrawer post={postData} />
-                <Sidebar
-                  postData={postData}
-                  allowModifications={allowModifications}
-                  layout="mobile"
-                  questionTitle={questionTitle}
-                />
+                <div className="flex flex-col gap-2.5">
+                  <BackgroundInfo post={postData} />
+                  <HistogramDrawer post={postData} />
+                </div>
               </section>
+              <Sidebar
+                postData={postData}
+                allowModifications={allowModifications}
+                layout="mobile"
+                questionTitle={questionTitle}
+              />
               <CommentFeed
                 postData={postData}
                 postPermissions={postData.user_permission}

diff --git a/front_end/src/app/(main)/questions/[id]/components/forecast_maker/container.tsx b/front_end/src/app/(main)/questions/[id]/components/forecast_maker/container.tsx
@@ -21,13 +21,11 @@ const ForecastMakerContainer: FC<PropsWithChildren<Props>> = ({
     <section
       id="prediction-section"
       className={classNames(
-        "my-4 bg-blue-200 p-3 dark:bg-blue-200-dark",
+        "my-4 rounded bg-blue-200 p-3 dark:bg-blue-200-dark",
         className
       )}
     >
-      <h3 className="m-0 text-base font-normal leading-5">
-        {t("makePrediction")}
-      </h3>
+      <h3 className="m-0 text-base font-normal">{t("makePrediction")}</h3>
       <div className="mt-3">{children}</div>
       {resolutionCriteria.map((criteria, index) => (
         <ResolutionCriteria key={index} {...criteria} />

diff --git a/front_end/src/app/(main)/questions/[id]/components/post_header.tsx b/front_end/src/app/(main)/questions/[id]/components/post_header.tsx
@@ -5,7 +5,8 @@ import { useRouter } from "next/navigation";
 import { useLocale, useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
 
-import { SharePostMenu, PostDropdownMenu } from "@/components/post_actions/";
+import { useContentTranslatedBannerProvider } from "@/app/providers";
+import { PostDropdownMenu, SharePostMenu } from "@/components/post_actions/";
 import Button from "@/components/ui/button";
 import {
   PostStatus,
@@ -17,7 +18,6 @@ import { TournamentType } from "@/types/projects";
 import PostApprovalModal from "./post_approval_modal";
 import PostSubscribeButton from "./subscribe_button";
 import { draftPost, submitPostForReview } from "../../actions";
-import { useContentTranslatedBannerProvider } from "@/app/providers";
 
 export default function PostHeader({
   post,
@@ -83,31 +83,18 @@ export default function PostHeader({
 
   return (
     <div className="flex flex-col">
-      <div className="flex flex-row gap-3 pt-3 lg:hidden lg:pt-0">
+      <div className="flex flex-row gap-3 pt-4">
         <span className="bg-blue-400 px-1.5 py-1 text-sm font-bold uppercase text-blue-700 dark:bg-blue-400-dark dark:text-blue-700-dark">
           {typeLabel}
         </span>
         {allowModifications && (
           <>
-            <Button
+            <Link
+              className="bg-blue-400 px-1.5 py-1 text-sm font-bold uppercase text-blue-700 no-underline dark:bg-blue-400-dark dark:text-blue-700-dark"
               href={`/questions/create/${edit_type}?post_id=${post.id}`}
-              className="h-7"
             >
               {t("edit")}
-            </Button>
-            {post.curation_status === PostStatus.APPROVED &&
-            [ProjectPermissions.CURATOR, ProjectPermissions.ADMIN].includes(
-              post.user_permission
-            ) &&
-            post.forecasts_count! < 1 ? (
-              <Button
-                 () => {
-                  setIsApprovalModalOpen(true);
-                }}
-              >
-                {t("editOpenAndCpRevealTimes")}
-              </Button>
-            ) : null}
+            </Link>
           </>
         )}
         {!post.notebook && (

diff --git a/front_end/src/app/(main)/questions/[id]/components/sidebar/index.tsx b/front_end/src/app/(main)/questions/[id]/components/sidebar/index.tsx
@@ -1,4 +1,5 @@
-import { FC, Suspense } from "react";
+import { usePathname } from "next/navigation";
+import React, { FC, Suspense } from "react";
 
 import PostSubscribeButton from "@/app/(main)/questions/[id]/components/subscribe_button";
 import { PostDropdownMenu, SharePostMenu } from "@/components/post_actions";
@@ -10,6 +11,14 @@ import SidebarQuestionTags from "./sidebar_question_tags";
 import SimilarQuestions from "./similar_questions";
 import QuestionEmbedButton from "../question_embed_button";
 
+function SidebarContainer({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="self-stretch rounded bg-gray-0 px-3 py-4 @container dark:bg-gray-0-dark xs:px-5">
+      {children}
+    </div>
+  );
+}
+
 type Props = {
   postData: PostWithForecasts;
   allowModifications: boolean;
@@ -25,23 +34,22 @@ const Sidebar: FC<Props> = ({
 }) => {
   if (layout === "mobile") {
     return (
-      <section className="lg:hidden">
-        <hr className="my-4 border-blue-400 dark:border-blue-400-dark" />
-        <div className="flex flex-col items-start gap-4 self-stretch @container">
+      <section className="flex flex-col gap-4 lg:hidden">
+        <SidebarContainer>
           <SidebarQuestionInfo postData={postData} />
+        </SidebarContainer>
+        <SidebarContainer>
           <SidebarQuestionTag
9E88
s
             postId={postData.id}
             tagData={postData.projects}
             allowModifications={allowModifications}
           />
-        </div>
+        </SidebarContainer>
 
         {postData.curation_status === PostStatus.APPROVED && (
           <>
             <Suspense fallback={null}>
-              <div className="flex w-full flex-col items-start gap-4 self-stretch">
-                <NewsMatch questionId={postData.id} />
-              </div>
+              <NewsMatch questionId={postData.id} />
             </Suspense>
 
             <Suspense fallback={null}>
@@ -54,34 +62,36 @@ const Sidebar: FC<Props> = ({
   }
 
   return (
-    <section className="hidden h-fit w-80 shrink-0 border border-transparent bg-gray-0 p-4 text-gray-700 dark:border-blue-200-dark dark:bg-gray-0-dark dark:text-gray-700-dark lg:block">
-      <div className="mb-4 flex w-full items-center justify-between gap-2 border-b border-gray-300 pb-4 dark:border-gray-300-dark">
-        <div className="flex gap-1">
-          {postData.curation_status == PostStatus.APPROVED && (
-            <PostSubscribeButton post={postData} />
-          )}
-          <QuestionEmbedButton />
-        </div>
+    <section className="hidden h-fit w-80 shrink-0 flex-col gap-3 text-gray-700 dark:text-gray-700-dark lg:flex">
+      <SidebarContainer>
+        <div className="mb-5 flex w-full items-center justify-between gap-2">
+          <div className="flex gap-1">
+            {postData.curation_status == PostStatus.APPROVED && (
+              <PostSubscribeButton post={postData} />
+            )}
+            <QuestionEmbedButton />
+          </div>
 
-        <div className="flex gap-2">
-          <SharePostMenu
-            questionTitle={questionTitle}
-            questionId={postData.id}
-          />
-          <PostDropdownMenu post={postData} />
+          <div className="flex gap-2">
+            <SharePostMenu
+              questionTitle={questionTitle}
+              questionId={postData.id}
+            />
+            <PostDropdownMenu post={postData} />
+          </div>
         </div>
-      </div>
-
-      <div className="flex flex-col items-start gap-4 self-stretch @container">
         <div className="w-full">
           <SidebarQuestionInfo postData={postData} />
         </div>
+      </SidebarContainer>
+
+      <SidebarContainer>
         <SidebarQuestionTags
           postId={postData.id}
           tagData={postData.projects}
           allowModifications={allowModifications}
         />
-      </div>
+      </SidebarContainer>
 
       {postData.curation_status === PostStatus.APPROVED && (
         <>

diff --git a/front_end/src/app/(main)/questions/[id]/components/sidebar/news_match/news_match_drawer.tsx b/front_end/src/app/(main)/questions/[id]/components/sidebar/news_match/news_match_drawer.tsx
@@ -21,35 +21,39 @@ const NewsMatchDrawer: FC<Props> = ({ questionId, articles }) => {
 
   return (
     <div className="w-full @container">
-      <SectionToggle defaultOpen title={t("newsMatch")}>
-        {articles.slice(0, articleDisplayLimit).map((article: NewsArticle) => (
-          <NewsMatchArticle
-            key={article.id}
-            article={article}
-            questionId={questionId}
-          />
-        ))}
-        <div className="flex flex-col items-center justify-between @md:flex-row">
-          {articles.length > articleDisplayLimit && (
-            <Button
-              variant="tertiary"
-              className="mb-4"
-               => setArticleDisplayLimit((prev) => prev + 5)}
-            >
-              {t("showMoreNews")}
-            </Button>
-          )}
-          <div className="size-fit pr-2 text-sm leading-4 text-gray-900 dark:text-gray-900-dark">
-            {t.rich("learnMoreAboutNewsMatch", {
-              link: (chunks) => (
-                <Link
-                  href="/faq/#related-news"
-                  className="text-blue-700 dark:text-blue-700-dark"
-                >
-                  {chunks}
-                </Link>
-              ),
-            })}
+      <SectionToggle defaultOpen title={t("newsMatch")} variant="light">
+        <div className="pt-1">
+          {articles
+            .slice(0, articleDisplayLimit)
+            .map((article: NewsArticle) => (
+              <NewsMatchArticle
+                key={article.id}
+                article={article}
+                questionId={questionId}
+              />
+            ))}
+          <div className="flex flex-col items-center justify-between hover:text-blue-700 @md:flex-row">
+            {articles.length > articleDisplayLimit && (
+              <Button
+                variant="tertiary"
+                className="mb-4"
+                 => setArticleDisplayLimit((prev) => prev + 5)}
+              >
+                {t("showMoreNews")}
+              </Button>
+            )}
+            <div className="size-fit text-sm text-gray-900 dark:text-gray-900-dark">
+              {t.rich("learnMoreAboutNewsMatch", {
+                link: (chunks) => (
+                  <Link
+                    href="/faq/#related-news"
+                    className="text-blue-700 dark:text-blue-700-dark"
+                  >
+                    {chunks}
+                  </Link>
+                ),
+              })}
+            </div>
           </div>
         </div>
       </SectionToggle>

diff --git a/front_end/src/app/(main)/questions/[id]/components/sidebar/sidebar_question_tags.tsx b/front_end/src/app/(main)/questions/[id]/components/sidebar/sidebar_question_tags.tsx
@@ -52,8 +52,8 @@ const SidebarQuestionTags: FC<Props> = ({
   const router = useRouter();
 
   return (
-    <div className="flex flex-col items-center justify-center gap-4 self-stretch border-t border-gray-300 @lg:border-0 dark:border-gray-300-dark">
-      <div className="mt-4 flex flex-wrap content-start items-start gap-2.5 self-stretch @lg:m-0">
+    <div className="flex flex-col items-center justify-center gap-4 self-stretch">
+      <div className="flex flex-wrap content-start items-start gap-2.5 self-stretch @lg:m-0">
         {tournament.map((element) => (
           <Chip
             color="orange"

diff --git a/...p/(main)/questions/[id]/components/sidebar/similar_questions/similar_questions_drawer.tsx b/...p/(main)/questions/[id]/components/sidebar/similar_questions/similar_questions_drawer.tsx
@@ -19,7 +19,7 @@ const SimilarQuestionsDrawer: FC<Props> = ({ questions }) => {
 
   return (
     <div className="w-full @container">
-      <SectionToggle defaultOpen title={t("similarQuestions")}>
+      <SectionToggle defaultOpen title={t("similarQuestions")} variant="light">
         <div className="flex flex-col items-center justify-center gap-2">
           {questions
             .slice(0, questionsDisplayLimit)

diff --git a/front_end/src/components/comment_feed/index.tsx b/front_end/src/components/comment_feed/index.tsx
@@ -305,7 +305,7 @@ const CommentFeed: FC<Props> = ({
       <section
         id={id}
         className={classNames(
-          "max-w-full text-gray-900 dark:text-gray-900-dark",
+          "max-w-full rounded text-gray-900 dark:text-gray-900-dark",
           {
             "mt-6 w-full px-0 md:px-3": inNotebook,
           },

diff --git a/front_end/src/components/ui/expandable_content.tsx b/front_end/src/components/ui/expandable_content.tsx
@@ -20,7 +20,7 @@ const ExpandableContent: FC<PropsWithChildren<Props>> = ({
   expandLabel: _expandLabel,
   collapseLabel: _collapseLabel,
   maxCollapsedHeight = 128,
-  gradientClassName = "from-gray-0 dark:from-gray-0-dark",
+  gradientClassName = "from-blue-200 dark:from-blue-200-dark",
   className,
   children,
 }) => {