ONI-95: align button styles

src/components/InsureeProfileLink.js

@@ -1,25 +1,36 @@
 import React from "react";
 
-import { Tooltip, IconButton } from "@material-ui/core";
+import { Button } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
 import { Person } from "@material-ui/icons";
 
 import { useModulesManager, useTranslations, useHistory, historyPush } from "@openimis/fe-core";
 import { MODULE_NAME } from "../constants";
 
+const useStyles = makeStyles(() => ({
+  label: {
+    marginLeft: "8px",
+  },
+}));
+
 const InsureeProfileLink = ({ insureeUuid }) => {
   const modulesManager = useModulesManager();
+  const classes = useStyles();
   const history = useHistory();
   const { formatMessage } = useTranslations(MODULE_NAME);
 
   const goToInsureeProfile = (modulesManager, history, uuid, showInAnotherTab = false) =>
     historyPush(modulesManager, history, "insuree.route.insureeProfile", [uuid], showInAnotherTab);
 
   return (
-    <Tooltip title={formatMessage("insureeSummaries.goToTheProfile")}>
-      <IconButton onClick={() => goToInsureeProfile(modulesManager, history, insureeUuid)}>
-        <Person />
-      </IconButton>
-    </Tooltip>
+    <Button
+      variant="contained"
+      color="primary"
+      onClick={() => goToInsureeProfile(modulesManager, history, insureeUuid)}
+    >
+      <Person />
+      <span className={classes.label}> {formatMessage("insureeSummaries.goToTheProfile")} </span>
+    </Button>
   );
 };
 

src/components/InsureeSummary.js

@@ -1,7 +1,10 @@
 import React, { Fragment } from "react";
 import { injectIntl } from "react-intl";
-import { makeStyles } from "@material-ui/core/styles";
+
 import { Grid, Box, Typography, Button } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import { People } from "@material-ui/icons";
+
 import {
   formatMessage,
   formatMessageWithValues,
@@ -13,25 +16,17 @@ import {
   withHistory,
 } from "@openimis/fe-core";
 import { DEFAULT } from "../constants";
-import InsureeProfileLink from "./InsureeProfileLink";
 import { formatLocationString } from "../utils/utils";
+import InsureeProfileLink from "./InsureeProfileLink";
 
 const INSUREE_SUMMARY_AVATAR_CONTRIBUTION_KEY = "insuree.InsureeSummaryAvatar";
 const INSUREE_SUMMARY_CORE_CONTRIBUTION_KEY = "insuree.InsureeSummaryCore";
 const INSUREE_SUMMARY_EXT_CONTRIBUTION_KEY = "insuree.InsureeSummaryExt";
 const INSUREE_SUMMARY_CONTRIBUTION_KEY = "insuree.InsureeSummary";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   label: {
-    textAlign: "right",
-  },
-  topRightCorner: {
-    position: "absolute",
-    top: theme.spacing(2),
-    right: theme.spacing(2),
-    display: 'flex',
-    alignItems: 'center',
-    gap: theme.spacing(1),
+    marginLeft: "10px",
   },
 }));
 
@@ -144,18 +139,18 @@ const InsureeSummary = (props) => {
           )}
           {!!insuree?.family?.uuid && (
             <Grid item>
-              <Button 
+              <Button
                 variant="contained"
                 color="primary"
-                className={classes.button}
                 onClick={() => goToFamilyUuid(modulesManager, history, insuree.family.uuid)}
               >
-                {formatMessage(intl, "insuree", "insureeSummaries.goToFamilyButton")}
+                <People />
+                <span className={classes.label}> {formatMessage(intl, "insuree", "insureeSummaries.goToFamilyButton")} </span>
               </Button>
             </Grid>
           )}
           {showInsureeProfile && (
-            <Grid className={classes.topRightCorner}>
+            <Grid item>
               <InsureeProfileLink insureeUuid={insuree.uuid} />
             </Grid>
           )}

src/pages/ProfilePage.js

@@ -54,17 +54,14 @@ const ProfilePage = () => {
     if (insuree_uuid) dispatch(fetchInsureeFull(modulesManager, insuree_uuid));
   }, [insuree_uuid]);
 
-  if (fetchingInsuree || errorInsuree) {
-    return <ProgressOrError progress={fetchingInsuree} error={errorInsuree} />;
-  }
-
   return (
     <Box className={classes.page}>
       <Paper className={classes.paper}>
         <Typography className={classes.title} variant="h6">
           {formatMessage("link.profile")}
         </Typography>
         <Grid item xs={12} container display="flex">
+          <ProgressOrError progress={fetchingInsuree} error={errorInsuree} />
           <Grid item container direction="row" className={classes.flexContainer}>
             {hasAvatarContribution && (
               <Grid className={classes.item}>
@@ -159,7 +156,11 @@ const ProfilePage = () => {
           </Grid>
         </Grid>
       </Paper>
-      <Contributions contributionKey={INSUREE_POLICIES_OVERVIEW_CONTRIBUTION_KEY} insuree={insuree} />
+      <Contributions
+        contributionKey={INSUREE_POLICIES_OVERVIEW_CONTRIBUTION_KEY}
+        insuree={insuree}
+        hideAddPolicyButton={true}
+      />
       <Contributions contributionKey={INSUREE_CLAIMS_OVERVIEW_CONTRIBUTION_KEY} insuree={insuree} />
     </Box>
   );

src/translations/en.json

@@ -178,7 +178,7 @@
   "insuree.insureeSummaries.delete": " ",
   "insuree.insureeSummaries.deleteInsuree.tooltip": "Delete insuree",
   "insuree.insureeSummaries.goToFamilyButton": "Go to family",
-  "insuree.insureeSummaries.goToTheProfile": "Visit the Insuree Profile",
+  "insuree.insureeSummaries.goToTheProfile": "Go to profile",
   "insuree.InsureeFilter.showHistory": "Show historical values",
   "insuree.PhotoStatus": "Photo status",
   "insuree.PhotoStatus.null": "Any",