diff --git a/src/renderer/components/ErrorView.tsx b/src/renderer/components/ErrorView.tsx index e372d039..dfa0f8cd 100644 --- a/src/renderer/components/ErrorView.tsx +++ b/src/renderer/components/ErrorView.tsx @@ -8,6 +8,9 @@ import React from 'react'; import {Container, Row, Col} from 'react-bootstrap'; import {FormattedMessage} from 'react-intl'; +// TODO: Will remove in https://mattermost.atlassian.net/browse/MM-62724 +import 'bootstrap/dist/css/bootstrap.min.css'; + type Props = { errorInfo?: string; url?: string; diff --git a/src/renderer/components/MainPage.tsx b/src/renderer/components/MainPage.tsx index 0d669110..72500cc1 100644 --- a/src/renderer/components/MainPage.tsx +++ b/src/renderer/components/MainPage.tsx @@ -5,7 +5,6 @@ import classNames from 'classnames'; import React, {Fragment} from 'react'; import type {DropResult} from 'react-beautiful-dnd'; -import {Container, Row} from 'react-bootstrap'; import type {IntlShape} from 'react-intl'; import {injectIntl} from 'react-intl'; @@ -433,7 +432,7 @@ class MainPage extends React.PureComponent { const activeServer = this.state.servers.find((srv) => srv.id === this.state.activeServerId); const topRow = ( - @@ -489,7 +488,7 @@ class MainPage extends React.PureComponent { )} - + ); const views = () => { @@ -526,9 +525,9 @@ class MainPage extends React.PureComponent { const viewsRow = ( - +
{views()} - +
); return ( @@ -536,10 +535,10 @@ class MainPage extends React.PureComponent { className='MainPage' onClick={this.focusOnWebView} > - +
{topRow} {viewsRow} - +
); } diff --git a/src/renderer/components/TabBar.tsx b/src/renderer/components/TabBar.tsx index b3dde114..8679ce37 100644 --- a/src/renderer/components/TabBar.tsx +++ b/src/renderer/components/TabBar.tsx @@ -6,7 +6,6 @@ import classNames from 'classnames'; import React from 'react'; import type {DraggingStyle, DropResult, NotDraggingStyle} from 'react-beautiful-dnd'; import {DragDropContext, Draggable, Droppable} from 'react-beautiful-dnd'; -import {Nav, NavItem, NavLink} from 'react-bootstrap'; import type {IntlShape} from 'react-intl'; import {FormattedMessage, injectIntl} from 'react-intl'; @@ -119,9 +118,8 @@ class TabBar extends React.PureComponent { } return ( - { {...provided.dragHandleProps} style={getStyle(provided.draggableProps.style)} > - { - this.props.onSelect(tab.id!); + onClick={() => { + if (!this.props.tabsDisabled) { + this.props.onSelect(tab.id!); + } }} + className={classNames({ + disabled: this.props.tabsDisabled, + })} >
{ }
-
-
+ + ); }} @@ -176,19 +176,18 @@ class TabBar extends React.PureComponent { direction='horizontal' > {(provided) => ( - + )} diff --git a/src/renderer/css/components/ServerDropdownButton.scss b/src/renderer/css/components/ServerDropdownButton.scss index bad02edd..ff7ccfe2 100644 --- a/src/renderer/css/components/ServerDropdownButton.scss +++ b/src/renderer/css/components/ServerDropdownButton.scss @@ -86,6 +86,7 @@ top: -5px; right: -1px; border: 2px solid #efefef; + box-sizing: border-box; } .ServerDropdownButton.darkMode { diff --git a/src/renderer/css/components/TabBar.css b/src/renderer/css/components/TabBar.css index b493c150..a31c76e9 100644 --- a/src/renderer/css/components/TabBar.css +++ b/src/renderer/css/components/TabBar.css @@ -7,6 +7,8 @@ justify-content: flex-start; -webkit-app-region: drag; padding: 6px 8px; + margin-bottom: 0; + list-style: none; } .TabBar-nonDrag { @@ -33,6 +35,8 @@ } .TabBar>li>a { + display: block; + cursor: pointer; color: rgba(61,60,64,0.7); font-family: "Open Sans", sans-serif; font-weight: 600; @@ -43,12 +47,24 @@ border-radius: 4px; border: none !important; padding: 0; + text-decoration: none; +} + +.TabBar>li>a.disabled { + color: #6c757d; + background-color: transparent; + pointer-events: none; + cursor: default; } .TabBar.darkMode>li>a { color: rgba(221,221,221,0.64); } +.TabBar.darkMode>li>a.disabled { + color: #6c757d; +} + .TabBar>li>a:hover { background-color: rgba(255,255,255,0.56); text-decoration: none; diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx index abe3f25d..3a6557a9 100644 --- a/src/renderer/index.tsx +++ b/src/renderer/index.tsx @@ -2,7 +2,6 @@ // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import 'bootstrap/dist/css/bootstrap.min.css'; import 'renderer/css/index.css'; import React from 'react';