From cc91cfe7b5ddd13fdc979d9ba1f1de8c9f3c9b81 Mon Sep 17 00:00:00 2001 From: Robert Pintilii Date: Thu, 13 Apr 2023 15:49:15 +0300 Subject: [PATCH] ref: Styles refactor (#13196) Move some styles from SCSS to JSS Remove unnecessary styles Remove feedback stars animation option --- css/_recording.scss | 8 -- css/components/_button-control.scss | 101 ------------------ css/components/_form-control.scss | 49 --------- css/components/_input-control.scss | 29 ----- css/components/_link.scss | 20 ---- css/main.scss | 6 -- css/modals/embed-meeting/_embed-meeting.scss | 42 -------- css/modals/feedback/_feedback.scss | 46 -------- interface_config.js | 3 +- react/features/app/components/App.web.tsx | 6 +- .../components/ConnectionStatsTable.tsx | 20 +++- .../components/EmbedMeetingDialog.tsx | 19 +++- .../components/EmbedMeetingTrigger.js | 70 ------------ .../components/FeedbackDialog.web.tsx | 5 +- .../overlay/components/web/ReloadButton.tsx | 84 +++++---------- .../LiveStream/AbstractStreamKeyForm.ts | 2 + .../LiveStream/web/StreamKeyForm.tsx | 35 +++++- 17 files changed, 98 insertions(+), 447 deletions(-) delete mode 100644 css/components/_button-control.scss delete mode 100644 css/components/_form-control.scss delete mode 100644 css/components/_input-control.scss delete mode 100644 css/components/_link.scss delete mode 100644 css/modals/embed-meeting/_embed-meeting.scss delete mode 100644 css/modals/feedback/_feedback.scss delete mode 100644 react/features/embed-meeting/components/EmbedMeetingTrigger.js diff --git a/css/_recording.scss b/css/_recording.scss index 6dca6491bc..2b06bf80ec 100644 --- a/css/_recording.scss +++ b/css/_recording.scss @@ -197,14 +197,6 @@ padding-bottom: 10px; } - .helper-link { - cursor: pointer; - font-weight: bold; - display: inline-block; - flex-shrink: 0; - margin-left: auto; - } - .warning-text { color:#FFD740; font-size: 12px; diff --git a/css/components/_button-control.scss b/css/components/_button-control.scss deleted file mode 100644 index 43d8d41419..0000000000 --- a/css/components/_button-control.scss +++ /dev/null @@ -1,101 +0,0 @@ -.button-control { - box-sizing: border-box; - display: inline-block; - border: 1px solid $buttonBorder; - vertical-align: baseline; - height: 30px; - min-width: 60px; - padding: 4px 10px; - margin: 0; - line-height: 1.5em; - outline: none; - background-color: transparent; - float: right; - font-size: 14px; - margin-left: 10px; - color: $buttonColor; - font-weight: $buttonFontWeight; - @include transition(background-color .1s ease-out); - - &[disabled] { - color: #666; - cursor: default; - } - - &_full-width { - margin: 0; - width: 100%; - } - - &:hover { - border: 1px solid $buttonHoverBorder; - background-color: $buttonHoverBackground; - @include transition(background-color .1s ease-in); - } - - &:active { - @include box-shadow(0, 0, 1px, $buttonShadowColor, true); - } - - &_light { - color: $defaultDarkColor; - background-color: $buttonLightBackground; - border: 1px solid $buttonLightBorder; - - &:hover { - border: 1px solid $buttonLightHoverBorder; - background-color: $buttonLightHoverBackground; - } - } - - &_link { - color: $buttonLinkColor; - background-color: $buttonLinkBackground; - - &:hover { - background-color: $buttonLinkBackground; - } - } - - &_overlay { - color: $primaryButtonColor; - background-color: $overlayButtonBg; - border-radius: 2px; - border: none; - - &:hover { - background-color: $primaryButtonBackground; - border: none; - } - } - - &_primary { - background-color: $primaryButtonBackground; - border: 1px solid $primaryButtonBackground; - color: $primaryButtonColor !important; - font-weight: $primaryButtonFontWeight; - - &:hover { - border: 1px solid $primaryButtonHoverBackground; - background-color: $primaryButtonHoverBackground; - } - - &[disabled] { - color: $primaryButtonColor; - } - } - - &_close { - color: $defaultFontColor; - } - &_submit { - color: $linkFontColor; - &:hover { - color: $linkHoverFontColor; - } - } - - &_center { - float: none !important; - } -} diff --git a/css/components/_form-control.scss b/css/components/_form-control.scss deleted file mode 100644 index a571665ecd..0000000000 --- a/css/components/_form-control.scss +++ /dev/null @@ -1,49 +0,0 @@ -.form-control { - padding: $formPadding 0; - - &:first-child { - padding-top: 0; - } - - &:last-child { - padding-bottom: 0; - } - - &__text { - margin: 8px 0; - font-size: 1em - } - - &__label { - font-size: 1em; - font-weight: $labelFontWeight; - } - - &__em { - color: $inputControlEmColor; - } - - &__container { - position: relative; - width: 100%; - margin-top: 5px; - margin-bottom: 5px; - @include flex(); - - .button-control { - margin: 1px 0 1px 10px; - } - } - - &__right { - position: absolute; - right: 0; - } -} - -/** - * Set a specific color for read only style. - */ -input:read-only { - color: $readOnlyInputColor; -} \ No newline at end of file diff --git a/css/components/_input-control.scss b/css/components/_input-control.scss deleted file mode 100644 index 0284fbdb3b..0000000000 --- a/css/components/_input-control.scss +++ /dev/null @@ -1,29 +0,0 @@ -.input-control { - @include transition(all .2s ease-in); - display: inline-block; - width: 100%; - padding: 5px 7px; - border-radius: $borderRadius; - line-height: 32px; - height: 32px; - text-align: left; - margin-bottom: 8px; - - &:last-child { - margin-bottom: inherit; - } - - &::selection { - background-color: $defaultDarkSelectionColor; - } - - - &.error { - color: $errorColor; - border-color: $errorColor; - } -} - -@include placeholder { - color: $placeHolderColor; -} \ No newline at end of file diff --git a/css/components/_link.scss b/css/components/_link.scss deleted file mode 100644 index 3844abc492..0000000000 --- a/css/components/_link.scss +++ /dev/null @@ -1,20 +0,0 @@ -.link { - cursor: pointer; - color: $linkFontColor; - @include transition(color .1s ease-out); - - &:hover { - color: $linkHoverFontColor; - text-decoration: underline; - @include transition(color .1s ease-in); - } -} - -/** - * Helper links are links that are meant to open a documentation page or more - * detailed info. - */ -.helper-link { - @extend .link; - font-size: 12px; -} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index a80832d854..24cb6a6536 100644 --- a/css/main.scss +++ b/css/main.scss @@ -33,8 +33,6 @@ $flagsImagePath: "../images/"; @import 'mini_toolbox'; @import 'modals/desktop-picker/desktop-picker'; @import 'modals/dialog'; -@import 'modals/embed-meeting/embed-meeting'; -@import 'modals/feedback/feedback'; @import 'modals/invite/info'; @import 'modals/screen-share/share-audio'; @import 'modals/screen-share/share-screen-warning'; @@ -51,10 +49,6 @@ $flagsImagePath: "../images/"; @import 'welcome_page_settings_toolbar'; @import 'toolbars'; @import 'redirect_page'; -@import 'components/form-control'; -@import 'components/link'; -@import 'components/button-control'; -@import 'components/input-control'; @import 'components/input-slider'; @import '404'; @import 'policy'; diff --git a/css/modals/embed-meeting/_embed-meeting.scss b/css/modals/embed-meeting/_embed-meeting.scss deleted file mode 100644 index c2b1a2f7a4..0000000000 --- a/css/modals/embed-meeting/_embed-meeting.scss +++ /dev/null @@ -1,42 +0,0 @@ -.embed-meeting { - &-dialog { - display: flex; - flex-direction: column; - } - - &-copy { - color: white; - font-size: 15px; - margin-left: auto; - margin-top: 16px; - } - - &-code { - background: transparent; - border: 1px solid #A4B8D1; - color: white; - font-size: 15px; - height: 165px; - line-height: 24px; - padding: 8px; - width: 100%; - resize: vertical; - } - - &-trigger { - display: flex; - align-items: center; - padding: 8px 8px 8px 16px; - margin-top: 24px; - width: calc(100% - 24px); - height: 24px; - background: #2A3A4B; - border: 1px solid #5E6D7A; - border-radius: 4px; - cursor: pointer; - - .jitsi-icon { - margin-right: 20px; - } - } -} diff --git a/css/modals/feedback/_feedback.scss b/css/modals/feedback/_feedback.scss deleted file mode 100644 index 118f9e213c..0000000000 --- a/css/modals/feedback/_feedback.scss +++ /dev/null @@ -1,46 +0,0 @@ -@-webkit-keyframes shake-rotate { - 0% { - -webkit-transform:scale(1) rotate(0deg); - transform:scale(1) rotate(0deg) - } - - 50% { - -webkit-transform:scale(.8) rotate(-5deg); - transform:scale(.8) rotate(-5deg) - } - - to { - -webkit-transform:scale(1) rotate(3deg); - transform:scale(1) rotate(3deg) - } -} - -@keyframes shake-rotate { - 0% { - -webkit-transform:scale(1) rotate(0deg); - transform:scale(1) rotate(0deg) - } - - 50% { - -webkit-transform:scale(.8) rotate(-5deg); - transform:scale(.8) rotate(-5deg) - } - - to { - -webkit-transform:scale(1) rotate(3deg); - transform:scale(1) rotate(3deg) - } -} - -.shake-rotate { - display: inline-block; - - -webkit-animation-duration: .4s; - animation-duration: .4s; - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; - -webkit-animation-name: shake-rotate; - animation-name: shake-rotate; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out -} diff --git a/interface_config.js b/interface_config.js index 2f8591c165..d4a6bf44f7 100644 --- a/interface_config.js +++ b/interface_config.js @@ -70,7 +70,8 @@ var interfaceConfig = { ENABLE_DIAL_OUT: true, - ENABLE_FEEDBACK_ANIMATION: false, // Enables feedback star animation. + // DEPRECATED. Animation no longer supported. + // ENABLE_FEEDBACK_ANIMATION: false, FILM_STRIP_MAX_HEIGHT: 120, diff --git a/react/features/app/components/App.web.tsx b/react/features/app/components/App.web.tsx index ed7ec0e1ec..86ea3282f4 100644 --- a/react/features/app/components/App.web.tsx +++ b/react/features/app/components/App.web.tsx @@ -1,5 +1,5 @@ import { AtlasKitThemeProvider } from '@atlaskit/theme'; -import React, { Fragment } from 'react'; +import React from 'react'; import GlobalStyles from '../../base/ui/components/GlobalStyles.web'; import JitsiThemeProvider from '../../base/ui/components/JitsiThemeProvider.web'; @@ -31,9 +31,9 @@ export class App extends AbstractApp { */ _createExtraElement() { return ( - + - + ); } diff --git a/react/features/connection-stats/components/ConnectionStatsTable.tsx b/react/features/connection-stats/components/ConnectionStatsTable.tsx index ba91dc8f84..6ad5a946a0 100644 --- a/react/features/connection-stats/components/ConnectionStatsTable.tsx +++ b/react/features/connection-stats/components/ConnectionStatsTable.tsx @@ -234,7 +234,21 @@ const useStyles = makeStyles()(theme => { status: { fontWeight: 'bold' }, - upload: {} + upload: {}, + link: { + cursor: 'pointer', + color: theme.palette.link01, + transition: 'color .2s ease', + + '&:hover': { + color: theme.palette.link01Hover, + textDecoration: 'underline' + }, + + '&:active': { + color: theme.palette.link01Active + } + } }; }); @@ -670,7 +684,7 @@ const ConnectionStatsTable = ({ const _renderSaveLogs = () => ( @@ -688,7 +702,7 @@ const ConnectionStatsTable = ({ return ( diff --git a/react/features/embed-meeting/components/EmbedMeetingDialog.tsx b/react/features/embed-meeting/components/EmbedMeetingDialog.tsx index e5ec411147..2b95c76d7d 100644 --- a/react/features/embed-meeting/components/EmbedMeetingDialog.tsx +++ b/react/features/embed-meeting/components/EmbedMeetingDialog.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { WithTranslation } from 'react-i18next'; import { connect } from 'react-redux'; +import { makeStyles } from 'tss-react/mui'; import { IReduxState } from '../../app/types'; import CopyButton from '../../base/buttons/CopyButton.web'; @@ -17,12 +18,26 @@ interface IProps extends WithTranslation { url: string; } +const useStyles = makeStyles()(theme => { + return { + container: { + paddingTop: theme.spacing(1) + }, + + button: { + marginTop: theme.spacing(3) + } + }; +}); + /** * Allow users to embed a jitsi meeting in an iframe. * * @returns {React$Element} */ function EmbedMeeting({ t, url }: IProps) { + const { classes } = useStyles(); + /** * Get the embed code for a jitsi meeting. * @@ -37,7 +52,7 @@ function EmbedMeeting({ t, url }: IProps) { cancel = {{ hidden: true }} ok = {{ hidden: true }} titleKey = { 'embedMeeting.title' }> -
+
} - */ -function EmbedMeetingTrigger({ t, openEmbedDialog }: Props) { - /** - * Handles opening the embed dialog. - * - * @returns {void} - */ - function onClick() { - openEmbedDialog(EmbedMeetingDialog); - } - - /** - * KeyPress handler for accessibility. - * - * @param {React.KeyboardEventHandler} e - The key event to handle. - * - * @returns {void} - */ - function onKeyPress(e) { - if (e.key === ' ' || e.key === 'Enter') { - e.preventDefault(); - onClick(); - } - } - - return ( -
- {t('embedMeeting.title')} -
- ); -} - -const mapDispatchToProps = { openEmbedDialog: openDialog }; - -export default translate(connect(null, mapDispatchToProps)(EmbedMeetingTrigger)); diff --git a/react/features/feedback/components/FeedbackDialog.web.tsx b/react/features/feedback/components/FeedbackDialog.web.tsx index f1530ba121..b2b26f000e 100644 --- a/react/features/feedback/components/FeedbackDialog.web.tsx +++ b/react/features/feedback/components/FeedbackDialog.web.tsx @@ -70,9 +70,6 @@ const styles = (theme: Theme) => { }; }; -const scoreAnimationClass - = interfaceConfig.ENABLE_FEEDBACK_ANIMATION ? 'shake-rotate' : ''; - /** * The scores to display for selecting. The score is the index in the array and * the value of the index is a translation key used for display in the dialog. @@ -282,7 +279,7 @@ class FeedbackDialog extends Component { const isFilled = index <= scoreToDisplayAsSelected; const activeClass = isFilled ? 'active' : ''; const className - = `${classes.starBtn} ${scoreAnimationClass} ${activeClass}`; + = `${classes.starBtn} ${activeClass}`; return ( void; +interface IProps { /** * The translation key for the text in the button. @@ -22,54 +16,28 @@ interface IProps extends WithTranslation { textKey: string; } -/** - * Implements a React Component for button for the overlays that will reload - * the page. - */ -class ReloadButton extends Component { - /** - * Renders the button for relaod the page if necessary. - * - * @private - * @returns {ReactElement} - */ - render() { - const className - = 'button-control button-control_overlay button-control_center'; - - /* eslint-disable react/jsx-handler-names */ - - return ( - - ); - - /* eslint-enable react/jsx-handler-names */ - } -} - -/** - * Maps part of redux actions to component's props. - * - * @param {Function} dispatch - Redux's {@code dispatch} function. - * @private - * @returns {Object} - */ -function _mapDispatchToProps(dispatch: IStore['dispatch']) { +const useStyles = makeStyles()(theme => { return { - /** - * Dispatches the redux action to reload the page. - * - * @protected - * @returns {Object} Dispatched action. - */ - _reloadNow() { - dispatch(reloadNow()); + button: { + margin: `${theme.spacing(2)} auto 0` } }; -} +}); -export default translate(connect(undefined, _mapDispatchToProps)(ReloadButton)); +const ReloadButton = ({ textKey }: IProps) => { + const dispatch = useDispatch(); + const { classes } = useStyles(); + + const onClick = useCallback(() => { + dispatch(reloadNow()); + }, []); + + return ( +