Skip to content

Commit

Permalink
dark mode improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@phughesmcr
phughesmcr committed Sep 4, 2024
1 parent e77d598 commit aec30c8
Show file tree
Hide file tree
Showing 3 changed files with 26 additions and 26 deletions.
4 changes: 2 additions & 2 deletions components/CustomPersonalityInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default function CustomPersonalityInput({ value, onChange }: CustomPerson
<select
value={selectedOption}
onChange={handleSelectChange}
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
>
<option value="custom">Custom</option>
{personalities.map((p) => (
Expand All @@ -56,7 +56,7 @@ export default function CustomPersonalityInput({ value, onChange }: CustomPerson
<textarea
value={customInput}
onInput={handleCustomInputChange}
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
maxLength={MAX_PERSONALITY_LENGTH}
rows={3}
placeholder="Enter custom personality..."
Expand Down
28 changes: 14 additions & 14 deletions components/DebateFormInputs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const DebateFormInputs = ({
class="space-y-6"
>
<div>
<label htmlFor="position" class="block text-sm font-medium text-gray-700 mb-2">
<label htmlFor="position" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Debate Position
</label>
<input
Expand All @@ -82,14 +82,14 @@ const DebateFormInputs = ({
minLength={4}
maxLength={MAX_POSITION_LENGTH}
onInput={(e) => setPosition((e.target as HTMLInputElement).value)}
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
required
/>
</div>

<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div>
<label htmlFor="numAgents" class="block text-sm font-medium text-gray-700 mb-2">
<label htmlFor="numAgents" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Number of Participants
</label>
<input
Expand All @@ -99,12 +99,12 @@ const DebateFormInputs = ({
onInput={(e) => setNumAgents(parseInt((e.target as HTMLInputElement).value, 10))}
min={MIN_AGENTS}
max={MAX_AGENTS}
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
required
/>
</div>
<div>
<label htmlFor="numDebateRounds" class="block text-sm font-medium text-gray-700 mb-2">
<label htmlFor="numDebateRounds" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Number of Debate Rounds
</label>
<input
Expand All @@ -114,19 +114,19 @@ const DebateFormInputs = ({
onInput={(e) => setNumDebateRounds(parseInt((e.target as HTMLInputElement).value, 10))}
min={MIN_DEBATE_ROUNDS}
max={MAX_DEBATE_ROUNDS}
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
required
/>
</div>
<div>
<label htmlFor="moderatorVoice" class="block text-sm font-medium text-gray-700 mb-2">
<label htmlFor="moderatorVoice" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Moderator Voice
</label>
<select
id="moderatorVoice"
value={moderatorVoice}
onChange={(e) => setModeratorVoice(e.target.value as VoiceType | "none")}
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
>
<option value="none">No Moderator</option>
{voiceTypes.map((voice) => (
Expand All @@ -136,25 +136,25 @@ const DebateFormInputs = ({
</div>
</div>

<details class="bg-gray-50 p-3 rounded-lg">
<summary class="font-medium text-gray-700 cursor-pointer">Customization & Participant Settings</summary>
<details class="bg-gray-50 dark:bg-gray-800 p-3 rounded-lg">
<summary class="font-medium text-gray-700 dark:text-gray-300 cursor-pointer">Customization & Participant Settings</summary>
<div class="mt-4 space-y-6">
<div>
<label htmlFor="context" class="block text-sm font-medium text-gray-700 mb-2">
<label htmlFor="context" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Additional Context (optional)
</label>
<textarea
id="context"
value={context}
onInput={(e) => setContext((e.target as HTMLTextAreaElement).value)}
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
rows={3}
maxLength={MAX_DEBATE_CONTEXT_LENGTH}
/>
</div>

<div>
<h3 class="text-lg font-medium text-gray-700 mb-4">Participant Details</h3>
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-4">Participant Details</h3>
{agentDetails.length > 0 && (
<AgentSelector
agentDetails={agentDetails}
Expand All @@ -166,7 +166,7 @@ const DebateFormInputs = ({
</details>

{errors.length > 0 && (
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-md" role="alert">
<div class="bg-red-100 dark:bg-red-900 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-200 px-4 py-3 rounded-md" role="alert">
<ul class="list-disc list-inside">
{errors.map((error, index) => <li key={index}>{error}</li>)}
</ul>
Expand Down
20 changes: 10 additions & 10 deletions islands/AgentSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,10 @@ export default function AgentSelector(
{agentDetails.length > 0
? (
agentDetails.map((agent, index) => (
<div key={index} class="bg-white shadow-md rounded-lg p-6">
<h4 class="text-lg font-semibold mb-3">Participant {index + 1}</h4>
<div key={index} class="bg-white dark:bg-gray-800 dark:border-gray-500 dark:border-[1px] shadow-md rounded-lg p-6">
<h4 class="text-lg font-semibold mb-3 text-gray-900 dark:text-gray-100">Participant {index + 1}</h4>
<div class="mb-3">
<label htmlFor={`agent-name-${index}`} class="block text-sm font-medium text-gray-700 mb-2">
<label htmlFor={`agent-name-${index}`} class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Name:
</label>
<input
Expand All @@ -52,15 +52,15 @@ export default function AgentSelector(
"name",
sanitizeInput((e.target as HTMLInputElement).value),
)}
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
maxLength={MAX_NAME_LENGTH}
required
/>
</div>
<div class="mb-3">
<label
htmlFor={`agent-personality-${index}`}
class="block text-sm font-medium text-gray-700 mb-2"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
>
Personality:
</label>
Expand All @@ -70,7 +70,7 @@ export default function AgentSelector(
/>
</div>
<div class="mb-3">
<label htmlFor={`agent-stance-${index}`} class="block text-sm font-medium text-gray-700 mb-2">
<label htmlFor={`agent-stance-${index}`} class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Stance:
</label>
<select
Expand All @@ -82,7 +82,7 @@ export default function AgentSelector(
"stance",
(e.target as HTMLSelectElement).value,
)}
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
required
>
<option value="for">For</option>
Expand All @@ -91,7 +91,7 @@ export default function AgentSelector(
</select>
</div>
<div class="mb-3">
<label htmlFor={`agent-voice-${index}`} class="block text-sm font-medium text-gray-700 mb-2">
<label htmlFor={`agent-voice-${index}`} class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Voice:
</label>
<select
Expand All @@ -103,7 +103,7 @@ export default function AgentSelector(
"voice",
(e.target as HTMLSelectElement).value,
)}
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
required
>
<option value="alloy">Alloy (Male)</option>
Expand All @@ -117,7 +117,7 @@ export default function AgentSelector(
</div>
))
)
: <p class="text-gray-600">No agents available. Please add agents to continue.</p>}
: <p class="text-gray-600 dark:text-gray-400">No agents available. Please add agents to continue.</p>}
</div>
</div>
);
Expand Down

0 comments on commit aec30c8

Please sign in to comment.