Feat/community

src/App.css

@@ -17,4 +17,4 @@ button.active {
 }
 button.active:hover {
   background-color: var(--color-persianblue);
-}
+}

src/components/Button.jsx

@@ -2,53 +2,68 @@ import { useNavigate } from 'react-router-dom';
 import { tv } from 'tailwind-variants/lite';
 
 const buttonVariants = tv({
-    // base styles for all buttons
-    base: 'font-poppins flex items-center justify-center drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]',
-    // all button variants
-    variants: {
-        size: {
-            sm: 'h-12 w-[162px] text-base font-semibold rounded-lg lg:h-14 lg:w-[220px] lg:text-xl',
-            md: 'h-11 w-[218px] text-base font-semibold rounded-lg lg:h-14 lg:w-[286px] lg:text-xl xl:h-16 xl:w-[327px] xl:text-2xl',
-            lg: 'h-11 w-[345px] text-base font-medium rounded-md lg:w-[501px]',
-            circ: 'h-11 w-11 text-2xl rounded-full'
-        },
-        color: {
-            primary: 'bg-eerie text-white border-1 border-eerie',
-            secondary: 'bg-white text-eerie border-1 border-eerie',
-            gradient: 'bg-gradient-to-b from-electricgreen to-persianblue text-white'
-        }
+  // base styles for all buttons
+  base: 'font-poppins flex items-center justify-center drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]',
+  // all button variants
+  variants: {
+    size: {
+      sm: 'h-12 w-[162px] text-base font-semibold rounded-lg lg:h-14 lg:w-[220px] lg:text-xl',
+      md: 'h-11 w-[218px] text-base font-semibold rounded-lg lg:h-14 lg:w-[286px] lg:text-xl xl:h-16 xl:w-[327px] xl:text-2xl',
+      lg: 'h-11 w-[345px] text-base font-medium rounded-md lg:w-[501px]',
+      circ: 'h-11 w-11 text-2xl rounded-full',
     },
-    // default button styles if no specified props
-    defaultVariants: {
-        size: 'sm',
-        color: 'primary'
+    color: {
+      primary: 'bg-eerie text-white border-1 border-eerie',
+      secondary: 'bg-white text-eerie border-1 border-eerie',
+      gradient: 'bg-gradient-to-b from-electricgreen to-persianblue text-white',
     },
-    // conditional style cases for specific prop combinations
-    compoundVariants: [
-        // remove drop shadow and lower font weight for user selection button
-        {
-            color: 'secondary',
-            size: 'md',
-            className: 'drop-shadow-none !font-normal'
-        }
-    ]
+  },
+  // default button styles if no specified props
+  defaultVariants: {
+    size: 'sm',
+    color: 'primary',
+  },
+  // conditional style cases for specific prop combinations
+  compoundVariants: [
+    // remove drop shadow and lower font weight for user selection button
+    {
+      color: 'secondary',
+      size: 'md',
+      className: 'drop-shadow-none !font-normal',
+    },
+  ],
 });
 
-export default function Button({ size, color, label, onClick, isActive, to, ...props }) {
-    let navigate = useNavigate();
+export default function Button({
+  size,
+  color,
+  label,
+  onClick,
+  isActive,
+  to,
+  ...props
+}) {
+  let navigate = useNavigate();
 
-    function handleClick(){
-        if (to){
-            navigate(to);
-        } else {
-            onClick();
-        }
+  function handleClick() {
+    if (to) {
+      navigate(to);
+    } else {
+      onClick();
     }
+  }
 
-    return (
-        <button onClick={handleClick} className={isActive ? `${buttonVariants({ size, color })} active` : buttonVariants({ size, color })}
-        {...props}
-        >{label}
-        </button>
-    );
-}
+  return (
+    <button
+      onClick={handleClick}
+      className={
+        isActive
+          ? `${buttonVariants({ size, color })} active`
+          : buttonVariants({ size, color })
+      }
+      {...props}
+    >
+      {label}
+    </button>
+  );
+}

src/components/DailySummary.jsx

@@ -1,6 +1,5 @@
 //react
 import { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
 
 // component
 import Button from './Button';
@@ -14,20 +13,31 @@ const DailySummary = ({
   onSave,
 }) => {
   const max_chars = 500;
-  const [comment, setComment] = useState(initialComment || '');
+
+  const initialCommentObject = initialComment || {};
+  const [comment, setComment] = useState(initialCommentObject.comment || '');
+
+  const [isOptedOut, setIsOptedOut] = useState(
+    initialCommentObject.optOut || false
+  );
+
   const remainingChars = max_chars - comment.length;
 
   useEffect(() => {
-    setComment(initialComment || '');
+    const updatedCommentObject = initialComment || {};
+    setComment(updatedCommentObject.comment || '');
+    setIsOptedOut(updatedCommentObject.optOut || false);
   }, [initialComment, day]);
 
   const handleSave = () => {
-    onSave(day, comment);
+    onSave(day, comment, isOptedOut);
     onClose();
   };
 
   const handleCancel = () => {
-    setComment(initialComment || '');
+    const updatedCommentObject = initialComment || {};
+    setComment(updatedCommentObject.comment || '');
+    setIsOptedOut(updatedCommentObject.optOut || false);
     onClose();
   };
 
@@ -46,8 +56,9 @@ const DailySummary = ({
           Day {day} Summary
         </h2>
 
-        <p className="text-sm mb-4 text-eerie">{question}</p>
-
+
+        <p className="text-sm mb-4 text-eerie text-justify">{question}</p>
+
         <textarea
           className="w-full p-4 border border-eerie bg-white rounded-sm resize-none focus:ring-3 focus:ring-persianblue text-eerie"
           rows="6"
@@ -79,13 +90,21 @@ const DailySummary = ({
           </div>
         </div>
 
-        <div className="text-center mt-4">
-          <Link
-            to="/community" 
-            className="text-blue-700 text-sm font-semibold focus:outline-none focus-visible:ring-2 focus:p-2 focus-visible:ring-persianblue rounded-[5px]"
+        {/*Checkbox for Opt-out */}
+        <div className="flex items-center mt-5 mb-3 ml-6">
+          <input
+            id={`opt-out-${day}`}
+            type="checkbox"
+            checked={isOptedOut}
+            onChange={(e) => setIsOptedOut(e.target.checked)}
+            className="h-4 w-4 text-green border-eerie rounded focus:ring-persianblue"
+          />
+          <label
+            htmlFor={`opt-out-${day}`}
+            className="ml-2 text-sm text-eerie font-poppins"
           >
-            Visit Community Forum
-          </Link>
+            Opt out of sharing in the Community Forum
+          </label>
         </div>
       </div>
     </div>

src/components/DailyTrackerBar.jsx

@@ -9,7 +9,7 @@ const DailyTrackerBar = ({ day, isCompleted, onClick, isDisabled, isOpen }) => {
       aria-hidden="true"
     />
   ) : (
-    <FaCirclePlus className="w-8 h-8 stroke-2"  aria-hidden="true"/>
+    <FaCirclePlus className="w-8 h-8 stroke-2" aria-hidden="true" />
   );
 
   return (
@@ -20,7 +20,7 @@ const DailyTrackerBar = ({ day, isCompleted, onClick, isDisabled, isOpen }) => {
       aria-expanded={isOpen}
       aria-controls={`summary-day${day}`}
       onClick={!isDisabled ? onClick : undefined}
-      className={`bg-white max-w-[1000px] p-4 rounded-lg border border-errie flex justify-between items-center mb-3 mt-8 transition font-poppins 
+      className={`bg-white max-w-[1000px] p-4 rounded-lg border border-errie flex justify-between items-center mb-3 mt-8 transition font-poppins focus:outline-none focus-visible:ring-4 focus-visible:ring-persianblue focus-visible:ring-offset-4
         ${isDisabled ? 'opacity-70 cursor-not-allowed' : 'cursor-pointer hover:shadow-md'}`}
       onKeyDown={(e) => {
         if (!isDisabled && (e.key === 'Enter' || e.key === ' ')) {