From 3c4edf355471cba2a684c0f5d4e845e95160a0eb Mon Sep 17 00:00:00 2001
From: Hel Nershing Thapa <helnershingthapa@gmail.com>
Date: Thu, 28 Jul 2022 14:46:06 +0545
Subject: [PATCH] Style notifications mini popover

---
 frontend/src/assets/styles/_extra.scss        | 11 ++++
 frontend/src/assets/styles/_typography.scss   |  7 ++-
 .../src/components/notifications/inboxNav.js  | 53 +++++++++----------
 .../src/components/notifications/messages.js  |  2 +-
 .../notifications/notificationCard.js         | 25 +++++----
 .../notifications/notificationResults.js      |  2 +-
 frontend/src/locales/en.json                  |  4 +-
 frontend/src/views/notifications.js           |  2 +-
 8 files changed, 64 insertions(+), 42 deletions(-)

diff --git a/frontend/src/assets/styles/_extra.scss b/frontend/src/assets/styles/_extra.scss
index 97795f363b..5953629f65 100644
--- a/frontend/src/assets/styles/_extra.scss
+++ b/frontend/src/assets/styles/_extra.scss
@@ -390,4 +390,15 @@ a[href="https://www.mapbox.com/map-feedback/"] {
 .sticky-top {
   position: sticky !important;
   top: 0;
+}
+
+.notifications-header {
+  h3 {
+    letter-spacing: -0.110252px;
+    line-height: 20px;
+  }
+}
+
+.notifications-header>div {
+  padding: 1.5rem;
 }
\ No newline at end of file
diff --git a/frontend/src/assets/styles/_typography.scss b/frontend/src/assets/styles/_typography.scss
index b680d7787a..93273cb1d6 100644
--- a/frontend/src/assets/styles/_typography.scss
+++ b/frontend/src/assets/styles/_typography.scss
@@ -3,8 +3,13 @@
    ========================================================================== */
 
 .barlow-condensed {
-  font-family: 'Barlow Condensed', sans-serif;;
+  font-family: 'Barlow Condensed', sans-serif;
 }
+
 .base-font {
   font-family: "Archivo", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
+
+.f125 {
+  font-size: 1.25rem;
+}
\ No newline at end of file
diff --git a/frontend/src/components/notifications/inboxNav.js b/frontend/src/components/notifications/inboxNav.js
index 73bb1562df..3acef93198 100644
--- a/frontend/src/components/notifications/inboxNav.js
+++ b/frontend/src/components/notifications/inboxNav.js
@@ -24,32 +24,30 @@ const isActiveButton = (buttonName, projectQuery) => {
 export const InboxNavMini = (props) => {
   return (
     /* mb1 mb2-ns (removed for map, but now small gap for more-filters) */
-    <header className="">
-      <div className="cf">
-        <div className="w-100 fl">
-          <h3 className="fl f4 barlow-condensed fw8">
-            <FormattedMessage {...messages.notifications} />
-          </h3>
-          {props.newMsgCount > 0 && (
-            <Link
-              to="/inbox?orderBy=read&orderByType=DESC"
-              onClick={(e) => {
-                props.setPopoutFocus(false);
-              }}
-            >
-              <div className="dib fr br2 core-font b--white ba bg-red grey-light f7 mv3 pa2">
-                {props.newMsgCount === 1 ? (
-                  <FormattedMessage {...messages.oneNewNotification} />
-                ) : (
-                  <FormattedMessage
-                    {...messages.newNotifications}
-                    values={{ n: props.newMsgCount }}
-                  />
-                )}
-              </div>
-            </Link>
-          )}
-        </div>
+    <header className="notifications-header">
+      <div className="w-100 flex justify-between">
+        <h3 className="f4 fw7 ma0 f125">
+          <FormattedMessage {...messages.notifications} />
+        </h3>
+        {props.newMsgCount > 0 && (
+          <Link
+            to="/inbox?orderBy=read&orderByType=DESC"
+            onClick={(e) => {
+              props.setPopoutFocus(false);
+            }}
+          >
+            <div className="flex justify-between items-center fr br2 bg-red f7 lh-solid white ph2 pv1">
+              {props.newMsgCount === 1 ? (
+                <FormattedMessage {...messages.oneNewNotification} />
+              ) : (
+                <FormattedMessage
+                  {...messages.newNotifications}
+                  values={{ n: props.newMsgCount }}
+                />
+              )}
+            </div>
+          </Link>
+        )}
       </div>
     </header>
   );
@@ -59,11 +57,12 @@ export const InboxNavMiniBottom = (props) => {
     /* mb1 mb2-ns (removed for map, but now small gap for more-filters) */
     <footer className={`relative h2 w-100 ${props.className || ''}`}>
       <Link
-        className="absolute hover-darken tc pv2 w-100 b--grey-light ba bg-red white f6 no-underline"
+        className="absolute flex items-center justify-center hover-darken tc pv2 w-100 b--grey-light bg-red white f5 no-underline br2 br--bottom"
         to="/inbox"
         onClick={(e) => {
           props.setPopoutFocus(false);
         }}
+        style={{ height: '3rem' }}
       >
         {props.msgCount ? (
           <FormattedMessage {...messages.viewAll} />
diff --git a/frontend/src/components/notifications/messages.js b/frontend/src/components/notifications/messages.js
index fadadf1e32..94c443f741 100644
--- a/frontend/src/components/notifications/messages.js
+++ b/frontend/src/components/notifications/messages.js
@@ -58,7 +58,7 @@ export default defineMessages({
   },
   newNotifications: {
     id: 'notifications.nav.new.plural',
-    defaultMessage: '{n} new messages',
+    defaultMessage: '{n} new ',
   },
   viewAll: {
     id: 'notifications.nav.viewAll',
diff --git a/frontend/src/components/notifications/notificationCard.js b/frontend/src/components/notifications/notificationCard.js
index 6930f32569..8fabefd24f 100644
--- a/frontend/src/components/notifications/notificationCard.js
+++ b/frontend/src/components/notifications/notificationCard.js
@@ -171,17 +171,22 @@ export function NotificationCardMini({
 }: Object) {
   return (
     <Link to={`/inbox/message/${messageId}`} className="no-underline hover-red">
-      <article className="db base-font w-100 mb2 hover-red blue-dark">
-        <div className="pr3">
-          <div style={{ width: '1.5rem' }} className="fl w-25 dib h2 ml2 mr3 v-top">
-            <MessageAvatar messageType={messageType} fromUsername={fromUsername} size={'small'} />
+      <article
+        className="db base-font w-100 hover-red blue-dark"
+        style={{ marginBottom: '1.5rem' }}
+      >
+        <div className="flex" style={{ gap: '1rem' }}>
+          <div className="h2 v-top">
+            <MessageAvatar messageType={messageType} fromUsername={fromUsername} size={'medium'} />
           </div>
-          <div
-            className="dib f7 w-75 fl messageSubjectLinks"
-            dangerouslySetInnerHTML={rawHtmlNotification(subject)}
-          ></div>
-          <div className="blue-grey f7 mb1 cf dib">
-            <RelativeTimeWithUnit date={sentDate} />
+          <div>
+            <div
+              className="f7 messageSubjectLinks"
+              dangerouslySetInnerHTML={rawHtmlNotification(subject)}
+            ></div>
+            <div className="blue-grey f7 mt2">
+              <RelativeTimeWithUnit date={sentDate} />
+            </div>
           </div>
         </div>
       </article>
diff --git a/frontend/src/components/notifications/notificationResults.js b/frontend/src/components/notifications/notificationResults.js
index 65e661c9d9..25abe595c8 100644
--- a/frontend/src/components/notifications/notificationResults.js
+++ b/frontend/src/components/notifications/notificationResults.js
@@ -71,7 +71,7 @@ export const NotificationResults = ({
           </div>
         </div>
       ) : null}
-      <div className={`cf ${!useMiniCard ? 'ml1 db' : 'dib'}`}>
+      <div className={`cf ${!useMiniCard ? 'ml1 db' : 'dib'}`} style={{ padding: '0 1.5rem' }}>
         <ReactPlaceholder ready={!loading && stateNotifications} type="media" rows={10}>
           <NotificationCards
             pageOfCards={stateNotifications}
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 41add66813..f769499de3 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -179,7 +179,7 @@
   "notifications.navFilters.error.simple": "Error loading the {xWord}",
   "notifications.pagination.count": "Showing {number} of {total}",
   "notifications.nav.new.one": "1 new message",
-  "notifications.nav.new.plural": "{n} new messages",
+  "notifications.nav.new.plural": "{n} new ",
   "notifications.nav.viewAll": "View all",
   "notifications.nav.goToNotifications": "Go to notifications",
   "notifications.nav.noUnread": "No unread messages",
@@ -359,6 +359,7 @@
   "projects.formInputs.campaign.title": "Campaign",
   "projects.formInputs.categories.title": "Categories",
   "projects.formInputs.organisation.description": "Organization that is coordinating the project, if there is any. The managers of that organization will have administration rights over the project.",
+  "projects.formInputs.admins.title": "TM Admins",
   "projects.formInputs.imagery.select": "Select imagery",
   "projects.formInputs.license.select": "Select license",
   "projects.formInputs.organisation.select": "Select organization",
@@ -855,6 +856,7 @@
   "management.teams.visibility.public": "Public",
   "management.teams.visibility.private": "Private",
   "management.teams.invite_only.description": "Managers need to approve a member's request to join.",
+  "management.teams.newJoinRequestNotification": "Enable for team managers to receive (email) notifications each time a new join request is made",
   "teamsAndOrgs.management.teams.messages.waiting_approval": "Your request to join this team is waiting for approval.",
   "management.projects.no_found": "This {entity} doesn't have projects yet.",
   "management.organisation.teams.no_found": "No teams found.",
diff --git a/frontend/src/views/notifications.js b/frontend/src/views/notifications.js
index 9b56a876a7..6fb9c3ec1a 100644
--- a/frontend/src/views/notifications.js
+++ b/frontend/src/views/notifications.js
@@ -47,7 +47,7 @@ export const NotificationPopout = (props) => {
           zIndex: '100',
           ...popoutPosition,
         }}
-        className={`fr ${props.isPopoutFocus ? '' : 'dn '}br2 absolute shadow-2 ph4 pb3 bg-white`}
+        className={`fr ${props.isPopoutFocus ? '' : 'dn '}br2 absolute shadow-2 bg-white`}
       >
         <InboxNavMini
           newMsgCount={