Call: improve styling, honor dark/bright mode - #175

enricoros · Jan 18, 2024 · 6fee9a6 · 6fee9a6
1 parent 0873000
commit 6fee9a6
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 38 deletions.
diff --git a/src/apps/call/AppCall.tsx b/src/apps/call/AppCall.tsx
@@ -9,6 +9,10 @@ import { Contacts } from './Contacts';
 import { Telephone } from './Telephone';
 
 
+// set to false to try out non-iverted colors
+const DEFAULT_INVERT_COLORS = false;
+
+
 export function AppCall() {
 
   // external state
@@ -26,18 +30,21 @@ export function AppCall() {
 
 
   return (
-    <Sheet variant='solid' color='neutral' invertedColors sx={{
-      // take the full V-area (we're inside PageWrapper) and scroll as needed
-      flex: 1,
-      overflowY: 'auto',
-
-      // container will take the full v-area
-      display: 'grid',
-    }}>
+    <Sheet
+      variant={DEFAULT_INVERT_COLORS ? 'solid' : 'soft'}
+      invertedColors={DEFAULT_INVERT_COLORS /* even in 'soft', =true makes icons look prettier */}
+      sx={{
+        // take the full V-area (we're inside PageWrapper) and scroll as needed
+        flex: 1,
+        overflowY: 'auto',
+
+        // container will take the full v-area
+        display: 'grid',
+      }}>
 
       <Container maxWidth='sm' sx={{
         display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly',
-        gap: { xs: 2, md: 4 },
+        gap: { xs: 1, md: 3 },
       }}>
 
         {!personaId ? (

diff --git a/src/apps/call/CallWizard.tsx b/src/apps/call/CallWizard.tsx
@@ -10,6 +10,7 @@ import MicIcon from '@mui/icons-material/Mic';
 import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver';
 import WarningIcon from '@mui/icons-material/Warning';
 
+import { cssRainbowColorKeyframes } from '~/common/app.theme';
 import { navigateBack } from '~/common/app.routes';
 import { useCapabilityBrowserSpeechRecognition, useCapabilityElevenLabs } from '~/common/components/useCapabilities';
 import { useChatStore } from '~/common/state/store-chats';
@@ -119,17 +120,11 @@ export function CallWizard(props: { strict?: boolean, conversationId?: string, c
 
     <Box sx={{ flexGrow: 0.5 }} />
 
-    <Typography level='title-lg' sx={{ fontSize: '3rem', fontWeight: 200, lineHeight: '1.5em', textAlign: 'center' }}>
+    <Typography level='title-lg' sx={{ fontSize: '3rem', fontWeight: 200, textAlign: 'center' }}>
       Welcome to<br />
-      <Typography
-        component='span'
-        sx={{
-          color: '#f0f4f8',
-          backgroundColor: 'primary.solidActiveBg', px: 1, py: 0.5,
-          animation: `${cssRainbowBackgroundKeyframes} 15s linear infinite`,
-        }}>
+      <Box component='span' sx={{ animation: `${cssRainbowColorKeyframes} 15s linear infinite` }}>
         your first call
-      </Typography>
+      </Box>
     </Typography>
 
     <Box sx={{ flexGrow: 0.5 }} />
@@ -201,14 +196,21 @@ export function CallWizard(props: { strict?: boolean, conversationId?: string, c
       </Typography>
 
       <IconButton
-        size='lg' variant={allGood ? 'soft' : 'solid'} color={allGood ? 'success' : 'danger'}
-        onClick={handleFinishButton} sx={{ borderRadius: '50px', mr: 0.5 }}
+        size='lg'
+        variant='solid' color={allGood ? 'success' : 'danger'}
+        onClick={handleFinishButton}
+        sx={{
+          borderRadius: '50px',
+          mr: 0.5,
+          // animation: `${cssRainbowBackgroundKeyframes} 15s linear infinite`,
+          // boxShadow: allGood ? 'md' : 'none',
+        }}
       >
         {allGood ? <ArrowForwardIcon sx={{ fontSize: '1.5em' }} /> : <CloseIcon sx={{ fontSize: '1.5em' }} />}
       </IconButton>
     </Box>
 
-    <Box sx={{ flexGrow: 0.5 }} />
+    <Box sx={{ flexGrow: 2 }} />
 
   </>;
 }
diff --git a/src/apps/call/Telephone.tsx b/src/apps/call/Telephone.tsx
@@ -296,7 +296,7 @@ export function Telephone(props: {
 
     <CallStatus
       callerName={isConnected ? undefined : personaName}
-      statusText={isRinging ? 'is calling you' : isDeclined ? 'call declined' : isEnded ? 'call ended' : callElapsedTime}
+      statusText={isRinging ? '' /*'is calling you'*/ : isDeclined ? 'call declined' : isEnded ? 'call ended' : callElapsedTime}
       regardingText={chatTitle}
       micError={!isMicEnabled} speakError={!isTTSEnabled}
     />
@@ -305,11 +305,18 @@ export function Telephone(props: {
     {(isConnected || isEnded) && (
       <Card variant='soft' sx={{
         flexGrow: 1,
-        minHeight: '15dvh', maxHeight: '24dvh',
-        overflow: 'auto',
+        maxHeight: '24%',
+        minHeight: '15%',
         width: '100%',
+
+        // style
+        backgroundColor: 'background.surface',
         borderRadius: 'lg',
-        flexDirection: 'column-reverse',
+        boxShadow: 'sm',
+
+        // children
+        display: 'flex', flexDirection: 'column-reverse',
+        overflow: 'auto',
       }}>
 
         {/* Messages in reverse order, for auto-scroll from the bottom */}
@@ -346,18 +353,18 @@ export function Telephone(props: {
     )}
 
     {/* Call Buttons */}
-    <Box sx={{ width: '100%', display: 'flex', justifyContent: 'space-evenly' }}>
+    <Box sx={{ width: '100%', display: 'flex', justifyContent: 'space-evenly', gap: 4 }}>
 
       {/* [ringing] Decline / Accept */}
-      {isRinging && <CallButton Icon={CallEndIcon} text='Decline' color='danger' onClick={() => setStage('declined')} />}
-      {isRinging && isEnabled && <CallButton Icon={CallIcon} text='Accept' color='success' variant='soft' onClick={() => setStage('connected')} />}
+      {isRinging && <CallButton Icon={CallEndIcon} text='Decline' color='danger' variant='solid' onClick={() => setStage('declined')} />}
+      {isRinging && isEnabled && <CallButton Icon={CallIcon} text='Accept' color='success' variant='solid' onClick={() => setStage('connected')} />}
 
       {/* [Calling] Hang / PTT (mute not enabled yet) */}
-      {isConnected && <CallButton Icon={CallEndIcon} text='Hang up' color='danger' onClick={handleCallStop} />}
+      {isConnected && <CallButton Icon={CallEndIcon} text='Hang up' color='danger' variant='soft' onClick={handleCallStop} />}
       {isConnected && (pushToTalk
           ? <CallButton Icon={MicIcon} onClick={toggleRecording}
                         text={isRecordingSpeech ? 'Listening...' : isRecording ? 'Listening' : 'Push To Talk'}
-                        variant={isRecordingSpeech ? 'solid' : isRecording ? 'soft' : 'outlined'} />
+                        variant={isRecordingSpeech ? 'solid' : isRecording ? 'soft' : 'outlined'} sx={!isRecording ? { backgroundColor: 'background.surface' } : undefined} />
           : null
         // <CallButton disabled={true} Icon={MicOffIcon} onClick={() => setMicMuted(muted => !muted)}
         //               text={micMuted ? 'Muted' : 'Mute'}

diff --git a/src/apps/call/components/CallAvatar.tsx b/src/apps/call/components/CallAvatar.tsx
@@ -19,14 +19,14 @@ const cssScaleKeyframes = keyframes`
 export function CallAvatar(props: { symbol: string, imageUrl?: string, isRinging: boolean, onClick: () => void }) {
   return (
     <Avatar
-      variant='soft' color='neutral'
       onClick={props.onClick}
       src={props.imageUrl}
       sx={{
-        '--Avatar-size': { xs: '160px', md: '200px' },
+        '--Avatar-size': { xs: '10rem', md: '11.5rem' },
         '--variant-borderWidth': '4px',
-        boxShadow: !props.imageUrl ? 'md' : null,
-        fontSize: { xs: '100px', md: '120px' },
+        backgroundColor: 'background.surface',
+        boxShadow: !props.imageUrl ? 'sm' : null,
+        fontSize: { xs: '6rem', md: '7rem' },
       }}
     >
 

diff --git a/src/apps/call/components/CallButton.tsx b/src/apps/call/components/CallButton.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { Box, ColorPaletteProp, IconButton, Typography, VariantProp } from '@mui/joy';
+import { SxProps } from '@mui/joy/styles/types';
 
 
 /**
@@ -14,6 +15,7 @@ export function CallButton(props: {
   Icon: React.FC, text: string,
   variant?: VariantProp, color?: ColorPaletteProp, disabled?: boolean,
   onClick?: () => void,
+  sx?: SxProps,
 }) {
   return (
     <Box
@@ -30,6 +32,7 @@ export function CallButton(props: {
           '--IconButton-size': { xs: '4.2rem', md: '5rem' },
           borderRadius: '50%',
           // boxShadow: 'lg',
+          ...props.sx,
         }}>
         <props.Icon />
       </IconButton>

diff --git a/src/apps/call/components/CallStatus.tsx b/src/apps/call/components/CallStatus.tsx
@@ -28,12 +28,12 @@ export function CallStatus(props: {
 
       {/*{props.llmComponent}*/}
 
-      <Typography level='body-md' sx={{ textAlign: 'center' }}>
+      {!!props.statusText && <Typography level='body-md' sx={{ textAlign: 'center' }}>
         {props.statusText}
-      </Typography>
+      </Typography>}
 
-      {!!props.regardingText && <Typography level='body-md' sx={{ textAlign: 'center', mt: 0 }}>
-        re: {props.regardingText}
+      {!!props.regardingText && <Typography level='body-md' sx={{ textAlign: 'center', mt: 1 }}>
+        Re: <Box component='span' sx={{ color: 'text.primary' }}>{props.regardingText}</Box>
       </Typography>}
 
       {props.micError && <InlineError