diff --git a/assets/css/main.css b/assets/css/main.css index 20e70c23..993f2242 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -4927,27 +4927,37 @@ input.field--reset:active { font-size: 14px; max-width: 20vw; } -.navItem--counterBadge, .navItem--counterBadgeProNotifications, .navItem--counterBadgeProMessages { - background-color: #f65858; - border: 2px solid white; +.navItem--connections { + display: none; } + @media screen and (min-width: 768px) { + .navItem--connections { + display: block; } } + +.navItem--counterBadge, .navItem--counterBadgeConnections, .navItem--counterBadgeProNotifications, .navItem--counterBadgeProMessages { + background-color: #e32359; + border: 1px solid white; border-radius: 10px; box-sizing: border-box; display: inline-block; - height: 14px; + height: 10px; position: absolute; - width: 14px; } + width: 10px; } .navItem--counterBadge { - bottom: 12px; - right: -3px; } + bottom: 14px; + right: -5px; } + +.navItem--counterBadgeConnections { + bottom: 40px; + right: 22px; } .navItem--counterBadgeProNotifications { - bottom: 38px; - right: 24px; } + bottom: 40px; + right: 28px; } .navItem--counterBadgeProMessages { - bottom: 38px; - right: 14px; } + bottom: 40px; + right: 18px; } .navItem-label { color: rgba(46, 62, 72, 0.6); @@ -5087,38 +5097,43 @@ input.field--reset:active { .notification--read { background: #f6f7f8 !important; } -.profileDropdown-content.wide { - width: 512px; } - -.profileDropdown-content.new-padding { - padding: 12px 16px; } - -.profileDropdown-content .list-item { - padding-bottom: 8px !important; - padding-top: 8px !important; } - -.profileDropdown-content .profileDropdown-draft-group { - padding-top: 0 !important; } - -.profileDropdown-content .links-divider { - border-top: thin; - margin-bottom: 12px; - margin-top: 12px; } - -.profileDropdown-content .links-item { - box-sizing: border-box; - color: inherit; - display: inline-block; - font-size: 14px; - font-weight: 400; - line-height: 1.43; - margin: 0; - min-width: 0; - padding-bottom: 4px; - padding-top: 4px; - text-decoration: none; } - .profileDropdown-content .links-item:hover { - color: #00798a; } +.profileDropdown-content { + /* stylelint-enable */ } + .profileDropdown-content.wide { + width: 512px; } + .profileDropdown-content.new-padding { + padding: 12px 16px; } + .profileDropdown-content .list-item { + padding-bottom: 8px !important; + padding-top: 8px !important; } + .profileDropdown-content .profileDropdown-draft-group { + padding-top: 0 !important; } + .profileDropdown-content .links-divider { + border-top: thin; + margin-bottom: 12px; + margin-top: 12px; } + .profileDropdown-content .links-item { + box-sizing: border-box; + color: inherit; + display: inline-block; + font-size: 14px; + font-weight: 400; + line-height: 1.43; + margin: 0; + min-width: 0; + padding-bottom: 4px; + padding-top: 4px; + text-decoration: none; + /* stylelint-disable selector-max-compound-selectors, selector-max-combinators, selector-max-class */ } + .profileDropdown-content .links-item--connections { + display: none; } + @media screen and (max-width: 768px) { + .profileDropdown-content .links-item--connections { + display: block; } } + .profileDropdown-content .links-item--connections .navItem--counterBadgeConnections { + position: initial; } + .profileDropdown-content .links-item:hover { + color: #00798a; } .profileDropdown-draft-group div { color: #0cbadf; diff --git a/assets/scss/components/_navbar.scss b/assets/scss/components/_navbar.scss index e08a3800..45b0f524 100644 --- a/assets/scss/components/_navbar.scss +++ b/assets/scss/components/_navbar.scss @@ -73,10 +73,18 @@ $zindex--aboveFloatingContent: map-get($zindex-map, "floating-content") + 1; } } +.navItem--connections { + display: none; + + @media screen and (min-width: 768px) { + display: block; + } +} + %navItem--counterBadgePlaceholder { - $_newDotSize: 14px; - background-color: #f65858; - border: 2px solid $C-white; + $_newDotSize: 10px; + background-color: #e32359; + border: 1px solid $C-white; border-radius: 10px; box-sizing: border-box; display: inline-block; @@ -87,20 +95,26 @@ $zindex--aboveFloatingContent: map-get($zindex-map, "floating-content") + 1; .navItem--counterBadge { @extend %navItem--counterBadgePlaceholder; - bottom: 12px; - right: -3px; + bottom: 14px; + right: -5px; +} + +.navItem--counterBadgeConnections { + @extend %navItem--counterBadgePlaceholder; + bottom: 40px; + right: 22px; } .navItem--counterBadgeProNotifications { @extend %navItem--counterBadgePlaceholder; - bottom: 38px; - right: 24px; + bottom: 40px; + right: 28px; } .navItem--counterBadgeProMessages { @extend %navItem--counterBadgePlaceholder; - bottom: 38px; - right: 14px; + bottom: 40px; + right: 18px; } $maxLabelSize: 12; @@ -331,10 +345,21 @@ $maxScalingBP: $breakpoint-m / 1px; padding-top: 4px; text-decoration: none; + /* stylelint-disable selector-max-compound-selectors, selector-max-combinators, selector-max-class */ + &--connections { + display: none; + @media screen and (max-width: 768px) { + display: block; + } + .navItem--counterBadgeConnections { + position: initial; + } + } &:hover { color: #00798a; } } + /* stylelint-enable */ } .profileDropdown-draft-group { diff --git a/assets/svg/connections.svg b/assets/svg/connections.svg new file mode 100644 index 00000000..145404f0 --- /dev/null +++ b/assets/svg/connections.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/navigation/Nav.jsx b/src/navigation/Nav.jsx index 1805a2aa..0917df25 100644 --- a/src/navigation/Nav.jsx +++ b/src/navigation/Nav.jsx @@ -22,6 +22,7 @@ import NavbarSearch, { NAVBAR_SEARCH_INPUT_ID } from './components/search/Navbar import MESSAGE_ICON from '../../assets/svg/message.svg'; import NOTIFICATION_ICON from '../../assets/svg/notification.svg'; +import CONNECTIONS_ICON from '../../assets/svg/connections.svg'; import PRO_DASHBOARD_ICON from '../../assets/svg/proDashboard.svg'; const CLASS_UNAUTH_ITEM = 'navItem--unauthenticated'; @@ -170,6 +171,7 @@ export class Nav extends React.Component { proDashboard, explore, // eslint-disable-line no-unused-vars messages, + connections, notifications, groups, groupDraft, @@ -230,6 +232,7 @@ export class Nav extends React.Component { savedEvents={profile.profileDropdown.savedEvents} yourGroups={profile.profileDropdown.yourGroups} yourEvents={profile.profileDropdown.yourEvents} + yourConnections={profile.profileDropdown.yourConnections} profile={profile} groups={groups.list} groupDraft={groupDraft} @@ -237,6 +240,7 @@ export class Nav extends React.Component { isNewNavsOrder={ isNewNavsOrder && (localeCode ? localeCode.includes('en') : false) } + hasNewConnections={connections.hasNewConnections} /> ) : ( @@ -277,6 +281,10 @@ export class Nav extends React.Component { ); }; + const getConnectionsIcon = () => ( + {connections.label} + ); + const getNotificationsIcon = () => { if (media.isAtMediumUp) { return ( @@ -391,6 +399,19 @@ export class Nav extends React.Component { linkClassName: 'navItemLink-pro', isTargetBlank: true, }, + media.isAtMediumUp && { + shrink: true, + linkTo: connections.link, + label: connections.label, + labelClassName: 'navItem-label-pro', + className: cx('navItem--connections', CLASS_AUTH_ITEM), + linkClassName: 'navItemLink-pro', + counterBadgeClassName: 'navItem--counterBadgeConnections', + icon: getConnectionsIcon(), + hasUpdates: connections.hasNewConnections > 0, + updatesLabel: updatesLabel, + onLinkClick: messages.onLinkClick, + }, { shrink: true, linkTo: messages.link, diff --git a/src/navigation/__snapshots__/Nav.test.jsx.snap b/src/navigation/__snapshots__/Nav.test.jsx.snap index eb69621d..9db053e6 100644 --- a/src/navigation/__snapshots__/Nav.test.jsx.snap +++ b/src/navigation/__snapshots__/Nav.test.jsx.snap @@ -373,6 +373,24 @@ exports[`Nav should match the snapshot for authenticated medium screens 1`] = ` linkTo="meetup.com/lp/meetup-pro/?fromUpgrade=true&utm_medium=display&utm_source=meetup&utm_content=lp_pro&utm_campaign=meetup_orgeng_c2p_pro" shrink={true} /> + + } + key="3" + label="Connections" + labelClassName="navItem-label-pro" + linkClassName="navItemLink-pro" + linkTo="meetup.com/your-connections" + shrink={true} + /> } - key="3" + key="4" label="Messages" labelClassName="navItem-label-pro" linkClassName="navItemLink-pro" @@ -402,7 +420,7 @@ exports[`Nav should match the snapshot for authenticated medium screens 1`] = ` src="" /> } - key="4" + key="5" label="Notifications" labelClassName="navItem-label-pro" linkClassName="navItemLink-pro" @@ -428,6 +446,7 @@ exports[`Nav should match the snapshot for authenticated medium screens 1`] = ` }, ] } + hasNewConnections={true} help={ Object { "label": "Help", @@ -475,6 +494,10 @@ exports[`Nav should match the snapshot for authenticated medium screens 1`] = ` "label": "Settings", "link": "meetup.com/settings", }, + "yourConnections": Object { + "label": "Your connections", + "link": "meetup.com/your-connections", + }, "yourEvents": Object { "label": "Your events", "link": "meetup.com/your-events", @@ -498,6 +521,12 @@ exports[`Nav should match the snapshot for authenticated medium screens 1`] = ` "link": "meetup.com/settings", } } + yourConnections={ + Object { + "label": "Your connections", + "link": "meetup.com/your-connections", + } + } yourEvents={ Object { "label": "Your events", @@ -546,7 +575,7 @@ exports[`Nav should match the snapshot for authenticated medium screens 1`] = ` } - key="5" + key="6" label="Profile" labelClassName="navItem-label display--block atMedium_display--none" linkTo="" @@ -636,6 +665,25 @@ exports[`Nav should match the snapshot for authenticated medium screens and new linkTo="meetup.com/lp/meetup-pro/?fromUpgrade=true&utm_medium=display&utm_source=meetup&utm_content=lp_pro&utm_campaign=meetup_orgeng_c2p_pro" shrink={true} /> + + } + isNewNavActive={true} + key="3" + label="Connections" + labelClassName="navItem-label-pro" + linkClassName="navItemLink-pro" + linkTo="meetup.com/your-connections" + shrink={true} + /> } isNewNavActive={true} - key="3" + key="4" label="Messages" labelClassName="navItem-label-pro" linkClassName="navItemLink-pro" @@ -667,7 +715,7 @@ exports[`Nav should match the snapshot for authenticated medium screens and new /> } isNewNavActive={true} - key="4" + key="5" label="Notifications" labelClassName="navItem-label-pro" linkClassName="navItemLink-pro" @@ -693,6 +741,7 @@ exports[`Nav should match the snapshot for authenticated medium screens and new }, ] } + hasNewConnections={true} help={ Object { "label": "Help", @@ -741,6 +790,10 @@ exports[`Nav should match the snapshot for authenticated medium screens and new "label": "Settings", "link": "meetup.com/settings", }, + "yourConnections": Object { + "label": "Your connections", + "link": "meetup.com/your-connections", + }, "yourEvents": Object { "label": "Your events", "link": "meetup.com/your-events", @@ -764,6 +817,12 @@ exports[`Nav should match the snapshot for authenticated medium screens and new "link": "meetup.com/settings", } } + yourConnections={ + Object { + "label": "Your connections", + "link": "meetup.com/your-connections", + } + } yourEvents={ Object { "label": "Your events", @@ -813,7 +872,7 @@ exports[`Nav should match the snapshot for authenticated medium screens and new } isNewNavActive={true} - key="5" + key="6" label="Profile" labelClassName="navItem-label display--block atMedium_display--none" linkTo="" @@ -1176,6 +1235,24 @@ exports[`Nav should match the snapshot for groups loading state 1`] = ` linkTo="meetup.com/lp/meetup-pro/?fromUpgrade=true&utm_medium=display&utm_source=meetup&utm_content=lp_pro&utm_campaign=meetup_orgeng_c2p_pro" shrink={true} /> + + } + key="3" + label="Connections" + labelClassName="navItem-label-pro" + linkClassName="navItemLink-pro" + linkTo="meetup.com/your-connections" + shrink={true} + /> } - key="3" + key="4" label="Messages" labelClassName="navItem-label-pro" linkClassName="navItemLink-pro" @@ -1205,7 +1282,7 @@ exports[`Nav should match the snapshot for groups loading state 1`] = ` src="" /> } - key="4" + key="5" label="Notifications" labelClassName="navItem-label-pro" linkClassName="navItemLink-pro" @@ -1231,6 +1308,7 @@ exports[`Nav should match the snapshot for groups loading state 1`] = ` }, ] } + hasNewConnections={true} help={ Object { "label": "Help", @@ -1278,6 +1356,10 @@ exports[`Nav should match the snapshot for groups loading state 1`] = ` "label": "Settings", "link": "meetup.com/settings", }, + "yourConnections": Object { + "label": "Your connections", + "link": "meetup.com/your-connections", + }, "yourEvents": Object { "label": "Your events", "link": "meetup.com/your-events", @@ -1301,6 +1383,12 @@ exports[`Nav should match the snapshot for groups loading state 1`] = ` "link": "meetup.com/settings", } } + yourConnections={ + Object { + "label": "Your connections", + "link": "meetup.com/your-connections", + } + } yourEvents={ Object { "label": "Your events", @@ -1349,7 +1437,7 @@ exports[`Nav should match the snapshot for groups loading state 1`] = ` } - key="5" + key="6" label="Profile" labelClassName="navItem-label display--block atMedium_display--none" linkTo="" @@ -1444,6 +1532,24 @@ exports[`Nav should match the snapshot for notifications loading state 1`] = ` linkTo="meetup.com/lp/meetup-pro/?fromUpgrade=true&utm_medium=display&utm_source=meetup&utm_content=lp_pro&utm_campaign=meetup_orgeng_c2p_pro" shrink={true} /> + + } + key="3" + label="Connections" + labelClassName="navItem-label-pro" + linkClassName="navItemLink-pro" + linkTo="meetup.com/your-connections" + shrink={true} + /> } - key="3" + key="4" label="Messages" labelClassName="navItem-label-pro" linkClassName="navItemLink-pro" @@ -1473,7 +1579,7 @@ exports[`Nav should match the snapshot for notifications loading state 1`] = ` src="" /> } - key="4" + key="5" label="Notifications" labelClassName="navItem-label-pro" linkClassName="navItemLink-pro" @@ -1499,6 +1605,7 @@ exports[`Nav should match the snapshot for notifications loading state 1`] = ` }, ] } + hasNewConnections={true} help={ Object { "label": "Help", @@ -1546,6 +1653,10 @@ exports[`Nav should match the snapshot for notifications loading state 1`] = ` "label": "Settings", "link": "meetup.com/settings", }, + "yourConnections": Object { + "label": "Your connections", + "link": "meetup.com/your-connections", + }, "yourEvents": Object { "label": "Your events", "link": "meetup.com/your-events", @@ -1569,6 +1680,12 @@ exports[`Nav should match the snapshot for notifications loading state 1`] = ` "link": "meetup.com/settings", } } + yourConnections={ + Object { + "label": "Your connections", + "link": "meetup.com/your-connections", + } + } yourEvents={ Object { "label": "Your events", @@ -1617,7 +1734,7 @@ exports[`Nav should match the snapshot for notifications loading state 1`] = ` } - key="5" + key="6" label="Profile" labelClassName="navItem-label display--block atMedium_display--none" linkTo="" @@ -2013,6 +2130,24 @@ exports[`Nav should match the snapshot for unread notifications 1`] = ` linkTo="meetup.com/lp/meetup-pro/?fromUpgrade=true&utm_medium=display&utm_source=meetup&utm_content=lp_pro&utm_campaign=meetup_orgeng_c2p_pro" shrink={true} /> + + } + key="3" + label="Connections" + labelClassName="navItem-label-pro" + linkClassName="navItemLink-pro" + linkTo="meetup.com/your-connections" + shrink={true} + /> } - key="3" + key="4" label="Messages" labelClassName="navItem-label-pro" linkClassName="navItemLink-pro" @@ -2042,7 +2177,7 @@ exports[`Nav should match the snapshot for unread notifications 1`] = ` src="" /> } - key="4" + key="5" label="Notifications" labelClassName="navItem-label-pro" linkClassName="navItemLink-pro" @@ -2068,6 +2203,7 @@ exports[`Nav should match the snapshot for unread notifications 1`] = ` }, ] } + hasNewConnections={true} help={ Object { "label": "Help", @@ -2115,6 +2251,10 @@ exports[`Nav should match the snapshot for unread notifications 1`] = ` "label": "Settings", "link": "meetup.com/settings", }, + "yourConnections": Object { + "label": "Your connections", + "link": "meetup.com/your-connections", + }, "yourEvents": Object { "label": "Your events", "link": "meetup.com/your-events", @@ -2138,6 +2278,12 @@ exports[`Nav should match the snapshot for unread notifications 1`] = ` "link": "meetup.com/settings", } } + yourConnections={ + Object { + "label": "Your connections", + "link": "meetup.com/your-connections", + } + } yourEvents={ Object { "label": "Your events", @@ -2186,7 +2332,7 @@ exports[`Nav should match the snapshot for unread notifications 1`] = ` } - key="5" + key="6" label="Profile" labelClassName="navItem-label display--block atMedium_display--none" linkTo="" diff --git a/src/navigation/components/profile/ProfileDropdown.jsx b/src/navigation/components/profile/ProfileDropdown.jsx index a919cd4a..2deb0f4c 100644 --- a/src/navigation/components/profile/ProfileDropdown.jsx +++ b/src/navigation/components/profile/ProfileDropdown.jsx @@ -35,6 +35,8 @@ export const ProfileDropdownComponent = ({ yourGroups, isNewNavActive, isNewNavsOrder, + yourConnections, + hasNewConnections, }) => { const groupsContent = groups.map(group => (
  • + {!!yourConnections && ( +
  • + + {yourConnections.label}{' '} + {hasNewConnections ? ( + + ) : ( + '🆕' + )} + +
  • + )} ) : ( diff --git a/src/navigation/nav.story.jsx b/src/navigation/nav.story.jsx index feb97674..190c4c31 100644 --- a/src/navigation/nav.story.jsx +++ b/src/navigation/nav.story.jsx @@ -76,6 +76,11 @@ export const navItemsFactory = () => { 'meetup.com/lp/meetup-pro/?fromUpgrade=true&utm_medium=display&utm_source=meetup&utm_content=lp_pro&utm_campaign=meetup_orgeng_c2p_pro', label: 'Try for free', }, + connections: { + link: 'meetup.com/your-connections', + label: 'Connections', + hasNewConnections: true, + }, messages: { link: 'meetup.com/messages', label: 'Messages', @@ -111,6 +116,10 @@ export const navItemsFactory = () => { savedEvents: { link: 'meetup.com/saved-events', label: 'Saved events' }, yourGroups: { link: 'meetup.com/groups', label: 'Your groups' }, yourEvents: { link: 'meetup.com/your-events', label: 'Your events' }, + yourConnections: { + link: 'meetup.com/your-connections', + label: 'Your connections', + }, allGroupsLabel: 'See all groups', allGroupsLink: 'meetup.com/groups', groupHome: () => {},