Merge branch 'wevote:develop' into develop

wevote · Oct 3, 2024 · 701733d · 701733d
2 parents 7de8bfb + 777f216
commit 701733d
Show file tree

Hide file tree

Showing 14 changed files with 268 additions and 106 deletions.
diff --git a/package.json b/package.json
@@ -14,7 +14,8 @@
   "scripts": {
     "wdio:setup": "node tests/browserstack_automation/buildMobileCapabilities.js",
     "wdio": "wdio ./tests/browserstack_automation/config/wdio.config.js",
-    "wdio-local": "wdio ./tests/browserstack_automation/config/wdio.config.local.js",
+    "wdio-local-bs": "wdio ./tests/browserstack_automation/config/wdio.config.local.js",
+    "wdio-local": "wdio ./tests/browserstack_automation/config/wdio.local.config.js",
     "build": "node node/buildDateFile.js && npm run build-storybook && PRODUCTION=1 && MINIMIZED=1 webpack --mode production",
     "buildCordova": "node node/buildDateFile.js && node node/buildSrcCordova && CORDOVA=1 && webpack --mode development && node node/logCompileDate.js",
     "buildCordovaAndLinks": "node node/buildDateFile.js && node node/buildSrcCordova && CORDOVA=1 && webpack --mode development && node node/buildSymLinksRemote.js && bash ./node/unSymLinkIOS.sh && node node/logCompileDate.js",

diff --git a/src/js/common/components/Challenge/JoinedAndDaysLeft.jsx b/src/js/common/components/Challenge/JoinedAndDaysLeft.jsx
@@ -5,6 +5,7 @@ import JoinedGreenCircle from '../../../../img/global/svg-icons/issues/joined-gr
 import InfoOutlineIcon from '../../../../img/global/svg-icons/issues/material-symbols-info-outline.svg';
 import ChallengeStore from '../../stores/ChallengeStore';
 import daysUntil from '../../utils/daysUntil';
+import DesignTokenColors from '../Style/DesignTokenColors';
 
 const ChallengeParticipantFirstRetrieveController = React.lazy(() => import(/* webpackChunkName: 'ChallengeParticipantFirstRetrieveController' */ '../ChallengeParticipant/ChallengeParticipantFirstRetrieveController'));
 
@@ -84,8 +85,8 @@ const InfoWrapper = styled('div')`
 
 const JoinedInfoWrapper = styled('div')`
   align-items: center;
-  background-color: #ffffff;
-  border: 1px solid #d2d2d2;
+  background-color: ${DesignTokenColors.whiteUI};
+  border: 1px solid ${DesignTokenColors.gray100};
   border-radius: 20px;
   display: flex;
   height: auto;
@@ -101,20 +102,20 @@ const JoinedIcon = styled('img')`
 `;
 
 const JoinedText = styled('span')`
-  color: #2a2a2c;
+  color: ${DesignTokenColors.gray900};
   font-size: 13px;
   font-weight: 400;
 `;
 
 const DotSeparator = styled('span')`
-  color: #6b6b6b;
+  color: ${DesignTokenColors.gray500};
   font-size: 13px;
   font-weight: 400;
   margin: 0 5px;
 `;
 
 const DaysLeftText = styled('span')`
-  color: #2a2a2c;
+  color: ${DesignTokenColors.gray900};
   font-size: 13px;
   font-weight: 600;
   letter-spacing: -0.03em;

diff --git a/src/js/common/components/ChallengeInviteeListRoot/ChallengeInviteeList.jsx b/src/js/common/components/ChallengeInviteeListRoot/ChallengeInviteeList.jsx
@@ -21,7 +21,7 @@ const ChallengeInviteeListContainer = styled.div`
   display: flex;
   flex-direction: column;
   overflow-y: scroll;
-  height: calc(100vh - 270px);
+  height: calc(100vh - 200px);
 `;
 
 export default ChallengeInviteeList;
diff --git a/src/js/common/components/ChallengeInviteeListRoot/ChallengeInviteeListItem.jsx b/src/js/common/components/ChallengeInviteeListRoot/ChallengeInviteeListItem.jsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Avatar } from '@mui/material';
+import { Avatar, Button } from '@mui/material';
+import { withStyles } from '@mui/styles';
 import { RemoveRedEye, CheckCircle, Check, MoreHoriz } from '@mui/icons-material';
 import DesignTokenColors from '../Style/DesignTokenColors';
 import speakerDisplayNameToInitials from '../../utils/speakerDisplayNameToInitials';
 
-const ChallengeInviteeListItem = ({ invitee }) => {
+const ChallengeInviteeListItem = ({ invitee, classes }) => {
   // console.log('ChallengeInviteeListItem:', invitee);
   const { sx, children } = speakerDisplayNameToInitials(invitee.invitee_name);
   return (
@@ -17,13 +18,14 @@ const ChallengeInviteeListItem = ({ invitee }) => {
           {' '}
           <Name>{invitee.invitee_name}</Name>
         </FriendName>
-        <MessageStatus>
-          {invitee.messageStatus === 'Message Viewed' && <RemoveRedEye />}
-          {invitee.messageStatus === 'Message Sent' && <Check />}
-          {invitee.messageStatus === 'Challenge Joined' && <CheckCircle />}
-          {'  '}
+        <MessageContainer>
+          <MessageStatus>
+            {invitee.messageStatus === 'Message Viewed' && <RemoveRedEye />}
+            {invitee.messageStatus === 'Message Sent' && <Check />}
+            {invitee.messageStatus === 'Challenge Joined' && <CheckCircle />}
+          </MessageStatus>
           {invitee.messageStatus}
-        </MessageStatus>
+        </MessageContainer>
         <VerticalLine />
         <ActivityCommentEditWrapper>
           <MoreHoriz />
@@ -32,14 +34,20 @@ const ChallengeInviteeListItem = ({ invitee }) => {
       <Options>
         <div>
           {invitee.invite_sent === false && (
-            <InformationtoWevote>
+            <Button
+            classes={{ root: classes.buttonDesktop }}
+              color="primary"
+              id="challengeLeaderboardTop50Button"
+              onClick={() => console.log('Top 50 button clicked')}
+              variant="outlined"
+            >
               Let us know you sent the message
-            </InformationtoWevote>
+            </Button>
           )}
         </div>
         {invitee.messageStatus !== 'Challenge Joined' && (
           <Invite>
-            Invite Again
+            Invite again
           </Invite>
         )}
       </Options>
@@ -49,16 +57,28 @@ const ChallengeInviteeListItem = ({ invitee }) => {
 
 ChallengeInviteeListItem.propTypes = {
   invitee: PropTypes.object,
+  classes: PropTypes.object.isRequired,
 };
 
+const styles = () => ({
+  buttonDesktop: {
+    padding: '2px 10px',
+    borderRadius: 20,
+    fontSize: 14,
+  },
+  searchButton: {
+    borderRadius: 50,
+  },
+});
+
+
 const InvitedFriendDetails = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 10px;
   padding: 15px 2px;
   border-bottom: 1px solid ${DesignTokenColors.neutral100};
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 `;
 
 const PrimaryDetails = styled.div`
@@ -85,40 +105,42 @@ const Name = styled.div`
   color: ${DesignTokenColors.neutral900};
 `;
 
+const MessageContainer = styled.div`
+  display: flex;
+`;
+
 const MessageStatus = styled.div`
-  width: 170px;
   text-align: center;
   font-size: 14px;
   color: ${DesignTokenColors.confirmation800};
+  margin-right: 10px;
 `;
 
 const VerticalLine = styled.div`
-  border-left: 1px solid black;
+  border-left: 1px solid ${DesignTokenColors.neutral200};
   height: 30px;
   margin: 0 10px;
 `;
 
 const ActivityCommentEditWrapper = styled('div')`
   margin-right: 10px;
+  color: ${DesignTokenColors.neutral900};
+  :hover {
+    color: ${DesignTokenColors.neutral400};
+    cursor: pointer;
+  }
 `;
 
 const Options = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   font-size: 14px;
-  color: #4371cc;
 `;
 
-const InformationtoWevote = styled.div`
-  border: 2px solid #4371cc;
-  border-radius: 15px;
-  padding:5px;
-  font-size: 15px;;
-`;
-
-const Invite = styled.div`
+const Invite = styled.a`
   padding: 5px;
+  color: #4371cc;
 `;
 
-export default ChallengeInviteeListItem;
+export default withStyles(styles)(ChallengeInviteeListItem);
diff --git a/src/js/common/components/ChallengeInviteeListRoot/ChallengeInviteeListRoot.jsx b/src/js/common/components/ChallengeInviteeListRoot/ChallengeInviteeListRoot.jsx
@@ -5,6 +5,7 @@ import { withStyles } from '@mui/styles';
 import ChallengeInviteeList from './ChallengeInviteeList';
 import FirstChallengeInviteeListController from './FirstChallengeInviteeListController';
 import ChallengeInviteeStore from '../../stores/ChallengeInviteeStore';
+import DesignTokenColors from '../Style/DesignTokenColors';
 
 const inviteeListDummyData = [
   { invitee_id: 1, invitee_name: 'Jane', invite_sent: false, invite_viewed: false, challenge_joined: false, messageStatus: '' },
@@ -19,6 +20,9 @@ const inviteeListDummyData = [
   { invitee_id: 10, invitee_name: 'Melina H.', invite_sent: true, invite_viewed: true, challenge_joined: true, messageStatus: 'Challenge Joined' },
   { invitee_id: 11, invitee_name: 'Melina H.', invite_sent: true, invite_viewed: false, challenge_joined: false, messageStatus: 'Message Sent' },
   { invitee_id: 12, invitee_name: 'Melina H.', invite_sent: true, invite_viewed: false, challenge_joined: false, messageStatus: 'Message Sent' },
+  { invitee_id: 13, invitee_name: 'Melina H.', invite_sent: true, invite_viewed: true, challenge_joined: true, messageStatus: 'Challenge Joined' },
+  { invitee_id: 14, invitee_name: 'Melina H.', invite_sent: true, invite_viewed: false, challenge_joined: false, messageStatus: 'Message Sent' },
+  { invitee_id: 15, invitee_name: 'Melina H.', invite_sent: true, invite_viewed: false, challenge_joined: false, messageStatus: 'Message Sent' },
 ];
 
 const ChallengeInviteeListRoot = ({ challengeWeVoteId, classes }) => {
@@ -45,12 +49,22 @@ const ChallengeInviteeListRoot = ({ challengeWeVoteId, classes }) => {
   return (
     <ChallengeInviteeListRootContainer>
       <Heading>
-        <StyledP>Invited Friends</StyledP>
+        <RankContainer>
+          <RankText>You&apos;re</RankText>
+          {' '}
+          <RankNumber>#5341</RankNumber>
+          {' '}
+          <RankDetails>(of 6441)</RankDetails>
+        </RankContainer>
+        <FirendsTableHeader>
+          <HeaderItem>FRIENDS NAME</HeaderItem>
+          <HeaderItem>STATUS</HeaderItem>
+        </FirendsTableHeader>
       </Heading>
       <ChallengeInviteeList
         challengeWeVoteId={challengeWeVoteId}
-        inviteeList={inviteeList}
-        // inviteeList={inviteeListDummyData}
+        // inviteeList={inviteeList}
+        inviteeList={inviteeListDummyData}
       />
       <Suspense fallback={<></>}>
         <FirstChallengeInviteeListController challengeWeVoteId={challengeWeVoteId} searchText="SEARCH TEXT HERE" />
@@ -68,9 +82,6 @@ const styles = () => ({
     padding: '2px 16px',
     borderRadius: 5,
   },
-  searchButton: {
-    borderRadius: 50,
-  },
 });
 
 const ChallengeInviteeListRootContainer = styled.div`
@@ -80,13 +91,40 @@ const ChallengeInviteeListRootContainer = styled.div`
 `;
 
 const Heading = styled.div`
-  padding: 0 5px;
+  padding: 10px 0;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 `;
 
-const StyledP = styled.p`
+const FirendsTableHeader = styled('div')`
+  display: flex;
+  justify-content: space-between;
+  width: 80%;
   font-weight: bold;
-  padding: 10px;
+  font-size: 12px;
+  color: #333;
+`;
+
+const HeaderItem = styled.p`
+  margin: 0;  /* Reset default margins */
+`;
+
+const RankContainer = styled.p`
+  font-size: 16px;
+  color: ${DesignTokenColors.neutral900}; /* Default color */
+`;
+
+const RankText = styled.span`
+  font-weight: bold;
+  color: ${DesignTokenColors.neutral900};  /* Color for "You're" */
+`;
+
+const RankNumber = styled.span`
+  font-weight: bold;
+  color: ${DesignTokenColors.accent500};  /* Accent color for the rank number */
+`;
+
+const RankDetails = styled.span`
+  color: ${DesignTokenColors.neutral600};  /* Subdued color for "(of 6441)" */
 `;
 
 export default withStyles(styles)(ChallengeInviteeListRoot);