UI: call screen updates

- update buttons colours and animations
- fix layouts for menu list

Change-Id: I68321cf02d3a59d3a67e1a7b65e1a744b24c90e9
diff --git a/CMakeLists.txt b/CMakeLists.txt
index 38623f2..e86375b 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -61,6 +61,7 @@
 add_custom_command (OUTPUT ${CMAKE_SOURCE_DIR}/Shader.metallib
                     COMMAND ${CMAKE_SOURCE_DIR}/generateShaderLib.sh
                     COMMENT "Creating Shader.metallib")
+
 add_custom_target(shader ALL
     DEPENDS ${CMAKE_SOURCE_DIR}/Shader.metallib)
 
@@ -356,8 +357,9 @@
 ${CMAKE_CURRENT_SOURCE_DIR}/data/dark/ic_action_transfer.png
 ${CMAKE_CURRENT_SOURCE_DIR}/data/dark/ic_action_merge_calls.png
 ${CMAKE_CURRENT_SOURCE_DIR}/data/dark/ic_action_send.png
+${CMAKE_CURRENT_SOURCE_DIR}/data/dark/ic_person_add.png
 ${CMAKE_CURRENT_SOURCE_DIR}/data/dark/audio.png
-${CMAKE_CURRENT_SOURCE_DIR}/data/dark/ic_plugin_fill.png	
+${CMAKE_CURRENT_SOURCE_DIR}/data/dark/ic_plugin_fill.png
 ${CMAKE_CURRENT_SOURCE_DIR}/data/dark/ic_reset.png
 ${CMAKE_CURRENT_SOURCE_DIR}/data/dark/general.png
 ${CMAKE_CURRENT_SOURCE_DIR}/data/dark/ic_camera.png
diff --git a/src/ChoosePluginHandlerVC.mm b/src/ChoosePluginHandlerVC.mm
index e0ca166..0a13b08 100644
--- a/src/ChoosePluginHandlerVC.mm
+++ b/src/ChoosePluginHandlerVC.mm
@@ -27,6 +27,8 @@
 
 @interface ChoosePluginHandlerVC () {
     __unsafe_unretained IBOutlet RingTableView* pluginHandlersView;
+    __unsafe_unretained IBOutlet NSLayoutConstraint* tableHeightConstraint;
+    __unsafe_unretained IBOutlet NSLayoutConstraint* tableWidthConstraint;
 }
 
 @end
@@ -46,10 +48,12 @@
 NSInteger const ICON_TAG           = 100;
 NSInteger const HANDLER_NAME_TAG   = 200;
 NSInteger const HANDLER_STATUS_TAG = 300;
+CGFloat PLUGIN_ROW_HEIGHT = 35;
 
 - (void) reloadView
 {
     [pluginHandlersView reloadData];
+    [self updateConstrains];
 }
 
 -(void)viewDidLoad {
@@ -60,6 +64,31 @@
     [self reloadView];
 }
 
+-(void)updateConstrains {
+    CGFloat tableHeight = PLUGIN_ROW_HEIGHT * availableHandlers.size();
+    CGFloat tableWidth = [self getTableWidth] + 120;
+    tableHeightConstraint.constant = tableHeight;
+    tableWidthConstraint.constant = tableWidth;
+}
+
+-(CGFloat)getTableWidth {
+    NSTextField* textField = [[NSTextField alloc] init];
+    CGFloat maxWidth = 0;
+    NSFont *fontName = [NSFont systemFontOfSize: 13.0 weight: NSFontWeightMedium];
+    for (auto plugin : availableHandlers) {
+        NSDictionary *attrs= [NSDictionary dictionaryWithObjectsAndKeys:
+                                   fontName, NSFontAttributeName,
+                                   nil];
+        NSAttributedString* attributed = [[NSAttributedString alloc] initWithString:plugin.toNSString() attributes: attrs];
+        textField.attributedStringValue = attributed;
+        [textField sizeToFit];
+        if (textField.frame.size.width > maxWidth) {
+            maxWidth = textField.frame.size.width;
+        }
+    }
+    return maxWidth;
+}
+
 -(void)setupForCall:(const QString&)callID {
     handlerType = FROM_CALL;
     if (pluginModel == nil) {
@@ -163,6 +192,11 @@
     return handlerCell;
 }
 
+- (CGFloat)tableView:(NSTableView *)tableView heightOfRow:(NSInteger)row
+{
+    return PLUGIN_ROW_HEIGHT;
+}
+
 #pragma mark - NSTableDataSource methods
 
 - (NSInteger)numberOfRowsInTableView:(NSTableView *)tableView
diff --git a/src/CurrentCallVC.mm b/src/CurrentCallVC.mm
index 94b01b7..3d1e372 100644
--- a/src/CurrentCallVC.mm
+++ b/src/CurrentCallVC.mm
@@ -47,6 +47,7 @@
 #import "delegates/ImageManipulationDelegate.h"
 #import "ChatVC.h"
 #import "views/IconButton.h"
+#import "views/HoverButton.h"
 #import "utils.h"
 #import "views/CallMTKView.h"
 #import "VideoCommon.h"
@@ -102,8 +103,8 @@
 @property (unsafe_unretained) IBOutlet IconButton* holdOnOffButton;
 @property (unsafe_unretained) IBOutlet IconButton* hangUpButton;
 @property (unsafe_unretained) IBOutlet IconButton* recordOnOffButton;
-@property (unsafe_unretained) IBOutlet IconButton* muteAudioButton;
-@property (unsafe_unretained) IBOutlet IconButton* muteVideoButton;
+@property (unsafe_unretained) IBOutlet HoverButton* muteAudioButton;
+@property (unsafe_unretained) IBOutlet HoverButton* muteVideoButton;
 @property (unsafe_unretained) IBOutlet IconButton* addParticipantButton;
 @property (unsafe_unretained) IBOutlet IconButton* pluginButton;
 @property (unsafe_unretained) IBOutlet IconButton* chatButton;
@@ -336,6 +337,10 @@
 -(void) setUpButtons:(lrc::api::call::Info&)callInfo isRecording:(BOOL) isRecording {
     muteAudioButton.image = callInfo.audioMuted ? [NSImage imageNamed:@"micro_off.png"] :
     [NSImage imageNamed:@"micro_on.png"];
+    NSColor* audioImageColor = callInfo.audioMuted ? [NSColor redColor] : [NSColor whiteColor];
+    [self updateColorForButton: muteAudioButton color: audioImageColor];
+    NSColor* videoImageColor = callInfo.videoMuted ? [NSColor redColor] : [NSColor whiteColor];
+    [self updateColorForButton: muteVideoButton color: videoImageColor];
     muteVideoButton.image = callInfo.videoMuted ? [NSImage imageNamed:@"camera_off.png"] :
     [NSImage imageNamed:@"camera_on.png"];
     [shareButton setHidden: callInfo.isAudioOnly ? YES: NO];
@@ -1116,13 +1121,18 @@
         return;
 
     auto* callModel = accountInfo_->callModel.get();
-    auto currentCall = callModel->getCall(callUid_);
-    if (currentCall.audioMuted) {
-        muteAudioButton.image = [NSImage imageNamed:@"micro_on.png"];
-    } else {
-        muteAudioButton.image = [NSImage imageNamed:@"micro_off.png"];
-    }
+    auto& currentCall = callModel->getCall(callUid_);
     callModel->toggleMedia(callUid_, lrc::api::NewCallModel::Media::AUDIO);
+    muteAudioButton.image = currentCall.audioMuted ? [NSImage imageNamed:@"micro_off.png"] : [NSImage imageNamed:@"micro_on.png"];
+    NSColor* audioImageColor = currentCall.audioMuted ? [NSColor redColor] : [NSColor whiteColor];
+    [self updateColorForButton: muteAudioButton color: audioImageColor];
+}
+
+-(void)updateColorForButton:(HoverButton*)buton color:(NSColor*)color {
+    buton.imageColor = color;
+    buton.moiuseOutsideImageColor = color;
+    buton.imageHoverColor= color;
+    [buton setNeedsDisplay: YES];
 }
 
 - (IBAction)muteVideo:(id)sender
@@ -1130,15 +1140,14 @@
     if (accountInfo_ == nil)
         return;
     auto* callModel = accountInfo_->callModel.get();
-    auto currentCall = callModel->getCall(callUid_);
-    if(!currentCall.isAudioOnly) {
-        if (currentCall.videoMuted) {
-            muteVideoButton.image = [NSImage imageNamed:@"camera_on.png"];
-        } else {
-            muteVideoButton.image = [NSImage imageNamed:@"camera_off.png"];
-        }
+    auto& currentCall = callModel->getCall(callUid_);
+    if (currentCall.isAudioOnly) {
+        return;
     }
     callModel->toggleMedia(callUid_, lrc::api::NewCallModel::Media::VIDEO);
+    muteVideoButton.image = currentCall.videoMuted ? [NSImage imageNamed:@"camera_off.png"] : [NSImage imageNamed:@"camera_on.png"];
+    NSColor* videoImageColor = currentCall.videoMuted ? [NSColor redColor] : [NSColor whiteColor];
+    [self updateColorForButton: muteVideoButton color: videoImageColor];
 }
 
 - (IBAction)toggleAddParticipantView:(id)sender {
diff --git a/src/views/HoverButton.mm b/src/views/HoverButton.mm
index 6160372..13dabd3 100644
--- a/src/views/HoverButton.mm
+++ b/src/views/HoverButton.mm
@@ -66,8 +66,8 @@
 
 -(void)mouseEntered:(NSEvent *)theEvent {
     if (self.animating) {
-        [self stopBlinkAnimation];
-        self.animating = true;
+        [super mouseEntered:theEvent];
+        return;
     }
     if(self.isEnabled) {
         self.bgColor = self.hoverColor;
@@ -88,7 +88,8 @@
 -(void)mouseExited:(NSEvent *)theEvent {
     self.bgColor = self.mouseOutsideColor;
     if (self.animating) {
-        [self startBlinkAnimationfrom:[NSColor buttonBlinkColorColor] to:[NSColor whiteColor] scaleFactor: 1.0 duration: 1.5];
+        [super mouseExited:theEvent];
+        return;
     }
     if(self.imagePressedColor && self.pressed) {
         self.imageColor = self.imagePressedColor;
diff --git a/src/views/IconButton.mm b/src/views/IconButton.mm
index c5a5e07..e4db780 100644
--- a/src/views/IconButton.mm
+++ b/src/views/IconButton.mm
@@ -49,7 +49,7 @@
         self.imageLightColor = self.imageColor ? self.imageColor : [NSColor ringDarkBlue];
     }
     if (!self.imageDarkColor) {
-        self.imageDarkColor = [NSColor whiteColor];
+        self.imageDarkColor = self.imageColor ? self.imageColor : [NSColor whiteColor];
     }
     self.imageColor = isDarkMode ? self.imageDarkColor : self.imageLightColor;
 
diff --git a/ui/Base.lproj/ChooseContactVC.xib b/ui/Base.lproj/ChooseContactVC.xib
index 5ebf016..260163a 100644
--- a/ui/Base.lproj/ChooseContactVC.xib
+++ b/ui/Base.lproj/ChooseContactVC.xib
@@ -20,12 +20,12 @@
         </customObject>
         <customObject id="-1" userLabel="First Responder" customClass="FirstResponder"/>
         <customObject id="-3" userLabel="Application" customClass="NSObject"/>
-        <customView misplaced="YES" id="Hz6-mo-xeY">
-            <rect key="frame" x="0.0" y="0.0" width="250" height="356"/>
+        <customView id="Hz6-mo-xeY">
+            <rect key="frame" x="0.0" y="0.0" width="250" height="366"/>
             <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
             <subviews>
                 <stackView distribution="fill" orientation="vertical" alignment="centerX" horizontalStackHuggingPriority="249.99998474121094" verticalStackHuggingPriority="249.99998474121094" detachesHiddenViews="YES" translatesAutoresizingMaskIntoConstraints="NO" id="y8b-Oz-KzK">
-                    <rect key="frame" x="0.0" y="10" width="250" height="336"/>
+                    <rect key="frame" x="0.0" y="15" width="250" height="336"/>
                     <subviews>
                         <searchField wantsLayer="YES" verticalHuggingPriority="750" allowsCharacterPickerTouchBarItem="YES" translatesAutoresizingMaskIntoConstraints="NO" id="jhs-SW-hFj">
                             <rect key="frame" x="10" y="306" width="230" height="30"/>
@@ -350,9 +350,9 @@
                 </stackView>
             </subviews>
             <constraints>
-                <constraint firstItem="y8b-Oz-KzK" firstAttribute="top" secondItem="Hz6-mo-xeY" secondAttribute="top" constant="10" id="bEl-1Z-3cG"/>
+                <constraint firstItem="y8b-Oz-KzK" firstAttribute="top" secondItem="Hz6-mo-xeY" secondAttribute="top" constant="15" id="bEl-1Z-3cG"/>
                 <constraint firstItem="y8b-Oz-KzK" firstAttribute="leading" secondItem="Hz6-mo-xeY" secondAttribute="leading" id="cJE-xf-fmv"/>
-                <constraint firstAttribute="bottom" secondItem="y8b-Oz-KzK" secondAttribute="bottom" constant="10" id="fjI-HV-gjR"/>
+                <constraint firstAttribute="bottom" secondItem="y8b-Oz-KzK" secondAttribute="bottom" constant="15" id="fjI-HV-gjR"/>
                 <constraint firstAttribute="trailing" secondItem="y8b-Oz-KzK" secondAttribute="trailing" id="wG3-Ya-T9t"/>
             </constraints>
             <point key="canvasLocation" x="-55" y="136"/>
diff --git a/ui/Base.lproj/ChoosePluginHandlerVC.xib b/ui/Base.lproj/ChoosePluginHandlerVC.xib
index 044d573..f4324a3 100644
--- a/ui/Base.lproj/ChoosePluginHandlerVC.xib
+++ b/ui/Base.lproj/ChoosePluginHandlerVC.xib
@@ -8,30 +8,32 @@
         <customObject id="-2" userLabel="File's Owner" customClass="ChoosePluginHandlerVC">
             <connections>
                 <outlet property="pluginHandlersView" destination="4hh-3J-TYv" id="Hnc-Yq-oMw"/>
+                <outlet property="tableHeightConstraint" destination="EGL-7T-26v" id="F9M-Bz-SQR"/>
+                <outlet property="tableWidthConstraint" destination="tL8-61-odH" id="pkB-aC-6kr"/>
                 <outlet property="view" destination="Z8z-Tz-Wln" id="aYs-KO-NbQ"/>
             </connections>
         </customObject>
         <customObject id="-1" userLabel="First Responder" customClass="FirstResponder"/>
         <customObject id="-3" userLabel="Application" customClass="NSObject"/>
-        <customView misplaced="YES" id="Z8z-Tz-Wln">
-            <rect key="frame" x="0.0" y="0.0" width="280" height="277"/>
+        <customView id="Z8z-Tz-Wln">
+            <rect key="frame" x="0.0" y="0.0" width="280" height="257"/>
             <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
             <subviews>
                 <textField horizontalHuggingPriority="251" verticalHuggingPriority="750" translatesAutoresizingMaskIntoConstraints="NO" id="l2t-n6-xs8">
-                    <rect key="frame" x="114" y="240" width="53" height="17"/>
+                    <rect key="frame" x="114" y="225" width="53" height="17"/>
                     <textFieldCell key="cell" lineBreakMode="clipping" title="Plugins" id="NS0-SH-Kds">
                         <font key="font" metaFont="systemMedium" size="14"/>
                         <color key="textColor" name="labelColor" catalog="System" colorSpace="catalog"/>
                         <color key="backgroundColor" name="textBackgroundColor" catalog="System" colorSpace="catalog"/>
                     </textFieldCell>
                 </textField>
-                <scrollView focusRingType="none" borderType="none" autohidesScrollers="YES" horizontalLineScroll="57" horizontalPageScroll="10" verticalLineScroll="57" verticalPageScroll="10" hasHorizontalScroller="NO" hasVerticalScroller="NO" usesPredominantAxisScrolling="NO" horizontalScrollElasticity="none" translatesAutoresizingMaskIntoConstraints="NO" id="FJO-5E-GOp">
-                    <rect key="frame" x="0.0" y="20" width="280" height="200"/>
-                    <clipView key="contentView" ambiguous="YES" drawsBackground="NO" copiesOnScroll="NO" id="H02-5s-yVx">
+                <scrollView focusRingType="none" borderType="none" autohidesScrollers="YES" horizontalLineScroll="37" horizontalPageScroll="10" verticalLineScroll="37" verticalPageScroll="10" hasHorizontalScroller="NO" hasVerticalScroller="NO" usesPredominantAxisScrolling="NO" horizontalScrollElasticity="none" translatesAutoresizingMaskIntoConstraints="NO" id="FJO-5E-GOp">
+                    <rect key="frame" x="0.0" y="15" width="280" height="200"/>
+                    <clipView key="contentView" drawsBackground="NO" copiesOnScroll="NO" id="H02-5s-yVx">
                         <rect key="frame" x="0.0" y="0.0" width="280" height="200"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
-                            <outlineView focusRingType="none" verticalHuggingPriority="750" ambiguous="YES" allowsExpansionToolTips="YES" columnAutoresizingStyle="lastColumnOnly" multipleSelection="NO" autosaveColumns="NO" typeSelect="NO" rowHeight="55" rowSizeStyle="automatic" viewBased="YES" indentationPerLevel="8" outlineTableColumn="Hhb-rH-L0S" id="4hh-3J-TYv" userLabel="Plugin Handler Table View" customClass="RingTableView">
+                            <outlineView focusRingType="none" verticalHuggingPriority="750" allowsExpansionToolTips="YES" columnAutoresizingStyle="lastColumnOnly" multipleSelection="NO" autosaveColumns="NO" typeSelect="NO" rowHeight="35" viewBased="YES" indentationPerLevel="8" outlineTableColumn="Hhb-rH-L0S" id="4hh-3J-TYv" userLabel="Plugin Handler Table View" customClass="RingTableView">
                                 <rect key="frame" x="0.0" y="0.0" width="280" height="200"/>
                                 <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                                 <size key="intercellSpacing" width="3" height="2"/>
@@ -59,29 +61,27 @@
                                                 <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                                                 <subviews>
                                                     <imageView horizontalHuggingPriority="251" verticalHuggingPriority="251" tag="100" translatesAutoresizingMaskIntoConstraints="NO" id="24C-KD-RH9">
-                                                        <rect key="frame" x="15" y="9" width="32" height="32"/>
+                                                        <rect key="frame" x="15" y="10" width="30" height="30"/>
                                                         <constraints>
-                                                            <constraint firstAttribute="width" constant="32" id="V7A-PA-7rf"/>
-                                                            <constraint firstAttribute="height" constant="32" id="uei-Wy-Bqo"/>
+                                                            <constraint firstAttribute="width" constant="30" id="V7A-PA-7rf"/>
+                                                            <constraint firstAttribute="height" constant="30" id="uei-Wy-Bqo"/>
                                                         </constraints>
                                                         <imageCell key="cell" refusesFirstResponder="YES" alignment="left" imageScaling="proportionallyDown" image="NSUser" id="PbZ-n6-cFD"/>
                                                     </imageView>
-                                                    <switch horizontalHuggingPriority="750" verticalHuggingPriority="750" tag="300" baseWritingDirection="leftToRight" alignment="left" translatesAutoresizingMaskIntoConstraints="NO" id="lCd-yk-3JN">
-                                                        <rect key="frame" x="222" y="12" width="42" height="24"/>
-                                                    </switch>
                                                     <textField horizontalHuggingPriority="750" verticalHuggingPriority="750" verticalCompressionResistancePriority="751" tag="200" translatesAutoresizingMaskIntoConstraints="NO" id="zS5-oB-zx4" userLabel="name">
-                                                        <rect key="frame" x="57" y="16" width="130" height="17"/>
-                                                        <constraints>
-                                                            <constraint firstAttribute="width" constant="130" id="NM6-6p-fxF"/>
-                                                        </constraints>
+                                                        <rect key="frame" x="55" y="17" width="4" height="16"/>
                                                         <textFieldCell key="cell" sendsActionOnEndEditing="YES" state="on" drawsBackground="YES" id="Tj6-CL-ZZ6">
-                                                            <font key="font" metaFont="systemMedium" size="14"/>
+                                                            <font key="font" metaFont="systemMedium" size="13"/>
                                                             <color key="textColor" name="textColor" catalog="System" colorSpace="catalog"/>
                                                             <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                                         </textFieldCell>
                                                     </textField>
+                                                    <switch horizontalHuggingPriority="750" verticalHuggingPriority="750" tag="300" baseWritingDirection="leftToRight" alignment="left" translatesAutoresizingMaskIntoConstraints="NO" id="lCd-yk-3JN">
+                                                        <rect key="frame" x="222" y="12" width="42" height="24"/>
+                                                    </switch>
                                                 </subviews>
                                                 <constraints>
+                                                    <constraint firstItem="lCd-yk-3JN" firstAttribute="leading" relation="greaterThanOrEqual" secondItem="zS5-oB-zx4" secondAttribute="trailing" constant="10" id="0Nx-U6-IZO"/>
                                                     <constraint firstItem="24C-KD-RH9" firstAttribute="centerY" secondItem="CCW-JE-rOQ" secondAttribute="centerY" id="BuK-L2-v0H"/>
                                                     <constraint firstAttribute="trailing" secondItem="lCd-yk-3JN" secondAttribute="trailing" constant="15" id="F9Y-85-EpT"/>
                                                     <constraint firstItem="lCd-yk-3JN" firstAttribute="centerY" secondItem="CCW-JE-rOQ" secondAttribute="centerY" id="PFp-xj-rS7"/>
@@ -115,11 +115,11 @@
                 </scrollView>
             </subviews>
             <constraints>
-                <constraint firstAttribute="bottom" secondItem="FJO-5E-GOp" secondAttribute="bottom" constant="20" id="DR8-Hg-bIN"/>
-                <constraint firstItem="l2t-n6-xs8" firstAttribute="top" secondItem="Z8z-Tz-Wln" secondAttribute="top" constant="20" id="Eaf-ba-Ght"/>
+                <constraint firstAttribute="bottom" secondItem="FJO-5E-GOp" secondAttribute="bottom" constant="15" id="DR8-Hg-bIN"/>
+                <constraint firstItem="l2t-n6-xs8" firstAttribute="top" secondItem="Z8z-Tz-Wln" secondAttribute="top" constant="15" id="Eaf-ba-Ght"/>
                 <constraint firstItem="FJO-5E-GOp" firstAttribute="leading" secondItem="Z8z-Tz-Wln" secondAttribute="leading" id="RNp-Wz-gPV"/>
                 <constraint firstItem="l2t-n6-xs8" firstAttribute="centerX" secondItem="Z8z-Tz-Wln" secondAttribute="centerX" id="TzB-yW-Fdx"/>
-                <constraint firstItem="FJO-5E-GOp" firstAttribute="top" secondItem="l2t-n6-xs8" secondAttribute="bottom" constant="20" id="Zgj-EV-TJS"/>
+                <constraint firstItem="FJO-5E-GOp" firstAttribute="top" secondItem="l2t-n6-xs8" secondAttribute="bottom" constant="10" id="Zgj-EV-TJS"/>
                 <constraint firstAttribute="trailing" secondItem="FJO-5E-GOp" secondAttribute="trailing" id="fhC-1t-Tbb"/>
             </constraints>
             <point key="canvasLocation" x="-30" y="283"/>
diff --git a/ui/Base.lproj/Conversation.xib b/ui/Base.lproj/Conversation.xib
index 68f2312..5ebe2a2 100644
--- a/ui/Base.lproj/Conversation.xib
+++ b/ui/Base.lproj/Conversation.xib
@@ -812,7 +812,7 @@
                                 <constraint firstAttribute="width" constant="32" id="Cxh-SD-Ozq"/>
                                 <constraint firstAttribute="height" constant="32" id="UUq-am-hL7"/>
                             </constraints>
-                            <buttonCell key="cell" type="square" bezelStyle="shadowlessSquare" image="add_participant" imagePosition="only" alignment="center" allowsMixedState="YES" transparent="YES" imageScaling="proportionallyDown" inset="2" id="1oc-i4-1bh">
+                            <buttonCell key="cell" type="square" bezelStyle="shadowlessSquare" image="ic_person_add" imagePosition="only" alignment="center" allowsMixedState="YES" transparent="YES" imageScaling="proportionallyDown" inset="2" id="1oc-i4-1bh">
                                 <behavior key="behavior" pushIn="YES" lightByBackground="YES" lightByGray="YES"/>
                                 <font key="font" metaFont="system"/>
                             </buttonCell>
@@ -999,7 +999,6 @@
         </viewController>
     </objects>
     <resources>
-        <image name="add_participant" width="70" height="70"/>
         <image name="camera_on" width="70" height="70"/>
         <image name="ic_action_call" width="72" height="72"/>
         <image name="ic_action_cancel" width="70" height="70"/>
@@ -1008,6 +1007,7 @@
         <image name="ic_audio_msg" width="72" height="72"/>
         <image name="ic_camera" width="72" height="72"/>
         <image name="ic_file_upload" width="72" height="72"/>
+        <image name="ic_person_add" width="128" height="128"/>
         <image name="plugin" width="80" height="80"/>
     </resources>
 </document>
diff --git a/ui/Base.lproj/CurrentCall.xib b/ui/Base.lproj/CurrentCall.xib
index b10a757..60b0909 100644
--- a/ui/Base.lproj/CurrentCall.xib
+++ b/ui/Base.lproj/CurrentCall.xib
@@ -74,7 +74,7 @@
                                     <color key="fillColor" red="0.120510533452034" green="0.12050692737102509" blue="0.12050899863243103" alpha="1" colorSpace="calibratedRGB"/>
                                 </box>
                                 <stackView distribution="fill" orientation="vertical" alignment="centerX" spacing="10" horizontalStackHuggingPriority="249.99998474121094" verticalStackHuggingPriority="249.99998474121094" translatesAutoresizingMaskIntoConstraints="NO" id="aLB-LA-yn0">
-                                    <rect key="frame" x="302" y="4246" width="142" height="305"/>
+                                    <rect key="frame" x="302" y="4426" width="142" height="305"/>
                                     <subviews>
                                         <customView translatesAutoresizingMaskIntoConstraints="NO" id="s4L-Ke-9Jm">
                                             <rect key="frame" x="7" y="177" width="128" height="128"/>
@@ -235,7 +235,7 @@
                                     <rect key="frame" x="0.0" y="0.0" width="746" height="788"/>
                                 </customView>
                                 <customView translatesAutoresizingMaskIntoConstraints="NO" id="d0X-cW-Xgz" customClass="GradientView">
-                                    <rect key="frame" x="0.0" y="8747" width="746" height="50"/>
+                                    <rect key="frame" x="0.0" y="9107" width="746" height="50"/>
                                     <constraints>
                                         <constraint firstAttribute="width" relation="greaterThanOrEqual" constant="568" id="Xeq-Aa-f1W"/>
                                         <constraint firstAttribute="height" constant="50" id="w34-Yi-hGT"/>
@@ -312,7 +312,7 @@
                                     </subviews>
                                 </customView>
                                 <customView translatesAutoresizingMaskIntoConstraints="NO" id="DfH-di-xs7" customClass="GradientView">
-                                    <rect key="frame" x="0.0" y="8747" width="746" height="50"/>
+                                    <rect key="frame" x="0.0" y="9107" width="746" height="50"/>
                                     <subviews>
                                         <stackView distribution="equalSpacing" orientation="horizontal" alignment="centerY" spacing="5" horizontalStackHuggingPriority="249.99998474121094" verticalStackHuggingPriority="249.99998474121094" detachesHiddenViews="YES" translatesAutoresizingMaskIntoConstraints="NO" id="qSN-JN-uaD">
                                             <rect key="frame" x="297" y="17" width="152" height="16"/>
@@ -475,9 +475,6 @@
                                                         <userDefinedRuntimeAttribute type="color" keyPath="imageColor">
                                                             <color key="value" red="0.99999600649999998" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                         </userDefinedRuntimeAttribute>
-                                                        <userDefinedRuntimeAttribute type="color" keyPath="imageHoverColor">
-                                                            <color key="value" red="0.99999600649999998" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-                                                        </userDefinedRuntimeAttribute>
                                                         <userDefinedRuntimeAttribute type="number" keyPath="imageIncreaseOnHover">
                                                             <integer key="value" value="0"/>
                                                         </userDefinedRuntimeAttribute>
@@ -487,9 +484,6 @@
                                                         <userDefinedRuntimeAttribute type="color" keyPath="hoverColor">
                                                             <color key="value" red="0.19607843137254902" green="0.19607843137254902" blue="0.19607843137254902" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                         </userDefinedRuntimeAttribute>
-                                                        <userDefinedRuntimeAttribute type="color" keyPath="imageDarkColor">
-                                                            <color key="value" red="0.99999600649999998" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-                                                        </userDefinedRuntimeAttribute>
                                                     </userDefinedRuntimeAttributes>
                                                     <connections>
                                                         <action selector="muteAudio:" target="-2" id="kdH-9t-FUA"/>
@@ -555,9 +549,6 @@
                                                         <userDefinedRuntimeAttribute type="color" keyPath="imageColor">
                                                             <color key="value" red="0.99999600649999998" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                         </userDefinedRuntimeAttribute>
-                                                        <userDefinedRuntimeAttribute type="color" keyPath="imageHoverColor">
-                                                            <color key="value" red="0.99999600649999998" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-                                                        </userDefinedRuntimeAttribute>
                                                         <userDefinedRuntimeAttribute type="number" keyPath="imageIncreaseOnHover">
                                                             <integer key="value" value="0"/>
                                                         </userDefinedRuntimeAttribute>
@@ -567,9 +558,6 @@
                                                         <userDefinedRuntimeAttribute type="color" keyPath="hoverColor">
                                                             <color key="value" red="0.19607843137254902" green="0.19607843137254902" blue="0.19607843137254902" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                         </userDefinedRuntimeAttribute>
-                                                        <userDefinedRuntimeAttribute type="color" keyPath="imageDarkColor">
-                                                            <color key="value" red="0.99999600649999998" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-                                                        </userDefinedRuntimeAttribute>
                                                     </userDefinedRuntimeAttributes>
                                                     <connections>
                                                         <action selector="toggleChangeAudioOutput:" target="-2" id="4yj-f1-9ut"/>
@@ -632,18 +620,12 @@
                                                         <userDefinedRuntimeAttribute type="color" keyPath="imageColor">
                                                             <color key="value" red="0.99999600649999998" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                         </userDefinedRuntimeAttribute>
-                                                        <userDefinedRuntimeAttribute type="color" keyPath="imageHoverColor">
-                                                            <color key="value" red="0.99999600649999998" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-                                                        </userDefinedRuntimeAttribute>
                                                         <userDefinedRuntimeAttribute type="number" keyPath="imageIncreaseOnHover">
                                                             <integer key="value" value="0"/>
                                                         </userDefinedRuntimeAttribute>
                                                         <userDefinedRuntimeAttribute type="color" keyPath="bgColor">
                                                             <color key="value" red="0.1137239709" green="0.1137244478" blue="0.1137255356" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
                                                         </userDefinedRuntimeAttribute>
-                                                        <userDefinedRuntimeAttribute type="color" keyPath="imageDarkColor">
-                                                            <color key="value" red="0.99999600649999998" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-                                                        </userDefinedRuntimeAttribute>
                                                         <userDefinedRuntimeAttribute type="color" keyPath="hoverColor">
                                                             <color key="value" red="0.19607843137254902" green="0.19607843137254902" blue="0.19607843137254902" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                         </userDefinedRuntimeAttribute>
@@ -798,6 +780,9 @@
                                                 <userDefinedRuntimeAttribute type="color" keyPath="hoverColor">
                                                     <color key="value" red="0.19607843137254902" green="0.19607843137254902" blue="0.19607843137254902" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                 </userDefinedRuntimeAttribute>
+                                                <userDefinedRuntimeAttribute type="color" keyPath="imagePressedColor">
+                                                    <color key="value" name="systemRedColor" catalog="System" colorSpace="catalog"/>
+                                                </userDefinedRuntimeAttribute>
                                             </userDefinedRuntimeAttributes>
                                             <connections>
                                                 <action selector="toggleShare:" target="-2" id="uYz-nA-eMC"/>
@@ -944,13 +929,13 @@
                             <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                             <subviews>
                                 <scrollView borderType="none" autohidesScrollers="YES" horizontalLineScroll="62" horizontalPageScroll="10" verticalLineScroll="62" verticalPageScroll="10" hasHorizontalScroller="NO" hasVerticalScroller="NO" usesPredominantAxisScrolling="NO" scrollerKnobStyle="dark" translatesAutoresizingMaskIntoConstraints="NO" id="o0i-7W-5fA">
-                                    <rect key="frame" x="20" y="145" width="331" height="8650"/>
+                                    <rect key="frame" x="20" y="145" width="331" height="9010"/>
                                     <clipView key="contentView" drawsBackground="NO" copiesOnScroll="NO" id="H2i-4W-Gvt">
-                                        <rect key="frame" x="0.0" y="0.0" width="331" height="8650"/>
+                                        <rect key="frame" x="0.0" y="0.0" width="331" height="9010"/>
                                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                                         <subviews>
                                             <tableView verticalHuggingPriority="750" allowsExpansionToolTips="YES" columnAutoresizingStyle="lastColumnOnly" selectionHighlightStyle="none" autosaveColumns="NO" rowHeight="60" rowSizeStyle="automatic" usesAutomaticRowHeights="YES" viewBased="YES" id="ZOj-5b-rnp">
-                                                <rect key="frame" x="0.0" y="0.0" width="331" height="8650"/>
+                                                <rect key="frame" x="0.0" y="0.0" width="331" height="9010"/>
                                                 <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                                                 <size key="intercellSpacing" width="3" height="2"/>
                                                 <color key="backgroundColor" white="1" alpha="0.0" colorSpace="deviceWhite"/>
@@ -1262,7 +1247,7 @@
                                     </scroller>
                                 </scrollView>
                                 <customView translatesAutoresizingMaskIntoConstraints="NO" id="mFB-6z-yC0" customClass="DraggingDestinationView">
-                                    <rect key="frame" x="0.0" y="0.0" width="371" height="8797"/>
+                                    <rect key="frame" x="0.0" y="0.0" width="371" height="9157"/>
                                 </customView>
                                 <stackView distribution="fill" orientation="vertical" alignment="centerX" spacing="0.0" horizontalStackHuggingPriority="249.99998474121094" verticalStackHuggingPriority="249.99998474121094" detachesHiddenViews="YES" translatesAutoresizingMaskIntoConstraints="NO" id="nSk-sH-cgy">
                                     <rect key="frame" x="20" y="0.0" width="331" height="145"/>
diff --git a/ui/Base.lproj/RingWindow.xib b/ui/Base.lproj/RingWindow.xib
index 13347fa..d4a1097 100644
--- a/ui/Base.lproj/RingWindow.xib
+++ b/ui/Base.lproj/RingWindow.xib
@@ -475,7 +475,7 @@
                                                                                                                                     <constraint firstAttribute="width" constant="30" id="FjC-O1-DDc"/>
                                                                                                                                     <constraint firstAttribute="height" constant="30" id="zM2-c1-5Es"/>
                                                                                                                                 </constraints>
-                                                                                                                                <buttonCell key="cell" type="square" bezelStyle="shadowlessSquare" image="add_participant" imagePosition="overlaps" alignment="center" allowsMixedState="YES" transparent="YES" imageScaling="proportionallyDown" inset="2" id="tQv-pI-ot0">
+                                                                                                                                <buttonCell key="cell" type="square" bezelStyle="shadowlessSquare" image="ic_person_add" imagePosition="overlaps" alignment="center" allowsMixedState="YES" transparent="YES" imageScaling="proportionallyDown" inset="2" id="tQv-pI-ot0">
                                                                                                                                     <behavior key="behavior" pushIn="YES" lightByBackground="YES" lightByGray="YES"/>
                                                                                                                                     <font key="font" metaFont="system"/>
                                                                                                                                 </buttonCell>
@@ -1151,9 +1151,9 @@
         <image name="NSActionTemplate" width="14" height="14"/>
         <image name="NSShareTemplate" width="11" height="16"/>
         <image name="NSUser" width="32" height="32"/>
-        <image name="add_participant" width="70" height="70"/>
         <image name="ic_action_block" width="72" height="72"/>
         <image name="ic_action_cancel" width="70" height="70"/>
+        <image name="ic_person_add" width="48" height="48"/>
         <image name="qrcode" width="72" height="72"/>
         <image name="symbol_blue" width="512" height="512"/>
         <image name="symbol_name" width="640" height="213.60000610351562"/>