diff --git a/src/app/organisms/room/RoomViewFloating.jsx b/src/app/organisms/room/RoomViewFloating.jsx index e65e854f..d027aff2 100644 --- a/src/app/organisms/room/RoomViewFloating.jsx +++ b/src/app/organisms/room/RoomViewFloating.jsx @@ -9,10 +9,9 @@ import { markAsRead } from '../../../client/action/notifications'; import Text from '../../atoms/text/Text'; import Button from '../../atoms/button/Button'; -import IconButton from '../../atoms/button/IconButton'; +import MessageIC from '../../../../public/res/ic/outlined/message.svg'; import MessageUnreadIC from '../../../../public/res/ic/outlined/message-unread.svg'; -import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg'; import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg'; import { getUsersActionJsx } from './common'; @@ -111,11 +110,9 @@ function RoomViewFloating({ {getUsersActionJsx(roomId, [...typingMembers], 'typing...')}
- +
); diff --git a/src/app/organisms/room/RoomViewFloating.scss b/src/app/organisms/room/RoomViewFloating.scss index 263025e1..2acf6740 100644 --- a/src/app/organisms/room/RoomViewFloating.scss +++ b/src/app/organisms/room/RoomViewFloating.scss @@ -72,51 +72,55 @@ } } + &__STB, + &__unread { + opacity: 0.9; + overflow: hidden; + background-color: var(--bg-surface-low); + border-radius: var(--bo-radius); + + & button { + justify-content: flex-start; + border-radius: 0; + box-shadow: none; + padding: 6px var(--sp-tight); + & .ic-raw { + width: 16px; + height: 16px; + } + } + } + &__STB { position: absolute; - @include dir.prop(right, var(--sp-normal), unset); - @include dir.prop(left, unset, var(--sp-normal)); + @include dir.prop(left, 50%, unset); + @include dir.prop(right, unset, 50%); bottom: 0; - border-radius: var(--bo-radius); box-shadow: var(--bs-surface-border); - background-color: var(--bg-surface-low); transition: transform 200ms ease-in-out; - transform: translateY(100%) scale(0); + transform: translate(-50%, 100%); &--open { - transform: translateY(-28px) scale(1); + transform: translate(-50%, -28px); } } &__unread { position: absolute; - top: 0; + top: var(--sp-extra-tight); @include dir.prop(left, var(--sp-normal), unset); @include dir.prop(right, unset, var(--sp-normal)); z-index: 999; display: none; width: calc(100% - var(--sp-extra-loose)); - background-color: var(--bg-surface); - border-radius: 0 0 var(--bo-radius) var(--bo-radius); - box-shadow: var(--bs-primary-border); - overflow: hidden; + box-shadow: 0 0 2px 0 rgba(0, 0, 0, 20%); &--open { display: flex; } - & .btn-primary { - justify-content: flex-start; - border-radius: 0; - padding: 2px var(--sp-tight); - & .ic-raw { - width: 16px; - height: 16px; - } - } - & .btn-primary:first-child { + & button:first-child { @extend .cp-fx__item-one; - padding: var(--sp-ultra-tight) var(--sp-extra-tight); } } } \ No newline at end of file