Skip to content

Commit 89cf6a3

Browse files
felixeversfelixevers
authored
Merge pull request #1227 from helpwave/issue/1225-Fix-tasks-styling
Issue/1225 fix tasks styling
2 parents 538ecfb + 650f800 commit 89cf6a3

27 files changed

+379
-253
lines changed

‎tasks/components/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const Header = ({
3333
withIcon = true
3434
}: HeaderProps) => {
3535
return (
36-
<div className="row h-16 py-4 relative items-center justify-between border-b border-divider">
36+
<div className="row h-16 py-4 relative items-center justify-between border-b bg-header-background text-header-text border-divider">
3737
<div className="row w-full gap-x-8 justify-between mx-4">
3838
<div className="row relative items-center align-center">
3939
{withIcon && (

‎tasks/components/OrganizationForm.tsx‎

Lines changed: 89 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
import clsx from 'clsx'
22
import type { Languages } from '@helpwave/hightide'
3-
import { useTranslation, type PropsForTranslation } from '@helpwave/hightide'
4-
import { Input } from '@helpwave/hightide'
5-
import { validateEmail } from '@helpwave/hightide'
6-
import { LoadingAndErrorComponent } from '@helpwave/hightide'
3+
import {
4+
Input,
5+
LoadingAndErrorComponent,
6+
type PropsForTranslation,
7+
useTranslation,
8+
validateEmail
9+
} from '@helpwave/hightide'
710
import type { OrganizationMinimalDTO } from '@helpwave/api-services/types/users/organizations'
811
import { emptyOrganization } from '@helpwave/api-services/types/users/organizations'
912

@@ -91,10 +94,10 @@ export type OrganizationFormProps = {
9194
* The state is manged by the parent
9295
*/
9396
export const OrganizationForm = ({
94-
overwriteTranslation,
95-
organizationForm = emptyOrganizationForm,
96-
onChange = () => undefined,
97-
}: PropsForTranslation<OrganizationFormTranslation, OrganizationFormProps>) => {
97+
overwriteTranslation,
98+
organizationForm = emptyOrganizationForm,
99+
onChange = () => undefined,
100+
}: PropsForTranslation<OrganizationFormTranslation, OrganizationFormProps>) => {
98101
const translation = useTranslation(defaultOrganizationFormTranslations, overwriteTranslation)
99102

100103
const minShortNameLength = 2
@@ -156,58 +159,87 @@ export const OrganizationForm = ({
156159
loadingProps={{ classname: 'border-2 border-gray-500 rounded-xl min-h-[350px]' }}
157160
minimumLoadingDuration={200} // prevents errors flickering
158161
>
159-
<span className="textstyle-title-normal">{translation.general}</span>
160-
<div className="mt-2 mb-1">
161-
<Input
162-
id="shortName"
163-
value={organizationForm.organization.shortName}
164-
label={{ name: translation.shortName }}
165-
onBlur={() => triggerOnChange({ ...organizationForm.organization }, false, { ...organizationForm.touched, shortName: true })}
166-
onChange={text => triggerOnChange({ ...organizationForm.organization, shortName: text }, false, { ...organizationForm.touched })}
167-
onEditCompleted={text => triggerOnChange({ ...organizationForm.organization, shortName: text }, true, { ...organizationForm.touched, shortName: true })}
168-
maxLength={maxShortNameLength}
169-
className={clsx(inputClasses, { [inputErrorClasses]: isDisplayingShortNameError })}
170-
/>
171-
{isDisplayingShortNameError && <span className="textstyle-form-error">{shortNameErrorMessage}</span>}
172-
</div>
173-
<span className="textstyle-form-description">{translation.shortNameDescription}</span>
174-
<div className="mt-2 mb-1">
175-
<Input
176-
id="longName"
177-
value={organizationForm.organization.longName}
178-
label={{ name: translation.longName }}
179-
onBlur={() => triggerOnChange({ ...organizationForm.organization }, false, { ...organizationForm.touched, longName: true })}
180-
onChange={text => triggerOnChange({ ...organizationForm.organization, longName: text }, false, { ...organizationForm.touched })}
181-
onEditCompleted={text => triggerOnChange({ ...organizationForm.organization, longName: text }, true, { ...organizationForm.touched, longName: true })}
182-
maxLength={maxLongNameLength}
183-
className={clsx(inputClasses, { [inputErrorClasses]: isDisplayingLongNameError })}
184-
/>
185-
{isDisplayingLongNameError && <span className="textstyle-form-error">{longNameErrorMessage}</span>}
186-
</div>
187-
<span className="textstyle-form-description">{translation.longNameDescription}</span>
188-
<div className="mt-2 mb-1">
189-
<div className="row items-end">
190-
<div className="flex-1 mr-2">
191-
<Input
192-
id="email"
193-
value={organizationForm.organization.email}
194-
label={{ name: translation.contactEmail }}
195-
type="email"
196-
onBlur={() => triggerOnChange({ ...organizationForm.organization }, false, { ...organizationForm.touched, email: true })}
197-
onChange={text => triggerOnChange({ ...organizationForm.organization, email: text }, false, { ...organizationForm.touched })}
198-
onEditCompleted={text => triggerOnChange({ ...organizationForm.organization, email: text }, true, { ...organizationForm.touched, email: true })}
199-
maxLength={maxMailLength}
200-
className={clsx(inputClasses, { [inputErrorClasses]: isDisplayingEmailNameError })}
201-
/>
162+
<div className="col gap-y-4">
163+
<span className="textstyle-title-normal">{translation.general}</span>
164+
<div className="col gap-y-1">
165+
<Input
166+
id="shortName"
167+
value={organizationForm.organization.shortName}
168+
label={{ name: translation.shortName }}
169+
onBlur={() => triggerOnChange({ ...organizationForm.organization }, false, {
170+
...organizationForm.touched,
171+
shortName: true
172+
})}
173+
onChange={text => triggerOnChange({
174+
...organizationForm.organization,
175+
shortName: text
176+
}, false, { ...organizationForm.touched })}
177+
onEditCompleted={text => triggerOnChange({
178+
...organizationForm.organization,
179+
shortName: text
180+
}, true, { ...organizationForm.touched, shortName: true })}
181+
maxLength={maxShortNameLength}
182+
className={clsx(inputClasses, { [inputErrorClasses]: isDisplayingShortNameError })}
183+
/>
184+
{isDisplayingShortNameError && <span className="textstyle-form-error">{shortNameErrorMessage}</span>}
185+
<span className="textstyle-form-description">{translation.shortNameDescription}</span>
186+
</div>
187+
<div className="col gap-y-1">
188+
<Input
189+
id="longName"
190+
value={organizationForm.organization.longName}
191+
label={{ name: translation.longName }}
192+
onBlur={() => triggerOnChange({ ...organizationForm.organization }, false, {
193+
...organizationForm.touched,
194+
longName: true
195+
})}
196+
onChange={text => triggerOnChange({
197+
...organizationForm.organization,
198+
longName: text
199+
}, false, { ...organizationForm.touched })}
200+
onEditCompleted={text => triggerOnChange({
201+
...organizationForm.organization,
202+
longName: text
203+
}, true, { ...organizationForm.touched, longName: true })}
204+
maxLength={maxLongNameLength}
205+
className={clsx(inputClasses, { [inputErrorClasses]: isDisplayingLongNameError })}
206+
/>
207+
{isDisplayingLongNameError && <span className="textstyle-form-error">{longNameErrorMessage}</span>}
208+
<span className="textstyle-form-description">{translation.longNameDescription}</span>
209+
</div>
210+
<div className="col gap-y-1">
211+
<div className="row items-end">
212+
<div className="flex-1 mr-2">
213+
<Input
214+
id="email"
215+
value={organizationForm.organization.email}
216+
label={{ name: translation.contactEmail }}
217+
type="email"
218+
onBlur={() => triggerOnChange({ ...organizationForm.organization }, false, {
219+
...organizationForm.touched,
220+
email: true
221+
})}
222+
onChange={text => triggerOnChange({
223+
...organizationForm.organization,
224+
email: text
225+
}, false, { ...organizationForm.touched })}
226+
onEditCompleted={text => triggerOnChange({
227+
...organizationForm.organization,
228+
email: text
229+
}, true, { ...organizationForm.touched, email: true })}
230+
maxLength={maxMailLength}
231+
className={clsx(inputClasses, { [inputErrorClasses]: isDisplayingEmailNameError })}
232+
/>
233+
</div>
234+
{
235+
!organizationForm.organization.isVerified &&
236+
<span className="text-negative mb-3">{translation.notVerified}</span>
237+
}
202238
</div>
203-
{
204-
!organizationForm.organization.isVerified &&
205-
<span className="text-negative mb-3">{translation.notVerified}</span>
206-
}
239+
{isDisplayingEmailNameError && <span className="textstyle-form-error">{emailErrorMessage}</span>}
240+
<span className="textstyle-form-description">{translation.contactEmailDescription}</span>
207241
</div>
208-
{isDisplayingEmailNameError && <span className="textstyle-form-error">{emailErrorMessage}</span>}
209242
</div>
210-
<span className="textstyle-form-description">{translation.contactEmailDescription}</span>
211243
</LoadingAndErrorComponent>
212244
)
213245
}

‎tasks/components/OrganizationInvitationList.tsx‎

Lines changed: 56 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,22 @@
11
import { useContext, useState } from 'react'
22

33
import type { Languages } from '@helpwave/hightide'
4-
import { useTranslation, type PropsForTranslation } from '@helpwave/hightide'
5-
import { defaultTableStatePagination, Table, type TableState } from '@helpwave/hightide'
6-
import { SolidButton, TextButton } from '@helpwave/hightide'
7-
import { InputModal } from '@helpwave/hightide'
8-
import { validateEmail } from '@helpwave/hightide'
9-
import { LoadingAndErrorComponent } from '@helpwave/hightide'
4+
import {
5+
defaultTableStatePagination,
6+
InputModal,
7+
LoadingAndErrorComponent,
8+
type PropsForTranslation,
9+
SolidButton,
10+
Table,
11+
type TableState,
12+
TextButton,
13+
useTranslation,
14+
validateEmail
15+
} from '@helpwave/hightide'
1016
import {
1117
useInvitationsByOrganizationQuery,
12-
useInviteMemberMutation, useInviteRevokeMutation
18+
useInviteMemberMutation,
19+
useInviteRevokeMutation
1320
} from '@helpwave/api-services/mutations/users/organization_mutations'
1421
import { InvitationState } from '@helpwave/api-services/types/users/invitations'
1522
import { OrganizationContext } from '@/pages/organizations'
@@ -57,11 +64,11 @@ export type OrganizationInvitationListProps = {
5764
* A List showing all members invited to an organization
5865
*/
5966
export const OrganizationInvitationList = ({
60-
overwriteTranslation,
61-
organizationId,
62-
invitations,
63-
onChange
64-
}: PropsForTranslation<OrganizationInvitationListTranslation, OrganizationInvitationListProps>) => {
67+
overwriteTranslation,
68+
organizationId,
69+
invitations,
70+
onChange
71+
}: PropsForTranslation<OrganizationInvitationListTranslation, OrganizationInvitationListProps>) => {
6572
const translation = useTranslation(defaultOrganizationInvitationListTranslation, overwriteTranslation)
6673

6774
const context = useContext(OrganizationContext)
@@ -134,42 +141,44 @@ export const OrganizationInvitationList = ({
134141
{ disabled: !isValidEmail, color: 'primary', text: translation.add }
135142
]}
136143
/>
137-
<div className="row justify-between">
138-
<span className="textstyle-table-name">{`${translation.invitations} (${usedInvitations.length})`}</span>
139-
<SolidButton
140-
color="positive"
141-
onClick={() => setInviteMemberModalEmail('')}
142-
>
143-
{translation.inviteMember}
144-
</SolidButton>
144+
<div className="col gap-y-2">
145+
<div className="row justify-between">
146+
<span className="textstyle-table-name">{`${translation.invitations} (${usedInvitations.length})`}</span>
147+
<SolidButton
148+
color="positive"
149+
onClick={() => setInviteMemberModalEmail('')}
150+
>
151+
{translation.inviteMember}
152+
</SolidButton>
153+
</div>
154+
<Table
155+
data={usedInvitations}
156+
stateManagement={[tableState, setTableState]}
157+
identifierMapping={idMapping}
158+
header={[
159+
<span key="organization" className="textstyle-table-header">{translation.email}</span>,
160+
<></>
161+
]}
162+
rowMappingToCells={invite => [
163+
<div key="email" className="row justify-start gap-x-2">
164+
<span>{invite.email}</span>
165+
</div>,
166+
<div key="remove" className="row justify-end">
167+
<TextButton
168+
color="negative"
169+
onClick={() => {
170+
if (!isCreatingOrganization) {
171+
revokeInviteMutation.mutate(invite.id)
172+
}
173+
onChange(usedInvitations.filter(value => idMapping(value) !== idMapping(invite)))
174+
}}
175+
>
176+
{translation.remove}
177+
</TextButton>
178+
</div>
179+
]}
180+
/>
145181
</div>
146-
<Table
147-
data={usedInvitations}
148-
stateManagement={[tableState, setTableState]}
149-
identifierMapping={idMapping}
150-
header={[
151-
<span key="organization" className="textstyle-table-header">{translation.email}</span>,
152-
<></>
153-
]}
154-
rowMappingToCells={invite => [
155-
<div key="email" className="row justify-start gap-x-2">
156-
<span>{invite.email}</span>
157-
</div>,
158-
<div key="remove" className="row justify-end">
159-
<TextButton
160-
color="negative"
161-
onClick={() => {
162-
if (!isCreatingOrganization) {
163-
revokeInviteMutation.mutate(invite.id)
164-
}
165-
onChange(usedInvitations.filter(value => idMapping(value) !== idMapping(invite)))
166-
}}
167-
>
168-
{translation.remove}
169-
</TextButton>
170-
</div>
171-
]}
172-
/>
173182
</LoadingAndErrorComponent>
174183
)
175184
}

‎tasks/components/OrganizationMemberList.tsx‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
import { useContext, useState } from 'react'
22

33
import type { Languages } from '@helpwave/hightide'
4-
import { useTranslation, type PropsForTranslation } from '@helpwave/hightide'
5-
import { SolidButton, TextButton } from '@helpwave/hightide'
6-
import { ConfirmDialog } from '@helpwave/hightide'
74
import {
5+
Avatar,
6+
ConfirmDialog,
87
defaultTableStatePagination,
98
defaultTableStateSelection,
9+
LoadingAndErrorComponent,
10+
type PropsForTranslation,
1011
removeFromTableSelection,
12+
SolidButton,
1113
Table,
12-
type TableState
14+
type TableState,
15+
TextButton,
16+
useTranslation
1317
} from '@helpwave/hightide'
14-
import { LoadingAndErrorComponent } from '@helpwave/hightide'
15-
import { Avatar } from '@helpwave/hightide'
1618
import type { OrganizationMember } from '@helpwave/api-services/types/users/organization_member'
1719
import { useMembersByOrganizationQuery } from '@helpwave/api-services/mutations/users/organization_member_mutations'
1820
import { useRemoveMemberMutation } from '@helpwave/api-services/mutations/users/organization_mutations'
@@ -73,12 +75,15 @@ export type OrganizationMemberListProps = {
7375
* A table for showing and editing the members of an organization
7476
*/
7577
export const OrganizationMemberList = ({
76-
overwriteTranslation,
77-
organizationId,
78-
members
79-
}: PropsForTranslation<OrganizationMemberListTranslation, OrganizationMemberListProps>) => {
78+
overwriteTranslation,
79+
organizationId,
80+
members
81+
}: PropsForTranslation<OrganizationMemberListTranslation, OrganizationMemberListProps>) => {
8082
const translation = useTranslation(defaultOrganizationMemberListTranslations, overwriteTranslation)
81-
const [tableState, setTableState] = useState<TableState>({ pagination: defaultTableStatePagination, selection: defaultTableStateSelection })
83+
const [tableState, setTableState] = useState<TableState>({
84+
pagination: defaultTableStatePagination,
85+
selection: defaultTableStateSelection
86+
})
8287

8388
const context = useContext(OrganizationContext)
8489
organizationId ??= context.state.organizationId
@@ -163,20 +168,21 @@ export const OrganizationMemberList = ({
163168
rowMappingToCells={orgMember => [
164169
<div key="member" className="row items-center h-12 overflow-hidden max-w-[200px]">
165170
<Avatar avatarUrl={orgMember.avatarURL} alt="" size="small"/>
166-
<div className="col ml-2">
171+
<div className="col gap-y-0 ml-2">
167172
<span className="font-bold truncate">{orgMember.name}</span>
168173
<a href={`mailto:${orgMember.email}`}>
169174
<span className="textstyle-description text-sm truncate">{orgMember.email}</span>
170175
</a>
171176
</div>
172177
</div>,
173178
<div key="role" className="row items-center mr-2">
174-
<button className="row items-center" onClick={() => { /* TODO allow changing roles */
175-
}}>
176-
<span className="font-semibold">
177-
{'N.A.' /* translation.roleTypes[orgMember.role] */}
178-
</span>
179-
</button>
179+
<TextButton
180+
className="row items-center"
181+
onClick={() => { /* TODO allow changing roles */
182+
}}
183+
>
184+
{'N.A.' /* translation.roleTypes[orgMember.role] */}
185+
</TextButton>
180186
</div>,
181187
<div key="remove" className="row justify-end">
182188
<TextButton
@@ -188,7 +194,7 @@ export const OrganizationMemberList = ({
188194
</TextButton>
189195
</div>
190196
]}
191-
identifierMapping={idMapping}
197+
identifierMapping={idMapping}
192198
/>
193199
</LoadingAndErrorComponent>
194200
</div>

‎tasks/components/RoomList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ export const RoomList = ({
205205
}]}
206206
identifierMapping={identifierMapping}
207207
header={[
208-
<span key="name" className="textstyle-table-header">{translation.roomName}</span>,
208+
<span key="name" className="textstyle-table-header min-w-48 text-start">{translation.roomName}</span>,
209209
<span key="bedcount" className="textstyle-table-header">{translation.bedCount}</span>,
210210
<span key="manage" className="textstyle-table-header">{translation.manageBeds}</span>,
211211
<></>

0 commit comments

Comments
 (0)