feat: added theming to the debug log page

winter0019 · Oct 5, 2022 · 1e9aa04 · 1e9aa04
1 parent adf3709
commit 1e9aa04
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 149 deletions.
diff --git a/debug_log.html b/debug_log.html
@@ -15,12 +15,8 @@
             style-src 'self' 'unsafe-inline';"
     />
     <link href="stylesheets/dist/manifest.css" rel="stylesheet" type="text/css" />
-    <style>
-      body {
-        background-color: var(--background-primary-color);
-      }
-    </style>
   </head>
+
   <body>
     <div id="root"></div>
   </body>

diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
@@ -178,25 +178,6 @@ $loading-height: 16px;
   }
 }
 
-.x {
-  display: inline-block;
-  float: right;
-  cursor: pointer;
-  border-radius: 50%;
-  width: 22px;
-  height: 22px;
-  padding: 3px;
-  background: var(--color-gray-color);
-
-  &:before {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 100%;
-    @include color-svg('../images/x.svg', white);
-  }
-}
-
 @keyframes loading {
   50% {
     transform: scale(1);

diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss
diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss
@@ -24,9 +24,6 @@
 @import 'index';
 @import 'conversation';
 
-// Themes
-@import 'theme_dark';
-
 // /////////////////// //
 // ///// Session ///// //
 // /////////////////// //

diff --git a/ts/components/DebugLogView.tsx b/ts/components/DebugLogView.tsx
@@ -1,16 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import {
-  SessionTheme,
-  switchHtmlToDarkTheme,
-  switchHtmlToLightTheme,
-} from '../themes/SessionTheme';
+import { switchThemeTo } from '../session/utils/Theme';
+import { SessionTheme } from '../themes/SessionTheme';
 import { fetch } from '../util/logging';
 import { SessionButton, SessionButtonType } from './basic/SessionButton';
+import { SessionIconButton } from './icon';
 
 const StyledContent = styled.div`
-  background-color: var(--color-modal-background);
-  color: var(--color-text);
+  background-color: var(--modal-background-content-color);
+  color: var(--modal-text-color);
   font-family: var(--font-default);
 
   display: flex;
@@ -24,16 +22,23 @@ const StyledContent = styled.div`
     width: fit-content;
   }
 
+  .session-icon-button {
+    float: right;
+  }
+
   h1 {
-    color: var(--color-text);
+    color: var(--modal-text-color);
   }
 
   textarea {
     flex-grow: 1;
     width: 100%;
     box-sizing: border-box;
-    padding: var(--margins-sm);
-    border: 2px solid var(--color-session-border);
+    padding: var(--margins-md);
+    background-color: var(--input-background-color);
+    color: var(--input-text-color);
+    border: 2px solid var(--border-color);
+    border-radius: 4px;
     resize: none;
     min-height: 100px;
 
@@ -95,20 +100,19 @@ const DebugLogViewAndSave = () => {
 
 export const DebugLogView = () => {
   useEffect(() => {
-    if ((window as any).theme === 'dark') {
-      switchHtmlToDarkTheme();
-    } else {
-      switchHtmlToLightTheme();
+    if ((window as any).theme) {
+      void switchThemeTo((window as any).theme, null, false);
     }
   }, []);
 
   return (
     <SessionTheme>
       <StyledContent>
         <div>
-          <button
-            className="x close"
+          <SessionIconButton
             aria-label="close debug log"
+            iconType="exit"
+            iconSize="medium"
             onClick={() => {
               (window as any).closeDebugLog();
             }}

diff --git a/ts/mains/debug_log_start.tsx b/ts/mains/debug_log_start.tsx
@@ -1,6 +1,4 @@
 import React from 'react';
 import { DebugLogView } from '../components/DebugLogView';
 
-global.setTimeout(() => {
-  window.ReactDOM.render(<DebugLogView />, document.getElementById('root'));
-}, 1000);
+window.ReactDOM.render(<DebugLogView />, document.getElementById('root'));