aiden
/
ctk
mirror of https://github.com/ctk-hq/ctk
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Minor HTML / CSS fixes
pull/87/head
Samuel Rowe 3 years ago committed by GitHub
parent 88da5cac5b da415e7e64
commit 555a7b2603
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 55 additions and 92 deletions
Show Stats Download Patch File Download Diff File

2
services/frontend/src/components/Modal/network/CreateNetworkModal.tsx
Unescape Escape View File

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

2
services/frontend/src/components/Modal/network/EditNetworkModal.tsx
Unescape Escape View File

@ -63,7 +63,7 @@ const EditNetworkModal = (props: IEditNetworkModalProps) => {
</nav> </nav>
</div> </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 === "General" && <General />}
{openTab === "IPAM" && <IPam />} {openTab === "IPAM" && <IPam />}
{openTab === "Labels" && <Labels />} {openTab === "Labels" && <Labels />}

26
services/frontend/src/components/Modal/network/EmptyNetworks.tsx
Unescape Escape View File

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

14
services/frontend/src/components/Modal/network/IPam.tsx
Unescape Escape View File

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

2
services/frontend/src/components/Modal/network/Labels.tsx
Unescape Escape View File

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

10
services/frontend/src/components/Modal/network/NetworkList.tsx
Unescape Escape View File

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

11
services/frontend/src/components/Modal/service/Environment.tsx
Unescape Escape View File

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

18
services/frontend/src/components/Modal/service/General.tsx
Unescape Escape View File

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

13
services/frontend/src/components/Modal/service/Labels.tsx
Unescape Escape View File

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

13
services/frontend/src/components/Modal/service/Volumes.tsx
Unescape Escape View File

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

13
services/frontend/src/components/Modal/volume/Labels.tsx
Unescape Escape View File

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

4
services/frontend/src/components/Record.tsx
Unescape Escape View File

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

17
services/frontend/src/components/Records.tsx
Unescape Escape View File

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

2
services/frontend/src/index.css
Unescape Escape View File

@ -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; @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 { .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 { .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; @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;

Write Preview
Loading…
Cancel
Save