chore: longevity imrpovements p6

src/components/longevity/BorderedPill/BorderedPill.module.scss

@@ -0,0 +1,49 @@
+.root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ffffff66;
+
+  width: 100%;
+  max-width: 320px;
+  min-height: 42px;
+  padding: 9px 28px;
+  border: 0;
+  cursor: pointer;
+
+  .border {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .content {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    gap: 12px;
+    font-size: 16px;
+
+    svg {
+      padding-top: 3px;
+    }
+
+    .label {
+      padding-top: 2px;
+    }
+  }
+}
+
+.white {
+  color: #fff;
+
+  svg {
+    path {
+      fill: #fff;
+    }
+  }
+}

src/components/longevity/BorderedPill/BorderedPill.tsx

@@ -0,0 +1,35 @@
+import React, { ElementType } from 'react';
+import cn from 'classnames';
+
+import type { BorderedPillProps } from './BorderedPill.types';
+
+import Borders from '@icons/longevity/Borders';
+
+import styles from './BorderedPill.module.scss';
+
+export function BorderedPill<T extends ElementType = 'button'>({
+  as,
+  text,
+  leftIcon,
+  children,
+  className,
+  isWhite,
+  ...rest
+}: BorderedPillProps<T>) {
+  const Component = (as ?? 'button') as ElementType;
+
+  return (
+    <Component
+      className={cn(styles.root, className, {
+        [styles.white]: isWhite,
+      })}
+      {...(rest as any)}
+    >
+      <Borders className={styles.border} aria-hidden />
+      <span className={styles.content}>
+        {leftIcon ? <span className={styles.leftIcon}>{leftIcon}</span> : null}
+        {text ? <span className={styles.label}>{text} </span> : children}
+      </span>
+    </Component>
+  );
+}

src/components/longevity/BorderedPill/BorderedPill.types.ts

@@ -0,0 +1,25 @@
+import type { ElementType, ReactNode } from 'react';
+
+type CommonProps<T extends ElementType> = {
+  as?: T;
+  text?: string;
+  leftIcon?: ReactNode;
+  className?: string;
+  isWhite?: boolean;
+  children?: ReactNode;
+};
+
+type ButtonOnlyProps = {
+  onClick?: React.ButtonHTMLAttributes<HTMLButtonElement>['onClick'];
+  type?: 'button' | 'submit' | 'reset';
+  disabled?: boolean;
+};
+
+type NonButtonProps = {
+  onClick?: never;
+  type?: never;
+  disabled?: never;
+};
+
+export type BorderedPillProps<T extends ElementType = 'button'> =
+  CommonProps<T> & (T extends 'button' ? ButtonOnlyProps : NonButtonProps);

src/components/longevity/BorderedPill/index.ts

@@ -0,0 +1,3 @@
+import { BorderedPill } from './BorderedPill';
+
+export default BorderedPill;

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

@@ -19,6 +19,10 @@
     opacity: 60%;
     cursor: pointer;
 
+    &:hover {
+      opacity: 1;
+    }
+
     &.active {
       opacity: 1;
 
@@ -38,7 +42,7 @@
   }
 
   .selected {
-    font-size: 8px;
+    font-size: 12px;
     color: #fff;
     text-transform: uppercase;
     max-width: 100px;
@@ -69,22 +73,18 @@
     transform: translateY(0);
   }
 
-  .defaultLabel {
-    font-size: 8px;
-    text-transform: uppercase;
-    left: 0;
-    font-family: Aboreto-Regular, sans-serif;
-    font-weight: 400;
-    background-repeat: no-repeat;
-    background-size: cover;
-    bottom: 5px;
+  .tooltip {
+    background-color: #f2e7d6;
     color: #000000d9;
-    width: 127px;
-    position: absolute;
-    background-image: url('/keepsimple_/assets/longevity/diet/default-label-bg.png');
-    height: 11px;
-    text-align: center;
-    padding-top: 3px;
+    font-size: 14px;
+    margin-top: -40px;
+    z-index: 788;
+    padding: 2.5px 9px;
+    border-radius: unset;
+
+    div {
+      display: none;
+    }
   }
 }
 

src/components/longevity/DietResults/DietResults.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import Image from 'next/image';
 import cn from 'classnames';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
 
 import { DietResultsProps } from './DietResults.types';
 
@@ -10,16 +11,30 @@ const DietResults: FC<DietResultsProps> = ({
   id,
   scaleLevels,
   setSelectedHealthyOptionId,
+  whatToEatItemNamesAndIds,
+  setIsIconClicked,
 }) => {
+  const getSelectedHealthOptionName = (id: number) => {
+    const selectedOption = whatToEatItemNamesAndIds.find(
+      (option: any) => option.id === id,
+    );
+    return selectedOption ? selectedOption.name : null;
+  };
+
   return (
     <div className={styles.results}>
       {scaleLevels.map((level, index) => (
         <div
-          onClick={() => setSelectedHealthyOptionId(level.id)}
+          onClick={() => {
+            setSelectedHealthyOptionId(level.id);
+            setIsIconClicked(false);
+            requestAnimationFrame(() => setIsIconClicked(true));
+          }}
           key={level.id}
           className={cn(styles.item, {
             [styles.active]: id === level.id,
           })}
+          data-tooltip-id={level.id.toString()}
         >
           <Image
             className={cn(styles.img, {})}
@@ -34,11 +49,18 @@ const DietResults: FC<DietResultsProps> = ({
               [styles.active]: id === level.id,
             })}
           >
-            selected state
+            Your Diet
           </span>
-          {index === 0 && (
-            <span className={styles.defaultLabel}>Borderline “OK” Foods</span>
-          )}
+          <ReactTooltip
+            id={level.id.toString()}
+            place={'bottom'}
+            className={cn(styles.tooltip, {})}
+            opacity={1}
+          >
+            <span className={styles.defaultLabel}>
+              {getSelectedHealthOptionName(index + 1)}
+            </span>
+          </ReactTooltip>
         </div>
       ))}
     </div>

src/components/longevity/DietResults/DietResults.types.tsx

@@ -1,5 +1,14 @@
 export type DietResultsProps = {
   id?: number;
+  setIsIconClicked?: (isClicked: boolean) => void;
+  whatToEatItemNamesAndIds: {
+    name: string;
+    id: number;
+  }[];
+  selectedHealthOption: {
+    name: string;
+    id: number;
+  };
   setSelectedHealthyOptionId?: (id: number) => void;
   scaleLevels?: {
     id: number;

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

@@ -3,22 +3,19 @@
   background-size: cover;
   background-repeat: no-repeat;
   max-width: 948px;
-  height: 531px;
+  height: 550px;
   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%;
+    bottom: 20px;
     z-index: 55;
     cursor: pointer;
+    right: 12px;
   }
 
   .headline {
@@ -61,7 +58,7 @@
   }
 
   .diamond {
-    width: 13px;
+    width: 10px;
     height: 10px;
     background-color: #df382e;
     transform: rotate(45deg);
@@ -76,14 +73,12 @@
 
   .painText {
     margin: 0 30px;
+    width: 604px;
 
     p {
       margin: 0;
     }
   }
-
-  .divider {
-  }
 }
 
 .hacksFlipCard {
@@ -128,8 +123,12 @@
     height: auto;
     padding: 0;
 
+    .pageSwitcherFlip {
+      display: none;
+    }
+
     .diamond {
-      width: 19px;
+      width: 10px;
     }
 
     .headline {
@@ -144,9 +143,22 @@
       font-size: 16px;
     }
 
+    .painText,
+    .hacksFlipCard {
+      p {
+        width: 267px;
+      }
+    }
+
+    .painText {
+      margin: 0 10px;
+      width: unset;
+    }
+
     .chartWrapper {
       .chartTitle {
         font-size: 14px;
+        padding: 16px 0 32px 0;
       }
 
       .chart {

src/components/longevity/FlipCard/FlipCard.tsx

@@ -18,6 +18,7 @@ const FlipCard: FC<FlipCardProps> = ({
   isHacks,
   setSwitchPage,
   switchPage,
+  chartWidth,
 }) => {
   return (
     <div
@@ -64,7 +65,7 @@ const FlipCard: FC<FlipCardProps> = ({
               <Image
                 src={chart}
                 alt={chartTitle ?? 'chart'}
-                width={512}
+                width={chartWidth || 590}
                 height={455}
                 className={styles.chart}
                 unoptimized

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

@@ -9,4 +9,5 @@ export type FlipCardProps = {
   quoteAuthor?: string;
   setSwitchPage?: (value: boolean) => void;
   switchPage?: boolean;
+  chartWidth?: number;
 };