Merge pull request #12 from sendbird/feature/calls-1289

[CALLS-1289] Sample design QA

Author: git-babel

lib/components/Header.js

@@ -44,7 +44,9 @@ export default class Header extends BaseElement {
 
     const headerInfo = createDiv({ className: `${classes['headerInfo']}` });
     const nickname = createDiv({
-      className: `${classes['headerNickname']} ${classes['fontMidBig']} ${classes['fontDemi']}`,
+      className: (this.args.isWidget)
+        ? `${classes['headerNickname']} ${classes['fontMidBig']} ${classes['fontDemi']}`
+        : `${classes['headerNickname']} ${classes['fontNormal']} ${classes['fontDemi']}`,
       innerText: this.args.user.nickname || '—'
     });
     const userId = createDiv({
@@ -66,7 +68,8 @@ export default class Header extends BaseElement {
         element: userDiv,
         items: [
           {
-            element: userDetail
+            element: userDetail,
+            disabled: true,
           },
           {
             label: 'Sign out',

lib/components/Menu.js

@@ -23,12 +23,14 @@ export default class Menu extends BaseElement {
     this.menuItemsDiv = createDiv({ className: `${classes['menuItemsDiv']} ${classes['hidden']}` });
 
     this.items.forEach((item, idx) => {
-      const { label, element, callback } = item;
+      const { label, element, disabled, callback } = item;
       const labelElem = element || createLabel({
         className: `${classes['fontNormal']} ${classes['fontHeavy']}`,
         innerText: label
       });
-      const itemElem = createButton({ className: `${classes['btn']} ${classes['menuItem']}` });
+      const itemElem = createButton({
+        className: `${classes['btn']} ${disabled ? classes['disabledMenuItem'] : classes['menuItem']}`
+      });
 
       if (callback) {
         itemElem.onclick = () => {

lib/css/styles.js

@@ -171,6 +171,7 @@ const styles = {
   },
 
   avatar: {
+    flexShrink: '0',
     width: '32px',
     height: '32px',
     borderRadius: '50%',
@@ -1142,19 +1143,24 @@ const styles = {
 
   headerUserId: {
     display: 'none',
-    wordBreak: 'break-all',
+    whiteSpace: 'nowrap',
     color: colors.purple50
   },
 
   headerNickname: {
-    wordBreak: 'break-all',
+    whiteSpace: 'nowrap',
     color: colors.white
   },
 
   userDetail: {
     display: 'flex',
     flexDirection: 'row',
     '& $profileSmall': {
+      width: '32px',
+      height: '32px',
+      marginLeft: '0px'
+    },
+    '& $avatar': {
       marginLeft: '0px'
     },
     '& $headerNickname': {
@@ -1174,11 +1180,11 @@ const styles = {
     paddingBottom: '8px',
     paddingLeft: '0px',
     paddingRight: '0px',
-    width: '200px',
+    minWidth: '248px',
     borderRadius: '4px',
     boxShadow: '0 3px 5px -3px rgba(33, 34, 66, 0.04), 0 3px 14px 2px rgba(33, 34, 66, 0.08), 0 8px 10px 1px rgba(33, 34, 66, 0.12)',
     backgroundColor: colors.white,
-    zIndex: '1'
+    zIndex: '1',
   },
 
   menuItem: {
@@ -1197,6 +1203,20 @@ const styles = {
     }
   },
 
+  disabledMenuItem: {
+    display: 'block',
+    boxSizing: 'border-box',
+    cursor: 'default',
+    paddingTop: '0px',
+    paddingBottom: '0px',
+    paddingLeft: '16px',
+    paddingRight: '16px',
+    width: '100%',
+    height: 'auto',
+    minHeight: '32px',
+    textAlign: 'left',
+  },
+
   menuDivider: {
     width: '100%',
     height: '1px',
@@ -1349,8 +1369,7 @@ const styles = {
     width: '100%',
     minHeight: '88px',
     height: 'auto',
-    borderTop: 'solid 1px #dee2f2',
-    paddingBottom: '5px',
+    borderBottom: 'solid 1px #dee2f2',
   },
 
   callLogEmptyWrap: {
@@ -1387,7 +1406,7 @@ const styles = {
 
   callLogProfileDiv: {
     display: 'inline-flex',
-    width: '40px',
+    width: '32px',
     height: '100%'
   },
 
@@ -1412,15 +1431,15 @@ const styles = {
     display: 'block',
     width: '20px',
     height: '20px',
-    marginLeft: '18px',
-    marginTop: '26px',
+    marginLeft: '16px',
+    marginTop: '24px',
   },
 
   callLogProfileImg: {
     display: 'block',
-    width: '40px',
-    height: '40px',
-    marginTop: '16px',
+    width: '32px',
+    height: '32px',
+    marginTop: '18px',
     borderRadius: '50%'
   },
 
@@ -1439,14 +1458,15 @@ const styles = {
     height: 'auto',
     marginLeft: '12px',
     wordBreak: 'break-all',
+    color: colors.navy600,
   },
 
   callLogEndInfo: {
     display: 'inline-flex',
     width: '100%',
     height: '16px',
     marginLeft: '12px',
-    marginTop: '4px',
+    marginTop: '8px',
     color: colors.navy600
   },
 
@@ -1455,7 +1475,7 @@ const styles = {
     width: '120px',
     height: '16px',
     textAlign: 'right',
-    marginTop: '16px',
+    marginTop: '18px',
     marginRight: '16px',
     color: colors.navy600
   },
@@ -1476,7 +1496,7 @@ const styles = {
     backgroundPosition: 'center',
     backgroundRepeat: 'no-repeat',
     marginRight: '12px',
-    marginTop: '12px',
+    marginTop: '8px',
     backgroundColor: colors.navy80,
     cursor: 'pointer'
   },
@@ -1488,7 +1508,7 @@ const styles = {
     backgroundImage: `url(${thumbnailVoice})`,
     backgroundPosition: 'center',
     backgroundRepeat: 'no-repeat',
-    marginTop: '12px',
+    marginTop: '8px',
     marginRight: '16px',
     backgroundColor: colors.navy80,
     cursor: 'pointer'

lib/views/CallLogItem.js

@@ -83,7 +83,7 @@ export class CallLogItem {
         innerText: displayName
       });
       const displayIdLabel = createLabel({
-        className: `${classes['callLogDisplayId']} ${classes['fontNormal']} ${classes['fontHeavy']}`,
+        className: `${classes['callLogDisplayId']} ${classes['fontSmall']}`,
         innerText: `User ID: ${displayId}`
       });
       const callEndInfo = createLabel({

lib/views/CallLogView.js

@@ -34,7 +34,7 @@ export default class CallLogView extends BaseElement{
       const callLogDescription = createDiv({ id: 'call_log_desc', className: `${classes['callLogListDesc']}` });
       const callLogDescLogo = createDiv({ className: `${classes['callLogDescLogo']}` });
       const callLogDescTitle = createDiv({ innerText: 'Sendbird Calls Quickstart', className: `${classes['callLogDescTitle']} ${classes['font24']} ${classes['fontDemi']}` });
-      const callLogDescLabel = createDiv({ innerText: 'This is the Sendbird Calls Quickstart page. Lorem ipsum', className: `${classes['callLogDescLabel']} ${classes['fontNormal']} ${classes['fontHeavy']}` });
+      const callLogDescLabel = createDiv({ innerText: 'This is the Sendbird Calls Quickstart page.', className: `${classes['callLogDescLabel']} ${classes['fontNormal']} ${classes['fontHeavy']}` });
       callLogDescription.appendChild(callLogDescLogo);
       callLogDescription.appendChild(callLogDescTitle);
       callLogDescription.appendChild(callLogDescLabel);