style tweaks

conda-incubator · Apr 23, 2024 · ce6bdea · ce6bdea
1 parent ba1059d
commit ce6bdea
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 30 deletions.
diff --git a/src/features/channels/components/ChannelsEdit.tsx b/src/features/channels/components/ChannelsEdit.tsx
@@ -15,7 +15,7 @@ import {
   StyledAccordionDetails,
   StyledAccordionSummary,
   StyledAccordionTitle,
-  StyledButtonPrimary
+  StyledButtonSecondary
 } 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,7 +75,7 @@ const BaseChannelsEdit = ({
   return (
     <Accordion
       defaultExpanded={expandedRef.current}
-      sx={{ maxWidth: 420, boxShadow: "none" }}
+      sx={{ maxWidth, boxShadow: "none" }}
       disableGutters
     >
       <StyledAccordionSummary expandIcon={<ArrowIcon />}>
@@ -134,15 +136,15 @@ const BaseChannelsEdit = ({
           borderRadius: "0px",
           padding: "15px 21px",
           display: "flex",
-          justifyContent: "center"
+          justifyContent: "flex-start"
         }}
       >
-        <StyledButtonPrimary
+        <StyledButtonSecondary
           variant="contained"
           onClick={() => setIsAdding(true)}
         >
           + Add Channel
-        </StyledButtonPrimary>
+        </StyledButtonSecondary>
       </AccordionDetails>
     </Accordion>
   );

diff --git a/src/features/dependencies/components/Dependencies.tsx b/src/features/dependencies/components/Dependencies.tsx
@@ -33,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);
@@ -53,15 +55,15 @@ export const Dependencies = ({
   return (
     <Accordion
       sx={{
-        maxWidth: 420,
+        maxWidth,
         boxShadow: "none"
       }}
       disableGutters
       defaultExpanded
     >
       <StyledAccordionSummary expandIcon={<ArrowIcon />}>
         <StyledAccordionTitle sx={{ color: "primary.main" }}>
-          Packages Installed{" "}
+          Installed Packages{" "}
           <Tooltip title="Includes requested packages and their dependencies">
             <InfoOutlinedIcon
               sx={{
@@ -98,7 +100,7 @@ export const Dependencies = ({
         >
           {dependencies.length ? (
             <TableContainer>
-              <Table sx={{ width: "420px", tableLayout: "fixed" }}>
+              <Table sx={{ width: "100%", tableLayout: "fixed" }}>
                 <TableHead>
                   <TableRow>
                     <TableCell sx={{ fontSize: "13px" }}>Package</TableCell>
@@ -130,7 +132,15 @@ export const Dependencies = ({
               </Table>
             </TableContainer>
           ) : (
-            <CircularProgress size={20} />
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "center",
+                padding: "10px"
+              }}
+            >
+              <CircularProgress size={20} />
+            </Box>
           )}
         </InfiniteScroll>
       </StyledAccordionDetails>

diff --git a/src/features/dependencies/components/DependenciesItem.tsx b/src/features/dependencies/components/DependenciesItem.tsx
@@ -44,21 +44,25 @@ const BaseDependenciesItem = ({
         <Typography
           sx={{
             color: "#333",
-            width: isEditMode ? "140px" : "auto",
-            marginLeft: isEditMode ? "20px" : "0px",
             fontSize: "13px"
           }}
         >
           {version}
           {isEditMode && (
-            <Tooltip
-              title="Promote as requested package"
-              placement="right-start"
-            >
-              <StyledIconButton onClick={handleClick} data-testid="PromoteIcon">
-                <UploadIcon />
-              </StyledIconButton>
-            </Tooltip>
+            <>
+              &nbsp;
+              <Tooltip
+                title="Promote as requested package"
+                placement="right-start"
+              >
+                <StyledIconButton
+                  onClick={handleClick}
+                  data-testid="PromoteIcon"
+                >
+                  <UploadIcon />
+                </StyledIconButton>
+              </Tooltip>
+            </>
           )}
         </Typography>
       </TableCell>

diff --git a/src/features/environmentCreate/components/CreateEnvironmentPackages.tsx b/src/features/environmentCreate/components/CreateEnvironmentPackages.tsx
@@ -16,7 +16,7 @@ import {
   StyledAccordionDetails,
   StyledAccordionSummary,
   StyledAccordionTitle,
-  StyledButtonPrimary,
+  StyledButtonSecondary,
   StyledEditPackagesTableCell
 } from "../../../styles";
 import { AddRequestedPackage } from "../../requestedPackages";
@@ -118,15 +118,15 @@ export const CreateEnvironmentPackages = ({
           borderRadius: "0px 0px 5px 5px",
           padding: "15px 21px",
           display: "flex",
-          justifyContent: "center"
+          justifyContent: "flex-start"
         }}
       >
-        <StyledButtonPrimary
+        <StyledButtonSecondary
           variant="contained"
           onClick={() => setIsAdding(true)}
         >
           + Add Package
-        </StyledButtonPrimary>
+        </StyledButtonSecondary>
       </AccordionDetails>
     </Accordion>
   );

diff --git a/src/features/environmentDetails/components/Specification/SpecificationEdit.tsx b/src/features/environmentDetails/components/Specification/SpecificationEdit.tsx
@@ -229,12 +229,14 @@ export const SpecificationEdit = ({
                 dependencies={dependencies}
                 hasMore={hasMore}
                 next={() => dispatch(pageChanged(page + 1))}
+                maxWidth={500}
               />
             </Box>
             <Box sx={{ margiBottom: "30px" }}>
               <ChannelsEdit
                 channelsList={channels}
                 updateChannels={onUpdateChannels}
+                maxWidth={500}
               />
             </Box>
           </>

diff --git a/src/features/requestedPackages/components/RequestedPackagesEdit.tsx b/src/features/requestedPackages/components/RequestedPackagesEdit.tsx
@@ -14,7 +14,7 @@ import {
   StyledAccordionDetails,
   StyledAccordionSummary,
   StyledAccordionTitle,
-  StyledButtonPrimary,
+  StyledButtonSecondary,
   StyledEditPackagesTableCell
 } from "../../../styles";
 import { CondaSpecificationPip } from "../../../common/models";
@@ -139,15 +139,15 @@ export const RequestedPackagesEdit = ({
           borderRadius: "0px",
           padding: "15px 21px",
           display: "flex",
-          justifyContent: "center"
+          justifyContent: "flex-start"
         }}
       >
-        <StyledButtonPrimary
+        <StyledButtonSecondary
           variant="contained"
           onClick={() => setIsAdding(true)}
         >
           + Add Package
-        </StyledButtonPrimary>
+        </StyledButtonSecondary>
       </AccordionDetails>
     </Accordion>
   );

diff --git a/src/styles/StyledButtonSecondary.tsx b/src/styles/StyledButtonSecondary.tsx
@@ -0,0 +1,35 @@
+import Button from "@mui/material/Button";
+import { styled } from "@mui/system";
+
+export const StyledButtonSecondary = styled(Button, {
+  shouldForwardProp: prop => prop !== "styleType"
+})<{ styleType?: string }>(({ theme: { palette } }) => ({
+  padding: "4px 12px 4px 12px",
+  border: palette.secondary.main,
+  fontSize: "14px",
+  color: palette.secondary.contrastText,
+  textTransform: "none",
+  backgroundColor: palette.secondary.main,
+  boxShadow: "none",
+  borderRadius: "4px",
+  gap: "6px",
+  ":hover": {
+    boxShadow: "none",
+    color: palette.secondary.contrastText,
+    backgroundColor: palette.secondary.dark,
+    textDecoration: "underline",
+    textUnderlineOffset: "0.3em"
+  },
+  "&:focus": {
+    outlineColor: palette.secondary.main,
+    outlineStyle: "auto",
+    outlineOffset: "4px",
+    outlineWidth: "medium",
+    transition: "none"
+  },
+  "&:disabled": {
+    backgroundColor: palette.secondary[100],
+    border: "none",
+    color: palette.secondary.light
+  }
+}));
diff --git a/src/styles/index.tsx b/src/styles/index.tsx
@@ -3,6 +3,7 @@ export * from "./StyledAccordionDetails";
 export * from "./StyledAccordionTitle";
 export * from "./StyledEditPackagesTableCell";
 export * from "./StyledButtonPrimary";
+export * from "./StyledButtonSecondary";
 export * from "./StyledRequestedPackagesTableCell";
 export * from "./StyledIconButton";
 export * from "./StyledAccordionExpandIcon";

diff --git a/test/dependencies/Dependencies.test.tsx b/test/dependencies/Dependencies.test.tsx
@@ -23,7 +23,7 @@ describe("<Dependencies />", () => {
       )
     );
 
-    expect(container).toHaveTextContent("Packages Installed");
+    expect(container).toHaveTextContent("Installed Packages");
   });
 
   it("should render component in edit mode", async () => {