wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-08-03 12:30:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

adding darkmode to pages

Browse Source
This commit is contained in:
Lucian Petri
2022-12-30 02:30:49 +02:00
parent 80d2e02e90
commit e5a1cad7b3
5 changed files with 31 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/Loading/LoadingScreen.jsx
+5 -5
View File
@@ -1,12 +1,12 @@
import { Progress } from "@chakra-ui/react";
import { Container, Progress } from "@chakra-ui/react";
export const LoadingScreen = ({ text }) => (
<div className="bg-slate-100">
<Container>
<Progress size="xs" isIndeterminate />
{text && (
<div className="flex h-full">
<Container className="flex h-full">
<div className="text-xl font-bold text-gray-800 mx-auto my-auto">{text}</div>
</div>
</Container>
)}
</div>
</Container>
);
website/src/components/TwoColumns.tsx
+8 -5
View File
@@ -1,14 +1,17 @@
import { Container, useColorModeValue } from "@chakra-ui/react";
export const TwoColumns = ({ children }: { children: React.ReactNode[] }) => {
if (!Array.isArray(children) || children.length !== 2) {
throw new Error("TwoColumns expects 2 children");
}
const bg = useColorModeValue("white", "gray.700")
const [first, second] = children;
return (
<section className="mb-8 lt-lg:mb-12 grid lg:gap-x-12 lg:grid-cols-2">
<div className="rounded-lg shadow-lg h-full block bg-white p-6">{first}</div>
<div className="rounded-lg shadow-lg h-full block bg-white p-6 mt-6 lg:mt-0">{second}</div>
</section>
<Container className="mb-8 lt-lg:mb-12 grid lg:gap-x-12 lg:grid-cols-2">
<Container bg={bg} className="rounded-lg shadow-lg h-full block p-6">{first}</Container>
<Container bg={bg} className="rounded-lg shadow-lg h-full block p-6 mt-6 lg:mt-0">{second}</Container>
</Container>
);
};
website/src/pages/create/assistant_reply.tsx
+4 -4
View File
@@ -1,4 +1,4 @@
import { Textarea } from "@chakra-ui/react";
import { Container, Textarea } from "@chakra-ui/react";
import { useRef, useState } from "react";
import useSWRMutation from "swr/mutation";
import useSWRImmutable from "swr/immutable";
@@ -45,12 +45,12 @@ const AssistantReply = () => {
}
if (tasks.length == 0) {
return <div className="p-6 bg-slate-100 text-gray-800">No tasks found...</div>;
return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
}
const task = tasks[0].task;
return (
<div className="p-6 bg-slate-100 text-gray-800">
<Container className="p-6 text-gray-800">
<TwoColumns>
<>
<h5 className="text-lg font-semibold">Reply as the assistant</h5>
@@ -78,7 +78,7 @@ const AssistantReply = () => {
</Button>
</div>
</section>
</div>
</Container>
);
};
website/src/pages/create/user_reply.tsx
+7 -6
View File
@@ -1,4 +1,4 @@
import { Textarea } from "@chakra-ui/react";
import { Container, Textarea, useColorModeValue } from "@chakra-ui/react";
import { useRef, useState } from "react";
import useSWRMutation from "swr/mutation";
import useSWRImmutable from "swr/immutable";
@@ -12,6 +12,7 @@ import { LoadingScreen } from "@/components/Loading/LoadingScreen";
const UserReply = () => {
const [tasks, setTasks] = useState([]);
const bg = useColorModeValue("white", "gray.400");
const inputRef = useRef<HTMLTextAreaElement>(null);
@@ -45,12 +46,12 @@ const UserReply = () => {
}
if (tasks.length == 0) {
return <div className="p-6 bg-slate-100 text-gray-800">No tasks found...</div>;
return <Container className="p-6 text-gray-800">No tasks found...</Container>;
}
const task = tasks[0].task;
return (
<div className="p-6 bg-slate-100 text-gray-800">
<Container className="p-6">
<TwoColumns>
<>
<h5 className="text-lg font-semibold">Reply as a user</h5>
@@ -61,7 +62,7 @@ const UserReply = () => {
<Textarea name="reply" placeholder="Reply..." ref={inputRef} />
</TwoColumns>
<section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
<Container bg={bg} className="p-4 rounded-lg shadow-lg flex flex-row justify-items-stretch">
<div className="grid grid-cols-[min-content_auto] gap-x-2 text-gray-700">
<b>Prompt</b>
<span>{tasks[0].id}</span>
@@ -78,8 +79,8 @@ const UserReply = () => {
Submit
</Button>
</div>
</section>
</div>
</Container>
</Container>
);
};
website/src/pages/evaluate/rank_initial_prompts.tsx
+7 -5
View File
@@ -10,6 +10,7 @@ import poster from "src/lib/poster";
import { Button } from "src/components/Button";
import { LoadingScreen } from "@/components/Loading/LoadingScreen";
import { Container, useColorModeValue } from "@chakra-ui/react";
const RankInitialPrompts = () => {
const [tasks, setTasks] = useState([]);
@@ -18,6 +19,7 @@ const RankInitialPrompts = () => {
* The best prompt will have index 0, and the worst is the last.
*/
const [ranking, setRanking] = useState<number[]>([]);
const bg = useColorModeValue("gray.100", "gray.800")
const { isLoading } = useSWRImmutable("/api/new_task/rank_initial_prompts", fetcher, {
onSuccess: (data) => {
@@ -50,7 +52,7 @@ const RankInitialPrompts = () => {
}
if (tasks.length == 0) {
return <div className="p-6 bg-slate-100 text-gray-800">No tasks found...</div>;
return <Container className="p-6 bg-slate-100 text-gray-800">No tasks found...</Container>;
}
const prompts = tasks[0].task.prompts as string[];
@@ -65,8 +67,8 @@ const RankInitialPrompts = () => {
<title>Rank Initial Prompts</title>
<meta name="description" content="Rank initial prompts." />
</Head>
<main className="p-6 bg-slate-100 text-gray-800">
<div className="rounded-lg shadow-lg block bg-white p-6 mb-8">
<Container className="p-6 text-gray-800">
<Container bg={bg} className="rounded-lg shadow-lg block p-6 mb-8">
<h5 className="text-lg font-semibold mb-4">Instructions</h5>
<p className="text-lg py-1">
Given the following prompts, sort them from best to worst, best being first, worst being last.
@@ -94,7 +96,7 @@ const RankInitialPrompts = () => {
</SortableItem>
))}
</ul>
</div>
</Container>
<section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
<div className="grid grid-cols-[min-content_auto] gap-x-2 text-gray-700">
@@ -115,7 +117,7 @@ const RankInitialPrompts = () => {
</Button>
</div>
</section>
</main>
</Container>
</>
);
};