WIP

iFixit · Feb 8, 2024 · 451fecc · 451fecc
1 parent 4cc92d1
commit 451fecc
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/Answers.tsx b/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/Answers.tsx
@@ -6,7 +6,6 @@ export function Answers({
    answers,
    allAnswersUrl,
    allAnswersCount,
-   hasProblems,
 }: TroubleshootingAnswersData & { hasProblems: boolean }) {
    const answersData = answers.slice(0, 8); // design calls for 8
 
@@ -15,7 +14,7 @@ export function Answers({
          <Stack className="answers" spacing={4}>
             <Stack spacing={2} pt={6}>
                <Heading
-                  as={hasProblems ? 'h4' : 'h3'}
+                  as="h2"
                   color="gray.800"
                   fontSize={{ base: '20px', mdPlus: '24px' }}
                   fontWeight="medium"

diff --git a/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/ProblemCard.tsx b/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/ProblemCard.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
    Box,
    Flex,
+   Heading,
    HStack,
    Image,
    LinkBox,
@@ -22,6 +23,7 @@ export function ProblemCard({
    problemTypeIcon,
    altText,
    badges,
+   hasAnswers,
 }: any) {
    return (
       <LinkBox
@@ -61,9 +63,14 @@ export function ProblemCard({
             <Stack className="content" spacing={4} flex="auto">
                <Stack className="title" spacing={1.5} flex="1">
                   <LinkOverlay href={problemUrl}>
-                     <Text fontWeight="semibold" noOfLines={3}>
+                     <Heading
+                        as={hasAnswers ? 'h3' : 'h4'}
+                        fontSize="inherit"
+                        fontWeight="semibold"
+                        noOfLines={3}
+                     >
                         {problemTitle}
-                     </Text>
+                     </Heading>
                   </LinkOverlay>
                   <Text color="gray.600" fontSize="sm" noOfLines={3}>
                      {description}

diff --git a/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingProblems.tsx b/frontend/app/(defaultLayout)/Troubleshooting/[device]/components/troubleshootingProblems.tsx
@@ -24,6 +24,7 @@ export default function TroubleshootingProblems({
 }: TroubleshootingProblemsApiData) {
    const problemsData = problems.slice(0, 10); // Design calls for 10
    const hasProblems = problemsData.length > 0;
+   const hasAnswers = answers.length > 0;
    const problemsDataGroups: Record<string, Problems[]> = groupBy(
       problemsData,
       'deviceTitle'
@@ -53,7 +54,7 @@ export default function TroubleshootingProblems({
                         <>
                            <Stack className="header" spacing={2}>
                               <Heading
-                                 as="h2"
+                                 as="h1"
                                  color="gray.800"
                                  fontSize={{ base: '24px', sm: '30px' }}
                                  fontWeight="medium"
@@ -95,6 +96,7 @@ export default function TroubleshootingProblems({
                                        deviceTitle={problem.deviceTitle}
                                        description={problem.description}
                                        altText={problem.altText}
+                                       hasAnswers={hasAnswers}
                                     />
                                  )
                               )}
@@ -103,7 +105,7 @@ export default function TroubleshootingProblems({
                      );
                   }
                )}
-               {answers.length > 0 && (
+               {hasAnswers && (
                   <Answers
                      answers={answers}
                      allAnswersUrl={allAnswersUrl}