mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

MM-54768 - Updating user popover UI (#24814)

Просмотр исходного кода 
* MM-54768 - Updating user popover UI

* Fixing test errors

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
Этот коммит содержится в:
Asaad Mahmood
2023-10-10 22:00:34 +05:00
коммит произвёл GitHub
родитель f573aaba02
Коммит d2790dcab7
5 изменённых файлов: 197 добавлений и 184 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

192
webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap
Просмотреть файл

@@ -194,28 +194,28 @@ exports[`component/user_group_popover should match snapshot 1`] = `
</Title> </Title>
<CloseButton <CloseButton
aria-label="Close" aria-label="Close"
className="btn btn-xs btn-icon" className="btn btn-sm btn-compact btn-icon"
onClick={[Function]} onClick={[Function]}
> >
<button <button
aria-label="Close" aria-label="Close"
className="CloseButton-lhxEdi gyMeQZ btn btn-xs btn-icon" className="CloseButton-lhxEdi gyMeQZ btn btn-sm btn-compact btn-icon"
onClick={[Function]} onClick={[Function]}
> >
<CloseIcon> <LocalizedIcon
<svg ariaLabel={
fill="currentColor" Object {
height="1em" "defaultMessage": "Close",
version="1.1" "id": "user_group_popover.close",
viewBox="0 0 24 24" }
width="1em" }
xmlns="http://www.w3.org/2000/svg" className="icon icon-close"
> >
<path <i
d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" aria-label="Close"
/> className="icon icon-close"
</svg> />
</CloseIcon> </LocalizedIcon>
</button> </button>
</CloseButton> </CloseButton>
</div> </div>
@@ -1244,7 +1244,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
> >
<DMButton <DMButton
aria-label="Send message to username0" aria-label="Send message to username0"
className="btn-icon" className="btn btn-icon btn-xs"
onBlur={[Function]} onBlur={[Function]}
onClick={[Function]} onClick={[Function]}
onFocus={[Function]} onFocus={[Function]}
@@ -1253,27 +1253,27 @@ exports[`component/user_group_popover should match snapshot 1`] = `
> >
<button <button
aria-label="Send message to username0" aria-label="Send message to username0"
className="DMButton-hIFgRF ecgFEo btn-icon" className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
onBlur={[Function]} onBlur={[Function]}
onClick={[Function]} onClick={[Function]}
onFocus={[Function]} onFocus={[Function]}
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
<SendIcon> <LocalizedIcon
<svg ariaLabel={
fill="currentColor" Object {
height="1em" "defaultMessage": "Close",
version="1.1" "id": "user_group_popover.close",
viewBox="0 0 24 24" }
width="1em" }
xmlns="http://www.w3.org/2000/svg" className="icon icon-send"
> >
<path <i
d="M2,21L23,12L2,3V10L17,12L2,14V21Z" aria-label="Close"
/> className="icon icon-send"
</svg> />
</SendIcon> </LocalizedIcon>
</button> </button>
</DMButton> </DMButton>
</OverlayTrigger> </OverlayTrigger>
@@ -1463,7 +1463,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
> >
<DMButton <DMButton
aria-label="Send message to username1" aria-label="Send message to username1"
className="btn-icon" className="btn btn-icon btn-xs"
onBlur={[Function]} onBlur={[Function]}
onClick={[Function]} onClick={[Function]}
onFocus={[Function]} onFocus={[Function]}
@@ -1472,27 +1472,27 @@ exports[`component/user_group_popover should match snapshot 1`] = `
> >
<button <button
aria-label="Send message to username1" aria-label="Send message to username1"
className="DMButton-hIFgRF ecgFEo btn-icon" className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
onBlur={[Function]} onBlur={[Function]}
onClick={[Function]} onClick={[Function]}
onFocus={[Function]} onFocus={[Function]}
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
<SendIcon> <LocalizedIcon
<svg ariaLabel={
fill="currentColor" Object {
height="1em" "defaultMessage": "Close",
version="1.1" "id": "user_group_popover.close",
viewBox="0 0 24 24" }
width="1em" }
xmlns="http://www.w3.org/2000/svg" className="icon icon-send"
> >
<path <i
d="M2,21L23,12L2,3V10L17,12L2,14V21Z" aria-label="Close"
/> className="icon icon-send"
</svg> />
</SendIcon> </LocalizedIcon>
</button> </button>
</DMButton> </DMButton>
</OverlayTrigger> </OverlayTrigger>
@@ -1682,7 +1682,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
> >
<DMButton <DMButton
aria-label="Send message to username10" aria-label="Send message to username10"
className="btn-icon" className="btn btn-icon btn-xs"
onBlur={[Function]} onBlur={[Function]}
onClick={[Function]} onClick={[Function]}
onFocus={[Function]} onFocus={[Function]}
@@ -1691,27 +1691,27 @@ exports[`component/user_group_popover should match snapshot 1`] = `
> >
<button <button
aria-label="Send message to username10" aria-label="Send message to username10"
className="DMButton-hIFgRF ecgFEo btn-icon" className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
onBlur={[Function]} onBlur={[Function]}
onClick={[Function]} onClick={[Function]}
onFocus={[Function]} onFocus={[Function]}
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
<SendIcon> <LocalizedIcon
<svg ariaLabel={
fill="currentColor" Object {
height="1em" "defaultMessage": "Close",
version="1.1" "id": "user_group_popover.close",
viewBox="0 0 24 24" }
width="1em" }
xmlns="http://www.w3.org/2000/svg" className="icon icon-send"
> >
<path <i
d="M2,21L23,12L2,3V10L17,12L2,14V21Z" aria-label="Close"
/> className="icon icon-send"
</svg> />
</SendIcon> </LocalizedIcon>
</button> </button>
</DMButton> </DMButton>
</OverlayTrigger> </OverlayTrigger>
@@ -1901,7 +1901,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
> >
<DMButton <DMButton
aria-label="Send message to username11" aria-label="Send message to username11"
className="btn-icon" className="btn btn-icon btn-xs"
onBlur={[Function]} onBlur={[Function]}
onClick={[Function]} onClick={[Function]}
onFocus={[Function]} onFocus={[Function]}
@@ -1910,27 +1910,27 @@ exports[`component/user_group_popover should match snapshot 1`] = `
> >
<button <button
aria-label="Send message to username11" aria-label="Send message to username11"
className="DMButton-hIFgRF ecgFEo btn-icon" className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
onBlur={[Function]} onBlur={[Function]}
onClick={[Function]} onClick={[Function]}
onFocus={[Function]} onFocus={[Function]}
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
<SendIcon> <LocalizedIcon
<svg ariaLabel={
fill="currentColor" Object {
height="1em" "defaultMessage": "Close",
version="1.1" "id": "user_group_popover.close",
viewBox="0 0 24 24" }
width="1em" }
xmlns="http://www.w3.org/2000/svg" className="icon icon-send"
> >
<path <i
d="M2,21L23,12L2,3V10L17,12L2,14V21Z" aria-label="Close"
/> className="icon icon-send"
</svg> />
</SendIcon> </LocalizedIcon>
</button> </button>
</DMButton> </DMButton>
</OverlayTrigger> </OverlayTrigger>
@@ -2120,7 +2120,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
> >
<DMButton <DMButton
aria-label="Send message to username12" aria-label="Send message to username12"
className="btn-icon" className="btn btn-icon btn-xs"
onBlur={[Function]} onBlur={[Function]}
onClick={[Function]} onClick={[Function]}
onFocus={[Function]} onFocus={[Function]}
@@ -2129,27 +2129,27 @@ exports[`component/user_group_popover should match snapshot 1`] = `
> >
<button <button
aria-label="Send message to username12" aria-label="Send message to username12"
className="DMButton-hIFgRF ecgFEo btn-icon" className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
onBlur={[Function]} onBlur={[Function]}
onClick={[Function]} onClick={[Function]}
onFocus={[Function]} onFocus={[Function]}
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
<SendIcon> <LocalizedIcon
<svg ariaLabel={
fill="currentColor" Object {
height="1em" "defaultMessage": "Close",
version="1.1" "id": "user_group_popover.close",
viewBox="0 0 24 24" }
width="1em" }
xmlns="http://www.w3.org/2000/svg" className="icon icon-send"
> >
<path <i
d="M2,21L23,12L2,3V10L17,12L2,14V21Z" aria-label="Close"
/> className="icon icon-send"
</svg> />
</SendIcon> </LocalizedIcon>
</button> </button>
</DMButton> </DMButton>
</OverlayTrigger> </OverlayTrigger>

160
webapp/channels/src/components/user_group_popover/group_member_list/__snapshots__/group_member_list.test.tsx.snap
Просмотреть файл

@@ -514,7 +514,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
> >
<DMButton <DMButton
aria-label="Send message to Name0 Surname0" aria-label="Send message to Name0 Surname0"
className="btn-icon" className="btn btn-icon btn-xs"
onBlur={[Function]} onBlur={[Function]}
onClick={[Function]} onClick={[Function]}
onFocus={[Function]} onFocus={[Function]}
@@ -523,27 +523,27 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
> >
<button <button
aria-label="Send message to Name0 Surname0" aria-label="Send message to Name0 Surname0"
className="DMButton-hIFgRF ecgFEo btn-icon" className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
onBlur={[Function]} onBlur={[Function]}
onClick={[Function]} onClick={[Function]}
onFocus={[Function]} onFocus={[Function]}
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
<SendIcon> <LocalizedIcon
<svg ariaLabel={
fill="currentColor" Object {
height="1em" "defaultMessage": "Close",
version="1.1" "id": "user_group_popover.close",
viewBox="0 0 24 24" }
width="1em" }
xmlns="http://www.w3.org/2000/svg" className="icon icon-send"
> >
<path <i
d="M2,21L23,12L2,3V10L17,12L2,14V21Z" aria-label="Close"
/> className="icon icon-send"
</svg> />
</SendIcon> </LocalizedIcon>
</button> </button>
</DMButton> </DMButton>
</OverlayTrigger> </OverlayTrigger>
@@ -733,7 +733,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
> >
<DMButton <DMButton
aria-label="Send message to Name1 Surname1" aria-label="Send message to Name1 Surname1"
className="btn-icon" className="btn btn-icon btn-xs"
onBlur={[Function]} onBlur={[Function]}
onClick={[Function]} onClick={[Function]}
onFocus={[Function]} onFocus={[Function]}
@@ -742,27 +742,27 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
> >
<button <button
aria-label="Send message to Name1 Surname1" aria-label="Send message to Name1 Surname1"
className="DMButton-hIFgRF ecgFEo btn-icon" className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
onBlur={[Function]} onBlur={[Function]}
onClick={[Function]} onClick={[Function]}
onFocus={[Function]} onFocus={[Function]}
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
<SendIcon> <LocalizedIcon
<svg ariaLabel={
fill="currentColor" Object {
height="1em" "defaultMessage": "Close",
version="1.1" "id": "user_group_popover.close",
viewBox="0 0 24 24" }
width="1em" }
xmlns="http://www.w3.org/2000/svg" className="icon icon-send"
> >
<path <i
d="M2,21L23,12L2,3V10L17,12L2,14V21Z" aria-label="Close"
/> className="icon icon-send"
</svg> />
</SendIcon> </LocalizedIcon>
</button> </button>
</DMButton> </DMButton>
</OverlayTrigger> </OverlayTrigger>
@@ -952,7 +952,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
> >
<DMButton <DMButton
aria-label="Send message to Name2 Surname2" aria-label="Send message to Name2 Surname2"
className="btn-icon" className="btn btn-icon btn-xs"
onBlur={[Function]} onBlur={[Function]}
onClick={[Function]} onClick={[Function]}
onFocus={[Function]} onFocus={[Function]}
@@ -961,27 +961,27 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
> >
<button <button
aria-label="Send message to Name2 Surname2" aria-label="Send message to Name2 Surname2"
className="DMButton-hIFgRF ecgFEo btn-icon" className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
onBlur={[Function]} onBlur={[Function]}
onClick={[Function]} onClick={[Function]}
onFocus={[Function]} onFocus={[Function]}
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
<SendIcon> <LocalizedIcon
<svg ariaLabel={
fill="currentColor" Object {
height="1em" "defaultMessage": "Close",
version="1.1" "id": "user_group_popover.close",
viewBox="0 0 24 24" }
width="1em" }
xmlns="http://www.w3.org/2000/svg" className="icon icon-send"
> >
<path <i
d="M2,21L23,12L2,3V10L17,12L2,14V21Z" aria-label="Close"
/> className="icon icon-send"
</svg> />
</SendIcon> </LocalizedIcon>
</button> </button>
</DMButton> </DMButton>
</OverlayTrigger> </OverlayTrigger>
@@ -1171,7 +1171,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
> >
<DMButton <DMButton
aria-label="Send message to Name3 Surname3" aria-label="Send message to Name3 Surname3"
className="btn-icon" className="btn btn-icon btn-xs"
onBlur={[Function]} onBlur={[Function]}
onClick={[Function]} onClick={[Function]}
onFocus={[Function]} onFocus={[Function]}
@@ -1180,27 +1180,27 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
> >
<button <button
aria-label="Send message to Name3 Surname3" aria-label="Send message to Name3 Surname3"
className="DMButton-hIFgRF ecgFEo btn-icon" className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
onBlur={[Function]} onBlur={[Function]}
onClick={[Function]} onClick={[Function]}
onFocus={[Function]} onFocus={[Function]}
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
<SendIcon> <LocalizedIcon
<svg ariaLabel={
fill="currentColor" Object {
height="1em" "defaultMessage": "Close",
version="1.1" "id": "user_group_popover.close",
viewBox="0 0 24 24" }
width="1em" }
xmlns="http://www.w3.org/2000/svg" className="icon icon-send"
> >
<path <i
d="M2,21L23,12L2,3V10L17,12L2,14V21Z" aria-label="Close"
/> className="icon icon-send"
</svg> />
</SendIcon> </LocalizedIcon>
</button> </button>
</DMButton> </DMButton>
</OverlayTrigger> </OverlayTrigger>
@@ -1390,7 +1390,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
> >
<DMButton <DMButton
aria-label="Send message to Name4 Surname4" aria-label="Send message to Name4 Surname4"
className="btn-icon" className="btn btn-icon btn-xs"
onBlur={[Function]} onBlur={[Function]}
onClick={[Function]} onClick={[Function]}
onFocus={[Function]} onFocus={[Function]}
@@ -1399,27 +1399,27 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
> >
<button <button
aria-label="Send message to Name4 Surname4" aria-label="Send message to Name4 Surname4"
className="DMButton-hIFgRF ecgFEo btn-icon" className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
onBlur={[Function]} onBlur={[Function]}
onClick={[Function]} onClick={[Function]}
onFocus={[Function]} onFocus={[Function]}
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
<SendIcon> <LocalizedIcon
<svg ariaLabel={
fill="currentColor" Object {
height="1em" "defaultMessage": "Close",
version="1.1" "id": "user_group_popover.close",
viewBox="0 0 24 24" }
width="1em" }
xmlns="http://www.w3.org/2000/svg" className="icon icon-send"
> >
<path <i
d="M2,21L23,12L2,3V10L17,12L2,14V21Z" aria-label="Close"
/> className="icon icon-send"
</svg> />
</SendIcon> </LocalizedIcon>
</button> </button>
</DMButton> </DMButton>
</OverlayTrigger> </OverlayTrigger>

10
webapp/channels/src/components/user_group_popover/group_member_list/group_member_list.tsx
Просмотреть файл

@@ -10,17 +10,18 @@ import type {ListChildComponentProps} from 'react-window';
import InfiniteLoader from 'react-window-infinite-loader'; import InfiniteLoader from 'react-window-infinite-loader';
import styled, {css} from 'styled-components'; import styled, {css} from 'styled-components';
import {SendIcon} from '@mattermost/compass-icons/components';
import type {ServerError} from '@mattermost/types/errors'; import type {ServerError} from '@mattermost/types/errors';
import type {Group} from '@mattermost/types/groups'; import type {Group} from '@mattermost/types/groups';
import type {UserProfile} from '@mattermost/types/users'; import type {UserProfile} from '@mattermost/types/users';
import LocalizedIcon from 'components/localized_icon';
import NoResultsIndicator from 'components/no_results_indicator'; import NoResultsIndicator from 'components/no_results_indicator';
import {NoResultsVariant} from 'components/no_results_indicator/types'; import {NoResultsVariant} from 'components/no_results_indicator/types';
import LoadingSpinner from 'components/widgets/loading/loading_spinner'; import LoadingSpinner from 'components/widgets/loading/loading_spinner';
import SimpleTooltip from 'components/widgets/simple_tooltip'; import SimpleTooltip from 'components/widgets/simple_tooltip';
import Avatar from 'components/widgets/users/avatar'; import Avatar from 'components/widgets/users/avatar';
import {t} from 'utils/i18n';
import * as Utils from 'utils/utils'; import * as Utils from 'utils/utils';
import {Load} from '../constants'; import {Load} from '../constants';
@@ -190,13 +191,16 @@ const GroupMemberList = (props: Props) => {
content={formatMessage({id: 'group_member_list.sendMessageTooltip', defaultMessage: 'Send message'})} content={formatMessage({id: 'group_member_list.sendMessageTooltip', defaultMessage: 'Send message'})}
> >
<DMButton <DMButton
className='btn-icon' className='btn btn-icon btn-xs'
aria-label={formatMessage( aria-label={formatMessage(
{id: 'group_member_list.sendMessageButton', defaultMessage: 'Send message to {user}'}, {id: 'group_member_list.sendMessageButton', defaultMessage: 'Send message to {user}'},
{user: name})} {user: name})}
onClick={() => showDirectChannel(user)} onClick={() => showDirectChannel(user)}
> >
<SendIcon/> <LocalizedIcon
className='icon icon-send'
ariaLabel={{id: t('user_group_popover.close'), defaultMessage: 'Close'}}
/>
</DMButton> </DMButton>
</SimpleTooltip> </SimpleTooltip>
</DMContainer> </DMContainer>

11
webapp/channels/src/components/user_group_popover/user_group_popover.tsx
Просмотреть файл

@@ -6,12 +6,13 @@ import React, {useEffect, useCallback, useState, useRef} from 'react';
import {FormattedMessage, useIntl} from 'react-intl'; import {FormattedMessage, useIntl} from 'react-intl';
import styled from 'styled-components'; import styled from 'styled-components';
import {CloseIcon, MagnifyIcon} from '@mattermost/compass-icons/components'; import {MagnifyIcon} from '@mattermost/compass-icons/components';
import type {Group} from '@mattermost/types/groups'; import type {Group} from '@mattermost/types/groups';
import type {UserProfile} from '@mattermost/types/users'; import type {UserProfile} from '@mattermost/types/users';
import type {ActionResult} from 'mattermost-redux/types/actions'; import type {ActionResult} from 'mattermost-redux/types/actions';
import LocalizedIcon from 'components/localized_icon';
import {QuickInput} from 'components/quick_input/quick_input'; import {QuickInput} from 'components/quick_input/quick_input';
import GroupMemberList from 'components/user_group_popover/group_member_list'; import GroupMemberList from 'components/user_group_popover/group_member_list';
import UserGroupsModal from 'components/user_groups_modal'; import UserGroupsModal from 'components/user_groups_modal';
@@ -20,6 +21,7 @@ import Popover from 'components/widgets/popover';
import Constants, {A11yClassNames, A11yCustomEventTypes, ModalIdentifiers} from 'utils/constants'; import Constants, {A11yClassNames, A11yCustomEventTypes, ModalIdentifiers} from 'utils/constants';
import type {A11yFocusEventDetail} from 'utils/constants'; import type {A11yFocusEventDetail} from 'utils/constants';
import {t} from 'utils/i18n';
import * as Keyboard from 'utils/keyboard'; import * as Keyboard from 'utils/keyboard';
import {shouldFocusMainTextbox} from 'utils/post_utils'; import {shouldFocusMainTextbox} from 'utils/post_utils';
@@ -202,12 +204,15 @@ const UserGroupPopover = (props: Props) => {
{group.display_name} {group.display_name}
</Title> </Title>
<CloseButton <CloseButton
className='btn btn-xs btn-icon' className='btn btn-sm btn-compact btn-icon'
aria-label={formatMessage({id: 'user_group_popover.close', defaultMessage: 'Close'})} aria-label={formatMessage({id: 'user_group_popover.close', defaultMessage: 'Close'})}
onClick={handleClose} onClick={handleClose}
ref={closeRef} ref={closeRef}
> >
<CloseIcon/> <LocalizedIcon
className='icon icon-close'
ariaLabel={{id: t('user_group_popover.close'), defaultMessage: 'Close'}}
/>
</CloseButton> </CloseButton>
</Heading> </Heading>
<Subtitle> <Subtitle>

8
webapp/channels/src/sass/components/_buttons.scss
Просмотреть файл

@@ -71,6 +71,7 @@ button {
&.btn-xs { &.btn-xs {
width: 24px; width: 24px;
height: 24px; height: 24px;
padding: 0;
&.btn-compact { &.btn-compact {
width: 20px; width: 20px;
@@ -85,6 +86,7 @@ button {
&.btn-sm { &.btn-sm {
width: 32px; width: 32px;
height: 32px; height: 32px;
padding: 0;
&.btn-compact { &.btn-compact {
width: 28px; width: 28px;
@@ -99,6 +101,7 @@ button {
&.btn-lg { &.btn-lg {
width: 48px; width: 48px;
height: 48px; height: 48px;
padding: 0;
&.btn-compact { &.btn-compact {
width: 36px; width: 36px;
@@ -180,14 +183,15 @@ button {
position: relative; position: relative;
border-color: transparent; border-color: transparent;
background-color: rgb(var(--button-bg-rgb)); background-color: rgb(var(--button-bg-rgb));
color: rgb(var(--button-color-rgb)); color: rgb(var(--button-color-rgb)) !important;
// These hover and active values are for things outside the app__body, the correct theme styles for the primary button are applied in utils.jsx // These hover and active values are for things outside the app__body, the correct theme styles for the primary button are applied in utils.jsx
&:hover { &:hover {
background-color: #1a51c8; background-color: #1a51c8;
} }
&:active { &:active,
&:focus {
background-color: #184ab6; background-color: #184ab6;
} }