From 9921ed020b08349c30219b913c08bf144c3f2f08 Mon Sep 17 00:00:00 2001
From: Brandon Ho <104395400+iphonecats@users.noreply.github.com>
Date: Mon, 1 Apr 2024 02:34:21 -0400
Subject: [PATCH] Brandon Sprint 5 Compare Feature UI changes (#318)

### Summary

Resolves Brandon Sprint 5 tickets

<!-- What does this PR change and why? Discuss any breaking changes. -->

### Checklist

- [x] Right Panel Checkboxes
- [x] New Design for big share back button
- [x] Right Panel Scroll Feature improvements
- [x] On-hover tooltips for right panel friends - In progress
- [ ] Email Styling


### How to Test
Share Schedule Feature

---------

Co-authored-by: Yatharth Bhargava <yatharthbhargava@gmail.com>
---
 src/components/CombinationContainer/index.tsx | 132 +++++++++--------
 .../CombinationContainer/stylesheet.scss      |   4 +
 src/components/ComparisonContainer/index.tsx  | 134 ++++++++++++++----
 .../ComparisonContainer/stylesheet.scss       |  37 +++--
 .../ComparisonContainerShareBack.tsx          |   4 +-
 src/components/ComparisonPanel/index.tsx      |  12 +-
 .../ComparisonPanel/stylesheet.scss           |  10 +-
 .../InvitationModal/stylesheet.scss           |   3 +-
 8 files changed, 222 insertions(+), 114 deletions(-)

diff --git a/src/components/CombinationContainer/index.tsx b/src/components/CombinationContainer/index.tsx
index 9340f0ae..4cab9168 100644
--- a/src/components/CombinationContainer/index.tsx
+++ b/src/components/CombinationContainer/index.tsx
@@ -58,64 +58,80 @@ export default function CombinationContainer({
   return (
     <>
       <div className="CombinationContainer">
-        <Select
-          onChange={(newSortingOptionIndex): void =>
-            patchSchedule({ sortingOptionIndex: newSortingOptionIndex })
-          }
-          current={sortingOptionIndex}
-          options={oscar.sortingOptions.map((sortingOption, i) => ({
-            id: i,
-            label: sortingOption.label,
-          }))}
-        />
-        <Button
-          className="reset"
-          onClick={handleResetPinnedCrns}
-          disabled={pinnedCrns.length === 0}
-        >
-          Reset Sections
-        </Button>
-        <div className="scroller">
-          <AutoSizer>
-            {({ width, height }): React.ReactElement => (
-              <List
-                width={width}
-                height={height}
-                style={{ outline: 'none' }}
-                rowCount={sortedCombinations.length}
-                rowHeight={108}
-                // List.rowRenderer is a normal render prop, not a component.
-                // eslint-disable-next-line react/no-unstable-nested-components
-                rowRenderer={({ index, key, style }): React.ReactElement => {
-                  const { crns } = sortedCombinations[index] as Combination;
-                  return (
-                    <div className="list-item" style={style} key={key}>
-                      <div
-                        className="combination"
-                        onMouseEnter={(): void => setOverlayCrns(crns)}
-                        onMouseLeave={(): void => setOverlayCrns([])}
-                        onClick={(): void =>
-                          patchSchedule({
-                            pinnedCrns: [...pinnedCrns, ...crns],
-                          })
-                        }
-                      >
-                        <div className="number">{index + 1}</div>
-                        <Calendar
-                          className="calendar-preview"
-                          overlayCrns={crns}
-                          isAutosized
-                          compare={compare}
-                          preview
-                        />
-                      </div>
-                    </div>
-                  );
-                }}
-              />
-            )}
-          </AutoSizer>
-        </div>
+        {compare ? (
+          <div className="turn-off-compare-text">
+            Turn compare schedules off to view section combinations!
+          </div>
+        ) : (
+          <>
+            <Select
+              onChange={(newSortingOptionIndex): void =>
+                patchSchedule({ sortingOptionIndex: newSortingOptionIndex })
+              }
+              current={sortingOptionIndex}
+              options={oscar.sortingOptions.map((sortingOption, i) => ({
+                id: i,
+                label: sortingOption.label,
+              }))}
+            />
+            <Button
+              className="reset"
+              onClick={handleResetPinnedCrns}
+              disabled={pinnedCrns.length === 0}
+            >
+              Reset Sections
+            </Button>
+            <div className="scroller">
+              <AutoSizer>
+                {({ width, height }): React.ReactElement => (
+                  <List
+                    width={width}
+                    height={height}
+                    style={{ outline: 'none' }}
+                    rowCount={sortedCombinations.length}
+                    rowHeight={108}
+                    /*
+                    List.rowRenderer is a normal render prop,
+                    not a component.
+                    */
+                    // eslint-disable-next-line max-len
+                    // eslint-disable-next-line react/no-unstable-nested-components
+                    rowRenderer={({
+                      index,
+                      key,
+                      style,
+                    }): React.ReactElement => {
+                      const { crns } = sortedCombinations[index] as Combination;
+                      return (
+                        <div className="list-item" style={style} key={key}>
+                          <div
+                            className="combination"
+                            onMouseEnter={(): void => setOverlayCrns(crns)}
+                            onMouseLeave={(): void => setOverlayCrns([])}
+                            onClick={(): void =>
+                              patchSchedule({
+                                pinnedCrns: [...pinnedCrns, ...crns],
+                              })
+                            }
+                          >
+                            <div className="number">{index + 1}</div>
+                            <Calendar
+                              className="calendar-preview"
+                              overlayCrns={crns}
+                              isAutosized
+                              compare={compare}
+                              preview
+                            />
+                          </div>
+                        </div>
+                      );
+                    }}
+                  />
+                )}
+              </AutoSizer>
+            </div>
+          </>
+        )}
       </div>
 
       <Modal
diff --git a/src/components/CombinationContainer/stylesheet.scss b/src/components/CombinationContainer/stylesheet.scss
index 92dd4334..4c4eeeaa 100644
--- a/src/components/CombinationContainer/stylesheet.scss
+++ b/src/components/CombinationContainer/stylesheet.scss
@@ -6,6 +6,10 @@
   align-items: stretch;
   border-right: 1px solid $color-border;
 
+  .turn-off-compare-text {
+    margin: 0px 12px 0px 12px;
+    font-size: 14px;
+  }
   .scroller {
     flex: 1;
     overflow-y: auto;
diff --git a/src/components/ComparisonContainer/index.tsx b/src/components/ComparisonContainer/index.tsx
index 4dd3ed15..333ef66d 100644
--- a/src/components/ComparisonContainer/index.tsx
+++ b/src/components/ComparisonContainer/index.tsx
@@ -287,7 +287,7 @@ export default function ComparisonContainer({
       <div className="comparison-body">
         <div className="comparison-content">
           <div className="my-schedule">
-            <p className="content-title">My Schedule</p>
+            <p className="my-schedule-title">My Schedule</p>
             {allVersionNames
               // .filter((version) => version.id === currentVersion)
               .map((version) => {
@@ -563,6 +563,10 @@ function ScheduleRow({
   const tooltipId = useId();
   const [tooltipHover, setTooltipHover] = useState(false);
   const [divHover, setDivHover] = useState(false);
+  const [showPaletteTooltip, setShowPaletteTooltip] = useState(false);
+  const [showShareTooltip, setShowShareTooltip] = useState(false);
+  const [showEditTooltip, setShowEditTooltip] = useState(false);
+  const [showRemoveTooltip, setShowRemoveTooltip] = useState(false);
 
   const edit =
     hasEdit &&
@@ -620,11 +624,13 @@ function ScheduleRow({
               className={classes('name', hasCheck && 'check')}
               onMouseEnter={(): void => setTooltipHover(true)}
               onMouseLeave={(): void => setTooltipHover(false)}
+              onClick={onClick}
             >
               <div
                 className={classes(
                   type === 'User' && 'friend-name',
-                  type !== 'User' && checkboxColor !== '' && 'checked'
+                  type !== 'User' && checkboxColor !== '' && 'checked',
+                  type !== 'User' && 'schedule-name'
                 )}
               >
                 <p>{name}</p>
@@ -650,47 +656,117 @@ function ScheduleRow({
           </>
         )}
         {(divHover || edit) && hasPalette && setPaletteInfo && (
-          <Button
-            className="icon"
-            onClick={(): void => setPaletteInfo(palette ? '' : id)}
-            key={`${id}-palette`}
+          <div
+            onMouseEnter={(): void => setShowPaletteTooltip(true)}
+            onMouseLeave={(): void => setShowPaletteTooltip(false)}
+            id={`${tooltipId}-palette`}
           >
-            <FontAwesomeIcon icon={faPalette} size="xs" />
-          </Button>
+            <Button
+              className="icon"
+              onClick={(): void => setPaletteInfo(palette ? '' : id)}
+              key={`${id}-palette`}
+            >
+              <FontAwesomeIcon icon={faPalette} size="xs" />
+            </Button>
+            <ReactTooltip
+              key={`palette-tooltip-${id}`}
+              anchorId={`${tooltipId}-palette`}
+              place="top"
+              isOpen={showPaletteTooltip}
+              setIsOpen={setShowPaletteTooltip}
+              className="tooltip"
+              variant="dark"
+            >
+              Edit Color
+            </ReactTooltip>
+          </div>
         )}
         {(divHover || edit) &&
           hasEdit &&
           setInvitationModalOpen !== undefined &&
           setInvitationModalEmail !== undefined &&
           email && (
-            <Button
-              className="icon"
-              onClick={(): void => {
-                setInvitationModalEmail(email);
-                setInvitationModalOpen(true);
-              }}
-              key={`${id}-share`}
+            <div
+              onMouseEnter={(): void => setShowShareTooltip(true)}
+              onMouseLeave={(): void => setShowShareTooltip(false)}
+              id={`${tooltipId}-share`}
             >
-              <FontAwesomeIcon icon={faShareFromSquare} size="xs" />
-            </Button>
+              <Button
+                className="icon"
+                onClick={(): void => {
+                  setInvitationModalEmail(email);
+                  setInvitationModalOpen(true);
+                }}
+                key={`${id}-share`}
+                data-for={`share-tooltip-${id}`}
+                data-tip="Share"
+              >
+                <FontAwesomeIcon icon={faShareFromSquare} size="xs" />
+              </Button>
+              <ReactTooltip
+                key={`share-tooltip-${id}`}
+                anchorId={`${tooltipId}-share`}
+                place="top"
+                isOpen={showShareTooltip}
+                setIsOpen={setShowShareTooltip}
+                className="tooltip"
+                variant="dark"
+              >
+                Share Back
+              </ReactTooltip>
+            </div>
           )}
         {(divHover || edit) && hasEdit && (
-          <Button
-            className="icon"
-            onClick={handleEditSchedule}
-            key={`${id}-edit`}
+          <div
+            onMouseEnter={(): void => setShowEditTooltip(true)}
+            onMouseLeave={(): void => setShowEditTooltip(false)}
+            id={`${tooltipId}-edit`}
           >
-            <FontAwesomeIcon icon={faPencil} size="xs" />
-          </Button>
+            <Button
+              className="icon"
+              onClick={handleEditSchedule}
+              key={`${id}-edit`}
+            >
+              <FontAwesomeIcon icon={faPencil} size="xs" />
+            </Button>
+            <ReactTooltip
+              key={`edit-tooltip-${id}`}
+              anchorId={`${tooltipId}-edit`}
+              place="top"
+              isOpen={showEditTooltip}
+              setIsOpen={setShowEditTooltip}
+              className="tooltip"
+              variant="dark"
+            >
+              Edit
+            </ReactTooltip>
+          </div>
         )}
         {(divHover || edit) && hasDelete && (
-          <Button
-            className="icon"
-            onClick={handleRemoveSchedule}
-            key={`${id}-delete`}
+          <div
+            onMouseEnter={(): void => setShowRemoveTooltip(true)}
+            onMouseLeave={(): void => setShowRemoveTooltip(false)}
+            id={`${tooltipId}-delete`}
           >
-            <FontAwesomeIcon icon={faCircleXmark} size="xs" />
-          </Button>
+            <Button
+              className="icon"
+              onClick={handleRemoveSchedule}
+              key={`${id}-delete`}
+            >
+              <FontAwesomeIcon icon={faCircleXmark} size="xs" />
+            </Button>
+            <ReactTooltip
+              key={`delete-tooltip-${id}`}
+              anchorId={`${tooltipId}-delete`}
+              place="top"
+              isOpen={showRemoveTooltip}
+              setIsOpen={setShowRemoveTooltip}
+              className="tooltip"
+              variant="dark"
+            >
+              Remove
+            </ReactTooltip>
+          </div>
         )}
       </div>
       {hasPalette && palette && setFriendScheduleColor && setPaletteInfo && (
diff --git a/src/components/ComparisonContainer/stylesheet.scss b/src/components/ComparisonContainer/stylesheet.scss
index 30a3a6a0..731b1bbb 100644
--- a/src/components/ComparisonContainer/stylesheet.scss
+++ b/src/components/ComparisonContainer/stylesheet.scss
@@ -2,14 +2,15 @@
 @import '../../variables';
 
 .comparison-container {
+  overflow-y: auto;
+  max-height: 70%;
+  height: auto;
   .comparison-body {
     display: flex;
     flex-direction: column;
-    height: 100%;
 
     .comparison-content {
       position: relative;
-      margin-bottom: 12px;
       overflow-x: hidden;
       overflow-y: auto;
       flex: 1 1 auto;
@@ -27,8 +28,14 @@
           border-bottom: 2px solid $color-border;
         }
 
-        &.shared-with {
-          margin-bottom: 8px;
+        &.my-schedule-title{
+          font-weight: 700;
+          margin: 0px 12px 0px 12px;
+          border-bottom: 2px solid $color-border;
+        }
+
+        &.shared-with{
+          margin-bottom: 4px;
         }
       }
 
@@ -52,6 +59,10 @@
         }
       }
 
+      .schedule-name {
+        cursor : pointer;
+      }
+
       .friend-name {
         p {
           font-weight: 575;
@@ -144,11 +155,12 @@
 
           .icon {
             width: 27px;
-            height: 100%;
+            height: 22px;
             padding: 0px;
             opacity: 0;
           }
 
+
           &:hover {
             background-color: $color-border;
 
@@ -199,18 +211,23 @@
         p {
           font-size: 12px;
           line-height: normal;
+          font-style: oblique;
+          overflow: visible;
         }
 
         .shareback-button {
           width: 100px;
           height: 24px;
           padding: 6px 10px;
-          font-size: 12px;
+          font-size: 9px;
           color: var(--theme-bg);
           background-color: var(--theme-fg);
           border-radius: 8px;
-          border: 1px solid $color-neutral;
+          background-color: #FFF;
+          border: 1px solid rgba(128, 128, 128, 0.2);
           margin-left: 5px;
+          font-weight: 650;
+          cursor : pointer;
 
           &:hover {
             @include dark {
@@ -227,13 +244,15 @@
           width: 100px;
           height: 24px;
           padding: 6px 10px;
-          font-size: 12px;
+          font-size: 9px;
           color: var(--theme-fg);
           background-color: var(--theme-bg);
           border-radius: 8px;
           border: 1px solid $color-neutral;
           margin-right: 5px;
-
+          font-weight: 650;
+          cursor : pointer;
+      
           &:hover {
             @include dark {
               background: $modal-foreground-color-light;
diff --git a/src/components/ComparisonContainerShareBack/ComparisonContainerShareBack.tsx b/src/components/ComparisonContainerShareBack/ComparisonContainerShareBack.tsx
index 88149e04..ff6f61f9 100644
--- a/src/components/ComparisonContainerShareBack/ComparisonContainerShareBack.tsx
+++ b/src/components/ComparisonContainerShareBack/ComparisonContainerShareBack.tsx
@@ -32,8 +32,8 @@ export default function ComparisonContainerShareBack({
     <div className="shareback-panel">
       <div>
         <p>
-          You have {friendName}&apos;s schedule. Would you like to share yours
-          back?
+          You have <strong>{friendName}&apos;s schedule</strong>. Would you like
+          to share yours back?
         </p>
       </div>
       <div>
diff --git a/src/components/ComparisonPanel/index.tsx b/src/components/ComparisonPanel/index.tsx
index 360681f6..ad0a5a3f 100644
--- a/src/components/ComparisonPanel/index.tsx
+++ b/src/components/ComparisonPanel/index.tsx
@@ -132,13 +132,11 @@ export default function ComparisonPanel({
           </label>
         </div>
         {compare && (
-          <div>
-            <ComparisonContainer
-              handleCompareSchedules={handleCompareSchedules}
-              pinnedSchedules={pinnedSchedules}
-              shareBackRemount={shareBackRemount}
-            />
-          </div>
+          <ComparisonContainer
+            handleCompareSchedules={handleCompareSchedules}
+            pinnedSchedules={pinnedSchedules}
+            shareBackRemount={shareBackRemount}
+          />
         )}
         <div className="combination">
           <p className="content-title">Schedule Combinations</p>
diff --git a/src/components/ComparisonPanel/stylesheet.scss b/src/components/ComparisonPanel/stylesheet.scss
index 9a0692dc..6fc2ff73 100644
--- a/src/components/ComparisonPanel/stylesheet.scss
+++ b/src/components/ComparisonPanel/stylesheet.scss
@@ -74,7 +74,6 @@
     display: flex;
     flex: 0 0 1;
     flex-direction: column;
-    overflow: scroll;
     align-items: stretch;
     width: 256px;
     transition: width 0.15s;
@@ -82,7 +81,7 @@
     .comparison-header {
       display: flex;
       align-items: center;
-      margin: 11px 12px 7px 12px;
+      margin: 11px 12px 20px 12px;
 
       p {
         margin: 0px;
@@ -187,18 +186,13 @@
       width: 0px;
     }
 
-    .comparison-container {
-      max-height: calc(100% - 37px);
-      // border-bottom: 1px solid $color-border;
-    }
-
     .combination {
       flex: 1;
 
       .content-title {
         font-weight: 700;
         font-size: 14px;
-        margin: 12px 12px 4px 12px;
+        margin: 18px 12px 4px 12px;
         border-bottom: 2px solid $color-border;
       }
 
diff --git a/src/components/InvitationModal/stylesheet.scss b/src/components/InvitationModal/stylesheet.scss
index 3ec6d527..4e9d01d5 100644
--- a/src/components/InvitationModal/stylesheet.scss
+++ b/src/components/InvitationModal/stylesheet.scss
@@ -182,7 +182,8 @@
           position: absolute;
           max-width: 150px;
           overflow-x: auto;
-
+          overflow-y: auto;
+          max-height: 300px;
           @include dark {
             background-color: $theme-dark-background;
           }