Skip to content

Commit ed529ab

Browse files
AlexVOiceoverAlexVOiceover
committed
feat: dinamically calculated border colors for edit modals
1 parent 528c99a commit ed529ab

File tree

9 files changed

+89
-103
lines changed

9 files changed

+89
-103
lines changed

‎src/components/statementWizard/EditStatementModal.tsx‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,14 +69,25 @@ export const EditStatementModal: React.FC<EditStatementModalProps> = ({
6969
onClose();
7070
};
7171

72+
// Map each edit part to its corresponding Tailwind border class.
73+
const borderClasses: Record<string, string> = {
74+
subject: 'border-[var(--subject-selector)]',
75+
verb: 'border-[var(--verb-selector)]',
76+
object: 'border-[var(--object-input)]',
77+
category: 'border-black',
78+
privacy: 'border-[var(--privacy-selector)]',
79+
complement: 'border-gray-400',
80+
};
81+
const borderClass = borderClasses[editPart] || 'border-gray-400';
82+
7283
// Render the correct edit component based on the part to edit.
7384
const renderEditComponent = () => {
7485
switch (editPart) {
7586
case 'subject':
7687
return (
7788
<SubjectStep
7889
username={username}
79-
// For editing mode, you don’t need a preset question
90+
// For editing mode, it doesn't need a preset question
8091
presetQuestion={undefined}
8192
selection={localValue as string}
8293
onUpdate={(val) => setLocalValue(val)}
@@ -120,14 +131,16 @@ export const EditStatementModal: React.FC<EditStatementModalProps> = ({
120131

121132
return (
122133
<Dialog open onOpenChange={onClose}>
123-
<DialogContent className='sm:max-w-[600px] p-0 w-full'>
134+
<DialogContent
135+
className={`sm:max-w-[600px] p-0 w-full border-8 ${borderClass}`}
136+
>
124137
<DialogTitle>Edit {editPart}</DialogTitle>
125138
<DialogDescription className='sr-only'>
126139
Edit the {editPart} of your statement.
127140
</DialogDescription>
128141
{renderEditComponent()}
129142
{/* Optionally add a footer for explicit Save/Cancel */}
130-
<div className='p-4 flex justify-end'>
143+
<div className='p-4 flex justify-center'>
131144
<Button onClick={handleSave} variant='pink'>
132145
Save
133146
</Button>

‎src/components/statementWizard/SubjectTiles.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export const SubjectTiles: React.FC<SubjectTilesProps> = ({
5555
{tiles.map((tile) => (
5656
<Button
5757
key={tile.value}
58-
variant={selectedValue === tile.value ? 'default' : 'outline'}
58+
variant={'outline'}
5959
selected={selectedValue === tile.value}
6060
className={`h-auto py-4 px-6 text-left flex flex-col items-start space-y-1
6161

‎src/components/statementWizard/selectors/DELETEPrivacySelector.tsx‎

Lines changed: 0 additions & 57 deletions
This file was deleted.

‎src/components/statementWizard/steps/ObjectStep.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import React from 'react';
33
import StepContainer from '../StepContainer';
44
import { Input } from '../../ui/input';
5+
import { getVerbName } from '../../../../utils/verbUtils';
56

67
interface ObjectStepProps {
78
subject: string;
@@ -16,7 +17,9 @@ export const ObjectStep: React.FC<ObjectStepProps> = ({
1617
selection,
1718
onUpdate,
1819
}) => {
19-
const subQuestion = `In what way does ${subject} ${verb}? What's the context?`;
20+
const subQuestion = `In what way does ${subject} ${getVerbName(
21+
verb
22+
)}? What's the context?`;
2023

2124
return (
2225
<StepContainer subQuestion={subQuestion} showBack>

‎src/components/statementWizard/steps/PrivacyStep.tsx‎

Lines changed: 44 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import StepContainer from '../StepContainer';
3-
import { PrivacySelector } from '../selectors/DELETEPrivacySelector';
3+
import { Button } from '../../ui/button';
4+
import { Mail } from 'lucide-react';
45

56
interface PrivacyStepProps {
67
isPublic: boolean;
@@ -11,17 +12,52 @@ interface PrivacyStepProps {
1112
export const PrivacyStep: React.FC<PrivacyStepProps> = ({
1213
isPublic,
1314
onUpdate,
14-
1515
isSubmitting = false,
1616
}) => {
17-
const subQuestion = `Who can see this statement?`;
17+
const subQuestion = 'Who can see this statement?';
18+
1819
return (
1920
<StepContainer subQuestion={subQuestion} showBack>
20-
<PrivacySelector
21-
isPublic={isPublic}
22-
onChange={onUpdate}
23-
isSubmitting={isSubmitting} // Pass along the submission state
24-
/>
21+
<div className='space-y-6'>
22+
<div className='space-y-4'>
23+
<Button
24+
variant='outline'
25+
disabled={isSubmitting}
26+
className={`w-full h-auto p-4 flex items-center justify-between ${
27+
!isPublic ? 'border-2 border-primary' : ''
28+
}`}
29+
onClick={() => onUpdate(false)}
30+
>
31+
<div className='flex items-center space-x-3'>
32+
<Mail className='w-5 h-5 text-gray-500' />
33+
<div className='text-left'>
34+
<div className='font-medium'>Private</div>
35+
<div className='text-sm text-muted-foreground'>
36+
Only you can see this
37+
</div>
38+
</div>
39+
</div>
40+
</Button>
41+
<Button
42+
variant='outline'
43+
disabled={isSubmitting}
44+
className={`w-full h-auto p-4 flex items-center justify-between ${
45+
isPublic ? 'border-2 border-primary' : ''
46+
}`}
47+
onClick={() => onUpdate(true)}
48+
>
49+
<div className='flex items-center space-x-3'>
50+
<Mail className='w-5 h-5 text-green-500' />
51+
<div className='text-left'>
52+
<div className='font-medium'>Public</div>
53+
<div className='text-sm text-muted-foreground'>
54+
Everyone can see this
55+
</div>
56+
</div>
57+
</div>
58+
</Button>
59+
</div>
60+
</div>
2561
</StepContainer>
2662
);
2763
};

‎src/components/statements/StatementItem.tsx‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ export interface StatementItemProps {
3737
// When the green save icon is clicked, the updated entry (draft) is passed back
3838
onLocalSave: (updatedEntry: Entry) => void;
3939
onDelete: (statementId: string) => void;
40-
onTogglePublic: (statementId: string) => void;
4140
onEditClick: (statementId: string) => void;
4241
onEditAction?: (
4342
statementId: string,
@@ -62,7 +61,6 @@ const StatementItem: React.FC<StatementItemProps> = ({
6261
onPartClick,
6362
onLocalSave,
6463
onDelete,
65-
onTogglePublic,
6664
onEditClick,
6765
onCancel,
6866
onEditAction = () => {},
@@ -78,6 +76,15 @@ const StatementItem: React.FC<StatementItemProps> = ({
7876
// Local "draft" state to hold unsaved modifications.
7977
const [draft, setDraft] = React.useState<Entry>(statement);
8078

79+
// Local state to track if we are currently saving the draft. Will control the save button.
80+
const [isSaving, setIsSaving] = React.useState(false);
81+
// Compute if there are any changes compared to the original statement prop.
82+
const hasChanged =
83+
draft.atoms.subject !== statement.atoms.subject ||
84+
draft.atoms.verb !== statement.atoms.verb ||
85+
draft.atoms.object !== statement.atoms.object ||
86+
draft.isPublic !== statement.isPublic;
87+
8188
// Whenever the statement prop changes (or when not editing), re-sync the draft.
8289
useEffect(() => {
8390
setDraft(statement);
@@ -109,7 +116,10 @@ const StatementItem: React.FC<StatementItemProps> = ({
109116
size='sm'
110117
onClick={() => {
111118
console.log('Privacy toggle clicked for statement:', draft.id);
112-
onTogglePublic(draft.id);
119+
setDraft((prev) => ({
120+
...prev,
121+
isPublic: !prev.isPublic,
122+
}));
113123
}}
114124
className={`rounded-md px-3 py-2 transition-colors ${
115125
draft.isPublic
@@ -171,18 +181,21 @@ const StatementItem: React.FC<StatementItemProps> = ({
171181
</div>
172182
</div>
173183
<div className='flex items-center space-x-2 ml-auto'>
174-
{/* Final Save button (green icon):
175-
This commits the local draft to the database via onLocalSave */}
184+
{/* Final Save button. This commits the local draft to the database via onLocalSave */}
176185
<Button
177186
variant='ghost'
178187
size='sm'
179-
onClick={() => {
180-
onLocalSave(draft);
188+
onClick={async () => {
189+
setIsSaving(true);
190+
await onLocalSave(draft);
191+
setIsSaving(false);
181192
}}
193+
disabled={!hasChanged || isSaving}
182194
className='text-green-500 hover:text-green-700'
183195
>
184196
<Save size={16} />
185197
</Button>
198+
186199
{/* Cancel button: resets draft and exits edit mode */}
187200
<Button
188201
variant='ghost'

‎src/components/statements/StatementList.tsx‎

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -87,29 +87,6 @@ const StatementList: React.FC<{ username: string }> = ({ username }) => {
8787
updateEntry(updatedStatement);
8888
};
8989

90-
const handleTogglePublic = (statementId: string) => {
91-
const stmt = entries.find((s) => s.id === statementId);
92-
if (!stmt) return;
93-
const updated = { ...stmt, isPublic: !stmt.isPublic };
94-
setData({ type: 'UPDATE_ENTRY', payload: updated });
95-
updateEntry(updated);
96-
};
97-
98-
// const handleSave = (statementId: string) => {
99-
// // Find the statement from the entries
100-
// const stmt = entries.find((s) => s.id === statementId);
101-
// if (!stmt) return;
102-
103-
// // Call the API to persist the updated statement
104-
// updateEntry(stmt)
105-
// .then(() => {
106-
// console.log(`Statement ${statementId} saved successfully.`);
107-
// // Optionally, show a success message or update local state further.
108-
// })
109-
// .catch((error) => {
110-
// console.error(`Error saving statement ${statementId}:`, error);
111-
// });
112-
// };
11390
// Handler for when a statement's local save button is clicked.
11491
async function handleLocalSave(updatedEntry: Entry) {
11592
try {
@@ -291,7 +268,6 @@ const StatementList: React.FC<{ username: string }> = ({ username }) => {
291268
setEditingStatementId(null);
292269
}}
293270
onDelete={handleDeleteClick}
294-
onTogglePublic={handleTogglePublic}
295271
onEditClick={handleEditClick}
296272
onAddAction={handleAddAction}
297273
onEditAction={handleEditAction}

‎src/components/ui/buttonVariants.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ export const buttonVariants = cva(
88
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
99
destructive:
1010
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
11-
outline:
12-
'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
11+
outline: 'border border-input bg-background ',
1312
secondary:
1413
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
1514
ghost: 'hover:bg-accent hover:text-accent-foreground',

‎src/index.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,9 @@
5858
--object-input-hover: #aecbf0;
5959
--privacy-selector: #22c55e;
6060
--privacy-selector-hover: #1ea07b;
61+
--category-selector: #000000;
62+
--category-selector-hover: #2c2c2c;
63+
--complement: 'gray-400';
6164
}
6265

6366
/* Dark Mode Overrides */

0 commit comments

Comments
 (0)