[MM-42416] Calls: RHS Custom post styling (#31)

* add flex-wrap, make it conditional on whether the call is in progress

* linting

* convert to styled components; refactor

* make wrapping in rhs behave correctly

* right shift avatars

* add call-thread as a data-testid

* fix avatar shifting

* update snapshots

e2e/tests/join_call.spec.ts

@@ -58,14 +58,14 @@ test.describe('join call', () => {
         const joinCallButton = page.locator('.post__body').last().locator('button:has-text("Join call")');
         await expect(joinCallButton).toBeVisible();
 
-        await expect(page.locator('.call-thread').last()).toBeVisible();
+        await expect(page.locator('data-testid=call-thread').last()).toBeVisible();
 
-        expect(await page.locator('.call-thread').last().screenshot()).toMatchSnapshot('call-thread-join.png');
+        expect(await page.locator('data-testid=call-thread').last().screenshot()).toMatchSnapshot('call-thread-join.png');
 
         await joinCallButton.click();
         await expect(page.locator('#calls-widget')).toBeVisible();
 
-        expect(await page.locator('.call-thread').last().screenshot()).toMatchSnapshot('call-thread-leave.png');
+        expect(await page.locator('data-testid=call-thread').last().screenshot()).toMatchSnapshot('call-thread-leave.png');
 
         const leaveCallButton = page.locator('.post__body').last().locator('button:has-text("Leave call")');
         await expect(leaveCallButton).toBeVisible();

webapp/.eslintrc.json

@@ -48,7 +48,7 @@
     "array-callback-return": 2,
     "arrow-body-style": 0,
     "arrow-parens": [
-      2,
+      1,
       "always"
     ],
     "arrow-spacing": [
@@ -227,7 +227,7 @@
       2,
       "except-parens"
     ],
-    "no-confusing-arrow": 2,
+    "no-confusing-arrow": 1,
     "no-console": 1,
     "no-const-assign": 2,
     "no-constant-condition": 2,

webapp/src/components/avatar/avatar.tsx

@@ -87,14 +87,18 @@ const Profile = styled.div<ProfileProps>`
     vertical-align: sub;
     background: var(--center-channel-bg);
 
-    ${(props) => (props.border && css`
+    ${props => props.border && css`
         border: 1px solid var(--center-channel-bg);
-    `)}
+    `}
 
-    width: ${(props) => (props.size)}px;
-    min-width: ${(props) => (props.size)}px;
-    height: ${(props) => (props.size)}px;
-    font-size: ${(props) => (props.fontSize)}px;
+    width: ${({size}) => size}px;
+    min-width: ${({size}) => size}px;
+    height: ${({size}) => size}px;
+    font-size: ${({fontSize}) => fontSize}px;
+
+    :not(:first-child) {
+        margin-left: -${({size}) => size * 0.25}px;
+    }
 `;
 
 const ProfilePlain = styled(Profile)`

webapp/src/components/connected_profiles.tsx

@@ -19,9 +19,7 @@ const ConnectedProfiles = ({pictures, profiles, maxShowedProfiles, size, fontSiz
     const diff = profiles.length - maxShowedProfiles;
     profiles = diff > 0 ? profiles.slice(0, maxShowedProfiles) : profiles;
 
-    const margin = -8;
     const els = profiles.map((profile, idx) => {
-        const off = diff > 0 ? (profiles.length - idx) * 8 : (profiles.length - 1 - idx) * 8;
         return (
             <OverlayTrigger
                 placement='bottom'
@@ -37,7 +35,6 @@ const ConnectedProfiles = ({pictures, profiles, maxShowedProfiles, size, fontSiz
                     fontSize={fontSize}
                     url={pictures[idx]}
                     border={Boolean(border)}
-                    style={{position: 'relative', left: `${margin + off}px`}}
                 />
             </OverlayTrigger>
         );
@@ -48,7 +45,6 @@ const ConnectedProfiles = ({pictures, profiles, maxShowedProfiles, size, fontSiz
             <Avatar
                 size={size}
                 text={`+${diff}`}
-                style={{position: 'relative', left: `${margin}px`}}
                 border={Boolean(border)}
                 key='call_thread_more_profiles'
             />,