From e0fd910fa471a085485abf31718b1bd8d0519265 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Thu, 29 Oct 2020 14:53:27 +1100
Subject: [PATCH] move a part of SessionSrollButton to styled component

---
 js/models/conversations.js                    |  7 +--
 stylesheets/_session.scss                     | 17 +++----
 stylesheets/_session_left_pane.scss           |  1 +
 ts/components/session/SessionScrollButton.tsx | 51 ++++++++++---------
 ts/state/ducks/SessionTheme.tsx               |  3 ++
 ts/styled.d.ts                                |  3 ++
 6 files changed, 43 insertions(+), 39 deletions(-)

diff --git a/js/models/conversations.js b/js/models/conversations.js
index ea5be6d0d..59861d90c 100644
--- a/js/models/conversations.js
+++ b/js/models/conversations.js
@@ -32,12 +32,7 @@
     UNRESTRICTED: 3,
   };
 
-  const {
-    Conversation,
-    Contact,
-    Message,
-    PhoneNumber,
-  } = window.Signal.Types;
+  const { Conversation, Contact, Message, PhoneNumber } = window.Signal.Types;
   const {
     upgradeMessageSchema,
     loadAttachmentData,
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 6d71c21c0..c8c9700f4 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -1335,12 +1335,7 @@ input {
   }
 }
 
-.session-scroll-button {
-  animation: fadein $session-fadein-duration;
-  position: fixed;
-  z-index: 2;
-  right: 60px;
-
+.messages-container {
   .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;
-    box-shadow: 0px 0px 10px 0px rgba($session-color-white, 0.1);
-
+    @include themify($themes) {
+      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 {
diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss
index ad102f4be..c8a38eec6 100644
--- a/stylesheets/_session_left_pane.scss
+++ b/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');
     }
diff --git a/ts/components/session/SessionScrollButton.tsx b/ts/components/session/SessionScrollButton.tsx
index 16054514a..5e22cd1ae 100644
--- a/ts/components/session/SessionScrollButton.tsx
+++ b/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> {
-  constructor(props: any) {
-    super(props);
-  }
+const SessionScrollButtonDiv = styled.div`
+  position: fixed;
+  z-index: 2;
+  right: 60px;
+  animation: fadein ${props => props.theme.common.animations.defaultDuration};
+`;
 
-  public render() {
-    return (
-      <>
-        {this.props.show && (
-          <div className="session-scroll-button">
-            <SessionIconButton
-              iconType={SessionIconType.Chevron}
-              iconSize={SessionIconSize.Huge}
-              iconColor={'#FFFFFF'}
-              onClick={this.props.onClick}
-            />
-          </div>
-        )}
-      </>
-    );
-  }
-}
+export const SessionScrollButton = (props: Props) => {
+  const themeContext = useContext(ThemeContext);
+
+  return (
+    <>
+      {props.show && (
+        <SessionScrollButtonDiv theme={themeContext}>
+          <SessionIconButton
+            iconType={SessionIconType.Chevron}
+            iconSize={SessionIconSize.Huge}
+            onClick={props.onClick}
+          />
+        </SessionScrollButtonDiv>
+      )}
+    </>
+  );
+};
diff --git a/ts/state/ducks/SessionTheme.tsx b/ts/state/ducks/SessionTheme.tsx
index 3c4f587d3..38a6816be 100644
--- a/ts/state/ducks/SessionTheme.tsx
+++ b/ts/state/ducks/SessionTheme.tsx
@@ -25,6 +25,9 @@ const common = {
     md: '15px',
     lg: '20px',
   },
+  animations: {
+    defaultDuration: '0.25s',
+  },
 };
 
 export const lightTheme: DefaultTheme = {
diff --git a/ts/styled.d.ts b/ts/styled.d.ts
index f758774de..25d59d72c 100644
--- a/ts/styled.d.ts
+++ b/ts/styled.d.ts
@@ -14,6 +14,9 @@ declare module 'styled-components' {
         md: string;
         lg: string;
       };
+      animations: {
+        defaultDuration: string;
+      };
     };
     colors: {
       accent: string;