new whitelist styles (#240)

Psychedelic · Sep 30, 2021 · 2013906 · 2013906
1 parent f3b5b74
commit 2013906
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 86 deletions.
diff --git a/source/Pages/Notification/components/AllowAgent/index.jsx b/source/Pages/Notification/components/AllowAgent/index.jsx
@@ -17,13 +17,13 @@ import store from '@redux/store';
 import { Layout } from '@components';
 import extension from 'extensionizer';
 import PropTypes from 'prop-types';
-
+import { ChevronDown } from 'react-feather';
 import { CONNECTION_STATUS } from '@shared/constants/connectionStatus';
 import { setAccountInfo } from '@redux/wallet';
 import { HANDLER_TYPES, sendMessage } from '@background/Keyring';
+import clsx from 'clsx';
 import ErrorScreen from '../NotificationError';
 import initConfig from '../../../../locales';
-
 import useStyles from './styles';
 
 i18n.use(initReactI18next).init(initConfig);
@@ -46,6 +46,15 @@ const AllowAgent = ({
 
   const { url, icons } = metadata || {};
 
+  const canisters = args?.canistersInfo || [];
+  const canistersLength = canisters.length;
+  const maxDispayCanisters = 2;
+
+  const displayCanister = canistersLength < maxDispayCanisters
+    ? canistersLength : maxDispayCanisters;
+
+  const [expand, setExpand] = useState(false);
+
   const handleAllowAgent = async (status) => {
     const success = await portRPC.call('handleAllowAgent', [
       url,
@@ -68,13 +77,31 @@ const AllowAgent = ({
 
     if (!args?.updateWhitelist || args?.showList) {
       extension.windows.update(extension.windows.WINDOW_ID_CURRENT, {
-        height: Math.min(422 + 37 * args?.whitelist.length || 0, 600),
+        height: 355
+          + (canistersLength > 2 ? 76 : 30)
+          + 65 * (canistersLength > 2 ? 2 : canistersLength),
       });
     } else {
       handleAllowAgent(CONNECTION_STATUS.accepted).then(() => window?.close?.());
     }
   }, []);
 
+  const toggleExpand = () => {
+    let height;
+
+    if (expand) {
+      height = 355 + 76 + 65 * Math.min(canistersLength, 2);
+    } else {
+      height = 355 + 76 + 65 * Math.min(canistersLength, 5);
+    }
+
+    extension.windows.update(extension.windows.WINDOW_ID_CURRENT, {
+      height,
+    });
+
+    setExpand((prevState) => !prevState);
+  };
+
   return !args?.updateWhitelist || args?.showList ? (
     <Provider store={store}>
       <ThemeProvider theme={theme}>
@@ -92,11 +119,34 @@ const AllowAgent = ({
                 />
 
                 <CanisterInfoContainer>
-                  {args?.canistersInfo?.map((canister) => (
-                    <CanisterInfoItem key={canister.id} canister={canister} />
-                  ))}
+                  {
+                    canisters.slice(0, displayCanister).map((canister) => (
+                      <CanisterInfoItem key={canister.id} canister={canister} />
+                    ))
+                  }
+                  {
+                    expand
+                    && canisters.slice(displayCanister).map((canister) => (
+                      <CanisterInfoItem key={canister.id} canister={canister} />
+                    ))
+                  }
                 </CanisterInfoContainer>
 
+                {
+                  canistersLength > maxDispayCanisters
+                  && (
+                  <div className={classes.expandContainer} onClick={toggleExpand}>
+                    <span className={classes.expand}>
+                      {expand ? 'Collapse canisters' : `Review ${canistersLength - maxDispayCanisters} more canisters`}
+                    </span>
+                    <ChevronDown
+                      className={clsx(classes.chevron, expand && classes.rotate)}
+                      size={26}
+                    />
+                  </div>
+                  )
+                }
+
                 <div className={classes.buttonContainer}>
                   <Button
                     variant="default"

diff --git a/source/Pages/Notification/components/AllowAgent/styles.js b/source/Pages/Notification/components/AllowAgent/styles.js
@@ -12,4 +12,22 @@ export default makeStyles({
   arrowUpRight: {
     cursor: 'pointer',
   },
+  chevron: {
+    transition: 'transform .2s ease-in-out',
+    marginLeft: 3,
+  },
+  rotate: {
+    transform: 'rotate(180deg)',
+  },
+  expand: {
+    color: '#000000',
+    fontSize: 16,
+    fontWeight: 500,
+  },
+  expandContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 20,
+  },
 });
diff --git a/source/locales/en/translation.json b/source/locales/en/translation.json
@@ -293,7 +293,7 @@
     "notificationError": "We’re sorry, something weird happened. Please close the pop up and try again"
   },
   "whitelist": {
-    "title": "wants to allow calls to the following canisters:"
+    "title": "wants permission to use these canisters:"
   },
   "exportIdentity": {
     "title": "Export DFX Identity",

diff --git a/source/ui/CanisterInfo/components/Container/styles.js b/source/ui/CanisterInfo/components/Container/styles.js
@@ -7,7 +7,8 @@ export default makeStyles({
     flexDirection: 'column',
     overflowY: 'auto',
     overflowX: 'hidden',
-
-    margin: '10px 0',
+    marginTop: 10,
+    maxHeight: 300,
+    marginBottom: 20,
   },
 });
diff --git a/source/ui/CanisterInfo/components/Item/index.jsx b/source/ui/CanisterInfo/components/Item/index.jsx
@@ -1,95 +1,43 @@
-import React, { forwardRef, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import {
   IconButton, Typography, Box,
 } from '@material-ui/core';
-
-import MuiAccordion from '@material-ui/core/Accordion';
-import MuiAccordionSummary from '@material-ui/core/AccordionSummary';
-import MuiAccordionDetails from '@material-ui/core/AccordionDetails';
-
 import ArrowUpRight from '@assets/icons/arrow-up-right.png';
 import extension from 'extensionizer';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { getICRocksPrincipalUrl } from '@shared/constants/urls';
-import { withStyles } from '@material-ui/core/styles';
-import { ExpandMore } from '@material-ui/icons';
 import useStyles from './styles';
 
-const Accordion = withStyles({
-  root: {
-    border: 'none',
-    boxShadow: 'none',
-    '&:before': {
-      display: 'none',
-    },
-    '&$expanded': {
-      margin: 'auto',
-    },
-  },
-  expanded: {},
-})(MuiAccordion);
-
-const AccordionSummary = withStyles((theme) => ({
-  root: {
-    backgroundColor: 'transparent',
-    borderBottom: '1px solid rgba(0, 0, 0, .125)',
-    marginBottom: -1,
-    alignItems: 'center',
-    padding: `${theme.spacing(1)}px 0 ${theme.spacing(1)}px 0`,
-
-  },
-  content: {
-    margin: 0,
-    '&$expanded': {
-      margin: 0,
-    },
-  },
-  expanded: {},
-}))(MuiAccordionSummary);
-
-const AccordionDetails = withStyles((theme) => ({
-  root: {
-    padding: `${theme.spacing(1)}px 0 ${theme.spacing(1)}px 0`,
-  },
-}))(MuiAccordionDetails);
-
-const CanisterInfoItem = forwardRef(({ canister, className, ...props }, ref) => {
+const CanisterInfoItem = ({ canister, className, ...props }) => {
   const classes = useStyles();
 
   const {
-    id, name, description, icon, iconAlt,
+    id, name, icon, iconAlt,
   } = canister || {};
 
   const createICRocksPrincipalTab = useCallback(() => {
     extension.tabs.create({ url: getICRocksPrincipalUrl(id) });
   }, [id]);
 
   return (
-    <div ref={ref} {...props} className={clsx(classes.canisterInfoItem, className)}>
+    <div {...props} className={clsx(classes.canisterInfoItem, className)}>
       {name ? (
-        <Accordion>
-          <AccordionSummary expandIcon={<ExpandMore />}>
-            <img src={icon} alt={iconAlt ?? name} className={classes.image} />
+        <>
+          <img src={icon} alt={iconAlt ?? name} className={classes.image} />
 
-            <Box className={classes.infoBox}>
-              <Typography component="h4" variant="h5">{name}</Typography>
-              <Typography component="p" variant="subtitle1" noWrap>{id}</Typography>
-            </Box>
+          <Box className={classes.infoBox}>
+            <Typography component="h4" variant="h5">{name}</Typography>
+            <Typography component="p" variant="subtitle1">{id}</Typography>
+          </Box>
 
-            <IconButton onClick={createICRocksPrincipalTab} className={classes.iconButton}>
-              <img src={ArrowUpRight} alt="Arrow" />
-            </IconButton>
-          </AccordionSummary>
-          <AccordionDetails>
-            <Typography>
-              {description}
-            </Typography>
-          </AccordionDetails>
-        </Accordion>
+          <IconButton onClick={createICRocksPrincipalTab} className={classes.iconButton}>
+            <img src={ArrowUpRight} alt="Arrow" />
+          </IconButton>
+        </>
       ) : (
         <Box className={classes.canisterInfoIdItem}>
-          <Typography component="p" variant="subtitle1" noWrap>{id}</Typography>
+          <Typography component="p" variant="subtitle1">{id}</Typography>
           <IconButton onClick={createICRocksPrincipalTab} className={classes.iconButton}>
             <img src={ArrowUpRight} alt="Arrow" />
           </IconButton>
@@ -98,7 +46,7 @@ const CanisterInfoItem = forwardRef(({ canister, className, ...props }, ref) =>
 
     </div>
   );
-});
+};
 
 export default CanisterInfoItem;
 

diff --git a/source/ui/CanisterInfo/components/Item/styles.js b/source/ui/CanisterInfo/components/Item/styles.js
@@ -7,11 +7,11 @@ export default makeStyles((theme) => ({
     alignItems: 'center',
     width: '100%',
     padding: '1px 0',
-    '&:last-child > div > div': {
-      borderBottom: 0,
-    },
-    '&:last-child > div': {
-      borderBottom: 0,
+    minHeight: 45,
+    marginBottom: 20,
+
+    '&:last-child': {
+      marginBottom: 0,
     },
   },
   image: {
@@ -22,14 +22,17 @@ export default makeStyles((theme) => ({
     objectFit: 'cover',
   },
   infoBox: {
-    maxWidth: '200px',
+    maxWidth: '250px',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    height: '100%',
   },
   canisterInfoIdItem: {
-    borderBottom: '1px solid #e0e0e0',
-    minHeight: '80px',
     display: 'flex',
     alignItems: 'center',
     width: '100%',
+    marginBottom: 20,
   },
   iconButton: {
     marginLeft: 'auto',

diff --git a/source/ui/IncomingAction/styles.js b/source/ui/IncomingAction/styles.js
@@ -22,6 +22,6 @@ export default makeStyles((theme) => ({
     overflow: 'hidden',
     width: 370,
     textAlign: 'center',
-    marginBottom: `${theme.spacing(1)}px`,
+    marginBottom: `${theme.spacing(0.5)}px`,
   },
 }));
diff --git a/views/notification.html b/views/notification.html
@@ -15,13 +15,16 @@
       padding: 0;
       width: auto;
       height: 100%;
+      overflow: sauto;
     }
 
     #notification-root {
       height: 100%;
       display: flex;
       flex-direction: column;
+      overflow: hidden;
     }
+
   </style>
 </head>