Merged in fix/design_fixes (pull request #131)

High: Design teaks before testing! (small)

Approved-by: Kevin Borrill

Author: Owen Evans

src/components/modals/UnsavedChanges.tsx

@@ -22,14 +22,12 @@ const UnsavedChanges: FC<IProps> = props => {
         { name: "common.leave.page", variant: "secondary", onClick: leaveCallBack }
       ]}
     >
-      <div className="c-unsaved-changes-modal">
-        <p>
-          <FormattedMessage id="common.unsaved.changes.desc.1" />
-        </p>
-        <p>
-          <FormattedMessage id="common.unsaved.changes.desc.2" />
-        </p>
-      </div>
+      <p>
+        <FormattedMessage id="common.unsaved.changes.desc.1" />
+      </p>
+      <p>
+        <FormattedMessage id="common.unsaved.changes.desc.2" />
+      </p>
     </Modal>
   );
 };

src/components/ui/DataTable/DataTable.tsx

@@ -51,7 +51,7 @@ const DataTable = <T extends { [key: string]: string }>(props: IProps<T>) => {
                 <ContextMenu
                   toggleClassName="c-data-table__action-toggle"
                   align="end"
-                  offsetY={8}
+                  offsetY={5}
                   menuItems={rowActions.map(({ onClick = () => {}, href, value, ...menuItem }) => ({
                     onClick: e => onClick(row, e.value),
                     href: typeof href === "function" ? href(row, value) : href,

src/locales/en.json

@@ -177,9 +177,12 @@
   "teams.monitors": "{num, plural, one {# Monitor} other {# Monitors}}:",
   "teams.change.member.to.manager": "Change Member to Manager",
   "teams.change.member.to.monitor": "Change Member to Monitor",
+  "teams.change.member.to.manager.body": "PLACEHOLDER teams.change.member.to.manager.body",
+  "teams.change.member.to.monitor.body": "PLACEHOLDER teams.change.member.to.monitor.body",
   "teams.change.member.success": "Member Updated",
   "teams.change.member.error": "Unable to update Member",
   "teams.remove.member": "Remove Team Member",
+  "teams.remove.body": "PLACEHOLDER teams.remove.body",
   "teams.remove.member.success": "Member Removed",
   "teams.remove.member.error": "Unable to remove Member",
   "teams.member.invalid": "Could not find Team Member",
@@ -199,6 +202,7 @@
   "teams.edit.save": "Save Team",
   "teams.edit.success": "Team updated",
   "teams.edit.error": "Unable to Edit Team",
+  "teams.delete.body": "PLACEHOLDER teams.delete.body",
   "teams.delete.success": "Team Deleted",
   "teams.delete.error": "Unable to delete Team",
   "teams.teamName": "Team name",

src/pages/teams-detail/actions/DeleteTeam.tsx

@@ -4,7 +4,7 @@ import { useHistory } from "react-router-dom";
 import { teamService } from "services/teams";
 import { toastr } from "react-redux-toastr";
 import Loader from "components/ui/Loader";
-import { useIntl } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { TErrorResponse } from "../../../constants/api";
 
 interface IProps {
@@ -51,6 +51,9 @@ const DeleteTeam: FC<IProps> = props => {
       ]}
     >
       <Loader isLoading={isDeleting} />
+      <p>
+        <FormattedMessage id="teams.delete.body" />
+      </p>
     </Modal>
   );
 };

src/pages/teams-detail/actions/EditTeamMember.tsx

@@ -5,7 +5,7 @@ import { TParams as TTeamDetailParams } from "../TeamDetail";
 import { useHistory, useParams } from "react-router-dom";
 import { teamService } from "services/teams";
 import { toastr } from "react-redux-toastr";
-import { useIntl } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { useAppDispatch, useAppSelector } from "hooks/useRedux";
 import { getTeamMembers } from "modules/gfwTeams";
 import { TErrorResponse } from "constants/api";
@@ -75,6 +75,9 @@ const EditMemberRoleModal: FC<IProps> = props => {
       ]}
     >
       <Loader isLoading={isSave} />
+      <p>
+        <FormattedMessage id={`teams.change.member.to.${memberRole}.body`} />
+      </p>
     </Modal>
   );
 };

src/pages/teams-detail/actions/RemoveTeamMember.tsx

@@ -8,7 +8,7 @@ import { getTeamMembers } from "modules/gfwTeams";
 import { toastr } from "react-redux-toastr";
 import { TErrorResponse } from "constants/api";
 import { useAppDispatch, useAppSelector } from "hooks/useRedux";
-import { useIntl } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 
 type TParams = TTeamDetailParams & {
   memberId: string;
@@ -70,6 +70,9 @@ const RemoveTeamMemberModal: FC<IProps> = props => {
       ]}
     >
       <Loader isLoading={isRemoving} />
+      <p>
+        <FormattedMessage id="teams.remove.body" />
+      </p>
     </Modal>
   );
 };

src/styles/components/_c-modal-dialog.scss

@@ -60,6 +60,7 @@ $c-modal-transition-duration: 300ms;
     font-weight: 400;
     font-size: 24px;
     line-height: 36px;
+    color: $neutral-700;
 
     display: flex;
     justify-content: space-between;
@@ -72,6 +73,13 @@ $c-modal-transition-duration: 300ms;
     padding-bottom: 32px;
     border-bottom: 2px solid $neutral-400;
     overflow-y: auto;
+
+    p {
+      color: $neutral-700;
+      font-size: 18px;
+      line-height: 24px;
+      margin-bottom: 24px;
+    }
   }
 
   &__actions {
@@ -81,12 +89,3 @@ $c-modal-transition-duration: 300ms;
     padding: 40px 60px;
   }
 }
-
-.c-unsaved-changes-modal {
-  p {
-    color: $neutral-700;
-    font-size: 18px;
-    line-height: 24px;
-    margin-bottom: 24px;
-  }
-}

src/styles/components/_c-modal-form.scss

@@ -1,6 +1,11 @@
 .c-modal-form {
   .c-input {
     justify-content: space-between;
+
+    &:not(:last-child) {
+      margin-bottom: 40px;
+    }
+
     &__input-wrapper {
       flex: 0 1 50%;
     }