diff --git a/.env.example b/.env.example index 2f62d61..7359d2c 100644 --- a/.env.example +++ b/.env.example @@ -27,3 +27,4 @@ # VITE_THEME_QUINARY_CONTENT=#394049 # VITE_THEME_SYSTEM=#21262c # VITE_THEME_BACKGROUND=#15191e +# VITE_THEME_BACKGROUND_85=#15191ed9 diff --git a/src/Modal.module.css b/src/Modal.module.css index bf654d2..96bda6f 100644 --- a/src/Modal.module.css +++ b/src/Modal.module.css @@ -28,6 +28,7 @@ } .modalHeader h3 { + font-weight: 600; font-size: 24px; margin: 0; } diff --git a/src/button/Button.tsx b/src/button/Button.tsx index 008cb01..2c2605f 100644 --- a/src/button/Button.tsx +++ b/src/button/Button.tsx @@ -30,7 +30,7 @@ import { ReactComponent as SettingsIcon } from "../icons/Settings.svg"; import { ReactComponent as AddUserIcon } from "../icons/AddUser.svg"; import { ReactComponent as ArrowDownIcon } from "../icons/ArrowDown.svg"; import { TooltipTrigger } from "../Tooltip"; -import { ReactComponent as OverflowIcon } from "../icons/Overflow.svg"; +import { VolumeIcon } from "./VolumeIcon"; export type ButtonVariant = | "default" @@ -246,11 +246,18 @@ export function InviteButton({ ); } -export function OptionsButton(props: Omit) { +interface AudioButtonProps extends Omit { + /** + * A number between 0 and 1 + */ + volume: number; +} + +export function AudioButton({ volume, ...rest }: AudioButtonProps) { return ( - "Options"}> - ); diff --git a/src/button/VolumeIcon.tsx b/src/button/VolumeIcon.tsx new file mode 100644 index 0000000..d4958e4 --- /dev/null +++ b/src/button/VolumeIcon.tsx @@ -0,0 +1,35 @@ +/* +Copyright 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. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from "react"; + +import { ReactComponent as AudioMuted } from "../icons/AudioMuted.svg"; +import { ReactComponent as AudioLow } from "../icons/AudioLow.svg"; +import { ReactComponent as Audio } from "../icons/Audio.svg"; + +interface Props { + /** + * Number between 0 and 1 + */ + volume: number; +} + +export function VolumeIcon({ volume }: Props) { + if (volume <= 0) return ; + if (volume <= 0.5) return ; + return