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

fix: css and markup improvements

Browse Source
pull/77/head
corpulent 3 years ago
parent b0945e6543
commit a9642ccf39
11 changed files with 161 additions and 158 deletions
Show Stats Download Patch File Download Diff File

51
services/frontend/src/components/Modal/Network/Create.tsx
Unescape Escape View File

@ -79,31 +79,32 @@ const NetworkCreate = (props: INetworkCreateProps) => {
>
{(formik) => (
<>
<div className="hidden sm:block">
<div className="border-b border-gray-200 px-8">
<nav className="-mb-px flex space-x-8" aria-label="Tabs">
{tabs.map((tab) => (
<a
key={tab.name}
href={tab.href}
className={classNames(
tab.name === openTab
? "border-indigo-500 text-indigo-600"
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
tab.hidden ? "hidden" : ""
)}
aria-current={tab.current ? "page" : undefined}
onClick={(e) => {
e.preventDefault();
setOpenTab(tab.name);
}}
>
{tab.name}
</a>
))}
</nav>
</div>
<div className="border-b border-gray-200 px-4 md:px-8">
<nav
className="-mb-px flex space-x-4 md:space-x-8"
aria-label="Tabs"
>
{tabs.map((tab) => (
<a
key={tab.name}
href={tab.href}
className={classNames(
tab.name === openTab
? "border-indigo-500 text-indigo-600"
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
tab.hidden ? "hidden" : ""
)}
aria-current={tab.current ? "page" : undefined}
onClick={(e) => {
e.preventDefault();
setOpenTab(tab.name);
}}
>
{tab.name}
</a>
))}
</nav>
</div>
<div className="relative px-4 py-3 flex-auto">

51
services/frontend/src/components/Modal/Network/Edit.tsx
Unescape Escape View File

@ -82,31 +82,32 @@ const NetworkEdit = (props: INetworkEditProps) => {
>
{(formik) => (
<>
<div className="hidden sm:block">
<div className="border-b border-gray-200 px-8">
<nav className="-mb-px flex space-x-8" aria-label="Tabs">
{tabs.map((tab) => (
<a
key={tab.name}
href={tab.href}
className={classNames(
tab.name === openTab
? "border-indigo-500 text-indigo-600"
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
tab.hidden ? "hidden" : ""
)}
aria-current={tab.current ? "page" : undefined}
onClick={(e) => {
e.preventDefault();
setOpenTab(tab.name);
}}
>
{tab.name}
</a>
))}
</nav>
</div>
<div className="border-b border-gray-200 px-4 md:px-8">
<nav
className="-mb-px flex space-x-4 md:space-x-8"
aria-label="Tabs"
>
{tabs.map((tab) => (
<a
key={tab.name}
href={tab.href}
className={classNames(
tab.name === openTab
? "border-indigo-500 text-indigo-600"
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
tab.hidden ? "hidden" : ""
)}
aria-current={tab.current ? "page" : undefined}
onClick={(e) => {
e.preventDefault();
setOpenTab(tab.name);
}}
>
{tab.name}
</a>
))}
</nav>
</div>
<div className="relative px-4 py-3 flex-auto">

54
services/frontend/src/components/Modal/Service/Edit.tsx
Unescape Escape View File

@ -100,34 +100,32 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
>
{(formik) => (
<>
<div className="hidden sm:block">
<div className="border-b border-gray-200 px-8">
<nav
className="-mb-px flex space-x-8"
aria-label="Tabs"
>
{tabs.map((tab) => (
<a
key={tab.name}
href={tab.href}
className={classNames(
tab.name === openTab
? "border-indigo-500 text-indigo-600"
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
tab.hidden ? "hidden" : ""
)}
aria-current={tab.current ? "page" : undefined}
onClick={(e) => {
e.preventDefault();
setOpenTab(tab.name);
}}
>
{tab.name}
</a>
))}
</nav>
</div>
<div className="border-b border-gray-200 px-4 md:px-8">
<nav
className="-mb-px flex space-x-4 md:space-x-8"
aria-label="Tabs"
>
{tabs.map((tab) => (
<a
key={tab.name}
href={tab.href}
className={classNames(
tab.name === openTab
? "border-indigo-500 text-indigo-600"
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
tab.hidden ? "hidden" : ""
)}
aria-current={tab.current ? "page" : undefined}
onClick={(e) => {
e.preventDefault();
setOpenTab(tab.name);
}}
>
{tab.name}
</a>
))}
</nav>
</div>
<div className="relative px-4 py-3 flex-auto">

11
services/frontend/src/components/Modal/Service/General.tsx
Unescape Escape View File

@ -15,6 +15,9 @@ const Fields = styled("div")`
const ImageNameGroup = styled("div")`
display: flex;
flex-direction: row;
@media (max-width: 640px) {
flex-direction: column;
}
column-gap: ${({ theme }) => theme.spacing(1)};
width: 100%;
`;
@ -31,6 +34,7 @@ const GroupTitle = styled("h5")`
font-weight: 500;
width: 100%;
text-align: left;
margin-bottom: 0.25em;
`;
const Records = styled("div")`
@ -80,12 +84,7 @@ const General = () => {
<Fields>
<TextField label="Service name" name="serviceName" required={true} />
<ImageNameGroup>
<TextField
label="Image name"
name="imageName"
required={true}
style={{ minWidth: 400 }}
/>
<TextField label="Image name" name="imageName" required={true} />
<TextField label="Image tag" name="imageTag" />
</ImageNameGroup>
<TextField

54
services/frontend/src/components/Modal/volume/EditVolumeModal.tsx
Unescape Escape View File

@ -71,34 +71,32 @@ const EditVolumeModal = (props: IEditVolumeModal) => {
>
{(formik) => (
<>
<div className="hidden sm:block">
<div className="border-b border-gray-200 px-8">
<nav
className="-mb-px flex space-x-8"
aria-label="Tabs"
>
{tabs.map((tab) => (
<a
key={tab.name}
href={tab.href}
className={classNames(
tab.name === openTab
? "border-indigo-500 text-indigo-600"
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
tab.hidden ? "hidden" : ""
)}
aria-current={tab.current ? "page" : undefined}
onClick={(e) => {
e.preventDefault();
setOpenTab(tab.name);
}}
>
{tab.name}
</a>
))}
</nav>
</div>
<div className="border-b border-gray-200 px-4 md:px-8">
<nav
className="-mb-px flex space-x-4 md:space-x-8"
aria-label="Tabs"
>
{tabs.map((tab) => (
<a
key={tab.name}
href={tab.href}
className={classNames(
tab.name === openTab
? "border-indigo-500 text-indigo-600"
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
tab.hidden ? "hidden" : ""
)}
aria-current={tab.current ? "page" : undefined}
onClick={(e) => {
e.preventDefault();
setOpenTab(tab.name);
}}
>
{tab.name}
</a>
))}
</nav>
</div>
<div className="relative px-4 py-3 flex-auto">

50
services/frontend/src/components/Projects/index.tsx
Unescape Escape View File

@ -5,6 +5,7 @@ import { IProject } from "../../types";
import Spinner from "../../components/global/Spinner";
import PreviewBlock from "./PreviewBlock";
import { useProjects } from "../../hooks/useProjects";
import { PlusIcon } from "@heroicons/react/outline";
const Projects = () => {
const [limit] = useState(PROJECTS_FETCH_LIMIT);
@ -22,22 +23,24 @@ const Projects = () => {
Projects
</h1>
<Link
className="btn-util text-white bg-blue-600 hover:bg-blue-700 sm:w-auto"
to="/projects/new"
>
<span>Create new project</span>
</Link>
{data && data.results.length > 0 && (
<Link
className="btn-util text-white bg-blue-600 hover:bg-blue-700 sm:w-auto"
to="/projects/new"
>
<span>Create new project</span>
</Link>
)}
</div>
<div className="px-4 sm:px-6 md:px-8">
{isFetching && (
{(isFetching || isLoading) && (
<div className="flex justify-center items-center mx-auto mt-10">
<Spinner className="w-6 h-6 text-blue-600" />
</div>
)}
{!isFetching && (
{!isFetching && !isLoading && (
<>
<div className="py-4">
{error && (
@ -70,22 +73,23 @@ const Projects = () => {
minHeight: "calc(100vh - 120px)"
}}
>
<img
style={{
width: 400,
height: "auto"
}}
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 projects.
<h3 className="mt-2 text-sm font-medium text-gray-900">
No projects
</h3>
<p className="mt-1 text-sm text-gray-500">
Get started by creating a new project.
</p>
<Link
className="btn-util text-white bg-blue-600 hover:bg-blue-700 sm:w-auto mt-3"
to="/projects/new"
>
<span>Create new project</span>
</Link>
<div className="mt-6">
<Link to="/projects/new" className="btn-util">
<span className="flex space-x-1 items-center">
<PlusIcon
className="h-3 w-3"
aria-hidden="true"
/>
<span>New Project</span>
</span>
</Link>
</div>
</div>
)}
</div>

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

@ -28,6 +28,9 @@ const Root = styled("div")`
justify-content: flex-start;
align-items: flex-start;
column-gap: ${({ theme }) => theme.spacing(2)};
@media (max-width: 768px) {
column-gap: ${({ theme }) => theme.spacing(1)};
}
`;
const RemoveButton = styled(IconButton)``;

8
services/frontend/src/components/global/FormElements/TextField.tsx
Unescape Escape View File

@ -12,6 +12,7 @@ export interface ITextFieldProps {
const Root = styled("div")`
display: flex;
flex-direction: column;
width: 100%;
`;
const TextField: FunctionComponent<ITextFieldProps> = (
@ -25,10 +26,7 @@ const TextField: FunctionComponent<ITextFieldProps> = (
return (
<Root>
{label && (
<label
htmlFor={name}
className="block text-xs font-medium text-gray-700"
>
<label htmlFor={name} className="lbl-util">
{label + (required ? "*" : "")}
</label>
)}
@ -38,7 +36,7 @@ const TextField: FunctionComponent<ITextFieldProps> = (
name={name}
type="text"
autoComplete="none"
className="input-util mt-1"
className="input-util"
required={required}
onBlur={formik.handleBlur}
onChange={formik.handleChange}

24
services/frontend/src/components/global/SideBar.tsx
Unescape Escape View File

@ -29,15 +29,15 @@ export default function SideBar(props: ISideBarProps) {
return (
<>
<div className="md:flex md:w-16 md:flex-col md:fixed md:inset-y-0">
<div className="flex flex-col flex-grow pt-5 bg-blue-700 overflow-y-auto">
<div className="flex items-center flex-shrink-0 mx-auto">
<div className="flex justify-between flex-col sm:flex-row md:flex-col md:flex-grow md:pt-5 bg-blue-700 overflow-y-auto">
<div className="flex items-center flex-shrink-0 mx-auto p-2 ">
<Link to={isAuthenticated ? "/" : "projects/new"}>
<Logo />
</Link>
</div>
<div className="mt-5 flex-1 flex flex-col">
<nav className="flex-1 px-2 pb-4 space-y-1">
<div className="md:mt-5 flex-1 flex flex-col items-center sm:flex-row md:flex-col justify-end">
<nav className="md:flex-1 space-y-1">
{navigation.map((item) => (
<a
key={item.name}
@ -46,23 +46,23 @@ export default function SideBar(props: ISideBarProps) {
item.current
? "bg-blue-800 text-white"
: "text-blue-100 hover:bg-blue-600",
"group flex items-center justify-center px-2 py-2 text-sm font-medium rounded-md"
"group flex items-center justify-center p-2 text-sm font-medium rounded-md"
)}
>
<item.icon
className="mr-3 md:mr-0 flex-shrink-0 h-5 w-5"
className="mr-3 sm:mr-0 flex-shrink-0 h-5 w-5"
aria-hidden="true"
/>
<span className="md:hidden">{item.name}</span>
<span className="sm:hidden">{item.name}</span>
</a>
))}
</nav>
</div>
<UserMenu
username={userName}
current={pathname.includes("profile")}
/>
<UserMenu
username={userName}
current={pathname.includes("profile")}
/>
</div>
</div>
</div>
</>

9
services/frontend/src/components/global/UserMenu.tsx
Unescape Escape View File

@ -19,18 +19,15 @@ export default function UserMenu(props: IUserMenuProps) {
${
current ? "bg-blue-800 text-white" : "text-blue-100 hover:bg-blue-600"
},
flex border-t border-blue-800 p-4 w-full hover:cursor-pointer hover:bg-blue-600
flex md:border-t md:border-blue-800 p-4 md:w-full hover:cursor-pointer hover:bg-blue-600
`}
>
<div className="flex items-center mx-auto">
<UserCircleIcon className="inline-block h-8 w-8 rounded-full text-white" />
<div className="ml-3 md:ml-0">
<p className="text-base font-medium text-white md:hidden">
<div className="ml-3 sm:ml-0">
<p className="text-sm font-medium text-white sm:hidden">
{username ? <>{username}</> : <>Log in</>}
</p>
<p className="text-sm font-medium text-indigo-200 group-hover:text-white md:hidden">
View profile
</p>
</div>
</div>
</div>

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

@ -16,6 +16,7 @@ body {
.canvas {
position: relative;
height: 100%;
width: 100%;
}
.jsplumb-box {
@ -112,6 +113,9 @@ path,
.btn-util {
@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
}
.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;
}

Write Preview
Loading…
Cancel
Save