Skip to content

Commit 6665ba9

Browse files
BilbBilb
authored
Merge pull request oxen-io#2522 from yougotwill/theming
Theming
2 parents d1a33ad + 367c0c9 commit 6665ba9

File tree

192 files changed

+4208
-7123
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

192 files changed

+4208
-7123
lines changed

‎about.html‎

Lines changed: 1 addition & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -15,40 +15,10 @@
1515
style-src 'self' 'unsafe-inline';"
1616
/>
1717
<link href="stylesheets/dist/manifest.css" rel="stylesheet" type="text/css" />
18-
<style>
19-
body {
20-
text-align: center;
21-
background-color: rgba(0, 0, 0);
22-
color: white;
23-
font-size: 14px;
24-
}
25-
26-
img {
27-
margin-top: 1em;
28-
padding: 12px;
29-
}
30-
31-
a {
32-
color: white;
33-
}
34-
</style>
3518
</head>
3619

3720
<body>
38-
<img src="images/session/session_icon.png" width="250" height="250" />
39-
40-
<div class="version"></div>
41-
<div class="commitHash"></div>
42-
<div class="environment"></div>
43-
<div>
44-
<a href="https://getsession.org">getsession.org</a>
45-
</div>
46-
<br />
47-
<div>
48-
<a class="privacy" href="https://getsession.org/privacy-policy">Privacy Policy</a><br />
49-
<a class="privacy" href="https://getsession.org/terms-of-service/">Terms of Service</a>
50-
</div>
51-
21+
<div id="root"></div>
5222
<script type="text/javascript">
5323
require('./ts/mains/about_start.js');
5424
</script>

‎about_preload.js‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,25 @@ const config = url.parse(window.location.toString(), true).query;
88
const { locale } = config;
99
const localeMessages = ipcRenderer.sendSync('locale-data');
1010

11+
window.React = require('react');
12+
window.ReactDOM = require('react-dom');
13+
14+
window.theme = config.theme;
15+
window.i18n = i18n.setupi18n(locale, localeMessages);
16+
1117
window.getEnvironment = () => config.environment;
1218
window.getVersion = () => config.version;
1319
window.getCommitHash = () => config.commitHash;
1420
window.getAppInstance = () => config.appInstance;
1521

16-
window.closeAbout = () => ipcRenderer.send('close-about');
22+
const { AboutView } = require('./ts/components/AboutView');
1723

18-
window.i18n = i18n.setupi18n(locale, localeMessages);
24+
window.Signal = {
25+
Components: {
26+
AboutView,
27+
},
28+
};
29+
30+
window.closeAbout = () => ipcRenderer.send('close-about');
1931

2032
require('./ts/util/logging');

‎debug_log.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,8 @@
1515
style-src 'self' 'unsafe-inline';"
1616
/>
1717
<link href="stylesheets/dist/manifest.css" rel="stylesheet" type="text/css" />
18-
<style>
19-
body {
20-
background-color: #000;
21-
}
22-
</style>
2318
</head>
19+
2420
<body>
2521
<div id="root"></div>
2622
</body>

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,8 @@
8383
"rebuild-curve25519-js": "cd node_modules/curve25519-js && yarn install && yarn build && cd ../../"
8484
},
8585
"dependencies": {
86-
"@emoji-mart/data": "1.0.2",
86+
"@emoji-mart/data": "^1.0.6",
87+
"@emoji-mart/react": "^1.0.1",
8788
"@reduxjs/toolkit": "1.8.5",
8889
"abort-controller": "3.0.0",
8990
"auto-bind": "^4.0.0",
@@ -104,7 +105,7 @@
104105
"electron-is-dev": "^1.1.0",
105106
"electron-localshortcut": "^3.2.1",
106107
"electron-updater": "^4.2.2",
107-
"emoji-mart": "5.1.0",
108+
"emoji-mart": "^5.2.2",
108109
"filesize": "3.6.1",
109110
"firstline": "1.2.1",
110111
"fs-extra": "9.0.0",

‎password.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
1+
<!DOCTYPE html>
12
<html>
23
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"
7+
name="viewport"
8+
/>
9+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
10+
<meta name="description" content="" />
11+
<meta name="viewport" content="width=device-width, initial-scale=1" />
312
<meta
413
http-equiv="Content-Security-Policy"
514
content="default-src 'none';
@@ -14,6 +23,7 @@
1423
script-src 'self' 'unsafe-inline';
1524
style-src 'self' 'unsafe-inline';"
1625
/>
26+
<link href="images/sesion/session_icon_128.png" rel="shortcut icon" />
1727
<link href="stylesheets/dist/manifest.css" rel="stylesheet" type="text/css" />
1828
</head>
1929
<body>

‎password_preload.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ const localeMessages = ipcRenderer.sendSync('locale-data');
1111
window.React = require('react');
1212
window.ReactDOM = require('react-dom');
1313

14-
window.theme = config.theme;
14+
// If the app is locked we can't access the database to check the theme.
15+
window.theme = 'classic-dark';
16+
window.primaryColor = 'green';
1517
window.i18n = i18n.setupi18n(locale, localeMessages);
1618

1719
window.getEnvironment = () => config.environment;

‎patches/emoji-mart+5.1.0.patch‎

Lines changed: 0 additions & 2817 deletions
This file was deleted.

‎preload.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ window.sessionFeatureFlags = {
2929
useTestNet: Boolean(
3030
process.env.NODE_APP_INSTANCE && process.env.NODE_APP_INSTANCE.includes('testnet')
3131
),
32-
useSettingsThemeSwitcher: false,
32+
useSettingsThemeSwitcher: true,
3333
debug: {
3434
debugFileServerRequests: false,
3535
debugNonSnodeRequests: false,
@@ -157,8 +157,8 @@ ipc.on('get-theme-setting', () => {
157157

158158
window.getSettingValue = (settingID, comparisonValue = null) => {
159159
// Comparison value allows you to pull boolean values from any type.
160-
// Eg. window.getSettingValue('theme', 'light')
161-
// returns 'false' when the value is 'dark'.
160+
// Eg. window.getSettingValue('theme', 'classic-dark')
161+
// returns 'false' when the value is 'classic-light'.
162162

163163
// We need to get specific settings from the main process
164164
if (settingID === 'media-permissions') {

‎stylesheets/_avatar.scss‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
11
// Module: Avatar
2-
$borderAvatarColor: unquote(
3-
'#00000059'
4-
); // search for references on ts TODO: make this exposed on ts
5-
62
.module-avatar {
73
position: relative;
84
vertical-align: middle;
@@ -13,7 +9,7 @@ $borderAvatarColor: unquote(
139
img {
1410
object-fit: cover;
1511
border-radius: 50%;
16-
border: 1px solid $borderAvatarColor;
12+
border: 1px solid var(--avatar-border-color);
1713
}
1814
}
1915

‎stylesheets/_conversation.scss‎

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,17 @@
1616
}
1717

1818
.group-invitation {
19-
background: var(--color-received-message-background);
19+
background-color: var(--message-bubbles-received-background-color);
2020

2121
&.invitation-outgoing {
22-
background: var(--color-sent-message-background);
22+
background-color: var(--message-bubbles-sent-background-color);
2323
align-self: flex-end;
24+
25+
.contents {
26+
.session-icon-button {
27+
background-color: var(--transparent-color);
28+
}
29+
}
2430
}
2531

2632
display: inline-block;
@@ -33,13 +39,6 @@
3339

3440
box-shadow: none;
3541

36-
.title {
37-
margin: 6px;
38-
color: darkslategray;
39-
font-variant-caps: all-small-caps;
40-
user-select: none;
41-
}
42-
4342
.contents {
4443
display: flex;
4544
align-items: center;
@@ -62,27 +61,19 @@
6261
}
6362

6463
.session-icon-button {
65-
background-color: var(--color-accent);
66-
box-shadow: none;
67-
68-
filter: brightness(1.05);
69-
svg path {
70-
transition: var(--default-duration);
71-
opacity: 0.6;
72-
fill: var(--color-text-opposite);
73-
}
64+
background-color: var(--primary-color);
7465
}
7566
}
7667
}
7768

7869
.group-invitation {
7970
.group-details {
80-
color: var(--color-received-message-text);
71+
color: var(--message-bubbles-received-text-color);
8172
}
8273
}
8374

8475
.group-invitation.invitation-outgoing {
8576
.group-details {
86-
color: var(--color-sent-message-text);
77+
color: var(--message-bubbles-sent-text-color);
8778
}
8879
}

0 commit comments

Comments
 (0)