matt/flotilla
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Fix call icon consistency (#312)

Browse source 
Co-authored-by: Matt Lorentz <5+mplorentz@noreply.coracle.social>
Co-committed-by: Matt Lorentz <5+mplorentz@noreply.coracle.social>
This commit is contained in:
Matt Lorentz 2026-07-01 23:25:29 +00:00 committed by hodlbod
parent 61198f4f10
commit a2ab23c7ae
2 changed files with 10 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/app/components/VoiceRoomJoinDialog.svelte
View file

@ -1,7 +1,6 @@
<script lang="ts">
import {displayRelayUrl} from "@welshman/util"
import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
import Volume from "@assets/icons/volume.svg?dataurl"
import Button from "@lib/components/Button.svelte"
import FieldInline from "@lib/components/FieldInline.svelte"
@ -128,9 +127,6 @@
<Icon icon={AltArrowLeft} />
Don't join
</Button>
<Button class="button button-primary" onclick={joinVoice}>
Join voice
<Icon icon={AltArrowRight} />
</Button>
<Button class="button button-primary" onclick={joinVoice}>Join voice</Button>
</ModalFooter>
</Modal>

24
src/app/components/VoiceWidget.svelte
View file

@ -6,10 +6,11 @@
import cx from "classnames"
import {displayRelayUrl} from "@welshman/util"
import Microphone from "@assets/icons/microphone.svg?dataurl"
import MicrophoneOff from "@assets/icons/microphone-off.svg?dataurl"
import VideocameraOff from "@assets/icons/videocamera-off.svg?dataurl"
import VideocameraRecord from "@assets/icons/videocamera-record.svg?dataurl"
import Monitor from "@assets/icons/monitor.svg?dataurl"
import PhoneRounded from "@assets/icons/phone-rounded.svg?dataurl"
import EndCall from "@assets/icons/end-call-rounded.svg?dataurl"
import PhoneCallingRounded from "@assets/icons/phone-calling-rounded.svg?dataurl"
import ChatRound from "@assets/icons/chat-round.svg?dataurl"
import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
@ -162,7 +163,7 @@
</Button>
{/if}
</div>
<div class="flex flex-wrap items-center gap-2">
<div class="flex items-center gap-1.5">
{#if $callState === CallState.Joining}
<Spinner size="sm" />
<Button
@ -176,23 +177,16 @@
data-tip={$callMicMuted ? "Unmute" : "Mute"}
class={cx(
"button button-sm button-square tip tip-top",
$callMicMuted ? "button-error" : "button-neutral",
$callMicMuted ? "button-neutral" : "button-primary",
)}
onclick={toggleMute}>
<span class="relative inline-flex">
<Icon icon={Microphone} size={4} />
{#if $callMicMuted}
<span
class="absolute left-1/2 top-1/2 h-0.5 w-6 -translate-x-1/2 -translate-y-1/2 -rotate-45 rounded-full bg-current"
aria-hidden="true"></span>
{/if}
</span>
<Icon icon={$callMicMuted ? MicrophoneOff : Microphone} size={$callMicMuted ? 4 : 4.5} />
</Button>
<Button
data-tip={$currentCallSession.cameraOn ? "Turn off camera" : "Turn on camera"}
class={cx(
"button button-sm button-square tip tip-top",
$currentCallSession.cameraOn ? "button-primary" : "button-error",
$currentCallSession.cameraOn ? "button-primary" : "button-neutral",
)}
onclick={toggleCamera}>
<Icon icon={$currentCallSession.cameraOn ? VideocameraRecord : VideocameraOff} size={4} />
@ -205,7 +199,7 @@
$currentCallSession.screenShareOn ? "button-primary" : "button-neutral",
)}
onclick={toggleScreenShare}>
<Icon icon={Monitor} size={4} />
<Icon icon={Monitor} size={3.75} />
</Button>
{/if}
<Button
@ -218,14 +212,14 @@
data-tip="Leave room"
class="button button-error button-sm button-square tip tip-top"
onclick={leaveVoiceRoom}>
<Icon icon={PhoneRounded} size={4} />
<Icon icon={EndCall} size={4.5} />
</Button>
{:else}
<Button
data-tip="Join Voice"
class="button button-primary button-sm button-square tip tip-top"
onclick={openJoinDialog}>
<Icon icon={PhoneCallingRounded} size={4} />
<Icon icon={PhoneCallingRounded} size={4.5} />
</Button>
{/if}
</div>