Improve jump to bottom btn

Signed-off-by: Ajay Bura <ajbura@gmail.com>

diff --git a/src/app/organisms/room/RoomViewFloating.jsx b/src/app/organisms/room/RoomViewFloating.jsx
index e65e854fcf8aa1292bc108ee58164b48f242e09f..d027aff21adaddeea1bbf09a10dff463fb3ae04c 100644 (file)
--- 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({
         <Text variant="b2">{getUsersActionJsx(roomId, [...typingMembers], 'typing...')}</Text>
       </div>
       <div className={`room-view__STB${isAtBottom ? '' : ' room-view__STB--open'}`}>
-        <IconButton
-          onClick={handleScrollToBottom}
-          src={ChevronBottomIC}
-          tooltip="Scroll to Bottom"
-        />
+        <Button iconSrc={MessageIC} onClick={handleScrollToBottom}>
+          <Text variant="b3" weight="medium">Jump to latest</Text>
+        </Button>
       </div>
     </>
   );

diff --git a/src/app/organisms/room/RoomViewFloating.scss b/src/app/organisms/room/RoomViewFloating.scss
index 263025e1258563be3f3a5565fb9e3aea8e78c817..2acf6740bea8b11f426d30ac85ed426f6dc24092 100644 (file)
--- 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