From 1e9aa04747998a8d9bc982df4df5bff0254cdb98 Mon Sep 17 00:00:00 2001 From: William Grant Date: Wed, 5 Oct 2022 22:29:31 +1100 Subject: [PATCH] feat: added theming to the debug log page --- debug_log.html | 6 +- stylesheets/_global.scss | 19 ------ stylesheets/_theme_dark.scss | 103 --------------------------------- stylesheets/manifest.scss | 3 - ts/components/DebugLogView.tsx | 36 +++++++----- ts/mains/debug_log_start.tsx | 4 +- 6 files changed, 22 insertions(+), 149 deletions(-) delete mode 100644 stylesheets/_theme_dark.scss diff --git a/debug_log.html b/debug_log.html index e354d086d..2b61a28c8 100644 --- a/debug_log.html +++ b/debug_log.html @@ -15,12 +15,8 @@ style-src 'self' 'unsafe-inline';" /> - +
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss index 3a8028498..63c4efff5 100644 --- 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 deleted file mode 100644 index 0300d3bde..000000000 --- a/stylesheets/_theme_dark.scss +++ /dev/null @@ -1,103 +0,0 @@ -.dark-theme { - // _debugLog - - // TODO Theming - Most of this should be removed when the debug window is properly styled - .debug-log { - &.modal { - .content { - textarea { - background-color: var(--input-background-color); - border: 1px solid var(--border-color); - color: var(--input-text-color); - } - } - } - - .result { - .open { - textarea { - background-color: var(--input-background-color); - border: 1px solid var(--border-color); - color: var(--input-text-color); - - &:before { - @include color-svg('../images/open_link.svg', var(--button-icon-stroke-color)); - } - } - - .link { - color: var(--text-primary-color); - border: 1px solid var(--border-color); - border-right: none; - background-color: var(--background-primary-color); - } - } - } - - // _global - .title-bar { - color: var(--text-primary-color); - } - - // TODO Theming - Do we still use this? - button.grey { - border: 1px solid var(--color-light-gray-color); - color: var(--color-gray-color); - background: var(--color-lightest-gray-color); - box-shadow: 0 0 10px -5px rgba(var(--color-gray-color-rgb), 0.5); - - &:hover { - box-shadow: 0 0 10px -3px rgba(var(--color-gray-color-rgb), 0.7); - } - } - - .loading { - position: relative; - // TODO Theming - Review - &::before { - border: 3px solid; - border-color: var(--color-light-blue-color) var(--color-light-blue-color) - var(--color-lightest-gray-color) var(--color-lightest-gray-color) !important; - } - } - - .x { - &:before { - @include color-svg('../images/x.svg', var(--white-color)); - } - } - - // TODO Theming - Do we use this anywhere? - // .hint { - // color: var(--color-white-color); - // border: 2px dashed var(--color-white-color); - - // &.firstRun { - // &:before, - // &:after { - // border: solid 10px var(--color-white-color); - // border-color: transparent var(--color-white-color) transparent transparent; - // } - // &:after { - // border-color: transparent var(--color-dark-blue-color) transparent transparent; - // } - // } - // } - - // TODO Theming - I don't think we use this. - // .contact.placeholder { - // color: var(--color-white-color); - // border: 2px dashed var(--color-white-color); - // p { - // color: var(--color-white-color); - // } - // &:before, - // &:after { - // border: solid 10px var(--color-white-color); - // border-color: transparent transparent var(--color-white-color) transparent; - // } - // &:after { - // border-color: transparent transparent var(--color-dark-blue-color) transparent; - // } - } -} diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index d41bd1ab0..569ff46aa 100644 --- 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 index 7d85c928c..128f9864d 100644 --- 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,10 +100,8 @@ 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); } }, []); @@ -106,9 +109,10 @@ export const DebugLogView = () => {
-