+
diff --git a/app/builder/Form.css b/app/builder/Form.css
index 58f12da6..636f533f 100644
--- a/app/builder/Form.css
+++ b/app/builder/Form.css
@@ -1,29 +1,44 @@
-h1 {
+/*
+* The workflow builder (@i-vresse/wb-core) uses bootstrap 4 classes to
+* style, position and layout the form elements.
+*
+* This file contains the classes with a tailwindcss equivalent.
+*
+* Have to prepend .workflow-builder-app to each class to avoid conflicts.
+* Using one big nested selector did not work, got `Expected ":" [css-syntax-error]`
+*/
+
+.workflow-builder-app h1 {
@apply text-4xl;
}
-legend {
+.workflow-builder-app legend {
@apply text-2xl;
}
-h4 {
+.workflow-builder-app h4 {
@apply text-xl;
}
-h5 {
+.workflow-builder-app h5 {
@apply text-xl;
}
+/*
+Btn classes are copied from app/components/ui/button.tsx
+*/
+
.btn {
- @apply inline-block rounded px-3 py-1.5 text-center align-middle text-base font-normal normal-case transition-colors duration-150 ease-in-out;
+ @apply inline-block h-10 rounded-md px-4 py-2 text-sm font-medium transition-colors duration-150 ease-in-out;
}
+/* variant=secondary */
.btn-light {
- @apply border-gray-100 bg-gray-100 text-start text-primary hover:bg-gray-200;
+ @apply bg-secondary text-start text-secondary-foreground hover:bg-secondary/80;
}
.btn-sm {
- @apply h-12 p-1 text-sm;
+ @apply h-12 bg-transparent p-1 text-sm;
}
.grip,
@@ -31,191 +46,178 @@ h5 {
@apply h-auto border-0;
}
+/* variant=link */
.btn-link {
- @apply border-0 bg-inherit text-primary hover:bg-base-200;
-}
-
-.btn-outline-danger {
- @apply border border-error text-error hover:bg-error hover:text-white;
-}
-
-.btn-danger {
- @apply bg-error text-white;
+ @apply text-primary underline-offset-4 hover:underline;
}
.btn-toolbar {
@apply flex flex-wrap justify-start;
}
-ul {
- @apply list-inside;
+/* variant=default */
+.workflow-builder-app .btn-primary {
+ @apply bg-primary text-primary-foreground hover:bg-primary/90;
}
-ul ul {
- /* TODO add circle before button or not? */
+.workflow-builder-app ul {
+ @apply list-inside;
}
-li {
+.workflow-builder-app li {
@apply pl-2;
}
-.card {
- @apply rounded border border-gray-300;
+.workflow-builder-app .card {
+ @apply rounded border border-border;
}
-.card-header {
- @apply border border-gray-100 bg-gray-100 p-2 py-4 align-middle;
+.workflow-builder-app .card-header {
+ @apply border border-border bg-secondary p-2 py-4 align-middle text-secondary-foreground;
}
-.card-header svg {
+.workflow-builder-app .card-header svg {
@apply mr-3 inline;
}
-.form-group {
+.workflow-builder-app .form-group {
@apply mb-4 p-1;
}
-.form-label {
+.workflow-builder-app .form-label {
@apply mb-2 inline-block;
}
-.form-control {
+.workflow-builder-app .form-control {
@apply w-full p-1.5;
}
-.form-check-label {
+.workflow-builder-app .form-check-label {
@apply ml-2;
}
-/* rjsf uses .checkbox in div and input. daisyui uses checkbox on input. */
-div.checkbox {
+/* rjsf uses .checkbox in div and input. shadcn uses radix components. */
+.workflow-builder-app div .checkbox {
@apply h-auto w-auto cursor-default border-none;
}
-.form-check-input {
- @apply checkbox;
+/* Class from app/components/ui/checkbox.tsx */
+.workflow-builder-app .form-check-input {
+ @apply rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground;
}
-.custom-select {
- @apply select ml-2;
+.workflow-builder-app .custom-select {
+ @apply ml-2 bg-background text-base;
}
-.array-item-add,
-.object-property-expand {
+.workflow-builder-app .array-item-add,
+.workflow-builder-app .object-property-expand {
/* TODO full width + center plus sign */
@apply m-4 !w-auto;
}
-.container {
+.workflow-builder-app .container {
@apply w-full;
}
-.container-fluid {
+.workflow-builder-app .container-fluid {
@apply w-full;
}
-.row {
+.workflow-builder-app .row {
@apply flex flex-wrap;
}
-.col {
+.workflow-builder-app .col {
@apply max-w-full grow basis-0;
}
-.col-2 {
+.workflow-builder-app .col-2 {
@apply w-full max-w-[16.666667%] basis-2/12 px-3;
}
-.col-3 {
+.workflow-builder-app .col-3 {
@apply w-full max-w-[25%] basis-3/12 px-3;
}
-.col-5 {
+.workflow-builder-app .col-5 {
@apply max-w-[41.666667%] basis-5/12;
}
-.col-9 {
+.workflow-builder-app .col-9 {
@apply max-w-[75%] basis-9/12;
}
-.col-10 {
+.workflow-builder-app .col-10 {
@apply max-w-[85%] basis-10/12;
}
-.col-12 {
+.workflow-builder-app .col-12 {
@apply max-w-full basis-full;
}
-.offset-9 {
+.workflow-builder-app .offset-9 {
@apply ml-[75%];
}
-.nav {
+.workflow-builder-app .nav {
@apply flex flex-wrap;
}
-.nav-tabs {
- @apply border-b-4 border-b-primary-content;
+.workflow-builder-app .nav-tabs {
+ @apply border-b-4 border-b-primary;
}
-.nav-link {
- @apply block rounded-t-md border bg-base-200 px-4 py-2;
+.workflow-builder-app .nav-link {
+ @apply block rounded-t-md bg-muted px-4 py-2 text-muted-foreground;
}
-.nav .active {
- @apply border-base-200 bg-primary-content text-primary;
+.workflow-builder-app .nav .active {
+ @apply border-muted bg-primary text-primary-foreground;
}
-.justify-content-end {
+.workflow-builder-app .justify-content-end {
@apply justify-end;
}
-.d-flex {
+.workflow-builder-app .d-flex {
@apply !flex;
}
-.align-items-center {
+.workflow-builder-app .align-items-center {
@apply items-center;
}
-.table-field {
- @apply table mb-4 border-collapse border border-gray-300;
+.workflow-builder-app .table-field {
+ @apply mb-4 border-collapse border border-border;
}
-.table-bordered td,
-.table-bordered th {
- @apply border border-gray-300;
+.workflow-builder-app .table-bordered td,
+.workflow-builder-app .table-bordered th {
+ @apply border border-border bg-background text-foreground;
}
-.table-striped tbody tr:nth-of-type(odd) {
- @apply bg-gray-100;
+.workflow-builder-app .table-striped tbody tr:nth-of-type(odd) {
+ @apply bg-background/90;
}
-.table-field th:first-child {
+.workflow-builder-app .table-field th:first-child {
@apply relative;
}
-.array-item-remove {
- @apply !text-black;
-}
-
-.popover-header {
- @apply rounded border-b border-gray-200 bg-gray-100 px-3 py-2;
+.workflow-builder-app .popover-header {
+ @apply border bg-secondary px-3 py-2 text-secondary-foreground;
}
-.popover-body {
- @apply bg-white px-3 py-2 text-black;
+.workflow-builder-app .popover-body {
+ @apply border bg-popover px-3 py-2 text-popover-foreground;
}
-.page {
- /* grid-template-areas:
- "catalog workflow node"
- "catalog workflow-actions node-actions"; */
- grid-template-columns: 1fr 1fr 2fr;
- /* grid-template-rows: 1fr auto; */
+.workflow-builder-app .page {
+ grid-template-columns: 1fr 1fr 4fr;
}
-.page > .action-row {
+.workflow-builder-app .page > .action-row {
padding: 0.25rem;
overflow: unset;
}
@@ -223,3 +225,25 @@ div.checkbox {
code .table {
@apply contents;
}
+
+/*
+ * Input classes are copied from app/components/ui/input.tsx
+ */
+
+.workflow-builder-app
+ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
+ @apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
+}
+
+/* Exclude styling of upload button in workflow column */
+.workflow-builder-app .form-group input[type="file"] {
+ @apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
+}
+
+.workflow-builder-app .border-danger {
+ @apply border-destructive;
+}
+
+.workflow-builder-app .alert-danger {
+ @apply border-destructive bg-destructive text-destructive-foreground;
+}
diff --git a/app/builder/FormActions.tsx b/app/builder/FormActions.tsx
index 02923310..d990a2a5 100644
--- a/app/builder/FormActions.tsx
+++ b/app/builder/FormActions.tsx
@@ -3,6 +3,7 @@ import {
useWorkflow,
useActiveSubmitButton,
} from "@i-vresse/wb-core/dist/store";
+import { Button } from "~/components/ui/button";
/**
* Panel for actions to be performed on the currently active form.
@@ -45,35 +46,34 @@ export const FormActions = (): JSX.Element => {
return <>;
}
const DeleteButton = (
-
+
);
return (
-
-
);
diff --git a/app/builder/SubmitButton.tsx b/app/builder/SubmitButton.tsx
index 38faaf31..51ad0fe9 100644
--- a/app/builder/SubmitButton.tsx
+++ b/app/builder/SubmitButton.tsx
@@ -6,6 +6,13 @@ import {
import { catalog2tomlSchemas } from "@i-vresse/wb-core/dist/toml.js";
import { createZip } from "@i-vresse/wb-core/dist/archive";
import { useSubmit } from "@remix-run/react";
+import { Button } from "~/components/ui/button";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "~/components/ui/tooltip";
export const WorkflowSubmitButton = ({
submitAllowed,
@@ -26,20 +33,23 @@ export const WorkflowSubmitButton = ({
submit(formData, { method: "post", encType: "multipart/form-data" });
};
if (submitAllowed) {
- return (
-
- );
+ return
;
}
return (
-
-
-
+
+
+
+
+
+
+
+
+
+ You don't have permission to submit. Please login and make sure
+ you have the right expertise level.
+
+
+
+
);
};
diff --git a/app/caprieval/BoxPlots.tsx b/app/caprieval/BoxPlots.tsx
index 4ec427c4..4c74b8a0 100644
--- a/app/caprieval/BoxPlots.tsx
+++ b/app/caprieval/BoxPlots.tsx
@@ -1,6 +1,14 @@
+import { Label } from "~/components/ui/label";
import type { PlotlyProps } from "../components/PlotlyPlot";
import { PlotlyPlot } from "../components/PlotlyPlot";
import { CAPRIEVAL_BOXPLOT_CHOICES } from "./constants";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "~/components/ui/select";
export function BoxPlots({
data,
@@ -16,16 +24,21 @@ export function BoxPlots({
return (
<>
-
+
+
+
+
);
}
diff --git a/app/caprieval/CaprievalReport.client.css b/app/caprieval/CaprievalReport.client.css
index 0a3b129b..6b1df32b 100644
--- a/app/caprieval/CaprievalReport.client.css
+++ b/app/caprieval/CaprievalReport.client.css
@@ -1,13 +1,7 @@
-/* ClusterTable adjust according to preferred color scheme,
-however rest of webapp does not so overwrite colors here */
-
-@media (prefers-color-scheme: dark) {
- :root {
- --background-color: #f2f2f2;
- --text-color: #000;
- --border-color: #ddd;
- }
-}
+/*
+ * The haddock3-analysis components library has a css which follows prefer-color-scheme.
+ * We dont import that css, but have a tailwindified copy here.
+ */
#Nglviewport {
top: 2rem;
@@ -16,3 +10,61 @@ however rest of webapp does not so overwrite colors here */
height: 640px;
width: 810px;
}
+
+.caprieval-report {
+ table {
+ @apply w-full text-sm;
+ }
+
+ tr {
+ @apply border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted;
+ }
+
+ th {
+ @apply sticky px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0;
+ }
+
+ td {
+ @apply p-4 align-middle [&:has([role=checkbox])]:pr-0;
+ }
+
+ .sort-icon {
+ position: absolute;
+ right: 5px;
+ top: 50%;
+ transform: translateY(-50%);
+ @apply cursor-pointer opacity-25 hover:opacity-100;
+ }
+
+ .active {
+ @apply opacity-100;
+ }
+
+ .viewport {
+ position: relative;
+ top: 5px;
+ left: 5px;
+ width: 800px;
+ height: 600px;
+ }
+
+ .dl {
+ position: absolute;
+ top: 2px;
+ left: 2px;
+ }
+
+ .Xbutton {
+ position: absolute;
+ top: 2px;
+ right: 2px;
+ }
+
+ .viewbutton {
+ cursor: pointer;
+ }
+
+ #structureViewerDialog {
+ @apply bg-background text-foreground;
+ }
+}
diff --git a/app/caprieval/CaprievalReport.client.tsx b/app/caprieval/CaprievalReport.client.tsx
index d1f71eda..5570009f 100644
--- a/app/caprieval/CaprievalReport.client.tsx
+++ b/app/caprieval/CaprievalReport.client.tsx
@@ -1,5 +1,4 @@
import { ClusterTable } from "@i-vresse/haddock3-analysis-components";
-import "@i-vresse/haddock3-analysis-components/dist/style.css";
import "./CaprievalReport.client.css";
import { useMemo } from "react";
@@ -155,7 +154,7 @@ export const CaprievalReport = ({
const [searchParams, setSearchParams] = useSearchParams();
return (
-
+
-
+
+
+
+
);
}
diff --git a/app/cards/Card.tsx b/app/cards/Card.tsx
index c0156691..c7a1ab67 100644
--- a/app/cards/Card.tsx
+++ b/app/cards/Card.tsx
@@ -1,3 +1,9 @@
+import {
+ CardContent,
+ CardFooter,
+ CardHeader,
+ Card as UiCard,
+} from "~/components/ui/card";
import { Link } from "@remix-run/react";
interface CardProps {
@@ -9,16 +15,20 @@ interface CardProps {
export default function Card(props: CardProps) {
return (
-
+
-
- 
-
-
-
{props.title}
+
+
+
+
+
+
+ {props.title}
+
+
{props.description}
- 
+ );
+}
diff --git a/app/components/ErrorMessages.tsx b/app/components/ErrorMessages.tsx
index ff1c57ea..4c0fe2c0 100644
--- a/app/components/ErrorMessages.tsx
+++ b/app/components/ErrorMessages.tsx
@@ -17,7 +17,7 @@ export function ErrorMessages({
if (!issues) return <>;
return (
-
+
{issues.map((message: string) => (
{message}
))}
diff --git a/app/components/JobName.tsx b/app/components/JobName.tsx
index 87bd1cec..4f39d4ff 100644
--- a/app/components/JobName.tsx
+++ b/app/components/JobName.tsx
@@ -28,12 +28,12 @@ export function JobName({ jobid, name }: { jobid: number; name: string }) {
type="text"
name="name"
defaultValue={name}
- className="mx-1 rounded border-2 p-1"
+ className="mx-1 rounded border-2 bg-background p-1"
maxLength={200}
minLength={1}
/>
-