Merge pull request #83 from nuxxapp/fix/visual-fixes

Minor HTML / CSS fixes

services/frontend/src/components/Modal/network/CreateNetworkModal.tsx

@@ -72,7 +72,7 @@ const CreateNetworkModal: FunctionComponent<ICreateNetworkModalProps> = (
 
           <Actions>
             <Button size="sm" variant="solid" onClick={formik.submitForm}>
-              Save
+              Create
             </Button>
           </Actions>
         </>

services/frontend/src/components/Modal/network/EditNetworkModal.tsx

@@ -63,7 +63,7 @@ const EditNetworkModal = (props: IEditNetworkModalProps) => {
             </nav>
           </div>
 
-          <div className="relative px-4 py-3 flex-auto">
+          <div className="relative px-4 py-3 flex-auto max-h-96 overflow-y-auto">
             {openTab === "General" && <General />}
             {openTab === "IPAM" && <IPam />}
             {openTab === "Labels" && <Labels />}

services/frontend/src/components/Modal/network/EmptyNetworks.tsx

@@ -1,5 +1,6 @@
-import { Button, styled } from "@mui/joy";
 import { FunctionComponent, ReactElement } from "react";
+import { Button, styled } from "@mui/joy";
+import { PlusIcon } from "@heroicons/react/outline";
 
 const Root = styled("div")`
   display: flex;
@@ -10,13 +11,15 @@ const Root = styled("div")`
   text-align: center;
 `;
 
-const Image = styled("img")`
-  width: 300px;
-  height: auto;
+const AddButton = styled(Button)`
+  margin-top: ${({ theme }) => theme.spacing(1)};
 `;
 
-const CreateNew = styled(Button)`
+const Description = styled("p")`
   margin-top: ${({ theme }) => theme.spacing(1)};
+  text-align: center;
+  color: #7a7a7a;
+  font-size: 14px;
 `;
 
 export interface IEmptyNetworksProps {
@@ -29,13 +32,12 @@ const EmptyNetworks: FunctionComponent<IEmptyNetworksProps> = (
   const { onCreate } = props;
   return (
     <Root>
-      <Image src="https://res.cloudinary.com/hypertool/image/upload/v1657816359/hypertool-assets/empty-projects_fdcxtk.svg" />
-      <p className="mt-4 text-md text-gray-500 dark:text-gray-400">
-        We tried our best, but could not find any networks.
-      </p>
-      <CreateNew variant="solid" size="sm" onClick={onCreate}>
-        Create new network
-      </CreateNew>
+      <Description>No top level networks.</Description>
+
+      <AddButton size="sm" variant="plain" onClick={onCreate}>
+        <PlusIcon className="h-4 w-4 mr-2" />
+        New network
+      </AddButton>
     </Root>
   );
 };

services/frontend/src/components/Modal/network/IPam.tsx

@@ -24,19 +24,21 @@ const Configuration = styled("div")`
   display: flex;
   flex-direction: column;
   row-gap: ${({ theme }) => theme.spacing(1)};
-  padding-left: ${({ theme }) => theme.spacing(4)};
+  border-left: 4px solid #e0e8ff;
+  padding-left: 10px;
 `;
 
 const ConfigurationTop = styled("div")`
   display: flex;
   flex-direction: row;
+  @media (max-width: 640px) {
+    flex-direction: column;
+  }
   column-gap: ${({ theme }) => theme.spacing(1)};
 `;
 
 const ConfigurationBorder = styled("div")`
-  border-bottom: dotted 1px black;
   height: 1px;
-  width: 40px;
   margin: 8px 0px 0px 0px;
 `;
 
@@ -120,11 +122,7 @@ const IPam = () => {
         renderField={(
           element: ReactElement,
           field: IFieldType
-        ): ReactElement => (
-          <Field style={{ paddingLeft: field.type === "records" ? 16 : 0 }}>
-            {element}
-          </Field>
-        )}
+        ): ReactElement => <Field>{element}</Field>}
         renderRemove={(element: ReactElement): ReactElement => (
           <Remove>{element}</Remove>
         )}

services/frontend/src/components/Modal/network/Labels.tsx

@@ -14,7 +14,7 @@ const Labels: FunctionComponent = (): ReactElement => {
       <Records
         name="labels"
         modal="network"
-        title="Labels"
+        title=""
         referred="label"
         fields={(index: number) => [
           {

services/frontend/src/components/Modal/network/NetworkList.tsx

@@ -1,7 +1,8 @@
-import { MinusSmIcon, PlusSmIcon } from "@heroicons/react/outline";
+import { MinusSmIcon, PlusIcon } from "@heroicons/react/outline";
 import { Button, styled } from "@mui/joy";
 import IconButton from "@mui/joy/IconButton";
 import { FunctionComponent, ReactElement } from "react";
+import { truncateStr } from "../../../utils";
 
 export interface INetworkListProps {
   networks: Record<string, any>;
@@ -21,7 +22,6 @@ const Root = styled("div")`
   flex-direction: column;
   justify-content: space-between;
   border-right: solid #eaeaea 1px;
-  margin: ${({ theme }) => theme.spacing(1, 2, 1, 0)};
 `;
 
 const Top = styled("div")`
@@ -39,7 +39,7 @@ const ListItem = styled("div")<IListItemProps>`
   justify-content: space-between;
   align-items: center;
   column-gap: ${({ theme }) => theme.spacing(2)};
-  padding: ${({ theme }) => theme.spacing(1, 2)};
+  padding: ${({ theme }) => theme.spacing(1, 1, 1, 2)};
   cursor: pointer;
   background-color: ${({ selected }) => selected && "#f5f5f5"};
 
@@ -77,7 +77,7 @@ const NetworkList: FunctionComponent<INetworkListProps> = (
             selected={networkUuid === selectedUuid}
           >
             <ListItemText>
-              {networks[networkUuid].canvasConfig.node_name}
+              {truncateStr(networks[networkUuid].canvasConfig.node_name, 10)}
             </ListItemText>
             <RemoveButton
               variant="soft"
@@ -93,7 +93,7 @@ const NetworkList: FunctionComponent<INetworkListProps> = (
 
       <Bottom>
         <Button variant="plain" size="sm" onClick={onNew}>
-          <PlusSmIcon className="h-5 w-5" />
+          <PlusIcon className="h-4 w-4 mr-2" />
           New network
         </Button>
       </Bottom>

services/frontend/src/components/Modal/service/Environment.tsx

@@ -18,12 +18,11 @@ const Records = styled("div")`
 `;
 
 const AddButton = styled(Button)`
-  width: 140px;
-  margin-top: ${({ theme }) => theme.spacing(2)};
+  margin-top: ${({ theme }) => theme.spacing(1)};
 `;
 
 const Description = styled("p")`
-  margin-top: ${({ theme }) => theme.spacing(2)};
+  margin-top: ${({ theme }) => theme.spacing(1)};
   text-align: center;
   color: #7a7a7a;
   font-size: 14px;
@@ -85,11 +84,7 @@ const Environment = () => {
       )}
 
       {emptyEnvironmentVariables && (
-        <Description>
-          This service does not have any environment variables.
-          <br />
-          Click "+ New variable" to add a new environment variable.
-        </Description>
+        <Description>No environment variables.</Description>
       )}
 
       <AddButton

services/frontend/src/components/Modal/service/General.tsx

@@ -29,12 +29,11 @@ const Group = styled("div")`
 `;
 
 const GroupTitle = styled("h5")`
-  font-size: 0.75rem;
+  font-size: 0.85rem;
   color: #374151;
-  font-weight: 500;
+  font-weight: 700;
   width: 100%;
   text-align: left;
-  margin-bottom: 0.25em;
 `;
 
 const Records = styled("div")`
@@ -44,12 +43,11 @@ const Records = styled("div")`
 `;
 
 const AddButton = styled(Button)`
-  width: 140px;
-  margin-top: ${({ theme }) => theme.spacing(2)};
+  margin-top: ${({ theme }) => theme.spacing(1)};
 `;
 
 const Description = styled("p")`
-  margin-top: ${({ theme }) => theme.spacing(2)};
+  margin-top: ${({ theme }) => theme.spacing(1)};
   text-align: center;
   color: #7a7a7a;
   font-size: 14px;
@@ -133,13 +131,7 @@ const General = () => {
               ))}
             </Records>
           )}
-          {emptyPorts && (
-            <Description>
-              This service does not have any ports.
-              <br />
-              Click "+ New port" to add a new port.
-            </Description>
-          )}
+          {emptyPorts && <Description>No service ports.</Description>}
 
           <AddButton size="sm" variant="plain" onClick={handleNewPort}>
             <PlusIcon className="h-4 w-4 mr-2" />

services/frontend/src/components/Modal/service/Labels.tsx

@@ -18,12 +18,11 @@ const Records = styled("div")`
 `;
 
 const AddButton = styled(Button)`
-  width: 140px;
-  margin-top: ${({ theme }) => theme.spacing(2)};
+  margin-top: ${({ theme }) => theme.spacing(1)};
 `;
 
 const Description = styled("p")`
-  margin-top: ${({ theme }) => theme.spacing(2)};
+  margin-top: ${({ theme }) => theme.spacing(1)};
   text-align: center;
   color: #7a7a7a;
   font-size: 14px;
@@ -79,13 +78,7 @@ const Labels = () => {
           ))}
         </Records>
       )}
-      {emptyLabels && (
-        <Description>
-          This service does not have any labels.
-          <br />
-          Click "+ New label" to add a new label.
-        </Description>
-      )}
+      {emptyLabels && <Description>No labels.</Description>}
 
       <AddButton size="sm" variant="plain" onClick={handleNewLabel}>
         <PlusIcon className="h-4 w-4 mr-2" />

services/frontend/src/components/Modal/service/Volumes.tsx

@@ -18,12 +18,11 @@ const Records = styled("div")`
 `;
 
 const AddButton = styled(Button)`
-  width: 140px;
-  margin-top: ${({ theme }) => theme.spacing(2)};
+  margin-top: ${({ theme }) => theme.spacing(1)};
 `;
 
 const Description = styled("p")`
-  margin-top: ${({ theme }) => theme.spacing(2)};
+  margin-top: ${({ theme }) => theme.spacing(1)};
   text-align: center;
   color: #7a7a7a;
   font-size: 14px;
@@ -84,13 +83,7 @@ const Volumes = () => {
           ))}
         </Records>
       )}
-      {emptyVolumes && (
-        <Description>
-          This service does not have any volumes.
-          <br />
-          Click "+ New volume" to add a new volume.
-        </Description>
-      )}
+      {emptyVolumes && <Description>No volumes.</Description>}
 
       <AddButton size="sm" variant="plain" onClick={handleNewVolume}>
         <PlusIcon className="h-4 w-4 mr-2" />

services/frontend/src/components/Modal/volume/Labels.tsx

@@ -18,12 +18,11 @@ const Records = styled("div")`
 `;
 
 const AddButton = styled(Button)`
-  width: 140px;
-  margin-top: ${({ theme }) => theme.spacing(2)};
+  margin-top: ${({ theme }) => theme.spacing(1)};
 `;
 
 const Description = styled("p")`
-  margin-top: ${({ theme }) => theme.spacing(2)};
+  margin-top: ${({ theme }) => theme.spacing(1)};
   text-align: center;
   color: #7a7a7a;
   font-size: 14px;
@@ -79,13 +78,7 @@ const Labels = () => {
           ))}
         </Records>
       )}
-      {emptyLabels && (
-        <Description>
-          This volume does not have any labels.
-          <br />
-          Click "+ New label" to add a new label.
-        </Description>
-      )}
+      {emptyLabels && <Description>No labels.</Description>}
 
       <AddButton size="sm" variant="plain" onClick={handleNewLabel}>
         <PlusIcon className="h-4 w-4 mr-2" />

services/frontend/src/components/Record.tsx

@@ -46,6 +46,10 @@ const Root = styled("div")`
   @media (max-width: 768px) {
     column-gap: ${({ theme }) => theme.spacing(1)};
   }
+
+  @media (max-width: 640px) {
+    flex-direction: column;
+  }
 `;
 
 const RemoveButton = styled(IconButton)``;

services/frontend/src/components/Records.tsx

@@ -25,9 +25,9 @@ const Group = styled("div")`
 `;
 
 const GroupTitle = styled("h5")`
-  font-size: 0.75rem;
+  font-size: 0.85rem;
   color: #374151;
-  font-weight: 500;
+  font-weight: 700;
   width: 100%;
   text-align: left;
 `;
@@ -43,12 +43,11 @@ const RecordList = styled("div")`
 `;
 
 const AddButton = styled(Button)`
-  min-width: 140px;
-  margin-top: ${({ theme }) => theme.spacing(2)};
+  margin-top: ${({ theme }) => theme.spacing(1)};
 `;
 
 const Description = styled("p")`
-  margin-top: ${({ theme }) => theme.spacing(2)};
+  margin-top: ${({ theme }) => theme.spacing(1)};
   text-align: center;
   color: #7a7a7a;
   font-size: 14px;
@@ -109,13 +108,7 @@ const Records: FunctionComponent<IRecordsProps> = (
           ))}
         </RecordList>
       )}
-      {empty && (
-        <Description>
-          This {modal} does not have any {referred}.
-          <br />
-          Click "+ New {referred}" to add a new {referred}.
-        </Description>
-      )}
+      {empty && <Description>No {referred}s.</Description>}
 
       <AddButton size="sm" variant="plain" onClick={handleNew}>
         <PlusIcon className="h-4 w-4 mr-2" />

services/frontend/src/index.css

@@ -114,7 +114,7 @@ path,
     @apply inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-indigo-500;
   }
   .lbl-util {
-    @apply block text-xs font-medium text-gray-700 mb-1
+    @apply block text-xs font-bold text-gray-700 mb-1
   }
   .btn-util-red {
     @apply inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-red-500;