From 1d956535b87f2122c530b3f5f5b025973f696ac3 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Wed, 12 Oct 2022 14:06:07 +1100
Subject: [PATCH] feat: themed all of the call ui

---
 ts/components/SplitViewContainer.tsx          | 13 +--
 ts/components/calling/CallButtons.tsx         | 97 ++++++++++++-------
 .../calling/DraggableCallContainer.tsx        |  3 +-
 .../calling/InConversationCallContainer.tsx   |  6 +-
 .../icon/DropDownAndToggleButton.tsx          | 56 ++++++++---
 ts/themes/classicDark.ts                      | 15 +++
 ts/themes/classicLight.ts                     | 15 +++
 ts/themes/oceanDark.ts                        | 15 +++
 ts/themes/oceanLight.ts                       | 15 +++
 ts/themes/variableColors.tsx                  | 17 ++++
 10 files changed, 189 insertions(+), 63 deletions(-)

diff --git a/ts/components/SplitViewContainer.tsx b/ts/components/SplitViewContainer.tsx
index b45b2651b..cdca3d3ff 100644
--- a/ts/components/SplitViewContainer.tsx
+++ b/ts/components/SplitViewContainer.tsx
@@ -7,7 +7,7 @@ type SplitViewProps = {
   disableTop: boolean;
 };
 
-const SlyledSplitView = styled.div`
+const StyledSplitView = styled.div`
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -17,15 +17,15 @@ const Divider = styled.div`
   width: 100%;
   cursor: row-resize;
   height: 5px;
-  background-color: var(--background-primary-color);
-  margin-top: 2px;
+  background-color: var(--in-call-container-background-color);
+  padding-top: 2px;
 `;
 
 const DividerHandle = styled.div`
   width: 10%;
   height: 5px;
   cursor: row-resize;
-  background-color: var(--text-primary-color);
+  background-color: var(--text-secondary-color);
   flex-shrink: 0;
   position: relative;
   left: 50%;
@@ -36,6 +36,7 @@ const StyledTop = styled.div`
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  border-bottom: 1px solid var(--border-color);
 `;
 
 const TopSplitViewPanel = ({
@@ -125,7 +126,7 @@ export const SplitViewContainer: React.FunctionComponent<SplitViewProps> = ({
   });
 
   return (
-    <SlyledSplitView ref={splitPaneRef}>
+    <StyledSplitView ref={splitPaneRef}>
       {!disableTop && (
         <TopSplitViewPanel topHeight={topHeight} setTopHeight={setTopHeight}>
           {top}
@@ -135,6 +136,6 @@ export const SplitViewContainer: React.FunctionComponent<SplitViewProps> = ({
         </TopSplitViewPanel>
       )}
       {bottom}
-    </SlyledSplitView>
+    </StyledSplitView>
   );
 };
diff --git a/ts/components/calling/CallButtons.tsx b/ts/components/calling/CallButtons.tsx
index ac877568d..aae16de5f 100644
--- a/ts/components/calling/CallButtons.tsx
+++ b/ts/components/calling/CallButtons.tsx
@@ -58,11 +58,11 @@ const audioOutputTriggerId = 'audio-output-menu-trigger-id';
 export const VideoInputButton = ({
   currentConnectedCameras,
   localStreamVideoIsMuted,
-  hideArrowIcon = false,
+  isFullScreen = false,
 }: {
   currentConnectedCameras: Array<InputItem>;
   localStreamVideoIsMuted: boolean;
-  hideArrowIcon?: boolean;
+  isFullScreen?: boolean;
 }) => {
   return (
     <>
@@ -75,7 +75,7 @@ export const VideoInputButton = ({
         onArrowClick={e => {
           showVideoInputMenu(currentConnectedCameras, e);
         }}
-        hidePopoverArrow={hideArrowIcon}
+        isFullScreen={isFullScreen}
       />
 
       <VideoInputMenu triggerId={videoTriggerId} camerasList={currentConnectedCameras} />
@@ -127,11 +127,11 @@ const showAudioInputMenu = (
 export const AudioInputButton = ({
   currentConnectedAudioInputs,
   isAudioMuted,
-  hideArrowIcon = false,
+  isFullScreen = false,
 }: {
   currentConnectedAudioInputs: Array<InputItem>;
   isAudioMuted: boolean;
-  hideArrowIcon?: boolean;
+  isFullScreen?: boolean;
 }) => {
   return (
     <>
@@ -144,7 +144,7 @@ export const AudioInputButton = ({
         onArrowClick={e => {
           showAudioInputMenu(currentConnectedAudioInputs, e);
         }}
-        hidePopoverArrow={hideArrowIcon}
+        isFullScreen={isFullScreen}
       />
 
       <AudioInputMenu triggerId={audioTriggerId} audioInputsList={currentConnectedAudioInputs} />
@@ -196,11 +196,11 @@ const showAudioOutputMenu = (
 export const AudioOutputButton = ({
   currentConnectedAudioOutputs,
   isAudioOutputMuted,
-  hideArrowIcon = false,
+  isFullScreen = false,
 }: {
   currentConnectedAudioOutputs: Array<InputItem>;
   isAudioOutputMuted: boolean;
-  hideArrowIcon?: boolean;
+  isFullScreen?: boolean;
 }) => {
   return (
     <>
@@ -213,7 +213,7 @@ export const AudioOutputButton = ({
         onArrowClick={e => {
           showAudioOutputMenu(currentConnectedAudioOutputs, e);
         }}
-        hidePopoverArrow={hideArrowIcon}
+        isFullScreen={isFullScreen}
       />
 
       <AudioOutputMenu
@@ -224,6 +224,19 @@ export const AudioOutputButton = ({
   );
 };
 
+const StyledCallActionButton = styled.div<{ isFullScreen: boolean }>`
+  .session-icon-button {
+    background-color: var(--call-buttons-action-background-color);
+    border-radius: 50%;
+    transition-duration: var(--default-duration);
+    ${props => props.isFullScreen && 'opacity: 0.4;'}
+    &:hover {
+      background-color: var(--call-buttons-action-background-hover-color);
+      ${props => props.isFullScreen && 'opacity: 1;'}
+    }
+  }
+`;
+
 const ShowInFullScreenButton = ({ isFullScreen }: { isFullScreen: boolean }) => {
   const dispatch = useDispatch();
 
@@ -236,20 +249,21 @@ const ShowInFullScreenButton = ({ isFullScreen }: { isFullScreen: boolean }) =>
   };
 
   return (
-    <SessionIconButton
-      iconSize={60}
-      iconPadding="20px"
-      iconType="fullscreen"
-      backgroundColor="var(--white-color)"
-      borderRadius="50%"
-      onClick={showInFullScreen}
-      iconColor="var(--black-color)"
-      margin="10px"
-    />
+    <StyledCallActionButton isFullScreen={isFullScreen}>
+      <SessionIconButton
+        iconSize={60}
+        iconPadding="20px"
+        iconType="fullscreen"
+        borderRadius="50%"
+        onClick={showInFullScreen}
+        iconColor="var(--call-buttons-action-icon-color)"
+        margin="10px"
+      />
+    </StyledCallActionButton>
   );
 };
 
-export const HangUpButton = () => {
+export const HangUpButton = ({ isFullScreen }: { isFullScreen: boolean }) => {
   const ongoingCallPubkey = useSelector(getHasOngoingCallWithPubkey);
 
   const handleEndCall = async () => {
@@ -260,16 +274,17 @@ export const HangUpButton = () => {
   };
 
   return (
-    <SessionIconButton
-      iconSize={60}
-      iconPadding="20px"
-      iconType="hangup"
-      backgroundColor="var(--white-color)"
-      borderRadius="50%"
-      onClick={handleEndCall}
-      iconColor="var(--red-color)"
-      margin="10px"
-    />
+    <StyledCallActionButton isFullScreen={isFullScreen}>
+      <SessionIconButton
+        iconSize={60}
+        iconPadding="20px"
+        iconType="hangup"
+        iconColor="var(--danger-color)"
+        borderRadius="50%"
+        onClick={handleEndCall}
+        margin="10px"
+      />
+    </StyledCallActionButton>
   );
 };
 
@@ -324,7 +339,7 @@ const handleSpeakerToggle = async (
   }
 };
 
-const StyledCallWindowControls = styled.div<{ makeVisible: boolean }>`
+const StyledCallWindowControls = styled.div<{ isFullScreen: boolean; makeVisible: boolean }>`
   position: absolute;
 
   bottom: 0px;
@@ -340,9 +355,17 @@ const StyledCallWindowControls = styled.div<{ makeVisible: boolean }>`
   transition: all 0.25s ease-in-out;
 
   display: flex;
-
   justify-content: center;
   opacity: ${props => (props.makeVisible ? 1 : 0)};
+
+  ${props =>
+    props.isFullScreen &&
+    `
+    opacity: 0.4;
+    &:hover {
+      opacity: 1;
+    }
+  `}
 `;
 
 export const CallWindowControls = ({
@@ -384,25 +407,25 @@ export const CallWindowControls = ({
     };
   }, [isFullScreen]);
   return (
-    <StyledCallWindowControls makeVisible={makeVisible}>
+    <StyledCallWindowControls isFullScreen={isFullScreen} makeVisible={makeVisible}>
       {!remoteStreamVideoIsMuted && <ShowInFullScreenButton isFullScreen={isFullScreen} />}
 
       <VideoInputButton
         currentConnectedCameras={currentConnectedCameras}
         localStreamVideoIsMuted={localStreamVideoIsMuted}
-        hideArrowIcon={isFullScreen}
+        isFullScreen={isFullScreen}
       />
       <AudioInputButton
         currentConnectedAudioInputs={currentConnectedAudioInputs}
         isAudioMuted={isAudioMuted}
-        hideArrowIcon={isFullScreen}
+        isFullScreen={isFullScreen}
       />
       <AudioOutputButton
         currentConnectedAudioOutputs={currentConnectedAudioOutputs}
         isAudioOutputMuted={isAudioOutputMuted}
-        hideArrowIcon={isFullScreen}
+        isFullScreen={isFullScreen}
       />
-      <HangUpButton />
+      <HangUpButton isFullScreen={isFullScreen} />
     </StyledCallWindowControls>
   );
 };
diff --git a/ts/components/calling/DraggableCallContainer.tsx b/ts/components/calling/DraggableCallContainer.tsx
index b0ab7c29a..0e44059a3 100644
--- a/ts/components/calling/DraggableCallContainer.tsx
+++ b/ts/components/calling/DraggableCallContainer.tsx
@@ -15,13 +15,14 @@ import { SectionType } from '../../state/ducks/section';
 export const DraggableCallWindow = styled.div`
   position: absolute;
   z-index: 9;
-  box-shadow: 0px 0px 10px 0px var(--black-color);
+  box-shadow: var(--modal-drop-shadow);
   max-height: 300px;
   width: 12vw;
   display: flex;
   flex-direction: column;
   background-color: var(--modal-background-content-color);
   border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
 `;
 
 export const StyledVideoElement = styled.video<{ isVideoMuted: boolean }>`
diff --git a/ts/components/calling/InConversationCallContainer.tsx b/ts/components/calling/InConversationCallContainer.tsx
index 46f7919fc..9134af6aa 100644
--- a/ts/components/calling/InConversationCallContainer.tsx
+++ b/ts/components/calling/InConversationCallContainer.tsx
@@ -34,7 +34,7 @@ const InConvoCallWindow = styled.div`
   padding: 1rem;
   display: flex;
 
-  background-color: hsl(0, 0%, 15.7%);
+  background-color: var(--in-call-container-background-color);
 
   flex-shrink: 1;
   min-height: 80px;
@@ -68,8 +68,8 @@ const StyledCenteredLabel = styled.div`
   transform: translateX(-50%);
   height: min-content;
   white-space: nowrap;
-  color: var(--white-color);
-  text-shadow: 0px 0px 8px var(--white-color);
+  color: var(--in-call-container-text-color);
+  text-shadow: var(--in-call-container-text-shadow);
   z-index: 5;
 `;
 
diff --git a/ts/components/icon/DropDownAndToggleButton.tsx b/ts/components/icon/DropDownAndToggleButton.tsx
index 74e49e38e..587d4ed00 100644
--- a/ts/components/icon/DropDownAndToggleButton.tsx
+++ b/ts/components/icon/DropDownAndToggleButton.tsx
@@ -7,19 +7,38 @@ type SProps = {
   onArrowClick: (e: React.MouseEvent<HTMLDivElement>) => void;
   onMainButtonClick: (e: React.MouseEvent<HTMLDivElement>) => void;
   isMuted?: boolean;
-  hidePopoverArrow?: boolean;
+  isFullScreen?: boolean;
   iconType: 'microphone' | 'camera' | 'volume';
 };
 
-const StyledRoundedButton = styled.div<{ isMuted: boolean }>`
-  background-color: ${props => (props.isMuted ? 'hsl(0,0%,40%)' : 'var(--white-color)')};
-  color: ${props => (props.isMuted ? 'var(--white-color)' : 'var(--black-color)')};
+const StyledRoundedButton = styled.div<{ isFullScreen: boolean; isMuted: boolean }>`
   border-radius: 50%;
   cursor: pointer;
+  transition-duration: var(--default-duration);
+  background-color: ${props =>
+    props.isMuted
+      ? 'var(--call-buttons-background-disabled-color)'
+      : props.isFullScreen
+      ? 'var(--call-buttons-action-background-color)'
+      : 'var(--call-buttons-background-color)'};
+  color: ${props =>
+    props.isMuted
+      ? 'var(--call-buttons-icon-disabled-color)'
+      : props.isFullScreen
+      ? 'var(--call-buttons-action-icon-color)'
+      : 'var(--call-buttons-icon-color)'};
 
-  transition-duration: 0.25s;
+  ${props => props.isFullScreen && 'opacity: 0.4;'}
   &:hover {
-    opacity: 1;
+    background-color: ${props =>
+      props.isFullScreen
+        ? 'var(--call-buttons-action-background-hover-color)'
+        : 'var(--call-buttons-background-hover-color)'};
+    color: ${props =>
+      props.isFullScreen
+        ? 'var(--call-buttons-action-icon-color)'
+        : 'var(--call-buttons-icon-color)'};
+    ${props => props.isFullScreen && 'opacity: 1;'}
   }
 `;
 
@@ -27,11 +46,6 @@ const StyledContainer = styled(StyledRoundedButton)`
   width: 60px;
   height: 60px;
   margin: 10px;
-
-  opacity: 0.4;
-  &:hover {
-    opacity: 1;
-  }
 `;
 
 const StyledMainIcon = styled.div`
@@ -44,7 +58,13 @@ const StyledArrowIcon = styled(StyledRoundedButton)`
   position: relative;
   top: -35%;
   right: -65%;
-  box-shadow: 0 0 4px 0 #b4b4b4;
+  background-color: var(--call-buttons-background-color);
+  color: var(--call-buttons-dropdown-color);
+  box-shadow: var(--call-buttons-dropdown-shadow);
+
+  &:hover {
+    background-color: var(--call-buttons-background-hover-color);
+  }
 `;
 
 const CameraIcon = (
@@ -66,7 +86,7 @@ const MicrophoneIcon = (
 );
 
 export const DropDownAndToggleButton = (props: SProps) => {
-  const { iconType, hidePopoverArrow, onArrowClick, onMainButtonClick, isMuted } = props;
+  const { iconType, isFullScreen = false, onArrowClick, onMainButtonClick, isMuted } = props;
   const arrowClickHandler = (e: React.MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
     onArrowClick(e);
@@ -81,10 +101,14 @@ export const DropDownAndToggleButton = (props: SProps) => {
     iconType === 'microphone' ? MicrophoneIcon : iconType === 'camera' ? CameraIcon : SpeakerIcon;
 
   return (
-    <StyledContainer isMuted={isMuted || false}>
+    <StyledContainer
+      className="session-call-button"
+      isFullScreen={isFullScreen}
+      isMuted={isMuted || false}
+    >
       <StyledMainIcon onClick={mainButtonClickHandler}>{iconToRender}</StyledMainIcon>
-      {!hidePopoverArrow && (
-        <StyledArrowIcon isMuted={false} onClick={arrowClickHandler}>
+      {!isFullScreen && (
+        <StyledArrowIcon isFullScreen={isFullScreen} isMuted={false} onClick={arrowClickHandler}>
           <svg viewBox="-200 -200 640 640" fill="currentColor">
             <path d="M127.5 191.25L255 63.75L0 63.75L127.5 191.25Z" />
           </svg>
diff --git a/ts/themes/classicDark.ts b/ts/themes/classicDark.ts
index c3d8825a9..d61fed4ba 100644
--- a/ts/themes/classicDark.ts
+++ b/ts/themes/classicDark.ts
@@ -139,6 +139,21 @@ const classicDark: ThemeColorVariables = {
   '--input-text-placeholder-color': 'var(--text-secondary-color)',
   '--input-text-color': 'var(--text-primary-color)',
   '--input-border-color': 'var(--border-color)',
+
+  '--in-call-container-background-color': 'var(--background-primary-color)',
+  '--in-call-container-text-color': 'var(--white-color)',
+  '--in-call-container-text-shadow': '0px 0px 8px var(--text-primary-color)',
+
+  '--call-buttons-background-color': THEMES.CLASSIC_DARK.COLOR3,
+  '--call-buttons-background-hover-color': THEMES.CLASSIC_DARK.COLOR4,
+  '--call-buttons-background-disabled-color': THEMES.CLASSIC_DARK.COLOR2,
+  '--call-buttons-action-background-color': 'var(--white-color)',
+  '--call-buttons-action-background-hover-color': `rgba(${hexColorToRGB(COLORS.WHITE)}, 0.87)`,
+  '--call-buttons-action-icon-color': 'var(--black-color)',
+  '--call-buttons-icon-color': 'var(--text-primary-color)',
+  '--call-buttons-icon-disabled-color': 'var(--text-primary-color)',
+  '--call-buttons-dropdown-color': 'var(--text-primary-color)',
+  '--call-buttons-dropdown-shadow': '0 0 4px 0 var(grey-color)',
 };
 
 export default classicDark;
diff --git a/ts/themes/classicLight.ts b/ts/themes/classicLight.ts
index 29ec09d96..aa392bb17 100644
--- a/ts/themes/classicLight.ts
+++ b/ts/themes/classicLight.ts
@@ -139,6 +139,21 @@ const classicLight: ThemeColorVariables = {
   '--input-text-placeholder-color': 'var(--text-secondary-color)',
   '--input-text-color': 'var(--text-primary-color)',
   '--input-border-color': 'var(--border-color)',
+
+  '--in-call-container-background-color': 'var(--background-primary-color)',
+  '--in-call-container-text-color': 'var(--white-color)',
+  '--in-call-container-text-shadow': '0px 0px 8px var(--text-primary-color)',
+
+  '--call-buttons-background-color': THEMES.CLASSIC_LIGHT.COLOR3,
+  '--call-buttons-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR4,
+  '--call-buttons-background-disabled-color': THEMES.CLASSIC_LIGHT.COLOR5,
+  '--call-buttons-action-background-color': THEMES.CLASSIC_LIGHT.COLOR4,
+  '--call-buttons-action-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR3,
+  '--call-buttons-action-icon-color': 'var(--black-color)',
+  '--call-buttons-icon-color': 'var(--text-primary-color)',
+  '--call-buttons-icon-disabled-color': 'var(--disabled-color)',
+  '--call-buttons-dropdown-color': 'var(--text-primary-color)',
+  '--call-buttons-dropdown-shadow': '0 0 4px 0 var(grey-color)',
 };
 
 export default classicLight;
diff --git a/ts/themes/oceanDark.ts b/ts/themes/oceanDark.ts
index ce76e250c..dd7bc5c80 100644
--- a/ts/themes/oceanDark.ts
+++ b/ts/themes/oceanDark.ts
@@ -139,6 +139,21 @@ const oceanDark: ThemeColorVariables = {
   '--input-text-placeholder-color': 'var(--text-secondary-color)',
   '--input-text-color': 'var(--text-primary-color)',
   '--input-border-color': 'var(--border-color)',
+
+  '--in-call-container-background-color': 'var(--background-primary-color)',
+  '--in-call-container-text-color': 'var(--white-color)',
+  '--in-call-container-text-shadow': '0px 0px 8px var(--text-primary-color)',
+
+  '--call-buttons-background-color': THEMES.OCEAN_DARK.COLOR4,
+  '--call-buttons-background-hover-color': THEMES.OCEAN_DARK.COLOR4,
+  '--call-buttons-background-disabled-color': THEMES.OCEAN_DARK.COLOR3,
+  '--call-buttons-action-background-color': 'var(--white-color)',
+  '--call-buttons-action-background-hover-color': `rgba(${hexColorToRGB(COLORS.WHITE)}, 0.87)`,
+  '--call-buttons-action-icon-color': 'var(--black-color)',
+  '--call-buttons-icon-color': THEMES.OCEAN_DARK.COLOR7!,
+  '--call-buttons-icon-disabled-color': THEMES.OCEAN_DARK.COLOR7!,
+  '--call-buttons-dropdown-color': 'var(--text-primary-color)',
+  '--call-buttons-dropdown-shadow': '0 0 4px 0 var(grey-color)',
 };
 
 export default oceanDark;
diff --git a/ts/themes/oceanLight.ts b/ts/themes/oceanLight.ts
index d6a9be588..aae9ecd44 100644
--- a/ts/themes/oceanLight.ts
+++ b/ts/themes/oceanLight.ts
@@ -139,6 +139,21 @@ const oceanLight: ThemeColorVariables = {
   '--input-text-placeholder-color': 'var(--text-secondary-color)',
   '--input-text-color': 'var(--text-primary-color)',
   '--input-border-color': 'var(--border-color)',
+
+  '--in-call-container-background-color': 'var(--background-primary-color)',
+  '--in-call-container-text-color': 'var(--white-color)',
+  '--in-call-container-text-shadow': '0px 0px 8px var(--text-primary-color)',
+
+  '--call-buttons-background-color': THEMES.OCEAN_LIGHT.COLOR4,
+  '--call-buttons-background-hover-color': THEMES.OCEAN_LIGHT.COLOR4,
+  '--call-buttons-background-disabled-color': THEMES.OCEAN_LIGHT.COLOR5,
+  '--call-buttons-action-background-color': THEMES.OCEAN_LIGHT.COLOR4,
+  '--call-buttons-action-background-hover-color': THEMES.OCEAN_LIGHT.COLOR5,
+  '--call-buttons-action-icon-color': 'var(--black-color)',
+  '--call-buttons-icon-color': 'var(--text-primary-color)',
+  '--call-buttons-icon-disabled-color': 'var(--disabled-color)',
+  '--call-buttons-dropdown-color': 'var(--text-primary-color)',
+  '--call-buttons-dropdown-shadow': '0 0 4px 0 var(grey-color)',
 };
 
 export default oceanLight;
diff --git a/ts/themes/variableColors.tsx b/ts/themes/variableColors.tsx
index 5cefad6bc..d33fd0db1 100644
--- a/ts/themes/variableColors.tsx
+++ b/ts/themes/variableColors.tsx
@@ -172,6 +172,23 @@ export type ThemeColorVariables = {
   '--input-text-placeholder-color': string;
   '--input-text-color': string;
   '--input-border-color': string;
+
+  /* In Call Container */
+  '--in-call-container-background-color': string;
+  '--in-call-container-text-color': string;
+  '--in-call-container-text-shadow': string;
+
+  /* Call Buttons */
+  '--call-buttons-background-color': string;
+  '--call-buttons-background-hover-color': string;
+  '--call-buttons-background-disabled-color': string;
+  '--call-buttons-action-background-color': string;
+  '--call-buttons-action-background-hover-color': string;
+  '--call-buttons-action-icon-color': string;
+  '--call-buttons-icon-color': string;
+  '--call-buttons-icon-disabled-color': string;
+  '--call-buttons-dropdown-color': string;
+  '--call-buttons-dropdown-shadow': string;
 };
 
 export function loadThemeColors(variables: ThemeColorVariables) {