tweak: Question page style tweaks

package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "metaforecast",
       "version": "2.0.0",
       "license": "MIT",
       "dependencies": {

src/web/questions/components/HistoryChart/InnerChart.tsx

@@ -1,11 +1,20 @@
 import { differenceInDays, format } from "date-fns";
 import {
-    VictoryAxis, VictoryChart, VictoryGroup, VictoryLabel, VictoryLine, VictoryScatter,
-    VictoryTheme, VictoryTooltip, VictoryVoronoiContainer
+  VictoryAxis,
+  VictoryChart,
+  VictoryGroup,
+  VictoryLabel,
+  VictoryLine,
+  VictoryScatter,
+  VictoryTheme,
+  VictoryTooltip,
+  VictoryVoronoiContainer,
 } from "victory";
 
 import { chartColors, ChartData, ChartSeries, height, width } from "./utils";
 
+let dateFormat = "MMM do y"; // "yyyy-MM-dd"
+
 // can't be replaced with React component, VictoryChart requires VictoryGroup elements to be immediate children
 const getVictoryGroup = ({
   data,
@@ -71,12 +80,12 @@ export const InnerChart: React.FC<Props> = ({
                 <VictoryLabel
                   style={[
                     {
-                      fontSize: 18,
+                      fontSize: 16,
                       fill: "black",
                       strokeWidth: 0.05,
                     },
                     {
-                      fontSize: 18,
+                      fontSize: 16,
                       fill: "#777",
                       strokeWidth: 0.05,
                     },
@@ -86,11 +95,11 @@ export const InnerChart: React.FC<Props> = ({
               text={({ datum }) =>
                 `${datum.name}: ${Math.round(datum.y * 100)}%\n${format(
                   datum.x,
-                  "yyyy-MM-dd"
+                  dateFormat
                 )}`
               }
               style={{
-                fontSize: 18, // needs to be set here and not just in labelComponent for text size calculations
+                fontSize: 17, // needs to be set here and not just in labelComponent for text size calculations
                 fontFamily:
                   '"Gill Sans", "Gill Sans MT", "Ser­avek", "Trebuchet MS", sans-serif',
                 // default font family from Victory, need to be specified explicitly for some reason, otherwise text size gets miscalculated
@@ -100,7 +109,7 @@ export const InnerChart: React.FC<Props> = ({
                 fill: "white",
               }}
               cornerRadius={4}
-              flyoutPadding={{ top: 4, bottom: 4, left: 12, right: 12 }}
+              flyoutPadding={{ top: 4, bottom: 4, left: 16, right: 16 }}
             />
           }
           radius={50}
@@ -129,11 +138,11 @@ export const InnerChart: React.FC<Props> = ({
             dx={-38}
             dy={-5}
             angle={-30}
-            style={{ fontSize: 18, fill: "#777" }}
+            style={{ fontSize: 15, fill: "#777" }}
           />
         }
         scale={{ x: "time" }}
-        tickFormat={(t) => format(t, "yyyy-MM-dd")}
+        tickFormat={(t) => format(t, dateFormat)}
       />
       <VictoryAxis
         dependentAxis

src/web/questions/components/IndicatorsTable.tsx

@@ -1,6 +1,8 @@
 import { QuestionFragment } from "../../fragments.generated";
 import {
-    formatIndicatorValue, qualityIndicatorLabels, UsedIndicatorName
+  formatIndicatorValue,
+  qualityIndicatorLabels,
+  UsedIndicatorName,
 } from "./QuestionCard/QuestionFooter";
 import { Stars } from "./Stars";
 

src/web/questions/pages/QuestionPage.tsx

@@ -62,7 +62,7 @@ const LargeQuestionCard: React.FC<{
       </a>
     </h1>
 
-    <div className="flex gap-2 mb-2">
+    <div className="flex gap-2 mb-10">
       <a
         className="text-black no-underline bg-red-300 rounded p-1 px-2 text-xs hover:text-gray-600"
         href={question.url}
@@ -73,7 +73,7 @@ const LargeQuestionCard: React.FC<{
       <Stars num={question.qualityIndicators.stars} />
     </div>
 
-    <div className="mb-8">
+    <div className="mb-10">
       {question.platform.id === "guesstimate" && question.visualization ? (
         <a className="no-underline" href={question.url} target="_blank">
           <img
@@ -96,9 +96,11 @@ const LargeQuestionCard: React.FC<{
           {question.description.replaceAll("---", "")}
         </ReactMarkdown>
       </Section>
-      <Section title="Indicators">
-        <IndicatorsTable question={question} />
-      </Section>
+      <div className="mt-5">
+        <Section title="Indicators">
+          <IndicatorsTable question={question} />
+        </Section>
+      </div>
     </div>
   </Card>
 );