Fix header not centering and add text to switches.

TWValues · Jan 27, 2024 · 702c91e · 702c91e
1 parent 0eebc42
commit 702c91e
Showing 1 changed file with 16 additions and 2 deletions.
diff --git a/src/pages/quiz/Result.jsx b/src/pages/quiz/Result.jsx
@@ -129,13 +129,20 @@ const Result = () => {
         headStyle={{
           fontSize: 'x-large',
           textAlign: 'center',
+          paddingLeft: '60px',
         }}
         style={{
           width: '100%',
           fontSize: 'large',
           margin: '5px 10px 5px 10px',
         }}
-        extra={<Switch onChange={(checked) => { setExpandIdeology(checked) }} />}
+        extra={<Switch
+          unCheckedChildren='3'
+          checkedChildren='∞'
+          size='small'
+          onChange={(checked) => { setExpandIdeology(checked) }}
+          style={{ backgroundColor: expandIdeology ? 'crimson' : 'gray' }}
+        />}
       >
         <Row>
           {getTopScores(getIdeologyMatchScores(weights), expandIdeology, 3).map((value, index) => {
@@ -196,13 +203,20 @@ const Result = () => {
         headStyle={{
           fontSize: 'x-large',
           textAlign: 'center',
+          paddingLeft: '60px',
         }}
         style={{
           width: '100%',
           fontSize: 'large',
           margin: '5px 10px 5px 10px',
         }}
-        extra={<Switch onChange={(checked) => { setExpandParty(checked) }} />}
+        extra={<Switch
+          unCheckedChildren='3'
+          checkedChildren='∞'
+          size='small'
+          onChange={(checked) => { setExpandParty(checked) }}
+          style={{ backgroundColor: expandParty ? 'crimson' : 'gray' }}
+        />}
       >
         <Row>
           {getTopScores(getPoliticalPartyMatchScores(weights), expandParty, 3).map((value, index) => (