diff --git a/client/src/App.scss b/client/src/App.scss
index 8a154ad..c0fecca 100644
--- a/client/src/App.scss
+++ b/client/src/App.scss
@@ -628,56 +628,77 @@ input[type="text"], input[type="email"], input[type="password"] {
tbody tr {
transition: var(--luncher-transition);
+ border-bottom: 1px solid var(--luncher-border-light);
&:hover {
background: var(--luncher-bg-hover);
}
- &:last-child td {
+ &:last-child {
border-bottom: none;
+
+ td {
+ border-bottom: none;
+ }
}
}
td {
padding: 12px 16px;
- border-color: var(--luncher-border-light);
+ border: none;
color: var(--luncher-text);
- white-space: nowrap;
vertical-align: middle;
}
- }
- ul {
- padding: 0;
- margin: 8px 0 0 20px;
+ .user-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 8px;
+ }
- li {
- color: var(--luncher-text-secondary);
- font-size: 0.9rem;
- margin-bottom: 4px;
+ .user-info {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ flex-wrap: wrap;
+ }
+
+ .user-actions {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ white-space: nowrap;
}
}
.food-choices {
display: flex;
flex-direction: column;
- gap: 6px;
+ gap: 4px;
+ margin-top: 8px;
}
.food-choice-item {
- background: var(--luncher-primary-light);
- padding: 8px 12px;
- border-radius: var(--luncher-radius-sm);
- display: flex;
+ display: inline-flex;
align-items: center;
- justify-content: space-between;
- font-size: 0.9rem;
- border-left: 3px solid var(--luncher-primary);
+ gap: 6px;
+ font-size: 0.85rem;
+ color: var(--luncher-text-secondary);
+
+ .action-icon {
+ opacity: 0;
+ transition: var(--luncher-transition);
+ }
+
+ &:hover .action-icon {
+ opacity: 1;
+ }
}
.food-choice-name {
- color: var(--luncher-text);
- font-weight: 500;
+ color: var(--luncher-text-secondary);
+ font-weight: 400;
}
}
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 5deb500..cfa66cb 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -544,55 +544,61 @@ function App() {
const isBuyer = userPayload?.isBuyer || false;
return
|
- {trusted &&
-
- }
- {login}
- {userPayload.departureTime && ({userPayload.departureTime})}
- {userPayload.note && ({userPayload.note})}
- {login === auth.login && canChangeChoice && locationKey === LunchChoice.OBJEDNAVAM &&
- {
- markAsBuyer();
- }} icon={faBasketShopping} className={isBuyer ? 'buyer-icon' : 'action-icon'} style={{cursor: 'pointer'}} />
- }
- {login !== auth.login && locationKey === LunchChoice.OBJEDNAVAM && isBuyer &&
- {
- copyNote(userPayload.note!);
- }} icon={faBasketShopping} className='buyer-icon' />
- }
- {login !== auth.login && canChangeChoice && userPayload?.note?.length &&
- {
- copyNote(userPayload.note!);
- }} className='action-icon' icon={faComment} />
- }
- {login === auth.login && canChangeChoice &&
- {
- setNoteModalOpen(true);
- }} className='action-icon' icon={faNoteSticky} />
- }
- {login === auth.login && canChangeChoice &&
- {
- doRemoveChoices(key as LunchChoice);
- }} className='action-icon' icon={faTrashCan} />
- }
- |
- {userChoices?.length && food ?
-
- {userChoices?.map(foodIndex => {
- const restaurantKey = key as Restaurant;
- const foodName = food[restaurantKey]?.food?.[foodIndex].name;
- return
- {foodName}
- {login === auth.login && canChangeChoice &&
-
- {
- doRemoveFoodChoice(restaurantKey, foodIndex);
- }} className='action-icon' icon={faTrashCan} />
- }
-
- })}
+
+
+ {trusted &&
+
+ }
+ {login}
+ {userPayload.departureTime && ({userPayload.departureTime})}
+ {userPayload.note && ({userPayload.note})}
+
+
+ {login === auth.login && canChangeChoice && locationKey === LunchChoice.OBJEDNAVAM &&
+ {
+ markAsBuyer();
+ }} icon={faBasketShopping} className={isBuyer ? 'buyer-icon' : 'action-icon'} style={{cursor: 'pointer'}} />
+ }
+ {login !== auth.login && locationKey === LunchChoice.OBJEDNAVAM && isBuyer &&
+ {
+ copyNote(userPayload.note!);
+ }} icon={faBasketShopping} className='buyer-icon' />
+ }
+ {login !== auth.login && canChangeChoice && userPayload?.note?.length &&
+ {
+ copyNote(userPayload.note!);
+ }} className='action-icon' icon={faComment} />
+ }
+ {login === auth.login && canChangeChoice &&
+ {
+ setNoteModalOpen(true);
+ }} className='action-icon' icon={faNoteSticky} />
+ }
+ {login === auth.login && canChangeChoice &&
+ {
+ doRemoveChoices(key as LunchChoice);
+ }} className='action-icon' icon={faTrashCan} />
+ }
+
- | : null}
+ {userChoices && userChoices.length > 0 && food && (
+
+ {userChoices.map(foodIndex => {
+ const restaurantKey = key as Restaurant;
+ const foodName = food[restaurantKey]?.food?.[foodIndex].name;
+ return
+ {foodName}
+ {login === auth.login && canChangeChoice &&
+
+ {
+ doRemoveFoodChoice(restaurantKey, foodIndex);
+ }} className='action-icon' icon={faTrashCan} />
+ }
+
+ })}
+
+ )}
+
}
)}