Alignment + zebra stripes for requested and installed packages (#393)

src/components/Dialog.tsx

@@ -4,7 +4,7 @@ import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
-import { StyledButtonPrimary } from "../styles";
+import { StyledButton } from "../styles";
 
 interface IAlertDialog {
   title: string;
@@ -45,10 +45,12 @@ export const AlertDialog = ({
         </DialogContentText>
       </DialogContent>
       <DialogActions>
-        <StyledButtonPrimary onClick={closeAction}>Cancel</StyledButtonPrimary>
-        <StyledButtonPrimary onClick={() => confirmAction()}>
+        <StyledButton color="primary" onClick={closeAction}>
+          Cancel
+        </StyledButton>
+        <StyledButton color="primary" onClick={() => confirmAction()}>
           Delete
-        </StyledButtonPrimary>
+        </StyledButton>
       </DialogActions>
     </Dialog>
   );

src/components/VersionSelect.tsx

@@ -162,7 +162,9 @@ export const VersionSelect = ({
         sx: {
           padding: "7px 9px !important",
           backgroundColor: palette.common.white,
-          borderRadius: "0px"
+          borderRadius: "0px",
+          fontFamily: "monospace",
+          fontSize: "13px"
         },
         "data-testid": "VersionSelectTest"
       }}
@@ -171,7 +173,11 @@ export const VersionSelect = ({
         {" "}
       </MenuItem>
       {versionsList.map(v => (
-        <MenuItem key={v} value={v}>
+        <MenuItem
+          key={v}
+          value={v}
+          sx={{ fontFamily: "monospace", fontSize: "13px" }}
+        >
           {v}
         </MenuItem>
       ))}

src/features/auth/components/authButton.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 
-import { StyledButtonPrimary } from "../../../styles";
+import { StyledButton } from "../../../styles";
 import { PrefContext } from "../../../preferences";
 import {
   useLazyGetAuthQuery,
@@ -53,13 +53,14 @@ export const AuthButton = () => {
   }, []);
 
   return (
-    <StyledButtonPrimary
+    <StyledButton
+      color="primary"
       onClick={() => {
         handleOnClick();
       }}
       sx={{ position: "absolute", top: 14, right: 18 }}
     >
       {authenticated ? "Log out" : "Log in"}
-    </StyledButtonPrimary>
+    </StyledButton>
   );
 };

src/features/channels/components/ChannelsEdit.tsx

@@ -15,7 +15,7 @@ import {
   StyledAccordionDetails,
   StyledAccordionSummary,
   StyledAccordionTitle,
-  StyledButtonPrimary
+  StyledButton
 } from "../../../styles";
 import { reorderArray } from "../../../utils/helpers";
 import { ArrowIcon } from "../../../components";
@@ -27,11 +27,13 @@ export interface IChannelsEditProps {
    */
   channelsList: string[];
   updateChannels: (channels: string[]) => void;
+  maxWidth?: number;
 }
 
 const BaseChannelsEdit = ({
   channelsList,
-  updateChannels
+  updateChannels,
+  maxWidth = 420
 }: IChannelsEditProps) => {
   const listLength = channelsList.length;
   const { palette } = useTheme();
@@ -73,11 +75,13 @@ const BaseChannelsEdit = ({
   return (
     <Accordion
       defaultExpanded={expandedRef.current}
-      sx={{ maxWidth: 420, boxShadow: "none" }}
+      sx={{ maxWidth, boxShadow: "none" }}
       disableGutters
     >
       <StyledAccordionSummary expandIcon={<ArrowIcon />}>
-        <StyledAccordionTitle>Channels</StyledAccordionTitle>
+        <StyledAccordionTitle sx={{ color: "primary.main" }}>
+          Channels
+        </StyledAccordionTitle>
       </StyledAccordionSummary>
       <DragDropContext onDragEnd={onDragEnd}>
         <Droppable droppableId="channels-edit-list">
@@ -132,15 +136,16 @@ const BaseChannelsEdit = ({
           borderRadius: "0px",
           padding: "15px 21px",
           display: "flex",
-          justifyContent: "center"
+          justifyContent: "flex-start"
         }}
       >
-        <StyledButtonPrimary
+        <StyledButton
+          color="secondary"
           variant="contained"
           onClick={() => setIsAdding(true)}
         >
           + Add Channel
-        </StyledButtonPrimary>
+        </StyledButton>
       </AccordionDetails>
     </Accordion>
   );

src/features/channels/components/ChannelsList.tsx

@@ -18,22 +18,24 @@ export interface IChannelsListProps {
 }
 
 export const ChannelsList = ({ channelList }: IChannelsListProps) => {
-  const listLength = channelList.length;
-
   return (
     <Accordion
       sx={{ maxWidth: 420, boxShadow: "none" }}
       disableGutters
       defaultExpanded
     >
       <StyledAccordionSummary expandIcon={<ArrowIcon />}>
-        <StyledAccordionTitle>Channels</StyledAccordionTitle>
+        <StyledAccordionTitle sx={{ color: "primary.main" }}>
+          Channels
+        </StyledAccordionTitle>
       </StyledAccordionSummary>
-      <StyledAccordionDetails sx={{ padding: "11px 21px" }}>
+      <StyledAccordionDetails sx={{ padding: 0 }}>
         {channelList.map((channel, index) => (
           <Box
             key={channel}
-            sx={{ marginBottom: index === listLength - 1 ? "0px" : "10px" }}
+            sx={{
+              padding: "16px"
+            }}
           >
             <Channel channelName={channel} />
           </Box>

src/features/dependencies/components/Dependencies.tsx

@@ -1,7 +1,15 @@
 import React, { useEffect, useRef } from "react";
 import Accordion from "@mui/material/Accordion";
 import Box from "@mui/material/Box";
+import TableContainer from "@mui/material/TableContainer";
+import Table from "@mui/material/Table";
+import TableHead from "@mui/material/TableHead";
+import TableBody from "@mui/material/TableBody";
+import TableRow from "@mui/material/TableRow";
+import TableCell from "@mui/material/TableCell";
 import CircularProgress from "@mui/material/CircularProgress";
+import Tooltip from "@mui/material/Tooltip";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import InfiniteScroll from "react-infinite-scroll-component";
 import {
   StyledAccordionDetails,
@@ -25,13 +33,15 @@ export interface IDependenciesProps {
   mode: "read-only" | "edit";
   hasMore: boolean;
   next?: () => void;
+  maxWidth?: number;
 }
 
 export const Dependencies = ({
   mode,
   dependencies,
   hasMore,
-  next = () => null
+  next = () => null,
+  maxWidth = 420
 }: IDependenciesProps) => {
   const dispatch = useAppDispatch();
   const { selectedEnvironment } = useAppSelector(state => state.tabs);
@@ -45,20 +55,29 @@ export const Dependencies = ({
   return (
     <Accordion
       sx={{
-        maxWidth: 420,
+        maxWidth,
         boxShadow: "none"
       }}
       disableGutters
       defaultExpanded
     >
       <StyledAccordionSummary expandIcon={<ArrowIcon />}>
-        <StyledAccordionTitle>
-          Packages Installed as Dependencies
+        <StyledAccordionTitle sx={{ color: "primary.main" }}>
+          Installed Packages{" "}
+          <Tooltip title="Includes requested packages and their dependencies">
+            <InfoOutlinedIcon
+              sx={{
+                fontSize: "20px",
+                verticalAlign: "top",
+                color: "secondary.main"
+              }}
+            />
+          </Tooltip>
         </StyledAccordionTitle>
       </StyledAccordionSummary>
       <StyledAccordionDetails
         id="infScroll"
-        sx={{ padding: "15px 21px", maxHeight: "300px" }}
+        sx={{ padding: 0, maxHeight: "300px" }}
         ref={scrollRef}
       >
         <InfiniteScroll
@@ -80,24 +99,45 @@ export const Dependencies = ({
           style={{ overflow: "hidden" }}
         >
           {dependencies.length ? (
-            <>
-              {dependencies.map((dependency, index) => (
-                <Box
-                  key={dependency.id}
-                  sx={{
-                    marginBottom: index === listLength - 1 ? "0px" : "2px"
-                  }}
-                >
-                  <DependenciesItem
-                    mode={mode}
-                    dependency={dependency}
-                    handleClick={() => dispatch(dependencyPromoted(dependency))}
-                  />
-                </Box>
-              ))}
-            </>
+            <TableContainer>
+              <Table sx={{ width: "100%", tableLayout: "fixed" }}>
+                <TableHead>
+                  <TableRow>
+                    <TableCell sx={{ fontSize: "13px" }}>Package</TableCell>
+                    <TableCell sx={{ fontSize: "13px", textAlign: "right" }}>
+                      Installed Version
+                    </TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {dependencies.map((dependency, index) => (
+                    <DependenciesItem
+                      key={dependency.id}
+                      sx={{
+                        backgroundColor:
+                          index % 2 ? "secondary.50" : "transparent"
+                      }}
+                      mode={mode}
+                      dependency={dependency}
+                      handleClick={() =>
+                        dispatch(dependencyPromoted(dependency))
+                      }
+                      isLast={index === dependencies.length - 1}
+                    />
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
           ) : (
-            <CircularProgress size={20} />
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "center",
+                padding: "10px"
+              }}
+            >
+              <CircularProgress size={20} />
+            </Box>
           )}
         </InfiniteScroll>
       </StyledAccordionDetails>

src/features/dependencies/components/DependenciesItem.tsx

@@ -1,5 +1,6 @@
 import React, { memo } from "react";
-import Box from "@mui/material/Box";
+import TableRow from "@mui/material/TableRow";
+import TableCell from "@mui/material/TableCell";
 import Typography from "@mui/material/Typography";
 import { Dependency } from "../../../common/models";
 import Tooltip from "@mui/material/Tooltip";
@@ -14,40 +15,64 @@ interface IDependenciesItemProps {
    */
   dependency: Dependency;
   mode: "read-only" | "edit";
+  isLast: boolean;
   handleClick: () => void;
+  sx?: any;
 }
 
 const BaseDependenciesItem = ({
   dependency,
   mode,
-  handleClick
+  isLast,
+  handleClick,
+  sx = {}
 }: IDependenciesItemProps) => {
   const { name, version } = dependency;
   const isEditMode = mode === "edit";
 
   return (
-    <Box sx={{ display: "flex", alignItems: "center" }}>
-      <Box sx={{ display: "flex", alignItems: "center", width: "300px" }}>
-        <Typography sx={{ fontSize: "13px", color: "#333" }}>{name}</Typography>
-      </Box>
-      <Typography
-        sx={{
-          color: "#333",
-          width: isEditMode ? "140px" : "auto",
-          marginLeft: isEditMode ? "20px" : "0px",
-          fontSize: "13px"
-        }}
-      >
-        {version}
-      </Typography>
-      {isEditMode && (
-        <Tooltip title="Promote as requested package" placement="right-start">
-          <StyledIconButton onClick={handleClick} data-testid="PromoteIcon">
-            <UploadIcon />
-          </StyledIconButton>
-        </Tooltip>
-      )}
-    </Box>
+    <>
+      <TableRow sx={sx}>
+        <TableCell
+          sx={{
+            fontSize: "13px",
+            color: "#333",
+            borderBottom: isLast ? "none" : undefined
+          }}
+        >
+          {name}
+        </TableCell>
+        <TableCell
+          sx={{ textAlign: "right", borderBottom: isLast ? "none" : undefined }}
+        >
+          <Typography
+            sx={{
+              color: "#333",
+              fontSize: "13px",
+              fontFamily: "monospace"
+            }}
+          >
+            {version}
+            {isEditMode && (
+              <>
+                &nbsp;
+                <Tooltip
+                  title="Promote as requested package"
+                  placement="right-start"
+                >
+                  <StyledIconButton
+                    onClick={handleClick}
+                    data-testid="PromoteIcon"
+                  >
+                    <UploadIcon />
+                  </StyledIconButton>
+                </Tooltip>
+              </>
+            )}
+          </Typography>
+        </TableCell>
+      </TableRow>
+    </>
   );
 };