Skip to content

Commit

Permalink
Preliminary fixes for dark mode rendering (#39)
Browse files Browse the repository at this point in the history
  • Loading branch information
@j6k4m8
j6k4m8 authored Jul 24, 2024
1 parent 88c0458 commit a3e7b82
Show file tree
Hide file tree
Showing 6 changed files with 43 additions and 13 deletions.
9 changes: 7 additions & 2 deletions motifstudio-web/src/app/Appbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,13 @@ import Image from "next/image";
export function Appbar() {
return (
<div className="w-full items-center justify-between font-mono text-sm lg:flex p-4">
<div className="flex flex-col justify-center w-full h-full p-4 bg-white rounded-lg shadow-lg">
<Image src={motifStudioLogo} alt="Motif Studio" className="object-contain h-8 object-left" />
<div className="flex flex-col justify-center w-full h-full p-4 bg-white rounded-lg shadow-lg dark:bg-gray-800">
<Image
src={motifStudioLogo}
alt="Motif Studio"
// In dark mode, invert the logo colors. (Check theme with tailwind)
className="object-contain h-8 object-left w-auto dark:filter dark:invert"
/>
</div>
</div>
);
Expand Down
13 changes: 8 additions & 5 deletions motifstudio-web/src/app/GraphForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export function GraphForm({

// Return the dropdown with the filtered graphs as the options.
return (
<div className="h-full bg-white p-4 rounded-lg shadow-lg">
<div className="h-full bg-white p-4 rounded-lg shadow-lg dark:bg-gray-800">
<h2 className="text-xl font-mono">Host Graph</h2>
<hr className="my-2" />

Expand All @@ -60,19 +60,22 @@ export function GraphForm({
<div className="relative">
<Combobox.Input
onChange={(event) => setQuery(event.target.value)}
className="w-full p-4 rounded-lg shadow-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent font-bold"
className="w-full p-4 rounded-lg shadow-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent font-bold dark:bg-gray-900 dark:text-gray-200"
placeholder="Start typing or press the down arrow to choose a host graph..."
displayValue={(graph: HostListing) => graph?.name}
/>
<Combobox.Options className="p-3 rounded-lg shadow-lg border border-gray-200 z-10 bg-white overflow-y-scroll max-h-64 absolute w-full">
<Combobox.Options className="p-3 rounded-lg shadow-lg border overflow-y-scroll max-h-64 absolute w-full">
{filteredGraphs.map((graph) => (
<Combobox.Option
key={graph.id}
value={graph}
className={({ active }) => `${
active ? "text-white bg-blue-400" : "text-gray-900"
active
? "text-white bg-blue-400 dark:bg-blue-400 dark:text-white"
: "text-gray-900 dark:text-gray-200"
}
cursor-default select-none relative py-2 pl-10 pr-4 hover:bg-blue-400 hover:text-white flex items-center justify-between`}
cursor-default select-none relative py-2 pl-10 pr-4 hover:bg-blue-400 hover:text-white flex items-center justify-between text-sm
`}
>
<b className="font-bold">{graph.name}</b>{" "}
<div className="text-xs inline font-mono ml-4">{graph.id}</div>
Expand Down
2 changes: 1 addition & 1 deletion motifstudio-web/src/app/GraphStats.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export function GraphStats({

// Render the attributes and statistics.
return graph ? (
<div className="flex w-full h-full p-4 bg-white rounded-lg shadow-lg">
<div className="flex w-full h-full p-4 bg-white rounded-lg shadow-lg dark:bg-gray-800">
<div className="flex flex-col gap-2 w-full">
<h2 className="text-xl font-mono w-full">Graph Properties for {graph.name}</h2>
<hr className="my-2 w-full" />
Expand Down
6 changes: 3 additions & 3 deletions motifstudio-web/src/app/ResultsFetcher.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,13 +121,13 @@ export function ResultsFetcher({ graph, query }: { graph: HostListing | null; qu
</div>
<div className="w-full flex gap-2">
<button
className="bg-blue-500 hover:bg-blue-700 text-white font-bold px-4 rounded"
className="bg-blue-500 hover:bg-blue-700 text-white font-bold px-4 rounded"
onClick={() => downloadResults("json")}
>
JSON
</button>
<button
className="bg-blue-500 hover:bg-blue-700 text-white font-bold px-4 rounded"
className="bg-blue-500 hover:bg-blue-700 text-white font-bold px-4 rounded"
onClick={() => downloadResults("csv")}
>
CSV
Expand All @@ -153,7 +153,7 @@ export function ResultsFetcher({ graph, query }: { graph: HostListing | null; qu
<tbody className="border-b-2">
{queryData?.motif_results?.length ? (
queryData.motif_results.slice(0, 10000).map((result: any, i: number) => (
<tr key={i} className="border-b-2 hover:bg-gray-100">
<tr key={i} className="border-b-2 hover:bg-gray-100 dark:hover:bg-gray-700">
<a
href={neuroglancerUrlFromHostVolumetricData(
queryData?.host_volumetric_data?.uri,
Expand Down
2 changes: 1 addition & 1 deletion motifstudio-web/src/app/ResultsWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export function ResultsWrapper({ graph, query }: { graph: HostListing | null; qu
}, [graph, query]);

return (
<div className="flex flex-col gap-2 w-full h-full p-4 bg-white rounded-lg shadow-lg">
<div className="flex flex-col gap-2 w-full h-full p-4 bg-white rounded-lg shadow-lg dark:bg-gray-800">
{!trigger ? (
<button
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
Expand Down
24 changes: 23 additions & 1 deletion motifstudio-web/src/app/WrappedEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,28 @@ export function WrappedEditor({
"editor.foreground": "#888888",
},
});
monaco.editor.defineTheme("motiftheme-dark", {
base: "vs-dark",
inherit: false,
rules: [
{
token: "operator",
foreground: "ff0000",
fontStyle: "bold",
},
{
token: "edge",
foreground: "0066dd",
fontStyle: "bold",
},
{ token: "entity", foreground: "008800" },
{ token: "macro", foreground: "888800" },
],
colors: {
"editor.foreground": "#888888",
"editor.background": "#1f2937",
},
});

// Set of variable entity names that can be auto-completed:
// const variableEntityNames = ["A", "B"];
Expand All @@ -81,7 +103,7 @@ export function WrappedEditor({
return (
<Editor
height="40vh"
theme="motiftheme"
theme={window.matchMedia("(prefers-color-scheme: dark)").matches ? "motiftheme-dark" : "motiftheme"}
beforeMount={handleEditorWillMount}
onChange={(value, event) => {
if (onChange) {
Expand Down

0 comments on commit a3e7b82

Please sign in to comment.