feat: update style of image and image-text

Boehringer-Ingelheim · Jan 12, 2021 · d58ce09 · d58ce09
1 parent 26d8a9e
commit d58ce09
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 22 deletions.
diff --git a/src/data/chapter/chapter01.tsx b/src/data/chapter/chapter01.tsx
@@ -30,8 +30,11 @@ export const Section01 = () => {
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.070000`)}</li>
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.080000`)}</li>
       </ul>
-      <IonImg src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)} />
-      <IonText>
+      <IonImg
+        class="ion-padding-vertical"
+        src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
+      />
+      <IonText class="ion-padding-bottom" className="image-text">
         {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.TITLE`)}
       </IonText>
     </IonText>
@@ -53,8 +56,11 @@ export const Section02 = () => {
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.050000`)}</li>
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.060000`)}</li>
       </ul>
-      <IonImg src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)} />
-      <IonText>
+      <IonImg
+        class="ion-padding-vertical"
+        src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
+      />
+      <IonText class="ion-padding-bottom" className="image-text">
         {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.TITLE`)}
       </IonText>
     </IonText>
@@ -75,8 +81,11 @@ export const Section03 = () => {
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.050000`)}</li>
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.060000`)}</li>
       </ul>
-      <IonImg src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)} />
-      <IonText>
+      <IonImg
+        class="ion-padding-vertical"
+        src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
+      />
+      <IonText class="ion-padding-bottom" className="image-text">
         {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.TITLE`)}
       </IonText>
     </IonText>
@@ -106,8 +115,11 @@ export const Section04 = () => {
         </ul>
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.040000`)}</li>
       </ul>
-      <IonImg src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)} />
-      <IonText>
+      <IonImg
+        class="ion-padding-vertical"
+        src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
+      />
+      <IonText class="ion-padding-bottom" className="image-text">
         {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.TITLE`)}
       </IonText>
     </IonText>

diff --git a/src/data/chapter/chapter02.tsx b/src/data/chapter/chapter02.tsx
@@ -16,11 +16,12 @@ export const Section01 = () => {
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.020000`)}</li>
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.030000`)}</li>
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.040000`)}</li>
-        <div className="chapter-image-title">
+        <div>
           <IonImg
+            class="ion-padding-vertical"
             src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
           />
-          <IonText>
+          <IonText class="ion-padding-bottom" className="image-text">
             {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.TITLE`)}
           </IonText>
         </div>
@@ -32,11 +33,12 @@ export const Section01 = () => {
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.070000`)}</li>
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.080000`)}</li>
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.090000`)}</li>
-        <div className="chapter-image-title">
+        <div>
           <IonImg
+            class="ion-padding-vertical"
             src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.02.FILENAME`)}
           />
-          <IonText>
+          <IonText class="ion-padding-bottom" className="image-text">
             {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.02.TITLE`)}
           </IonText>
         </div>
@@ -61,8 +63,11 @@ export const Section02 = () => {
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.060000`)}</li>
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.070000`)}</li>
       </ul>
-      <IonImg src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)} />
-      <IonText>
+      <IonImg
+        class="ion-padding-vertical"
+        src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
+      />
+      <IonText class="ion-padding-bottom" className="image-text">
         {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.TITLE`)}
       </IonText>
     </IonText>
@@ -86,8 +91,11 @@ export const Section03 = () => {
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.080000`)}</li>
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.090000`)}</li>
       </ul>
-      <IonImg src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)} />
-      <IonText>
+      <IonImg
+        class="ion-padding-vertical"
+        src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
+      />
+      <IonText class="ion-padding-bottom" className="image-text">
         {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.TITLE`)}
       </IonText>
     </IonText>
@@ -106,9 +114,10 @@ export const Section04 = () => {
         <li>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.LIST.01.020000`)}</li>
         <div className="chapter-image-title">
           <IonImg
+            class="ion-padding-vertical"
             src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
           />
-          <IonText>
+          <IonText class="ion-padding-bottom" className="image-text">
             {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.TITLE`)}
           </IonText>
         </div>
@@ -122,9 +131,10 @@ export const Section04 = () => {
       <p>{t(`CHAPTER.${CHAPTER_ID}.${sectionId}.TEXT.PARAGRAPH.03`)}</p>
       <div className="chapter-image-title">
         <IonImg
+          class="ion-padding-vertical"
           src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.02.FILENAME`)}
         />
-        <IonText>
+        <IonText class="ion-padding-bottom" className="image-text">
           {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.02.TITLE`)}
         </IonText>
       </div>
@@ -148,9 +158,10 @@ export const Section05 = () => {
       </ul>
       <div className="chapter-image-title">
         <IonImg
+          class="ion-padding-vertical"
           src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
         />
-        <IonText>
+        <IonText class="ion-padding-bottom" className="image-text">
           {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.TITLE`)}
         </IonText>
       </div>
@@ -180,9 +191,10 @@ export const Section06 = () => {
       </ul>
       <div className="chapter-image-title">
         <IonImg
+          class="ion-padding-vertical"
           src={t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.FILENAME`)}
         />
-        <IonText>
+        <IonText class="ion-padding-bottom" className="image-text">
           {t(`CHAPTER.${CHAPTER_ID}.${sectionId}.IMAGE.01.TITLE`)}
         </IonText>
       </div>

diff --git a/src/index.css b/src/index.css
@@ -8,8 +8,9 @@ https://allexperts16.blogspot.com/2018/06/allow-users-to-select-and-copy-text-in
   user-select: text;
 }
 
-.chapter-image-title {
-  color: #00000099;
+.image-title {
+  display: block;
+  font-size: small;
   text-align: center;
 }