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

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

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