keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 7 Projects Releases Wiki Activity

feat: added theming to the debug log page

Browse Source
pull/2522/head
William Grant 2 years ago
parent adf370997e
commit 1e9aa04747
6 changed files with 22 additions and 149 deletions
Show Stats Download Patch File Download Diff File

6
debug_log.html
Unescape Escape View File

@ -15,12 +15,8 @@
style-src 'self' 'unsafe-inline';" style-src 'self' 'unsafe-inline';"
/> />
<link href="stylesheets/dist/manifest.css" rel="stylesheet" type="text/css" /> <link href="stylesheets/dist/manifest.css" rel="stylesheet" type="text/css" />
<style>
body {
background-color: var(--background-primary-color);
}
</style>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
</body> </body>

19
stylesheets/_global.scss
Unescape Escape View File

@ -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 { @keyframes loading {
50% { 50% {
transform: scale(1); transform: scale(1);

103
stylesheets/_theme_dark.scss
Unescape Escape View File

@ -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;
// }
}
}

3
stylesheets/manifest.scss
Unescape Escape View File

@ -24,9 +24,6 @@
@import 'index'; @import 'index';
@import 'conversation'; @import 'conversation';
// Themes
@import 'theme_dark';
// /////////////////// // // /////////////////// //
// ///// Session ///// // // ///// Session ///// //
// /////////////////// // // /////////////////// //

36
ts/components/DebugLogView.tsx
Unescape Escape View File

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

4
ts/mains/debug_log_start.tsx
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save