chore: longevity imrpovements p5

src/components/Modal/Modal.tsx

@@ -142,7 +142,7 @@ const Modal: FC<ModalProps> = ({
               </div>
               <div className={`${styles.lineWrapper} ${styles.leftWrapper}`}>
                 <Image
-                  src="/assets/close-left-line.svg"
+                  src="/keepsimple_/assets/close-left-line.svg"
                   alt="close left line"
                   width={24}
                   height={24}

src/components/longevity/DietResults/DietResults.module.scss

@@ -16,7 +16,7 @@
     position: relative;
     width: 120px;
     height: 120px;
-    opacity: 75%;
+    opacity: 60%;
     cursor: pointer;
 
     &.active {

src/components/longevity/FlipCard/FlipCard.module.scss

@@ -1,24 +1,36 @@
 .flipCard {
-  background-image: url('/keepsimple_/assets/longevity/study/flipped-card-bg.png');
+  background-image: url('/keepsimple_/assets/longevity/study/study-flip-card-bg.webp');
   background-size: cover;
   background-repeat: no-repeat;
   max-width: 948px;
-  padding: 28px 103px;
-  height: 550px;
+  height: 531px;
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
+  margin-bottom: 30px;
+  padding: 10px;
+
+  .pageSwitcherFlip {
+    position: absolute;
+    bottom: 120px;
+    right: 5px;
+    left: 93%;
+    z-index: 55;
+    cursor: pointer;
+  }
 
   .headline {
-    padding-bottom: 16px;
+    padding-bottom: 12px;
+    justify-content: center !important;
+    padding-top: 20px;
 
     h4 {
       color: #ce2128 !important;
       text-transform: uppercase;
       font-family: Aboreto-Regular, sans-serif !important;
-      font-size: 24px !important;
+      font-size: 20px !important;
     }
   }
 
@@ -36,9 +48,9 @@
     flex-direction: column;
 
     .chartTitle {
-      padding: 40px 0 32px 0;
+      padding: 16px 0;
       line-height: 1;
-      font-size: 20px;
+      font-size: 16px;
       font-weight: 600;
     }
 
@@ -71,7 +83,6 @@
   }
 
   .divider {
-    padding: 35px 0 28px 0;
   }
 }
 

src/components/longevity/FlipCard/FlipCard.tsx

@@ -16,13 +16,23 @@ const FlipCard: FC<FlipCardProps> = ({
   hacksQuote,
   quoteAuthor,
   isHacks,
+  setSwitchPage,
+  switchPage,
 }) => {
   return (
     <div
       className={cn(styles.flipCard, {
         [styles.hacksFlipCard]: isHacks,
       })}
     >
+      <Image
+        src={'/keepsimple_/assets/longevity/study/page-switcher-back.svg'}
+        alt={'Page switcher'}
+        width={60}
+        height={60}
+        className={styles.pageSwitcherFlip}
+        onClick={() => setSwitchPage && setSwitchPage(!switchPage)}
+      />
       {isHacks ? (
         <div>
           <div

src/components/longevity/FlipCard/FlipCard.types.ts

@@ -7,4 +7,6 @@ export type FlipCardProps = {
   isHacks?: boolean;
   hacksQuote?: string;
   quoteAuthor?: string;
+  setSwitchPage?: (value: boolean) => void;
+  switchPage?: boolean;
 };

src/components/longevity/Hero/Hero.module.scss

@@ -24,11 +24,12 @@
     margin-top: 55px;
 
     h1 {
-      font-size: 36px;
+      width: 290px;
+      font-size: 24px !important;
     }
 
     h2 {
-      font-size: 16px;
+      font-size: 16px !important;
     }
   }
 }

src/components/longevity/Hero/Hero.tsx

@@ -11,6 +11,7 @@ const Hero: FC = ({}) => {
         Tag={'h2'}
         showRightIcon={false}
         showLeftIcon={false}
+        className={styles.author}
       />
     </section>
   );

src/components/longevity/LongevitySubSection/LongevitySubSection.tsx

@@ -1,11 +1,14 @@
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import Image from 'next/image';
 import cn from 'classnames';
 import { Tooltip as ReactTooltip } from 'react-tooltip';
 
 import WhyDoThisTooltip from '@components/longevity/WhyDoThisTooltip';
+import Modal from '@components/Modal';
 import Heading from '@components/Heading';
 
+import { useIsWidthLessThan } from '@hooks/useScreenSize';
+
 import longevityData from '@data/longevity';
 
 import { LongevitySubSectionProps } from './LongevitySubSection.types';
@@ -23,61 +26,83 @@ const LongevitySubSection: FC<LongevitySubSectionProps> = ({
   isHacks,
 }) => {
   const { habitTooltipTitle } = longevityData[locale];
-
+  const isMobile = useIsWidthLessThan(956);
+  const [openMobileModal, setOpenMobileModal] = useState(false);
   return (
-    <section className={styles.subSection}>
-      <div className={styles.headline}>
-        <Image
-          src={headlineBackgroundImageUrl}
-          alt={title}
-          width={948}
-          height={67}
-          className={styles.backgroundImg}
-        />
-        <Heading
-          isBold
-          text={title}
-          Tag="h3"
-          showLeftIcon={false}
-          showRightIcon={false}
-          className={cn(styles.heading, {
-            [styles.hacksHeading]: isHacks,
+    <>
+      <section className={styles.subSection}>
+        <div className={styles.headline}>
+          <Image
+            src={headlineBackgroundImageUrl}
+            alt={title}
+            width={948}
+            height={67}
+            className={styles.backgroundImg}
+          />
+          <Heading
+            isBold
+            text={title}
+            Tag="h3"
+            showLeftIcon={false}
+            showRightIcon={false}
+            className={cn(styles.heading, {
+              [styles.hacksHeading]: isHacks,
+            })}
+          />
+          {whatDamages && (
+            <span
+              className={styles.habitTooltip}
+              data-tooltip-id={title}
+              onClick={() => {
+                if (isMobile) {
+                  setOpenMobileModal(true);
+                }
+              }}
+            >
+              {habitTooltipTitle}
+            </span>
+          )}
+          {date && <div className={styles.dateTxt}>{date}</div>}
+          {whatDamages && !isMobile && (
+            <ReactTooltip
+              opacity={1}
+              id={title}
+              place={'bottom'}
+              className={cn(styles.tooltip, {})}
+            >
+              <WhyDoThisTooltip whatDamagesText={whatDamages} locale={locale} />
+            </ReactTooltip>
+          )}
+        </div>
+        <div
+          className={cn(styles.mainContent, {
+            [styles.withDate]: date,
           })}
-        />
-        {whatDamages && (
-          <span className={styles.habitTooltip} data-tooltip-id={title}>
-            {habitTooltipTitle}
-          </span>
-        )}
-        {date && <div className={styles.dateTxt}>{date}</div>}
-        {whatDamages && (
-          <ReactTooltip
-            opacity={1}
-            id={title}
-            place={'bottom'}
-            className={cn(styles.tooltip, {})}
-          >
-            <WhyDoThisTooltip whatDamagesText={whatDamages} locale={locale} />
-          </ReactTooltip>
-        )}
-      </div>
-      <div
-        className={cn(styles.mainContent, {
-          [styles.withDate]: date,
-        })}
-      >
-        {date && <div className={styles.dateTxtMobile}>{date}</div>}
+        >
+          {date && <div className={styles.dateTxtMobile}>{date}</div>}
 
-        {description ? (
-          <div
-            dangerouslySetInnerHTML={{ __html: description || '' }}
-            className={styles.content}
-          />
-        ) : (
-          <div>{children}</div>
-        )}
-      </div>
-    </section>
+          {description ? (
+            <div
+              dangerouslySetInnerHTML={{ __html: description || '' }}
+              className={styles.content}
+            />
+          ) : (
+            <div>{children}</div>
+          )}
+        </div>
+      </section>
+      {isMobile && openMobileModal && (
+        <Modal
+          size={'full'}
+          backgroundImageUrl={
+            '/keepsimple_/assets/longevity/habits/damage-type-mobile.bg.webp'
+          }
+          onClick={() => setOpenMobileModal(false)}
+        >
+          <WhyDoThisTooltip whatDamagesText={whatDamages} locale={locale} />
+        </Modal>
+      )}
+    </>
   );
 };
 

src/components/longevity/MobileNavigation/MobileNavigation.module.scss

@@ -8,7 +8,7 @@
     background-image: url('/keepsimple_/assets/longevity/nav-hover-bg.png');
     color: #ffffff;
     border: unset;
-    padding: 13px 16px;
+    padding: 15px 16px;
     width: 100%;
     background-repeat: no-repeat;
     background-size: cover;
@@ -197,7 +197,6 @@
 }
 
 .nextPageBtn {
-  //background-image: url('/keepsimple_/assets/longevity/navbar-borders.svg');
   background-size: cover;
   border: 1px solid #000;
   margin: 20px 16px;