diff --git a/src/app/organisms/room/RoomViewFloating.jsx b/src/app/organisms/room/RoomViewFloating.jsx
index e65e854..d027aff 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 263025e..2acf674 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