fix: adjust font sizes to improve mobile UX

geops · Jul 7, 2020 · 4e21953 · 4e21953
1 parent 2820b27
commit 4e21953
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 26 deletions.
diff --git a/src/components/ProjectionTab.js b/src/components/ProjectionTab.js
@@ -7,6 +7,8 @@ import { list } from 'lib/src';
 
 import TreeTypeList from './TreeTypeList';
 
+import styles from './ProjectionTab.module.css';
+
 function ProjectionTab({ location }) {
   const [one, two, three] = useMemo(() => list(location), [location]);
   const { t } = useTranslation();
@@ -15,32 +17,26 @@ function ProjectionTab({ location }) {
       <Grid columns={2} padded verticalAlign="middle">
         <Grid.Row>
           <Grid.Column>
-            <Header inverted as="h5">
-              {t('projection.treeTypesOne')}
-            </Header>
+            <Header inverted>{t('projection.treeTypesOne')}</Header>
           </Grid.Column>
           <Grid.Column>
-            <TreeTypeList codes={one} />
+            <TreeTypeList codes={one} className={styles.medium} />
           </Grid.Column>
         </Grid.Row>
         <Grid.Row>
           <Grid.Column>
-            <Header inverted as="h5">
-              {t('projection.treeTypesTwo')}
-            </Header>
+            <Header inverted>{t('projection.treeTypesTwo')}</Header>
           </Grid.Column>
           <Grid.Column>
-            <TreeTypeList codes={two} />
+            <TreeTypeList codes={two} className={styles.medium} />
           </Grid.Column>
         </Grid.Row>
         <Grid.Row>
           <Grid.Column>
-            <Header inverted as="h5">
-              {t('projection.treeTypesThree')}
-            </Header>
+            <Header inverted>{t('projection.treeTypesThree')}</Header>
           </Grid.Column>
           <Grid.Column>
-            <TreeTypeList codes={three} />
+            <TreeTypeList codes={three} className={styles.medium} />
           </Grid.Column>
         </Grid.Row>
       </Grid>

diff --git a/src/components/Recommendation.js b/src/components/Recommendation.js
@@ -70,7 +70,7 @@ function Recommendation({ sameAltitudinalZone }) {
                 <TreeTypeList className={styles.bold} codes={r[0]} />{' '}
                 <TreeTypeList codes={r[1]} />
               </div>
-              <div className={styles.yellow}>
+              <div className={`${styles.medium} ${styles.yellow}`}>
                 <TreeTypeList className={styles.bold} codes={r[2]} />{' '}
                 <TreeTypeList codes={r[3]} />
               </div>
@@ -86,11 +86,11 @@ function Recommendation({ sameAltitudinalZone }) {
               </HelpModal>
             </Grid.Column>
             <Grid.Column width={11}>
-              <div className={styles.centered}>
+              <div className={styles.medium}>
                 <TreeTypeList className={styles.bold} codes={r[4]} />{' '}
                 <TreeTypeList codes={r[5]} />
               </div>
-              <div className={`${styles.small} ${styles.yellow}`}>
+              <div className={styles.yellow}>
                 <TreeTypeList className={styles.bold} codes={r[6]} />{' '}
                 <TreeTypeList codes={r[7]} />
               </div>
@@ -106,15 +106,13 @@ function Recommendation({ sameAltitudinalZone }) {
               </HelpModal>
             </Grid.Column>
             <Grid.Column width={11}>
-              <div className={styles.small}>
-                <TreeTypeList className={styles.bold} codes={r[8]} />
-              </div>
+              <TreeTypeList className={styles.bold} codes={r[8]} />
             </Grid.Column>
           </Grid.Row>
           {r[9].length > 0 ||
             (r[10].length > 0 && (
-              <Grid.Row>
-                <Grid.Column textAlign="center" width={4}>
+              <Grid.Row centered>
+                <Grid.Column textAlign="center" width={4} tablet={2} mobile={2}>
                   <AttentionIcon fill="white" className={styles.icon} />
                 </Grid.Column>
                 <Grid.Column width={1}>
@@ -132,9 +130,11 @@ function Recommendation({ sameAltitudinalZone }) {
                   </HelpModal>
                 </Grid.Column>
                 <Grid.Column width={11}>
-                  <TreeTypeList className={styles.bold} codes={r[9]} />
-                  <div className={styles.yellow}>
-                    <TreeTypeList className={styles.bold} codes={r[10]} />
+                  <div className={styles.medium}>
+                    <TreeTypeList className={styles.bold} codes={r[9]} />
+                    <div className={styles.yellow}>
+                      <TreeTypeList className={styles.bold} codes={r[10]} />
+                    </div>
                   </div>
                 </Grid.Column>
               </Grid.Row>

diff --git a/src/components/Recommendation.module.css b/src/components/Recommendation.module.css
@@ -10,11 +10,11 @@
 }
 
 .large {
-  font-size: 1.5em;
+  font-size: 1.6em;
   line-height: 1.4em;
 }
-.small {
-  font-size: 0.9em;
+.medium {
+  font-size: 1.3em;
   line-height: 1.4em;
 }
 .bold {