Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2024-11-15 00:04:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into ts_settings

Browse Source
This commit is contained in:
Timo K 2022-06-08 16:40:51 +02:00
commit a4a6105bc9
36 changed files with 197 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
.env
View File

@ -14,12 +14,15 @@
# VITE_SENTRY_DSN=https://examplePublicKey@o0.ingest.sentry.io/0
# VITE_CUSTOM_THEME=true
# VITE_PRIMARY_COLOR=#0dbd8b
# VITE_BG_COLOR_1=#ffffff
# VITE_BG_COLOR_2=#f0f1f4
# VITE_BG_COLOR_3=#dbdfe4
# VITE_BG_COLOR_4=#d1d3d7
# VITE_INPUT_BORDER_COLOR=#e7e7e7
# VITE_INPUT_BORDER_COLOR_FOCUSED=#238cf5
# VITE_TEXT_COLOR_1=#17191c
# VITE_TEXT_COLOR_2=#61708b
# VITE_THEME_ACCENT=#0dbd8b
# VITE_THEME_ACCENT_20=#0dbd8b33
# VITE_THEME_ALERT=#ff5b55
# VITE_THEME_ALERT_20=#ff5b5533
# VITE_THEME_LINKS=#0086e6
# VITE_THEME_PRIMARY_CONTENT=#ffffff
# VITE_THEME_SECONDARY_CONTENT=#a9b2bc
# VITE_THEME_TERTIARY_CONTENT=#8e99a4
# VITE_THEME_QUATERNARY_CONTENT=#6f7882
# VITE_THEME_QUINARY_CONTENT=#394049
# VITE_THEME_SYSTEM=#21262c
# VITE_THEME_BACKGROUND=#15191e

4
.github/workflows/publish.yaml vendored
View File

@ -32,10 +32,14 @@ jobs:
with:
images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@dc7b9719a96d48369863986a06765841d7ea23f6
- name: Build and push Docker image
uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
with:
context: .
platforms: linux/amd64,linux/arm64
push: true
tags: ${{ steps.meta.outputs.tags }}
labels: ${{ steps.meta.outputs.labels }}

2
Dockerfile
View File

@ -1,4 +1,4 @@
FROM node:16-buster as builder
FROM --platform=$BUILDPLATFORM node:16-buster as builder
WORKDIR /src

3
package.json
View File

@ -8,6 +8,7 @@
"build-storybook": "build-storybook",
"prettier:check": "prettier -c src",
"prettier:format": "prettier -w src",
"lint": "yarn lint:types && yarn lint:js",
"lint:js": "eslint --max-warnings 0 src",
"lint:types": "tsc"
},
@ -36,7 +37,7 @@
"classnames": "^2.3.1",
"color-hash": "^2.0.1",
"events": "^3.3.0",
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#aa0d3bd1f5a006d151f826e6b8c5f286abb6e960",
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#34ef7bc64aa52d1aa78f2e779150922892e287de",
"mermaid": "^8.13.8",
"normalize.css": "^8.0.1",
"pako": "^2.0.4",

4
src/Avatar.module.css
View File

@ -1,6 +1,6 @@
.avatar {
position: relative;
color: #ffffff;
color: var(--primary-content);
display: flex;
align-items: center;
justify-content: center;
@ -17,7 +17,7 @@
}
.avatar svg * {
fill: #ffffff;
fill: var(--primary-content);
}
.avatar span {

2
src/Facepile.module.css
View File

@ -18,7 +18,7 @@
.facepile .avatar {
position: absolute;
top: 0;
border: 1px solid var(--bgColor2);
border: 1px solid var(--system);
}
.facepile.md .avatar {

2
src/Header.module.css
View File

@ -70,7 +70,7 @@
background: transparent;
border: none;
display: flex;
color: var(--textColor1);
color: var(--primary-content);
cursor: pointer;
align-items: center;
}

8
src/ListBox.module.css
View File

@ -5,8 +5,8 @@
overflow-y: auto;
list-style: none;
background-color: transparent;
border: 1px solid var(--inputBorderColor);
background-color: var(--bgColor1);
border: 1px solid var(--quinary-content);
background-color: var(--background);
border-radius: 8px;
}
@ -15,7 +15,7 @@
align-items: center;
justify-content: space-between;
background-color: transparent;
color: var(--textColor1);
color: var(--primary-content);
padding: 8px 16px;
outline: none;
cursor: pointer;
@ -28,6 +28,6 @@
}
.option.disabled {
color: var(--textColor2);
color: var(--quaternary-content);
background-color: var(--bgColor3);
}

6
src/Menu.module.css
View File

@ -11,7 +11,7 @@
display: flex;
align-items: center;
padding: 0 12px;
color: var(--textColor1);
color: var(--primary-content);
font-size: 14px;
}
@ -25,7 +25,7 @@
.menuItem.focused,
.menuItem:hover {
background-color: var(--bgColor4);
background-color: var(--quinary-content);
}
.menuItem.focused:first-child,
@ -46,5 +46,5 @@
}
.checkIcon * {
stroke: var(--textColor1);
stroke: var(--primary-content);
}

4
src/Tooltip.module.css
View File

@ -1,10 +1,10 @@
.tooltip {
background-color: var(--bgColor2);
background-color: var(--system);
flex-direction: row;
justify-content: center;
align-items: center;
padding: 8px 10px;
color: var(--textColor1);
color: var(--primary-content);
border-radius: 8px;
max-width: 135px;
width: max-content;

2
src/UserMenu.module.css
View File

@ -4,7 +4,7 @@
}
.userButton svg * {
fill: var(--textColor1);
fill: var(--primary-content);
}
.avatar {

2
src/auth/LoginPage.module.css
View File

@ -65,7 +65,7 @@
}
.authLinks a {
color: #0dbd8b;
color: var(--accent);
text-decoration: none;
font-weight: normal;
}

3
src/button/Button.jsx
View File

@ -37,9 +37,8 @@ export const variantToClassName = {
icon: [styles.iconButton],
secondary: [styles.secondary],
copy: [styles.copyButton],
secondaryCopy: [styles.secondaryCopy],
secondaryCopy: [styles.secondaryCopy, styles.copyButton],
iconCopy: [styles.iconCopyButton],
secondaryCopy: [styles.copyButton],
secondaryHangup: [styles.secondaryHangup],
dropdown: [styles.dropdownButton],
};

56
src/button/Button.module.css
View File

@ -46,8 +46,8 @@ limitations under the License.
}
.button {
color: #fff;
background-color: var(--primaryColor);
color: var(--primary-content);
background-color: var(--accent);
}
.button:focus,
@ -66,46 +66,46 @@ limitations under the License.
width: 50px;
height: 50px;
border-radius: 50px;
background-color: var(--bgColor2);
background-color: var(--system);
}
.toolbarButton:hover,
.toolbarButtonSecondary:hover {
background-color: var(--bgColor4);
background-color: var(--quinary-content);
}
.toolbarButton.on,
.toolbarButton.off {
background-color: #ffffff;
background-color: var(--primary-content);
}
.toolbarButtonSecondary.on {
background-color: #0dbd8b;
background-color: var(--accent);
}
.iconButton:not(.stroke) svg * {
fill: #ffffff;
fill: var(--primary-content);
}
.iconButton:not(.stroke):hover svg * {
fill: #0dbd8b;
fill: var(--accent);
}
.iconButton.on:not(.stroke) svg * {
fill: #0dbd8b;
fill: var(--accent);
}
.iconButton.on.stroke svg * {
stroke: #0dbd8b;
stroke: var(--accent);
}
.hangupButton,
.hangupButton:hover {
background-color: #ff5b55;
background-color: var(--alert);
}
.toolbarButton.on svg * {
fill: #0dbd8b;
fill: var(--accent);
}
.toolbarButton.off svg * {
@ -113,25 +113,25 @@ limitations under the License.
}
.toolbarButtonSecondary.on svg * {
fill: #ffffff;
fill: var(--primary-content);
}
.secondary,
.copyButton {
color: #0dbd8b;
border: 2px solid #0dbd8b;
color: var(--accent);
border: 2px solid var(--accent);
background-color: transparent;
}
.secondaryHangup {
color: #ff5b55;
border: 2px solid #ff5b55;
color: var(--alert);
border: 2px solid var(--alert);
background-color: transparent;
}
.copyButton.secondaryCopy {
color: var(--textColor1);
border-color: var(--textColor1);
color: var(--primary-content);
border-color: var(--primary-content);
}
.copyButton {
@ -154,12 +154,12 @@ limitations under the License.
}
.copyButton:not(.on) svg * {
fill: #0dbd8b;
fill: var(--accent);
}
.copyButton.on {
border-color: transparent;
background-color: #0dbd8b;
background-color: var(--accent);
color: white;
}
@ -168,32 +168,32 @@ limitations under the License.
}
.copyButton.secondaryCopy:not(.on) svg * {
fill: var(--textColor1);
fill: var(--primary-content);
}
.iconCopyButton svg * {
fill: var(--textColor3);
fill: var(--tertiary-content);
}
.iconCopyButton:hover svg * {
fill: #0dbd8b;
fill: var(--accent);
}
.iconCopyButton.on svg *,
.iconCopyButton.on:hover svg * {
fill: transparent;
stroke: #0dbd8b;
stroke: var(--accent);
}
.dropdownButton {
color: var(--textColor1);
color: var(--primary-content);
padding: 2px 8px;
border-radius: 8px;
}
.dropdownButton:hover,
.dropdownButton.on {
background-color: var(--bgColor4);
background-color: var(--quinary-content);
}
.dropdownButton svg {
@ -201,7 +201,7 @@ limitations under the License.
}
.dropdownButton svg * {
fill: var(--textColor1);
fill: var(--primary-content);
}
.lg {

4
src/home/CallList.module.css
View File

@ -10,7 +10,7 @@
.callTile {
height: 95px;
padding: 12px;
background-color: var(--bgColor2);
background-color: var(--system);
border-radius: 8px;
overflow: hidden;
box-sizing: border-box;
@ -36,7 +36,7 @@
flex-direction: column;
flex: 1;
padding: 0 16px;
color: var(--textColor1);
color: var(--primary-content);
min-width: 0;
}

6
src/home/CallTypeDropdown.tsx
View File

@ -43,7 +43,7 @@ export const CallTypeDropdown: FC<Props> = ({ callType, setCallType }) => {
<PopoverMenuTrigger placement="bottom">
<Button variant="dropdown" className={commonStyles.headline}>
<Headline className={styles.label}>
{callType === CallType.Video ? "Video call" : "Radio call"}
{callType === CallType.Video ? "Video call" : "Walkie-talkie call"}
</Headline>
</Button>
{(props) => (
@ -55,9 +55,9 @@ export const CallTypeDropdown: FC<Props> = ({ callType, setCallType }) => {
<CheckIcon className={menuStyles.checkIcon} />
)}
</Item>
<Item key={CallType.Radio} textValue="Radio call">
<Item key={CallType.Radio} textValue="Walkie-talkie call">
<MicIcon />
<span>Radio call</span>
<span>Walkie-talkie call</span>
{callType === CallType.Radio && (
<CheckIcon className={menuStyles.checkIcon} />
)}

2
src/home/RegisteredView.jsx
View File

@ -80,7 +80,7 @@ export function RegisteredView({ client }) {
}, [history, existingRoomId]);
const callNameLabel =
callType === CallType.Video ? "Video call name" : "Radio call name";
callType === CallType.Video ? "Video call name" : "Walkie-talkie call name";
return (
<>

2
src/home/UnauthenticatedView.jsx
View File

@ -104,7 +104,7 @@ export function UnauthenticatedView() {
);
const callNameLabel =
callType === CallType.Video ? "Video call name" : "Radio call name";
callType === CallType.Video ? "Video call name" : "Walkie-talkie call name";
return (
<>

38
src/index.css
View File

@ -1,5 +1,5 @@
/*
Copyright 2021 New Vector Ltd
Copyright 2021-2022 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -25,21 +25,19 @@ limitations under the License.
:root {
--inter-unicode-range: U+0000-20e2, U+20e4-23ce, U+23d0-24c1, U+24c3-259f,
U+25c2-2664, U+2666-2763, U+2765-2b05, U+2b07-2b1b, U+2b1d-10FFFF;
--primaryColor: #0dbd8b;
--primaryColor-20: #0dbd8b33;
--accent: #0dbd8b;
--accent-20: #0dbd8b33;
--alert: #ff5b55;
--alert-20: #ff5b5533;
--bgColor1: #15191e;
--bgColor2: #21262c;
--bgColor3: #444;
--bgColor4: #394049;
--bgColor5: #8d97a5;
--textColor1: #fff;
--textColor2: #6f7882;
--textColor3: #8e99a4;
--textColor4: #a9b2bc;
--inputBorderColor: #394049;
--inputBorderColorFocused: #0086e6;
--linkColor: #0086e6;
--links: #0086e6;
--primary-content: #ffffff;
--secondary-content: #a9b2bc;
--tertiary-content: #8e99a4;
--quaternary-content: #6f7882;
--quinary-content: #394049;
--system: #21262c;
--background: #15191e;
--bgColor3: #444; /* This isn't found anywhere in the designs or Compound */
}
@font-face {
@ -123,8 +121,8 @@ limitations under the License.
}
body {
background-color: var(--bgColor1);
color: var(--textColor1);
background-color: var(--background);
color: var(--primary-content);
color-scheme: dark;
margin: 0;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
@ -184,7 +182,7 @@ p {
}
a {
color: var(--primaryColor);
color: var(--accent);
text-decoration: none;
}
@ -196,8 +194,8 @@ a:active {
hr {
width: calc(100% - 24px);
border: none;
border-top: 1px solid var(--bgColor4);
color: var(--textColor2);
border-top: 1px solid var(--quinary-content);
color: var(--quaternary-content);
overflow: visible;
text-align: center;
height: 5px;

4
src/input/AvatarInputField.module.css
View File

@ -26,7 +26,7 @@
position: absolute;
bottom: 11px;
right: -4px;
background-color: var(--bgColor4);
background-color: var(--quinary-content);
width: 20px;
height: 20px;
border-radius: 10px;
@ -37,5 +37,5 @@
}
.removeButton {
color: #0dbd8b;
color: var(--accent);
}

14
src/input/Input.jsx
View File

@ -39,7 +39,18 @@ export function Field({ children, className, ...rest }) {
export const InputField = forwardRef(
(
{ id, label, className, type, checked, prefix, suffix, disabled, ...rest },
{
id,
label,
className,
type,
checked,
prefix,
suffix,
description,
disabled,
...rest
},
ref
) => {
return (
@ -82,6 +93,7 @@ export const InputField = forwardRef(
{label}
</label>
{suffix && <span>{suffix}</span>}
{description && <p className={styles.description}>{description}</p>}
</Field>
);
}

38
src/input/Input.module.css
View File

@ -26,7 +26,7 @@
.inputField {
border-radius: 4px;
transition: border-color 0.25s;
border: 1px solid var(--inputBorderColor);
border: 1px solid var(--quinary-content);
}
.inputField input,
@ -36,8 +36,8 @@
border: none;
border-radius: 4px;
padding: 12px 9px 10px 9px;
color: var(--textColor1);
background-color: var(--bgColor1);
color: var(--primary-content);
background-color: var(--background);
flex: 1;
min-width: 0;
}
@ -45,7 +45,7 @@
.inputField.disabled input,
.inputField.disabled textarea,
.inputField.disabled span {
color: var(--textColor2);
color: var(--quaternary-content);
}
.inputField span {
@ -65,13 +65,13 @@
.inputField input:placeholder-shown:focus::placeholder,
.inputField textarea:placeholder-shown:focus::placeholder {
transition: color 0.25s ease-in 0.1s;
color: var(--textColor2);
color: var(--quaternary-content);
}
.inputField label {
transition: font-size 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s,
top 0.25s ease-out 0.1s, background-color 0.25s ease-out 0.1s;
color: var(--textColor3);
color: var(--tertiary-content);
background-color: transparent;
font-size: 15px;
position: absolute;
@ -87,7 +87,7 @@
}
.inputField:focus-within {
border-color: var(--inputBorderColorFocused);
border-color: var(--links);
}
.inputField input:focus,
@ -101,7 +101,7 @@
.inputField textarea:focus + label,
.inputField textarea:not(:placeholder-shown) + label,
.inputField.prefix textarea + label {
background-color: var(--bgColor2);
background-color: var(--system);
transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
font-size: 10px;
@ -112,19 +112,21 @@
.inputField input:focus + label,
.inputField textarea:focus + label {
color: var(--inputBorderColorFocused);
color: var(--links);
}
.checkboxField {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.checkboxField label {
display: flex;
align-items: center;
flex-grow: 1;
font-size: 13px;
font-size: 15px;
line-height: 24px;
}
.checkboxField input {
@ -154,12 +156,12 @@
}
.checkbox svg * {
stroke: #fff;
stroke: var(--primary-content);
}
.checkboxField input[type="checkbox"]:checked + label > .checkbox {
background: var(--primaryColor);
border-color: var(--primaryColor);
background: var(--accent);
border-color: var(--accent);
}
.checkboxField input[type="checkbox"]:checked + label > .checkbox svg {
@ -167,12 +169,18 @@
}
.checkboxField:focus-within .checkbox {
border: 1.5px solid var(--inputBorderColorFocused) !important;
border: 1.5px solid var(--links) !important;
}
.errorMessage {
margin: 0;
font-size: 13px;
color: #ff5b55;
color: var(--alert);
font-weight: 600;
}
.description {
color: var(--secondary-content);
margin-left: 26px;
width: 100%; /* Ensure that it breaks onto the next row */
}

6
src/input/SelectInput.module.css
View File

@ -17,11 +17,11 @@
align-items: center;
justify-content: space-between;
padding: 0 12px;
background-color: var(--bgColor1);
background-color: var(--background);
border-radius: 8px;
border: 1px solid var(--inputBorderColor);
border: 1px solid var(--quinary-content);
font-size: 15px;
color: var(--textColor1);
color: var(--primary-content);
height: 40px;
max-width: 100%;
width: 100%;

10
src/input/Toggle.module.css
View File

@ -11,7 +11,7 @@
height: 24px;
border: none;
border-radius: 21px;
background-color: #6f7882;
background-color: var(--quaternary-content);
cursor: pointer;
margin-right: 8px;
}
@ -22,7 +22,7 @@
width: 20px;
height: 20px;
border-radius: 21px;
background-color: #15191e;
background-color: var(--background);
left: 2px;
top: 2px;
}
@ -30,11 +30,11 @@
.label {
padding: 10px 8px;
line-height: 24px;
color: #6f7882;
color: var(--quaternary-content);
}
.toggle.on .button {
background-color: #0dbd8b;
background-color: var(--accent);
}
.toggle.on .ball {
@ -42,5 +42,5 @@
}
.toggle.on .label {
color: #ffffff;
color: var(--primary-content);
}

57
src/main.jsx → src/main.tsx
View File

@ -1,5 +1,5 @@
/*
Copyright 2021 New Vector Ltd
Copyright 2021-2022 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -23,10 +23,11 @@ import "matrix-js-sdk/src/browser-index";
import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import "./index.css";
import App from "./App";
import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";
import "./index.css";
import App from "./App";
import { ErrorView } from "./FullScreenView";
import { init as initRageshake } from "./settings/rageshake";
import { InspectorContextProvider } from "./room/GroupCallInspector";
@ -37,30 +38,50 @@ console.info(`matrix-video-chat ${import.meta.env.VITE_APP_VERSION || "dev"}`);
if (import.meta.env.VITE_CUSTOM_THEME) {
const style = document.documentElement.style;
style.setProperty("--primaryColor", import.meta.env.VITE_PRIMARY_COLOR);
style.setProperty("--bgColor1", import.meta.env.VITE_BG_COLOR_1);
style.setProperty("--bgColor2", import.meta.env.VITE_BG_COLOR_2);
style.setProperty("--bgColor3", import.meta.env.VITE_BG_COLOR_3);
style.setProperty("--bgColor4", import.meta.env.VITE_BG_COLOR_4);
style.setProperty("--bgColor5", import.meta.env.VITE_BG_COLOR_5);
style.setProperty("--textColor1", import.meta.env.VITE_TEXT_COLOR_1);
style.setProperty("--textColor2", import.meta.env.VITE_TEXT_COLOR_2);
style.setProperty("--textColor4", import.meta.env.VITE_TEXT_COLOR_4);
style.setProperty("--accent", import.meta.env.VITE_THEME_ACCENT as string);
style.setProperty(
"--inputBorderColor",
import.meta.env.VITE_INPUT_BORDER_COLOR
"--accent-20",
import.meta.env.VITE_THEME_ACCENT_20 as string
);
style.setProperty("--alert", import.meta.env.VITE_THEME_ALERT as string);
style.setProperty(
"--alert-20",
import.meta.env.VITE_THEME_ALERT_20 as string
);
style.setProperty("--links", import.meta.env.VITE_THEME_LINKS as string);
style.setProperty(
"--primary-content",
import.meta.env.VITE_THEME_PRIMARY_CONTENT as string
);
style.setProperty(
"--inputBorderColorFocused",
import.meta.env.VITE_INPUT_BORDER_COLOR_FOCUSED
"--secondary-content",
import.meta.env.VITE_THEME_SECONDARY_CONTENT as string
);
style.setProperty(
"--tertiary-content",
import.meta.env.VITE_THEME_TERTIARY_CONTENT as string
);
style.setProperty(
"--quaternary-content",
import.meta.env.VITE_THEME_QUATERNARY_CONTENT as string
);
style.setProperty(
"--quinary-content",
import.meta.env.VITE_THEME_QUINARY_CONTENT as string
);
style.setProperty("--system", import.meta.env.VITE_THEME_SYSTEM as string);
style.setProperty(
"--background",
import.meta.env.VITE_THEME_BACKGROUND as string
);
}
const history = createBrowserHistory();
Sentry.init({
dsn: import.meta.env.VITE_SENTRY_DSN,
environment: import.meta.env.VITE_SENTRY_ENVIRONMENT ?? "production",
dsn: import.meta.env.VITE_SENTRY_DSN as string,
environment:
(import.meta.env.VITE_SENTRY_ENVIRONMENT as string) ?? "production",
integrations: [
new Integrations.BrowserTracing({
routingInstrumentation: Sentry.reactRouterV5Instrumentation(history),

2
src/popover/Popover.module.css
View File

@ -2,7 +2,7 @@
display: flex;
flex-direction: column;
width: 194px;
background: var(--bgColor2);
background: var(--system);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 8px;
}

2
src/room/AudioPreview.jsx
View File

@ -33,7 +33,7 @@ export function AudioPreview({
}) {
return (
<>
<h1>{`${roomName} - Radio Call`}</h1>
<h1>{`${roomName} - Walkie-talkie call`}</h1>
<div className={styles.preview}>
{state === GroupCallState.LocalCallFeedUninitialized && (
<Body fontWeight="semiBold" className={styles.microphonePermissions}>

6
src/room/GroupCallInspector.module.css
View File

@ -1,5 +1,5 @@
.inspector {
background-color: var(--bgColor2);
background-color: var(--system);
}
.scrollContainer {
@ -20,6 +20,6 @@
.sequenceDiagramViewer :global(.messageText) {
font-size: 12px;
fill: var(--textColor1) !important;
stroke: var(--textColor1) !important;
fill: var(--primary-content) !important;
stroke: var(--primary-content) !important;
}

10
src/room/PTTButton.module.css
View File

@ -4,8 +4,8 @@
max-height: 232px;
max-width: 232px;
border-radius: 116px;
color: ##fff;
border: 6px solid #0dbd8b;
color: var(--primary-content);
border: 6px solid var(--accent);
background-color: #21262c;
position: relative;
padding: 0;
@ -13,11 +13,11 @@
}
.talking {
background-color: #0dbd8b;
background-color: var(--accent);
cursor: unset;
}
.error {
background-color: #ff5b55;
border-color: #ff5b55;
background-color: var(--alert);
border-color: var(--alert);
}

2
src/room/PTTButton.tsx
View File

@ -143,7 +143,7 @@ export const PTTButton: React.FC<Props> = ({
});
const shadowColor = showTalkOverError
? "var(--alert-20)"
: "var(--primaryColor-20)";
: "var(--accent-20)";
return (
<animated.button

2
src/room/PTTCallView.module.css
View File

@ -31,7 +31,7 @@
}
.participants > p {
color: #a9b2bc;
color: var(--secondary-content);
margin-bottom: 8px;
}

3
src/settings/SettingsModal.tsx
View File

@ -99,9 +99,10 @@ export const SettingsModal = (props: Props) => {
<FieldRow>
<InputField
id="spatialAudio"
label="Spatial audio (experimental)"
label="Spatial audio"
type="checkbox"
checked={spatialAudio}
description="This will make a speaker's audio seem as if it is coming from where their tile is positioned on screen. (Experimental feature: this may impact the stability of audio.)"
// @ts-ignore
onChange={(event: Event) => setSpatialAudio(event.target.checked)}
/>

10
src/tabs/Tabs.module.css
View File

@ -25,12 +25,12 @@
}
.tab > * {
color: var(--textColor4);
color: var(--secondary-content);
margin: 0 8px 0 0;
}
.tab svg * {
fill: var(--textColor4);
fill: var(--secondary-content);
}
.tab > :last-child {
@ -38,15 +38,15 @@
}
.tab.selected {
background-color: #0dbd8b;
background-color: var(--accent);
}
.tab.selected * {
color: #ffffff;
color: var(--primary-content);
}
.tab.selected svg * {
fill: #ffffff;
fill: var(--primary-content);
}
.tab.disabled {

4
src/typography/Typography.module.css
View File

@ -21,11 +21,11 @@
}
.link {
color: var(--linkColor);
color: var(--links);
}
.primary {
color: var(--primaryColor);
color: var(--accent);
}
.overflowEllipsis {

2
src/video-grid/VideoTile.module.css
View File

@ -37,7 +37,7 @@
bottom: -1px;
content: "";
border-radius: 20px;
box-shadow: inset 0 0 0 4px #0dbd8b !important;
box-shadow: inset 0 0 0 4px var(--accent) !important;
}
.videoTile.screenshare > video {

4
yarn.lock
View File

@ -8597,9 +8597,9 @@ matrix-events-sdk@^0.0.1-beta.7:
resolved "https://registry.yarnpkg.com/matrix-events-sdk/-/matrix-events-sdk-0.0.1-beta.7.tgz#5ffe45eba1f67cc8d7c2377736c728b322524934"
integrity sha512-9jl4wtWanUFSy2sr2lCjErN/oC8KTAtaeaozJtrgot1JiQcEI4Rda9OLgQ7nLKaqb4Z/QUx/fR3XpDzm5Jy1JA==
"matrix-js-sdk@github:matrix-org/matrix-js-sdk#aa0d3bd1f5a006d151f826e6b8c5f286abb6e960":
"matrix-js-sdk@github:matrix-org/matrix-js-sdk#34ef7bc64aa52d1aa78f2e779150922892e287de":
version "17.2.0"
resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/aa0d3bd1f5a006d151f826e6b8c5f286abb6e960"
resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/34ef7bc64aa52d1aa78f2e779150922892e287de"
dependencies:
"@babel/runtime" "^7.12.5"
another-json "^0.2.0"