move a part of SessionSrollButton to styled component

js/models/conversations.js

@@ -32,12 +32,7 @@
     UNRESTRICTED: 3,
   };
 
-  const {
+  const { Conversation, Contact, Message, PhoneNumber } = window.Signal.Types;
-    Conversation,
-    Contact,
-    Message,
-    PhoneNumber,
-  } = window.Signal.Types;
   const {
     upgradeMessageSchema,
     loadAttachmentData,

stylesheets/_session.scss

@@ -1335,12 +1335,7 @@ input {
   }
 }
 
-.session-scroll-button {
+.messages-container {
-  animation: fadein $session-fadein-duration;
-  position: fixed;
-  z-index: 2;
-  right: 60px;
-
   .session-icon-button {
     display: flex;
     justify-content: center;
@@ -1349,12 +1344,16 @@ input {
     width: 40px;
     border-radius: 50%;
     opacity: 1;
-    background-color: $session-shade-2;
+    @include themify($themes) {
-    box-shadow: 0px 0px 10px 0px rgba($session-color-white, 0.1);
+      background-color: themed('cellBackground');
-
+      box-shadow: themed('sessionShadow');
+    }
     svg path {
       transition: $session-transition-duration;
       opacity: 0.6;
+      @include themify($themes) {
+        fill: themed('textColor');
+      }
     }
 
     &:hover svg path {

stylesheets/_session_left_pane.scss

@@ -110,6 +110,7 @@ $session-compose-margin: 20px;
     width: $session-left-pane-sections-container-width;
     display: inline-flex;
     flex-direction: column;
+    overflow: auto;
     @include themify($themes) {
       border-right: themed('sessionBorder');
     }

ts/components/session/SessionScrollButton.tsx

@@ -1,31 +1,34 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import styled, { ThemeContext } from 'styled-components';
 
 import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
 
-interface Props {
+type Props = {
   onClick?: () => any;
   show?: boolean;
-}
+};
 
-export class SessionScrollButton extends React.PureComponent<Props> {
+const SessionScrollButtonDiv = styled.div`
-  constructor(props: any) {
+  position: fixed;
-    super(props);
+  z-index: 2;
-  }
+  right: 60px;
+  animation: fadein ${props => props.theme.common.animations.defaultDuration};
+`;
 
-  public render() {
+export const SessionScrollButton = (props: Props) => {
-    return (
+  const themeContext = useContext(ThemeContext);
-      <>
+
-        {this.props.show && (
+  return (
-          <div className="session-scroll-button">
+    <>
-            <SessionIconButton
+      {props.show && (
-              iconType={SessionIconType.Chevron}
+        <SessionScrollButtonDiv theme={themeContext}>
-              iconSize={SessionIconSize.Huge}
+          <SessionIconButton
-              iconColor={'#FFFFFF'}
+            iconType={SessionIconType.Chevron}
-              onClick={this.props.onClick}
+            iconSize={SessionIconSize.Huge}
-            />
+            onClick={props.onClick}
-          </div>
+          />
-        )}
+        </SessionScrollButtonDiv>
-      </>
+      )}
-    );
+    </>
-  }
+  );
-}
+};

ts/state/ducks/SessionTheme.tsx

@@ -25,6 +25,9 @@ const common = {
     md: '15px',
     lg: '20px',
   },
+  animations: {
+    defaultDuration: '0.25s',
+  },
 };
 
 export const lightTheme: DefaultTheme = {

ts/styled.d.ts

@@ -14,6 +14,9 @@ declare module 'styled-components' {
         md: string;
         lg: string;
       };
+      animations: {
+        defaultDuration: string;
+      };
     };
     colors: {
       accent: string;