From 88cd58e7ff995da2a4a8478eff383f2c04055f77 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Tue, 1 Dec 2020 11:15:51 +1100
Subject: [PATCH] trigger theme switch with user theme on app start

---
 ts/components/ConversationListItem.tsx | 23 +++++-----
 ts/components/conversation/Message.tsx | 60 +++++++++++++-------------
 ts/components/session/ActionsPanel.tsx |  9 ++++
 3 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/ts/components/ConversationListItem.tsx b/ts/components/ConversationListItem.tsx
index a30f7d9cc..371b32a8b 100644
--- a/ts/components/ConversationListItem.tsx
+++ b/ts/components/ConversationListItem.tsx
@@ -72,8 +72,11 @@ type PropsHousekeeping = {
 type Props = PropsData & PropsHousekeeping;
 
 const Portal = ({ children }: { children: any }) => {
-  return createPortal(children, document.querySelector('.inbox.index') as Element);
-}
+  return createPortal(
+    children,
+    document.querySelector('.inbox.index') as Element
+  );
+};
 
 class ConversationListItem extends React.PureComponent<Props> {
   public constructor(props: Props) {
@@ -188,14 +191,14 @@ class ConversationListItem extends React.PureComponent<Props> {
           {isTyping ? (
             <TypingAnimation i18n={i18n} />
           ) : (
-              <MessageBody
-                isGroup={true}
-                text={text}
-                disableJumbomoji={true}
-                disableLinks={true}
-                i18n={i18n}
-              />
-            )}
+            <MessageBody
+              isGroup={true}
+              text={text}
+              disableJumbomoji={true}
+              disableLinks={true}
+              i18n={i18n}
+            />
+          )}
         </div>
         {lastMessage && lastMessage.status ? (
           <div
diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index 50ac56da5..4b33a9ddb 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -291,15 +291,15 @@ export class Message extends React.PureComponent<Props, State> {
             {window.i18n('sendFailed')}
           </span>
         ) : (
-            <Timestamp
-              i18n={window.i18n}
-              timestamp={serverTimestamp || timestamp}
-              extended={true}
-              direction={direction}
-              withImageNoCaption={withImageNoCaption}
-              module="module-message__metadata__date"
-            />
-          )}
+          <Timestamp
+            i18n={window.i18n}
+            timestamp={serverTimestamp || timestamp}
+            extended={true}
+            direction={direction}
+            withImageNoCaption={withImageNoCaption}
+            module="module-message__metadata__date"
+          />
+        )}
         {this.renderMetadataBadges()}
         {expirationLength && expirationTimestamp ? (
           <ExpireTimer
@@ -473,30 +473,30 @@ export class Message extends React.PureComponent<Props, State> {
               <Spinner size="small" direction={direction} />
             </div>
           ) : (
-              <div className="module-message__generic-attachment__icon-container">
-                <div
-                  role="button"
-                  className="module-message__generic-attachment__icon"
-                  onClick={(e: any) => {
-                    if (this.props?.onDownload) {
-                      e.stopPropagation();
-                      this.props.onDownload(firstAttachment);
-                    }
-                  }}
-                >
-                  {extension ? (
-                    <div className="module-message__generic-attachment__icon__extension">
-                      {extension}
-                    </div>
-                  ) : null}
-                </div>
-                {isDangerous ? (
-                  <div className="module-message__generic-attachment__icon-dangerous-container">
-                    <div className="module-message__generic-attachment__icon-dangerous" />
+            <div className="module-message__generic-attachment__icon-container">
+              <div
+                role="button"
+                className="module-message__generic-attachment__icon"
+                onClick={(e: any) => {
+                  if (this.props?.onDownload) {
+                    e.stopPropagation();
+                    this.props.onDownload(firstAttachment);
+                  }
+                }}
+              >
+                {extension ? (
+                  <div className="module-message__generic-attachment__icon__extension">
+                    {extension}
                   </div>
                 ) : null}
               </div>
-            )}
+              {isDangerous ? (
+                <div className="module-message__generic-attachment__icon-dangerous-container">
+                  <div className="module-message__generic-attachment__icon-dangerous" />
+                </div>
+              ) : null}
+            </div>
+          )}
           <div className="module-message__generic-attachment__text">
             <div
               className={classNames(
diff --git a/ts/components/session/ActionsPanel.tsx b/ts/components/session/ActionsPanel.tsx
index deaae5d89..e8b3684f4 100644
--- a/ts/components/session/ActionsPanel.tsx
+++ b/ts/components/session/ActionsPanel.tsx
@@ -37,6 +37,15 @@ class ActionsPanelPrivate extends React.Component<Props> {
     void removeItemById('hasSeenLightModeDialog');
   }
 
+  // fetch the user saved theme from the db, and apply it on mount.
+  public componentDidMount() {
+    const theme = window.Events.getThemeSetting();
+    window.setTheme(theme);
+
+    const newThemeObject = theme === 'dark' ? darkTheme : lightTheme;
+    this.props.applyTheme(newThemeObject);
+  }
+
   public Section = ({
     isSelected,
     onSelect,