BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #15320 from gabriellpr/dark-light-buttons

Browse Source 
Styling light and dark buttons
This commit is contained in:
Ramón Souza 2022-07-13 21:03:46 +01:00 committed by GitHub
commit da848e990a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 106 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
bigbluebutton-html5/imports/ui/components/common/button/styles.js
View File

@ -51,6 +51,7 @@ import {
btnMutedBorder,
btnMutedColor,
btnMutedBg,
colorWhite,
colorGray,
} from '/imports/ui/stylesheets/styled-components/palette';
import BaseButton from './base/component';
@ -357,6 +358,73 @@ const ButtonSpan = styled.span`
padding: ${jumboPaddingY} ${jumboPaddingX};
`}
${({ size, color }) => size === 'md' && color === 'light' && `
color: ${colorGray};
&:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & {
color: ${colorGray};
box-shadow: 0 0 0 1px #CDD6E0 !important;
background-color: #DCE4EC !important;
}
&:hover {
color: hsl(210, 13%, 20%) !important;
background-color: #DCE4EC !important;
}
&:active {
color: hsl(210, 13%, 20%) !important;
background-color: hsl(210, 30%, 80%) !important;
}
&:focus:hover {
color: hsl(210, 13%, 20%) !important;
box-shadow: 0 0 0 1px #CDD6E0 !important;
background-color: #DCE4EC !important;
}
&:focus:active {
color: hsl(210, 13%, 20%) !important;
box-shadow: 0 0 0 1px #CDD6E0 !important;
background-color: hsl(210, 30%, 80%) !important;
}
`}
${({ size, color }) => size === 'md' && color === 'dark' && `
color: ${colorWhite};
background: none !important;
&:focus,
.buttonWrapper:focus:not([aria-disabled="true"]) & {
color: ${colorWhite};
box-shadow: 0 0 0 1px ${btnDefaultGhostBorder} !important;
background-color: ${btnDefaultGhostBg} !important;
}
&:hover {
color: hsl(0, 0%, 85%) !important;
background-color: ${btnDefaultGhostBg} !important;
}
&:active {
color: hsl(0, 0%, 85%) !important;
background-color: ${btnDefaultGhostActiveBg} !important;
}
&:focus:hover {
color: hsl(0, 0%, 85%) !important;
box-shadow: 0 0 0 1px ${btnDefaultGhostBorder} !important;
background-color: ${btnDefaultGhostBg} !important;
}
&:focus:active {
color: hsl(0, 0%, 85%) !important;
box-shadow: 0 0 0 1px ${btnDefaultGhostBorder} !important;
background-color: ${btnDefaultGhostActiveBg} !important;
}
`}
${({ color, ghost }) => color === 'default' && !ghost && `
color: ${btnDefaultColor};
background-color: ${btnDefaultBg};

3
bigbluebutton-html5/imports/ui/components/common/control-header/right/component.jsx
View File

@ -10,7 +10,8 @@ class Right extends Component {
render() {
return (
<Styled.CloseButton
size="sm"
size="md"
color="light"
hideLabel
circle
{...this.props}

8
bigbluebutton-html5/imports/ui/components/common/control-header/right/styles.js
View File

@ -1,7 +1,6 @@
import styled from 'styled-components';
import Button from '/imports/ui/components/common/button/component';
import { fontSizeBase } from '/imports/ui/stylesheets/styled-components/typography';
import { colorWhite } from '/imports/ui/stylesheets/styled-components/palette';
const CloseButton = styled(Button)`
span:first-of-type {
@ -13,13 +12,6 @@ const CloseButton = styled(Button)`
width: auto;
font-size: ${fontSizeBase};
}
&:hover,
&:focus,
.buttonWrapper:hover &,
.buttonWrapper:focus & {
background-color: ${colorWhite} !important;
}
}
`;

3
bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx
View File

@ -213,7 +213,8 @@ class NavBar extends Component {
&& <Styled.ArrowLeft iconName="left_arrow" />}
<Styled.NavbarToggleButton
onClick={this.handleToggleUserList}
ghost
color='dark'
size='md'
circle
hideLabel
data-test={hasNotification ? 'hasUnreadMessages' : 'toggleUserList'}

3
bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/component.jsx
View File

@ -294,7 +294,8 @@ class SettingsDropdown extends PureComponent {
label={intl.formatMessage(intlMessages.optionsLabel)}
icon="more"
data-test="optionsButton"
ghost
color="dark"
size="md"
circle
hideLabel
// FIXME: Without onClick react proptypes keep warning

16
bigbluebutton-html5/imports/ui/components/nav-bar/settings-dropdown/styles.js
View File

@ -1,7 +1,6 @@
import styled from 'styled-components';
import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints';
import Button from '/imports/ui/components/common/button/component';
import { colorWhite } from '/imports/ui/stylesheets/styled-components/palette';
const DropdownButton = styled(Button)`
${({ state }) => state === 'open' && `
@ -12,22 +11,7 @@ const DropdownButton = styled(Button)`
${({ state }) => state === 'closed' && `
margin: 0;
& span {
border: none;
box-shadow: none;
}
z-index: 3;
&:hover,
&:focus {
span {
background-color: transparent !important;
color: ${colorWhite} !important;
opacity: .75;
}
}
`}
`;

10
bigbluebutton-html5/imports/ui/components/nav-bar/styles.js
View File

@ -92,18 +92,8 @@ const Bottom = styled.div`
const NavbarToggleButton = styled(Button)`
margin: 0;
z-index: 3;
&:hover,
&:focus {
span {
background-color: transparent !important;
color: ${colorWhite} !important;
opacity: .75;
}
}
${({ hasNotification }) => hasNotification && `
position: relative;

14
bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx
View File

@ -308,7 +308,8 @@ class PresentationToolbar extends PureComponent {
startOfSlides ? "noPrevSlideDesc" : "prevSlideDesc"
}
disabled={startOfSlides || !isMeteorConnected}
color="default"
color="light"
circle
icon="left_arrow"
size="md"
onClick={this.previousSlideHandler}
@ -341,7 +342,8 @@ class PresentationToolbar extends PureComponent {
endOfSlides ? 'noNextSlideDesc' : 'nextSlideDesc'
}
disabled={endOfSlides || !isMeteorConnected}
color="default"
color="light"
circle
icon="right_arrow"
size="md"
onClick={this.nextSlideHandler}
@ -361,11 +363,11 @@ class PresentationToolbar extends PureComponent {
? intl.formatMessage(intlMessages.toolbarMultiUserOff)
: intl.formatMessage(intlMessages.toolbarMultiUserOn)
}
color="default"
color="light"
disabled={!isMeteorConnected}
icon={multiUser ? 'multi_whiteboard' : 'whiteboard'}
size="md"
circle={false}
circle
onClick={() => this.handleSwitchWhiteboardMode(!multiUser)}
label={
multiUser
@ -407,11 +409,11 @@ class PresentationToolbar extends PureComponent {
intlMessages.presentationLabel
)} ${intl.formatMessage(intlMessages.fitToWidth)}`
}
color="default"
color="light"
disabled={!isMeteorConnected}
icon="fit_to_width"
size="md"
circle={false}
circle
onClick={() => this.props.tldrawAPI.zoomToFit()}
label={intl.formatMessage(intlMessages.fitToPage)}
hideLabel

38
bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.js
View File

@ -72,7 +72,6 @@ const QuickPollButton = styled(QuickPollDropdownContainer)`
&:focus {
background-color: ${colorOffWhite};
border: 0;
}
`;
@ -83,7 +82,6 @@ const PresentationSlideControls = styled.div`
display: flex;
flex-direction: row;
align-items: center;
border-radius: 0;
& > button {
padding: ${whiteboardToolbarPadding};
@ -91,7 +89,10 @@ const PresentationSlideControls = styled.div`
`;
const PrevSlideButton = styled(Button)`
border: none !important;
i {
padding-left: 20%;
}
& > i {
font-size: 1rem;
@ -105,25 +106,17 @@ const PrevSlideButton = styled(Button)`
}
}
position: relative;
color: ${toolbarButtonColor};
background-color: ${colorOffWhite};
border-radius: 0;
box-shadow: none !important;
border: 0;
&:focus {
background-color: ${colorOffWhite};
border: 0;
}
`;
const NextSlideButton = styled(Button)`
border: none !important;
i {
padding-left: 60%;
}
& > i {
font-size: 1rem;
[dir="rtl"] & {
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
@ -132,18 +125,6 @@ const NextSlideButton = styled(Button)`
transform: scale(-1, 1);
}
}
position: relative;
color: ${toolbarButtonColor};
background-color: ${colorOffWhite};
border-radius: 0;
box-shadow: none !important;
border: 0;
&:focus {
background-color: ${colorOffWhite};
border: 0;
}
`;
const SkipSlideSelect = styled.select`
@ -184,7 +165,6 @@ const PresentationZoomControls = styled.div`
display: flex;
flex-direction: row;
align-items: center;
border-radius: 0;
button {
padding: ${whiteboardToolbarPadding};

6
bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/zoom-tool/component.jsx
View File

@ -180,6 +180,9 @@ class ZoomTool extends PureComponent {
minBound={minBound}
>
<Styled.DecreaseZoomButton
color="light"
circle
size="md"
key="zoom-tool-1"
aria-describedby="zoomOutDescription"
aria-label={zoomOutAriaLabel}
@ -220,6 +223,9 @@ class ZoomTool extends PureComponent {
maxBound={maxBound}
>
<Styled.IncreaseZoomButton
color="light"
circle
size="md"
key="zoom-tool-3"
aria-describedby="zoomInDescription"
aria-label={zoomInAriaLabel}

5
bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/zoom-tool/styles.js
View File

@ -1,5 +1,4 @@
import styled from 'styled-components';
import Styled from '../styles';
import {
colorOffWhite,
toolbarButtonColor,
@ -9,9 +8,9 @@ import {
} from '/imports/ui/stylesheets/styled-components/general';
import Button from '/imports/ui/components/common/button/component';
const DecreaseZoomButton = styled(Styled.PrevSlideButton)``;
const DecreaseZoomButton = styled(Button)``;
const IncreaseZoomButton = styled(Styled.NextSlideButton)``;
const IncreaseZoomButton = styled(Button)``;
const ResetZoomButton = styled(Button)`
text-align: center;

6
bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx
View File

@ -332,10 +332,10 @@ class UserOptions extends PureComponent {
label={intl.formatMessage(intlMessages.optionsLabel)}
data-test="manageUsers"
icon="settings"
ghost
color="primary"
color="light"
hideLabel
size="sm"
size="md"
circle
onClick={() => null}
/>
)}

13
bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/styles.js
View File

@ -1,7 +1,6 @@
import styled from 'styled-components';
import Button from '/imports/ui/components/common/button/component';
import { colorOffWhite, colorGrayDark } from '/imports/ui/stylesheets/styled-components/palette';
import { fontSizeBase } from '/imports/ui/stylesheets/styled-components/typography';
const OptionsButton = styled(Button)`
@ -10,16 +9,12 @@ const OptionsButton = styled(Button)`
padding: 0;
margin: 0 0.25rem;
i {
width: auto;
font-size: ${fontSizeBase} !important;
color: ${colorGrayDark} !important;
background-color: transparent !important;
span {
padding: inherit;
}
&:hover,
&:focus {
background-color: ${colorOffWhite} !important;
i {
font-size: ${fontSizeBase} !important;
}
`;