Skip to content

Commit

Permalink
fix(client): improve colors
Browse files Browse the repository at this point in the history
  • Loading branch information
Ivo committed Apr 22, 2023
1 parent 3912c6d commit d121046
Show file tree
Hide file tree
Showing 29 changed files with 743 additions and 629 deletions.
1 change: 1 addition & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"editor.defaultFormatter": "ms-python.black-formatter",
"editor.formatOnSave": true
},
"css.lint.unknownAtRules": "ignore",
"python.formatting.provider": "none",
"typescript.tsdk": "node_modules/.pnpm/typescript@4.9.3/node_modules/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true,
Expand Down
8 changes: 5 additions & 3 deletions apps/client/next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ const withBundleAnalyzer = require("@next/bundle-analyzer")({
});

/** @type {import('next').NextConfig} */
const nextConfig = withBundleAnalyzer({
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
i18n,
images: {
domains: [
Expand All @@ -15,6 +17,6 @@ const nextConfig = withBundleAnalyzer({
"images.unsplash.com"
]
}
});
};

module.exports = withContentlayer(nextConfig);
module.exports = withBundleAnalyzer(withContentlayer(nextConfig));
2 changes: 1 addition & 1 deletion apps/client/public/locales/en-US/home.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"title": "Home",
"callout": "Molecular Dynamics made easy",
"slogan": "The new home to easy MD generation and execution",
"slogan": "The new home to MD generation and execution",
"description": "Welcome to the new Visual Dynamics.\nWith a revamped interface and a new methodology of generating and running GROMACS simulations we aim to provide faster, more reliable and replicable simulations, all this, through a new, more understandable and scalable codebase.",
"features": {
"runs-on-cloud": {
Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/components/Breadcrumb/BreadcrumbItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export function BreadcrumbItem({
return (
<li {...props}>
<Link
className="lowercase text-primary-600 font-inter transition-all duration-500 font-medium hover:text-primary-800 dark:text-primary-400 dark:hover:text-primary-200"
className="lowercase text-primary-600 transition-all duration-500 font-medium hover:text-primary-800 dark:text-primary-400 dark:hover:text-primary-200"
href={href}
passHref
>
Expand Down
17 changes: 0 additions & 17 deletions apps/client/src/components/Button/GoBack.tsx

This file was deleted.

2 changes: 1 addition & 1 deletion apps/client/src/components/Button/Status.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const StatusButton: FC<ButtonProps> = ({
return (
<button
className={clsx(
`p-2 font-medium text-white font-inter items-center justify-center flex gap-x-1 transition-all disabled:opacity-60 disabled:cursor-not-allowed duration-500 rounded-lg outline-none focus:ring-2 focus:ring-offset-2 ${className}`,
`group p-2 font-medium text-white items-center justify-center flex gap-x-1 transition-all disabled:opacity-60 disabled:cursor-not-allowed duration-150 rounded-lg outline-none focus:ring-2 focus:ring-offset-2 ${className}`,
{
"bg-cyan-600/80 enabled:hover:bg-cyan-700 focus:ring-cyan-400 focus:ring-offset-cyan-400/20":
status === "running",
Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/components/Button/Text.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const TextButton: FC<ButtonProps> = ({
}) => {
return (
<button
className={`p-2 font-medium font-inter items-center justify-center text-primary-500 flex gap-x-1 disabled:opacity-60 enabled:hover:text-primary-600 transition-all duration-500 rounded-lg outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-900 ${className}`}
className={`group p-2 font-medium items-center justify-center text-primary-600 flex gap-x-1 disabled:opacity-60 enabled:hover:text-primary-700 transition-all duration-150 rounded-lg outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-900 ${className}`}
{...rest}
>
{LeftIcon ? <LeftIcon className={`h-4 w-4 ${iconClassName}`} /> : null}
Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/components/Button/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const Button: FC<ButtonProps> = ({
}) => {
return (
<button
className={`p-2 font-medium text-white font-inter items-center justify-center bg-primary-500 flex gap-x-1 disabled:opacity-60 enabled:hover:bg-primary-600 transition-all duration-500 rounded-lg outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-900 ${className}`}
className={`group p-2 font-medium text-white items-center justify-center bg-primary-600 flex gap-x-1 disabled:opacity-60 enabled:hover:bg-primary-700 transition-all duration-150 rounded-lg outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-900 ${className}`}
{...rest}
>
{LeftIcon ? <LeftIcon className={`h-4 w-4 ${iconClassName}`} /> : null}
Expand Down
17 changes: 2 additions & 15 deletions apps/client/src/components/Container/Layout.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,11 @@
import { useContext } from "react";
import dynamic from "next/dynamic";

import { Main } from "@app/components/Container/Main";
import { Header } from "@app/components/Header";
import { SidebarContext, SidebarProvider } from "@app/context/SidebarContext";
import { useTheme } from "@app/context/ThemeContext";

import { Spinner } from "../Spinner";

const Sidebar = dynamic(
() => import("@app/components/Sidebar").then((mod) => mod.Sidebar),
{
loading: () => (
<div className="flex items-center justify-center w-64">
<Spinner className="h-20 w-20" />
</div>
),
ssr: false
}
);
import { Sidebar } from "../Sidebar";

interface ILayout {
children: React.ReactNode;
Expand All @@ -32,7 +19,7 @@ export function Layout({ children }: ILayout) {
<SidebarProvider>
<div className={theme}>
<div
className={`flex h-screen bg-white dark:bg-gray-900 ${
className={`transition-all duration-150 flex h-screen bg-white dark:bg-gray-900 ${
isSidebarOpen && "overflow-hidden"
}`}
>
Expand Down
4 changes: 2 additions & 2 deletions apps/client/src/components/Container/Main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ export function Main({ children }: IMain) {
}, [router.asPath]);

return (
<main className="h-full lg:rounded-tl-3xl overflow-y-auto text-gray-800 dark:text-gray-100 bg-gray-100 dark:bg-gray-950">
<div className="flex sticky top-0 z-30 shadow-sm shadow-gray-300 dark:shadow-gray-900 bg-gray-100 dark:bg-gray-950 gap-x-2 px-6">
<main className="transition-all duration-150 h-full lg:rounded-tl-3xl overflow-y-auto text-gray-800 dark:text-gray-100 bg-gray-100 dark:bg-gray-950">
<div className="transition-all duration-150 flex sticky top-0 z-30 shadow-sm shadow-gray-300 dark:shadow-gray-900 bg-gray-100 dark:bg-gray-950 gap-x-2 px-6">
<Breadcrumb>
<BreadcrumbItem href="/">{t("common:app-name")}</BreadcrumbItem>
{breadcrumbs ? (
Expand Down
211 changes: 211 additions & 0 deletions apps/client/src/components/Forms/ACPYPE.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,211 @@
import { SubmitHandler, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { CloudCog, Download } from "lucide-react";
import { useRouter } from "next/router";
import { User } from "next-auth";
import { useTranslation } from "next-i18next";

import { api } from "@app/lib/api";
import {
ACPYPEFormSchema,
ACPYPEFormSchemaType
} from "@app/schemas/pages/dynamic/acpype.zod";
import { boxTypes } from "@app/utils/box-types";
import { acpypeForceFields } from "@app/utils/force-fields";
import { waterModels } from "@app/utils/water-models";

import { Button } from "../Button";
import { Input } from "../Input";
import { Select } from "../Select";
import { Switch } from "../Switch";

interface ACPYPEFormProps {
user: User;
}

export function ACPYPEForm({ user }: ACPYPEFormProps) {
const {
formState: { errors },
handleSubmit,
register,
setValue,
watch
} = useForm<ACPYPEFormSchemaType>({
resolver: zodResolver(ACPYPEFormSchema),
defaultValues: {
neutralize: true,
ignore: true,
double: false
}
});
const router = useRouter();
const { t } = useTranslation(["forms", "navigation"]);

const handleSubmitDynamic: SubmitHandler<ACPYPEFormSchemaType> = async (
data
) => {
const formData = new FormData();

formData.append("file_pdb", data.protein[0]);
formData.append("file_itp", data.ligandItp[0]);
formData.append("file_gro", data.ligandGro[0]);
formData.append("force_field", data.forceField);
formData.append("water_model", data.waterModel);
formData.append("box_type", data.boxType);
formData.append("box_distance", data.boxDistance);
formData.append("bootstrap", data.bootstrap ? "true" : "false");
formData.append("neutralize", data.neutralize ? "true" : "false");
formData.append("double", data.double ? "true" : "false");
formData.append("ignore", data.ignore ? "true" : "false");
formData.append("username", user.username);

await api
.post("/acpype", formData, {
headers: {
"Content-Type": "multipart/form-data"
}
})
.then(async ({ data }) => {
if (data.status === "generated") {
await api
.post(
"/run",
{
folder: data.folder
},
{
headers: {
"Content-Type": "multipart/form-data"
}
}
)
.then(() => router.push("/dynamic/running"))
.catch(() => alert("not running"));
} else if (data.status === "commands") {
const link = document.createElement("a");
link.download = "dynamic-commands.txt";
link.href =
"data:text/plain;charset=utf-8," +
encodeURIComponent(data.commands.join(""));
link.click();
}
})
.catch(() => alert("Não foi"));
};

return (
<form
className="flex flex-col gap-y-2"
onSubmit={handleSubmit(handleSubmitDynamic)}
>
<Input
label={t("forms:file-pdb.title")}
type="file"
accept=".pdb"
error={errors.protein}
{...register("protein")}
/>

<div className="flex flex-col gap-1 md:flex-row md:gap-3">
<Input
label={t("forms:file-itp.title")}
type="file"
accept=".itp,.gro"
error={errors.ligandItp}
{...register("ligandItp")}
/>

<Input
label={t("forms:file-gro.title")}
type="file"
accept=".pdb,.gro"
error={errors.ligandGro}
{...register("ligandGro")}
/>
</div>

<div className="flex flex-col gap-1 md:flex-row md:gap-3">
<Select<keyof typeof acpypeForceFields>
error={errors.forceField}
label={t("forms:force-field.title")}
name="forceField"
onChange={(newForceField) => setValue("forceField", newForceField)}
placeholder={t("forms:force-field.placeholder")}
selectedValue={watch("forceField")}
values={acpypeForceFields}
/>

<Select<keyof typeof waterModels>
error={errors.waterModel}
label={t("forms:water-model.title")}
name="waterModel"
onChange={(newWaterModel) => setValue("waterModel", newWaterModel)}
placeholder={t("forms:water-model.placeholder")}
selectedValue={watch("waterModel")}
values={waterModels}
/>
</div>

<div className="flex flex-col gap-1 md:flex-row md:gap-3">
<Select<keyof typeof boxTypes>
error={errors.boxType}
label={t("forms:box-type.title")}
name="boxType"
onChange={(newBoxType) => setValue("boxType", newBoxType)}
placeholder={t("forms:box-type.placeholder")}
selectedValue={watch("boxType")}
values={boxTypes}
/>

<Input
label={t("forms:box-distance.title")}
error={errors.boxDistance}
type="number"
{...register("boxDistance")}
/>
</div>

<label>{t("forms:options")}</label>
<div className="flex flex-col gap-y-2">
<Switch
label={t("forms:neutralize.title")}
checked={watch("neutralize")}
onCheckedChange={(bool) => setValue("neutralize", bool)}
name="neutralize"
disabled
/>

<Switch
label={t("forms:ignore.title")}
checked={watch("ignore")}
onCheckedChange={(bool) => setValue("ignore", bool)}
name="ignore"
disabled
/>

<Switch
label={t("forms:double.title")}
checked={watch("double")}
onCheckedChange={(bool) => setValue("double", bool)}
name="double"
disabled
/>

<Switch
label={t("forms:run.title")}
checked={watch("bootstrap")}
onCheckedChange={(bool) => setValue("bootstrap", bool)}
name="bootstrap"
/>
</div>
<Button
LeftIcon={watch("bootstrap") === true ? CloudCog : Download}
type="submit"
>
{watch("bootstrap") === true
? t("forms:submit.run")
: t("forms:submit.download")}
</Button>
</form>
);
}

0 comments on commit d121046

Please sign in to comment.