Welcome page calendar ui improvements (#3405)

* Welcome page calendar ui improvements

* Addressing PR review comments.

css/_atlaskit_overrides.scss

@@ -10,3 +10,31 @@
     -ms-transform: translateX(0) translateY(100%) translateY(16px) !important;
     -webkit-transform: translateX(0) translateY(100%) translateY(16px) !important;
 }
+
+/**
+ * Welcome page tab color adjustments.
+ */
+.welcome {
+    /**
+     * The text color of the selected tab and hovered tabs.
+     */
+    li.bcVmZW,
+    li.bcVmZW:hover,
+    li.kheoEp:hover {
+        color: #172B4D;
+    }
+
+    /**
+     * The color of the inactive tab text.
+     */
+    li.kheoEp {
+        color: #FFFFFF;
+    }
+
+    /**
+     * The color of the underline of a selected tab.
+     */
+    li>span.kByArU {
+        background-color: #172B4D;
+    }
+}

css/_navigate_section_list.scss

@@ -30,6 +30,10 @@
     &.with-click-handler:hover {
         background-color: #1a5dbb;
     }
+
+    i {
+        cursor: inherit;
+    }
 }
 .navigate-section-tile-body {
     @extend %navigate-section-list-tile-text;

react/features/base/react/components/web/NavigateSectionListItem.js

@@ -12,21 +12,6 @@ import type { Item } from '../../Types';
  */
 type Props = {
 
-    /**
-     * The icon to use for the action button.
-     */
-    actionIconName: string,
-
-    /**
-     * The function to call when the action button is clicked.
-     */
-    actionOnClick: ?Function,
-
-    /**
-     * The tooltip to attach to the action button of this list item.
-     */
-    actionTooltip: string,
-
     /**
      * Function to be invoked when an item is pressed. The item's URL is passed.
      */

react/features/calendar-sync/components/AddMeetingUrlButton.web.js

@@ -3,6 +3,7 @@
 import Button from '@atlaskit/button';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import Tooltip from '@atlaskit/tooltip';
 
 import { translate } from '../../base/i18n';
 
@@ -59,12 +60,14 @@ class AddMeetingUrlButton extends Component<Props> {
      */
     render() {
         return (
-            <Button
+            <Tooltip content = { this.props.t('calendarSync.addMeetingURL') }>
-                appearance = 'primary'
+                <Button
-                onClick = { this._onClick }
+                    appearance = 'primary'
-                type = 'button'>
+                    onClick = { this._onClick }
-                { this.props.t('calendarSync.addMeetingURL') }
+                    type = 'button'>
-            </Button>
+                    <i className = { 'icon-add' } />
+                </Button>
+            </Tooltip>
         );
     }
 

react/features/calendar-sync/components/BaseCalendarList.js

@@ -8,13 +8,14 @@ import { getLocalizedDateFormatter, translate } from '../../base/i18n';
 import { NavigateSectionList } from '../../base/react';
 
 import { refreshCalendar } from '../actions';
+
 import { isCalendarEnabled } from '../functions';
 
 import AddMeetingUrlButton from './AddMeetingUrlButton';
 
 /**
  * The type of the React {@code Component} props of
- * {@link AbstractCalendarList}.
+ * {@link BaseCalendarList}.
  */
 type Props = {
 
@@ -47,7 +48,7 @@ type Props = {
 /**
  * Component to display a list of events from a connected calendar.
  */
-class AbstractCalendarList extends Component<Props> {
+class BaseCalendarList extends Component<Props> {
     /**
      * Default values for the component's props.
      */
@@ -75,7 +76,7 @@ class AbstractCalendarList extends Component<Props> {
     }
 
     /**
-     * Initializes a new {@code CalendarList} instance.
+     * Initializes a new {@code BaseCalendarList} instance.
      *
      * @inheritdoc
      */
@@ -260,5 +261,5 @@ function _mapStateToProps(state: Object) {
 }
 
 export default isCalendarEnabled()
-    ? translate(connect(_mapStateToProps)(AbstractCalendarList))
+    ? translate(connect(_mapStateToProps)(BaseCalendarList))
     : undefined;

react/features/calendar-sync/components/CalendarList.native.js

@@ -10,7 +10,7 @@ import { translate } from '../../base/i18n';
 import { isCalendarEnabled } from '../functions';
 import styles from './styles';
 
-import AbstractCalendarList from './AbstractCalendarList';
+import BaseCalendarList from './BaseCalendarList';
 
 /**
  * The tyoe of the React {@code Component} props of {@link CalendarList}.
@@ -59,8 +59,8 @@ class CalendarList extends Component<Props> {
         const { disabled } = this.props;
 
         return (
-            AbstractCalendarList
+            BaseCalendarList
-                ? <AbstractCalendarList
+                ? <BaseCalendarList
                     disabled = { disabled }
                     renderListEmptyComponent
                         = { this._getRenderListEmptyComponent() } />

react/features/calendar-sync/components/CalendarList.web.js

@@ -11,7 +11,7 @@ import { openSettingsDialog, SETTINGS_TABS } from '../../settings';
 import { refreshCalendar } from '../actions';
 import { isCalendarEnabled } from '../functions';
 
-import AbstractCalendarList from './AbstractCalendarList';
+import BaseCalendarList from './BaseCalendarList';
 
 declare var interfaceConfig: Object;
 
@@ -74,8 +74,8 @@ class CalendarList extends Component<Props> {
         const { disabled } = this.props;
 
         return (
-            AbstractCalendarList
+            BaseCalendarList
-                ? <AbstractCalendarList
+                ? <BaseCalendarList
                     disabled = { disabled }
                     renderListEmptyComponent
                         = { this._getRenderListEmptyComponent() } />

react/features/settings/components/web/SettingsButton.js

@@ -23,6 +23,11 @@ type Props = AbstractButtonProps & {
      */
     _filmstripOnly: boolean,
 
+    /**
+     * The default tab at which the settings dialog will be opened.
+     */
+    defaultTab: string,
+
     /**
      * The redux {@code dispatch} function.
      */
@@ -45,13 +50,16 @@ class SettingsButton extends AbstractButton<Props, *> {
      * @returns {void}
      */
     _handleClick() {
-        const { _filmstripOnly, dispatch } = this.props;
+        const {
+            _filmstripOnly,
+            defaultTab = SETTINGS_TABS.DEVICES,
+            dispatch } = this.props;
 
         sendAnalytics(createToolbarEvent('settings'));
         if (_filmstripOnly) {
             dispatch(openDeviceSelectionPopup());
         } else {
-            dispatch(openSettingsDialog(SETTINGS_TABS.DEVICES));
+            dispatch(openSettingsDialog(defaultTab));
         }
     }
 }

react/features/welcome/components/WelcomePage.web.js

@@ -12,7 +12,7 @@ import { translate } from '../../base/i18n';
 import { Platform, Watermarks } from '../../base/react';
 import { CalendarList } from '../../calendar-sync';
 import { RecentList } from '../../recent-list';
-import { SettingsButton } from '../../settings';
+import { SettingsButton, SETTINGS_TABS } from '../../settings';
 
 import { AbstractWelcomePage, _mapStateToProps } from './AbstractWelcomePage';
 
@@ -237,7 +237,7 @@ class WelcomePage extends AbstractWelcomePage {
         return (
             <div className = 'tab-container' >
                 <div className = 'welcome-page-settings'>
-                    <SettingsButton />
+                    <SettingsButton defaultTab = { SETTINGS_TABS.CALENDAR } />
                 </div>
                 <Tabs tabs = { tabs } />
             </div>);