chore: longevity imrpovements p7

src/api/longevity/workout.ts

@@ -5,7 +5,7 @@ export async function getWorkout(locale: string) {
     next: { revalidate: 3600 },
   });
 
-  if (!res.ok) throw new Error('Failed to fetch contributor');
+  if (!res.ok) throw new Error('Failed to fetch workout data');
 
   const json = await res.json();
   const attrs = json?.data?.attributes ?? {};

src/components/Header/Header.module.scss

@@ -19,6 +19,7 @@
   .logo {
     margin-top: 3px !important;
     cursor: pointer;
+    object-fit: contain;
   }
 
   .actions {
@@ -214,7 +215,7 @@
     padding: 0 1.4rem;
     height: 82px;
     background-color: #fff;
-    z-index: 5;
+    z-index: 6;
     align-items: center;
     justify-content: center;
 

src/components/Header/Header.tsx

@@ -73,8 +73,8 @@ const Header: FC = () => {
               }}
               src={
                 isDarkTheme
-                  ? '/keepsimple_/assets/logos/keepsimpleNewYearDark.svg'
-                  : '/keepsimple_/assets/logos/keepsimpleNewYear.svg'
+                  ? '/keepsimple_/assets/logos/keepsimpleDark.svg'
+                  : '/keepsimple_/assets/logos/keepsimple.svg'
               }
               alt="keepsimple logo"
               width={130.61}

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

@@ -10,14 +10,6 @@
   flex-direction: column;
   margin-bottom: 30px;
 
-  .pageSwitcherFlip {
-    position: absolute;
-    bottom: 20px;
-    z-index: 55;
-    cursor: pointer;
-    right: 12px;
-  }
-
   .headline {
     padding-bottom: 12px;
     justify-content: center !important;

src/components/longevity/FlipCard/FlipCard.tsx

@@ -16,8 +16,6 @@ const FlipCard: FC<FlipCardProps> = ({
   hacksQuote,
   quoteAuthor,
   isHacks,
-  setSwitchPage,
-  switchPage,
   chartWidth,
 }) => {
   return (
@@ -26,14 +24,6 @@ const FlipCard: FC<FlipCardProps> = ({
         [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,7 +7,5 @@ export type FlipCardProps = {
   isHacks?: boolean;
   hacksQuote?: string;
   quoteAuthor?: string;
-  setSwitchPage?: (value: boolean) => void;
-  switchPage?: boolean;
   chartWidth?: number;
 };

src/components/longevity/HTMLClamp/HTMLClamp.module.scss

@@ -0,0 +1,57 @@
+@import '@styles/_variables.scss';
+
+.description {
+  @extend .longevityList;
+  overflow-y: auto;
+  max-height: 367px;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px #dddddd;
+    background-color: #dddddd;
+    border-radius: 8px;
+    opacity: 1;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #333131;
+    border-radius: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #333131;
+  }
+
+  .htmlContent {
+    padding-right: 15px;
+    line-height: 1.5;
+
+    p {
+      margin: 0;
+    }
+
+    a {
+      color: #000000d9;
+    }
+  }
+}
+
+.clamped {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 9;
+  overflow: hidden;
+}
+
+.showMoreBtn {
+  background: none;
+  border: none;
+  padding: 0;
+  margin-top: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 700;
+}

src/components/longevity/HTMLClamp/HTMLClamp.tsx

@@ -0,0 +1,70 @@
+import React, { FC, useEffect, useRef, useState } from 'react';
+import cn from 'classnames';
+
+import { HTMLClampTypes } from '@components/longevity/HTMLClamp/HTMLClamp.types';
+
+import styles from './HTMLClamp.module.scss';
+
+const HtmlClamp: FC<HTMLClampTypes> = ({ html, lines = 9, className }) => {
+  const shouldClamp = true;
+
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const [expanded, setExpanded] = useState(false);
+  const [hasOverflow, setHasOverflow] = useState(false);
+
+  useEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+
+    const measure = () => {
+      if (!shouldClamp) {
+        setHasOverflow(false);
+        return;
+      }
+
+      if (!expanded) {
+        setHasOverflow(el.scrollHeight > el.clientHeight + 1);
+      } else {
+        setExpanded(false);
+        requestAnimationFrame(() => {
+          const el2 = contentRef.current;
+          if (el2) setHasOverflow(el2.scrollHeight > el2.clientHeight + 1);
+          setExpanded(true);
+        });
+      }
+    };
+
+    measure();
+
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+
+    return () => ro.disconnect();
+  }, [html, lines, shouldClamp]);
+
+  return (
+    <div className={styles.mainContent}>
+      <div className={styles.description}>
+        <div
+          ref={contentRef}
+          className={cn(styles.htmlContent, className, {
+            [styles.clamped]: !expanded,
+          })}
+          dangerouslySetInnerHTML={{ __html: html || '' }}
+        />
+        {hasOverflow && (
+          <button
+            type="button"
+            className={styles.showMoreBtn}
+            onClick={() => setExpanded(v => !v)}
+          >
+            {/*Keeping show less just in case*/}
+            {expanded ? 'Show less' : 'Learn more'}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default HtmlClamp;

src/components/longevity/HTMLClamp/HTMLClamp.types.ts

@@ -0,0 +1,6 @@
+export type HTMLClampTypes = {
+  html: string;
+  lines?: number;
+  onlyMobile?: boolean;
+  className?: string;
+};

src/components/longevity/HTMLClamp/index.ts

@@ -0,0 +1,3 @@
+import HtmlClamp from './HTMLClamp';
+
+export default HtmlClamp;

src/components/longevity/LongevitySubSection/LongevitySubSection.module.scss

@@ -97,13 +97,22 @@
         margin: 0;
 
         li {
+          list-style: none;
+          position: relative;
+          padding-left: 25px;
           padding-bottom: 20px;
-          padding-left: 12px;
           line-height: 1.5;
           @include text-body;
 
-          &::marker {
-            content: url('/keepsimple_/assets/longevity/habits/marker.svg');
+          &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0.35em;
+            width: 12px;
+            height: 12px;
+            background: url('/keepsimple_/assets/longevity/habits/marker.svg')
+              no-repeat center / contain;
           }
         }
       }
@@ -156,7 +165,7 @@
       }
 
       .habitTooltip {
-        font-size: 16px;
+        font-size: 14px;
       }
 
       .backgroundImg {
@@ -171,4 +180,10 @@
       }
     }
   }
+  .whyDoThisMobileModal {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: space-between;
+  }
 }

src/components/longevity/LongevitySubSection/LongevitySubSection.tsx

@@ -6,6 +6,7 @@ import { Tooltip as ReactTooltip } from 'react-tooltip';
 import WhyDoThisTooltip from '@components/longevity/WhyDoThisTooltip';
 import Modal from '@components/Modal';
 import Heading from '@components/Heading';
+import BorderedPill from '@components/longevity/BorderedPill';
 
 import { useIsWidthLessThan } from '@hooks/useScreenSize';
 
@@ -24,6 +25,7 @@ const LongevitySubSection: FC<LongevitySubSectionProps> = ({
   children,
   date,
   isHacks,
+  damageTypeHeadline,
 }) => {
   const { habitTooltipTitle } = longevityData[locale];
   const isMobile = useIsWidthLessThan(956);
@@ -70,7 +72,11 @@ const LongevitySubSection: FC<LongevitySubSectionProps> = ({
               place={'bottom'}
               className={cn(styles.tooltip, {})}
             >
-              <WhyDoThisTooltip whatDamagesText={whatDamages} locale={locale} />
+              <WhyDoThisTooltip
+                whatDamagesText={whatDamages}
+                locale={locale}
+                headline={damageTypeHeadline}
+              />
             </ReactTooltip>
           )}
         </div>
@@ -99,7 +105,17 @@ const LongevitySubSection: FC<LongevitySubSectionProps> = ({
           }
           onClick={() => setOpenMobileModal(false)}
         >
-          <WhyDoThisTooltip whatDamagesText={whatDamages} locale={locale} />
+          <div className={styles.whyDoThisMobileModal}>
+            <WhyDoThisTooltip
+              whatDamagesText={whatDamages}
+              locale={locale}
+              headline={damageTypeHeadline}
+            />
+            <BorderedPill
+              text={'Close'}
+              onClick={() => setOpenMobileModal(false)}
+            />
+          </div>
         </Modal>
       )}
     </>

src/components/longevity/LongevitySubSection/LongevitySubSection.types.ts

@@ -7,4 +7,5 @@ export type LongevitySubSectionProps = {
   children?: React.ReactNode;
   date?: string;
   isHacks?: boolean;
+  damageTypeHeadline?: string;
 };

src/components/longevity/MainInfoSection/MainInfoSection.module.scss

@@ -39,7 +39,7 @@
     letter-spacing: -5px;
     color: #ce2128;
     margin-left: 60px;
-    z-index: 555;
+    z-index: 5;
   }
 }
 

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

@@ -199,19 +199,15 @@
 .nextButton {
   margin-left: 16px;
 
-  .nextLink {
-    text-decoration: unset;
-
-    .nextStaticTxt {
-      color: #484848;
-      font-size: 16px;
-      font-weight: 400;
-    }
+  .nextStaticTxt {
+    color: #484848;
+    font-size: 16px;
+    font-weight: 400;
+  }
 
-    .nextPage {
-      font-weight: 600;
-      color: #000;
-    }
+  .nextPage {
+    font-weight: 600;
+    color: #000;
   }
 
   span {

src/components/longevity/MobileNavigation/MobileNavigation.tsx

@@ -228,11 +228,12 @@ const MobileNavigation: FC = () => {
           ))}
         </ul>
       </nav>
-      <BorderedPill className={styles.nextButton}>
-        <Link href={nextPathname.path} className={styles.nextLink}>
-          <span className={styles.nextStaticTxt}>Next:</span>{' '}
-          <span className={styles.nextPage}> {nextPathname.name}</span>
-        </Link>
+      <BorderedPill
+        className={styles.nextButton}
+        onClick={() => nextPathname && router.push(nextPathname.path)}
+      >
+        <span className={styles.nextStaticTxt}>Next:</span>{' '}
+        <span className={styles.nextPage}> {nextPathname.name}</span>
       </BorderedPill>
     </>
   );

src/components/longevity/Navigation/Navigation.module.scss

@@ -96,6 +96,12 @@
   }
 }
 
+.link {
+  svg:first-child {
+    margin-top: -5px;
+  }
+}
+
 .subNav {
   position: relative;
   overflow: hidden;