diff --git a/css/_settings-button.scss b/css/_settings-button.scss index 3ef42c57b4..1ba1ed68e9 100644 --- a/css/_settings-button.scss +++ b/css/_settings-button.scss @@ -30,24 +30,24 @@ right: -4px; top: -3px; - &:hover { + &:hover { background: #F2F3F4; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.1); - &> svg { - fill: #000; + & > svg { + fill: #040404; } &.settings-button-small-icon--disabled { background: #36383C; &> svg { - fill: #929292; - } + fill: #929292; + } } } - &> svg { + & > svg { fill: #fff; } diff --git a/css/_toolbars.scss b/css/_toolbars.scss index 47ce8baae6..18d8314e72 100644 --- a/css/_toolbars.scss +++ b/css/_toolbars.scss @@ -120,12 +120,16 @@ margin: 8px 0; } -.hangup-button { - background-color: $hangupColor; +div.hangup-button { + background-color: #CB2233; @media (hover: hover) and (pointer: fine) { &:hover { - background-color: $hangupHoverColor; + background-color: #E04757; + } + + &:active { + background-color: #A21B29; } } @@ -134,12 +138,16 @@ } } -.hangup-menu-button { - background-color: $hangupColor; +div.hangup-menu-button { + background-color: #CB2233; @media (hover: hover) and (pointer: fine) { &:hover { - background-color: $hangupHoverColor; + background-color: #E04757; + } + + &:active { + background-color: #A21B29; } } diff --git a/css/_variables.scss b/css/_variables.scss index aeb6e0cb4d..dfe48669b0 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -4,8 +4,6 @@ * Style variables */ $baseFontFamily: -apple-system, BlinkMacSystemFont, 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif; -$hangupColor:#DD3849; -$hangupHoverColor: #F25363; /** * Size variables. diff --git a/react/features/base/ui/constants.web.ts b/react/features/base/ui/constants.web.ts index 28181ce604..8af0a6eb4d 100644 --- a/react/features/base/ui/constants.web.ts +++ b/react/features/base/ui/constants.web.ts @@ -228,7 +228,11 @@ export const commonStyles = (theme: Theme) => { '@media (hover: hover) and (pointer: fine)': { '&:hover': { - background: theme.palette.ui04 + backgroundColor: theme.palette.ui04 + }, + + '&:active': { + backgroundColor: theme.palette.ui03 } }, [theme.breakpoints.down(320)]: { @@ -237,7 +241,7 @@ export const commonStyles = (theme: Theme) => { }, '&.toggled': { - background: theme.palette.ui03 + backgroundColor: theme.palette.ui03 }, '&.disabled': { @@ -265,7 +269,15 @@ export const commonStyles = (theme: Theme) => { padding: 6, textAlign: 'center' as const, pointerEvents: 'all' as const, - boxShadow: '0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15)' + boxShadow: '0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15)', + + '& > div': { + marginRight: theme.spacing(2), + + '&:last-of-type': { + marginRight: 0 + } + } } }; }; diff --git a/react/features/participants-pane/components/web/ParticipantsCounter.tsx b/react/features/participants-pane/components/web/ParticipantsCounter.tsx index 4c433a4f5f..c9a8c3a558 100644 --- a/react/features/participants-pane/components/web/ParticipantsCounter.tsx +++ b/react/features/participants-pane/components/web/ParticipantsCounter.tsx @@ -16,8 +16,8 @@ const useStyles = makeStyles()(theme => { ...withPixelLineHeight(theme.typography.labelBold), pointerEvents: 'none', position: 'absolute', - right: '-3px', - top: '-2px' + right: '-4px', + top: '-3px' } }; });