IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added hover effects for RoomType ListItem and DropdownButton components

Browse Source
This commit is contained in:
namushka 2024-05-24 14:03:27 +03:00
parent 9af68dbd94
commit 99b7339a83
No known key found for this signature in database
2 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomType.js
View File

@ -98,10 +98,21 @@ const StyledRoomType = styled.div`
const StyledListItem = styled(StyledRoomType)` const StyledListItem = styled(StyledRoomType)`
background-color: ${(props) => background-color: ${(props) =>
props.theme.createEditRoomDialog.roomType.listItem.background}; props.theme.createEditRoomDialog.roomType.listItem.background};
&:hover {
background-color: ${(props) =>
props.theme.createEditRoomDialog.roomType.listItem.hoverBackground};
}
border: 1px solid border: 1px solid
${(props) => props.theme.createEditRoomDialog.roomType.listItem.borderColor}; ${(props) => props.theme.createEditRoomDialog.roomType.listItem.borderColor};
border-radius: 6px; border-radius: 6px;
&:active {
border-color: ${(props) =>
props.theme.createEditRoomDialog.roomType.listItem.activeBorderColor};
}
.choose_room-description { .choose_room-description {
color: ${(props) => color: ${(props) =>
props.theme.createEditRoomDialog.roomType.listItem.descriptionText}; props.theme.createEditRoomDialog.roomType.listItem.descriptionText};
@ -112,12 +123,23 @@ const StyledDropdownButton = styled(StyledRoomType)`
border-radius: 6px; border-radius: 6px;
background-color: ${(props) => background-color: ${(props) =>
props.theme.createEditRoomDialog.roomType.dropdownButton.background}; props.theme.createEditRoomDialog.roomType.dropdownButton.background};
${({ isOpen }) =>
!isOpen &&
css`
&:hover {
background-color: ${(props) =>
props.theme.createEditRoomDialog.roomType.dropdownButton
.hoverBackground};
}
`}
border: 1px solid border: 1px solid
${(props) => ${(props) =>
props.isOpen props.isOpen
? props.theme.createEditRoomDialog.roomType.dropdownButton ? props.theme.createEditRoomDialog.roomType.dropdownButton
.isOpenBorderColor .isOpenBorderColor
: props.theme.createEditRoomDialog.roomType.dropdownButton.borderColor}; : props.theme.createEditRoomDialog.roomType.dropdownButton.borderColor};
.choose_room-description { .choose_room-description {
color: ${(props) => color: ${(props) =>

3
packages/shared/themes/base.ts
View File

@ -2467,11 +2467,14 @@ export const getBaseTheme = () => {
roomType: { roomType: {
listItem: { listItem: {
background: "none", background: "none",
hoverBackground: "#F8F9F9",
borderColor: "#ECEEF1", borderColor: "#ECEEF1",
activeBorderColor: "#5299E0",
descriptionText: "#A3A9AE", descriptionText: "#A3A9AE",
}, },
dropdownButton: { dropdownButton: {
background: "none", background: "none",
hoverBackground: "#f3f4f4",
borderColor: "#ECEEF1", borderColor: "#ECEEF1",
isOpenBorderColor: "#2DA7DB", isOpenBorderColor: "#2DA7DB",
descriptionText: "#A3A9AE", descriptionText: "#A3A9AE",