From e5d56720b901a451fa47a514424f710763b50291 Mon Sep 17 00:00:00 2001 From: Manuel Zedel Date: Tue, 17 Dec 2024 17:11:08 +0100 Subject: [PATCH 01/11] feat(gui): aligned text input appearance with MUI updated guidelines Ticket: MEN-7838 Changelog: Title Signed-off-by: Manuel Zedel --- frontend/src/js/common-ui/DeviceNameInput.tsx | 4 ++-- frontend/src/js/common-ui/forms/FileUpload.tsx | 2 +- frontend/src/js/common-ui/forms/KeyValueEditor.tsx | 6 +++--- frontend/src/js/common-ui/forms/PasswordInput.tsx | 4 ++-- frontend/src/js/common-ui/forms/TextInput.tsx | 4 ++-- .../deployments/deployment-wizard/DeviceLimit.tsx | 4 ++-- .../deployments/deployment-wizard/PhaseSettings.tsx | 6 +++--- .../deployment-wizard/SoftwareDevices.tsx | 4 ++-- .../releases/dialogs/ArtifactInformationForm.tsx | 4 ++-- .../js/components/settings/dialogs/CancelRequest.tsx | 6 +++--- .../settings/role-management/PermissionsItems.tsx | 3 +-- .../settings/user-management/SelfUserManagement.tsx | 12 ++++++++++-- .../settings/user-management/UserDefinition.tsx | 2 +- frontend/src/js/themes/Mender/common.ts | 12 +++++++++--- 14 files changed, 43 insertions(+), 30 deletions(-) diff --git a/frontend/src/js/common-ui/DeviceNameInput.tsx b/frontend/src/js/common-ui/DeviceNameInput.tsx index e73f47ad..227fd8e2 100644 --- a/frontend/src/js/common-ui/DeviceNameInput.tsx +++ b/frontend/src/js/common-ui/DeviceNameInput.tsx @@ -15,7 +15,7 @@ import React, { useEffect, useRef, useState } from 'react'; import { useDispatch } from 'react-redux'; // material ui -import { Input, InputAdornment } from '@mui/material'; +import { InputAdornment, OutlinedInput } from '@mui/material'; import { makeStyles } from 'tss-react/mui'; import { setDeviceTags } from '@northern.tech/store/thunks'; @@ -71,7 +71,7 @@ export const DeviceNameInput = ({ device, isHovered }) => { const onInputClick = e => e.stopPropagation(); return ( - - + diff --git a/frontend/src/js/common-ui/forms/KeyValueEditor.tsx b/frontend/src/js/common-ui/forms/KeyValueEditor.tsx index 637ba062..7f27d665 100644 --- a/frontend/src/js/common-ui/forms/KeyValueEditor.tsx +++ b/frontend/src/js/common-ui/forms/KeyValueEditor.tsx @@ -14,7 +14,7 @@ import React, { createRef, useEffect, useState } from 'react'; import { Clear as ClearIcon, Add as ContentAddIcon } from '@mui/icons-material'; -import { Fab, FormControl, FormHelperText, IconButton, Input } from '@mui/material'; +import { Fab, FormControl, FormHelperText, IconButton, OutlinedInput } from '@mui/material'; import { useTheme } from '@mui/material/styles'; const emptyInput = { helptip: null, key: '', value: '' }; @@ -86,11 +86,11 @@ export const KeyValueEditor = ({ disabled, errortext, initialInput = {}, inputHe return (
- updateInputs('key', index, e)} type="text" /> + updateInputs('key', index, e)} type="text" /> {hasError && {errortext || error}} - updateInputs('value', index, e)} type="text" /> + updateInputs('value', index, e)} type="text" /> {inputs.length > 1 && !hasRemovalDisabled ? ( removeInput(index)} size="large"> diff --git a/frontend/src/js/common-ui/forms/PasswordInput.tsx b/frontend/src/js/common-ui/forms/PasswordInput.tsx index 942be7a1..a96f824c 100644 --- a/frontend/src/js/common-ui/forms/PasswordInput.tsx +++ b/frontend/src/js/common-ui/forms/PasswordInput.tsx @@ -15,7 +15,7 @@ import React, { useEffect, useRef, useState } from 'react'; import { Controller, useFormContext, useWatch } from 'react-hook-form'; import { CheckCircle as CheckIcon, Visibility as VisibilityIcon, VisibilityOff as VisibilityOffIcon } from '@mui/icons-material'; -import { Button, FormControl, FormHelperText, IconButton, Input, InputAdornment, InputLabel } from '@mui/material'; +import { Button, FormControl, FormHelperText, IconButton, InputAdornment, InputLabel, OutlinedInput } from '@mui/material'; import { TIMEOUTS } from '@northern.tech/store/constants'; import { toggle } from '@northern.tech/utils/helpers'; @@ -158,7 +158,7 @@ export const PasswordInput = ({ {label} - {label} - {
Finish deployment after{' '} - + {error} devices have attempted to apply the update diff --git a/frontend/src/js/components/deployments/deployment-wizard/PhaseSettings.tsx b/frontend/src/js/components/deployments/deployment-wizard/PhaseSettings.tsx index beddf17c..5b44ed67 100644 --- a/frontend/src/js/components/deployments/deployment-wizard/PhaseSettings.tsx +++ b/frontend/src/js/components/deployments/deployment-wizard/PhaseSettings.tsx @@ -21,10 +21,10 @@ import { FormControl, FormControlLabel, IconButton, - Input, InputAdornment, ListSubheader, MenuItem, + OutlinedInput, Select, Table, TableBody, @@ -149,7 +149,7 @@ export const PhaseSettings = ({ classNames, deploymentObject, disabled, numberDe
{phase.batch_size && phase.batch_size < 100 ? ( - updateBatchSize(event.target.value, index)} endAdornment={ @@ -183,7 +183,7 @@ export const PhaseSettings = ({ classNames, deploymentObject, disabled, numberDe {phase.delay && index !== phases.length - 1 ? (
- updateDelay(event.target.value, index)} inputProps={{ step: 1, min: 1, max: 720, type: 'number' }} diff --git a/frontend/src/js/components/deployments/deployment-wizard/SoftwareDevices.tsx b/frontend/src/js/components/deployments/deployment-wizard/SoftwareDevices.tsx index d379bb3b..41935910 100644 --- a/frontend/src/js/components/deployments/deployment-wizard/SoftwareDevices.tsx +++ b/frontend/src/js/components/deployments/deployment-wizard/SoftwareDevices.tsx @@ -188,7 +188,7 @@ export const Devices = ({

Select a device group to target

{deviceText ? ( - + ) : (
{releaseSelectionLocked ? ( - + ) : ( - { } label={item} key={index} style={{ marginTop: '0px' }} /> ))} - { />

Which key areas should we improve?

- = ({ disabled, per const { control } = useFormContext(); const { key, placeholder } = permissionsArea; return disabled ? ( - // empty label as a shortcut to align the layout with the select path - + ) : ( {!itemSelection.item ? placeholder : ''} diff --git a/frontend/src/js/components/settings/user-management/SelfUserManagement.tsx b/frontend/src/js/components/settings/user-management/SelfUserManagement.tsx index 31629b74..e306ee9e 100644 --- a/frontend/src/js/components/settings/user-management/SelfUserManagement.tsx +++ b/frontend/src/js/components/settings/user-management/SelfUserManagement.tsx @@ -90,7 +90,7 @@ export const SelfUserManagement = () => { {!editEmail && email ? (
- + {!isOAuth2 && ( diff --git a/frontend/src/js/components/settings/user-management/UserDefinition.tsx b/frontend/src/js/components/settings/user-management/UserDefinition.tsx index 83518335..93fca02f 100644 --- a/frontend/src/js/components/settings/user-management/UserDefinition.tsx +++ b/frontend/src/js/components/settings/user-management/UserDefinition.tsx @@ -65,7 +65,7 @@ export const UserId = ({ className = '', userId }) => { const { classes } = useStyles(); return (
- +
diff --git a/frontend/src/js/themes/Mender/common.ts b/frontend/src/js/themes/Mender/common.ts index 7c67a0ad..8d4fff90 100644 --- a/frontend/src/js/themes/Mender/common.ts +++ b/frontend/src/js/themes/Mender/common.ts @@ -94,18 +94,23 @@ export const typography = { const componentProps = { MuiFormControl: { defaultProps: { - variant: 'standard' + variant: 'outlined' + } + }, + MuiInput: { + defaultProps: { + variant: 'outlined' } }, MuiTextField: { defaultProps: { - variant: 'standard' + variant: 'outlined' } }, MuiSelect: { defaultProps: { autoWidth: true, - variant: 'standard' + variant: 'outlined' } } }; @@ -170,6 +175,7 @@ export const overrides = { } }, MuiInput: { + ...componentProps.MuiInput, styleOverrides: { underline: { '&:before': { From 3c2442d1ec056500a3ea21d5006447425409c29c Mon Sep 17 00:00:00 2001 From: Manuel Zedel Date: Fri, 17 Jan 2025 13:28:23 +0100 Subject: [PATCH 02/11] fix(gui): layout adjustments to re-align UI after switch to outlined inputs Ticket: None Changelog: None Signed-off-by: Manuel Zedel --- frontend/src/js/common-ui/ChipSelect.tsx | 4 +- frontend/src/js/common-ui/Search.tsx | 20 +--- .../src/js/common-ui/forms/AddonSelect.tsx | 2 + frontend/src/js/common-ui/forms/Filters.tsx | 2 +- .../src/js/common-ui/forms/KeyValueEditor.tsx | 2 +- .../src/js/common-ui/forms/PasswordInput.tsx | 3 + frontend/src/js/common-ui/forms/TextInput.tsx | 2 +- .../dashboard/widgets/ChartAddition.tsx | 15 ++- .../deployment-wizard/DeviceLimit.tsx | 3 +- .../deployment-wizard/PhaseSettings.tsx | 2 +- .../deployment-wizard/RolloutOptions.tsx | 4 +- .../deployment-wizard/ScheduleRollout.tsx | 4 +- .../deployment-wizard/SoftwareDevices.tsx | 4 +- .../devices/widgets/AttributeAutocomplete.tsx | 4 +- .../components/devices/widgets/FilterItem.tsx | 15 +-- frontend/src/js/components/header/Header.tsx | 5 +- frontend/src/js/components/login/Login.tsx | 4 +- .../login/signup-steps/OrgdataEntry.tsx | 2 +- .../js/components/releases/ReleaseDetails.tsx | 2 +- .../src/js/components/releases/Releases.tsx | 6 +- .../dialogs/ArtifactInformationForm.tsx | 31 +++++-- .../settings/AccessTokenManagement.tsx | 11 ++- .../settings/ArtifactGeneration.tsx | 9 +- .../src/js/components/settings/Global.tsx | 38 ++++---- .../js/components/settings/Integrations.tsx | 4 +- .../role-management/PermissionsItems.tsx | 23 +++-- .../role-management/PermissionsSelect.tsx | 4 +- .../role-management/RoleDefinition.tsx | 24 ++++- .../user-management/SelfUserManagement.tsx | 40 +++++--- .../user-management/UserDefinition.tsx | 12 +-- .../settings/user-management/UserForm.tsx | 11 ++- .../twofactorauth-steps/AuthSetup.tsx | 2 +- .../settings/webhooks/Configuration.tsx | 13 +-- .../components/tenants/TenantCreateForm.tsx | 93 +++++++++---------- frontend/src/js/themes/Mender/common.ts | 1 - frontend/src/less/main.less | 8 +- 36 files changed, 242 insertions(+), 187 deletions(-) diff --git a/frontend/src/js/common-ui/ChipSelect.tsx b/frontend/src/js/common-ui/ChipSelect.tsx index a13700ea..c92f86a9 100644 --- a/frontend/src/js/common-ui/ChipSelect.tsx +++ b/frontend/src/js/common-ui/ChipSelect.tsx @@ -18,7 +18,7 @@ import { Autocomplete, TextField } from '@mui/material'; import { duplicateFilter, unionizeStrings } from '@northern.tech/utils/helpers'; -export const ChipSelect = ({ className = '', name, disabled = false, inputRef, label = '', options = [], placeholder = '' }) => { +export const ChipSelect = ({ className = '', name, disabled = false, helperText, inputRef, label = '', options = [], placeholder = '' }) => { const [value, setValue] = useState(''); const { control, getValues } = useFormContext(); @@ -76,9 +76,11 @@ export const ChipSelect = ({ className = '', name, disabled = false, inputRef, l InputProps={{ ...params.InputProps, disableUnderline: disabled }} key={`${name}-input`} label={label} + variant={disabled ? 'standard' : 'outlined'} onBlur={e => onTextInputLeave(e.target.value, formOnChange)} onChange={e => onTextInputChange(e.target.value, 'input', formOnChange)} placeholder={currentSelection.length ? '' : placeholder} + helperText={helperText} inputRef={inputRef} /> )} diff --git a/frontend/src/js/common-ui/Search.tsx b/frontend/src/js/common-ui/Search.tsx index 805c16ab..3190dbfd 100644 --- a/frontend/src/js/common-ui/Search.tsx +++ b/frontend/src/js/common-ui/Search.tsx @@ -16,21 +16,12 @@ import { Controller, FormProvider, useForm, useFormContext } from 'react-hook-fo import { Search as SearchIcon } from '@mui/icons-material'; import { InputAdornment, TextField } from '@mui/material'; -import { makeStyles } from 'tss-react/mui'; import { TIMEOUTS } from '@northern.tech/store/constants'; import { useDebounce } from '@northern.tech/utils/debouncehook'; import Loader from './Loader'; -const useStyles = makeStyles()(() => ({ - root: { - input: { - fontSize: '13px' - } - } -})); - const endAdornment = ( @@ -46,8 +37,7 @@ const startAdornment = ( // due to search not working reliably for single letter searches, only start at 2 const MINIMUM_SEARCH_LENGTH = 2; -export const ControlledSearch = ({ isSearching, name = 'search', onSearch, placeholder = 'Search devices', style = {} }) => { - const { classes } = useStyles(); +export const ControlledSearch = ({ className = '', isSearching, name = 'search', onSearch, placeholder = 'Search devices', style = {} }) => { const { control, watch } = useFormContext(); const inputRef = useRef(); const focusLockRef = useRef(true); @@ -102,8 +92,8 @@ export const ControlledSearch = ({ isSearching, name = 'search', onSearch, place control={control} render={({ field }) => ( { - const { searchTerm, onSearch, trigger } = props; + const { className = '', searchTerm, onSearch, trigger } = props; const methods = useForm({ mode: 'onChange', defaultValues: { search: searchTerm ?? '' } }); const { handleSubmit } = methods; const onSubmit = useCallback(search => onSearch(search, !trigger), [onSearch, trigger]); return ( - onSearch(search, !trigger))}> + onSearch(search, !trigger))}> diff --git a/frontend/src/js/common-ui/forms/AddonSelect.tsx b/frontend/src/js/common-ui/forms/AddonSelect.tsx index cff1bbc5..d3faa400 100644 --- a/frontend/src/js/common-ui/forms/AddonSelect.tsx +++ b/frontend/src/js/common-ui/forms/AddonSelect.tsx @@ -33,6 +33,8 @@ export const AddonSelect = (props: AddonSelectProps) => { Select Addons setSelection({ group: e.target.value })}> + setSelection({ software: e.target.value })}> + + Software + + @@ -75,7 +75,7 @@ export const ScheduleRollout = ({ canSchedule, commonClasses, setDeploymentSetti
{Boolean(isPickerOpen || start_time) && ( - + -

Select a device group to target

+

Select a device group to target

{deviceText ? ( @@ -281,7 +281,7 @@ export const Software = ({ commonClasses, deploymentObject, releaseRef, releases return ( <> -

Select a Release to deploy

+

Select a Release to deploy

{releaseSelectionLocked ? ( diff --git a/frontend/src/js/components/devices/widgets/AttributeAutocomplete.tsx b/frontend/src/js/components/devices/widgets/AttributeAutocomplete.tsx index 3eae3f60..32cec4e1 100644 --- a/frontend/src/js/components/devices/widgets/AttributeAutocomplete.tsx +++ b/frontend/src/js/components/devices/widgets/AttributeAutocomplete.tsx @@ -21,8 +21,6 @@ import { TIMEOUTS, emptyFilter } from '@northern.tech/store/constants'; import { defaultHeaders } from '../BaseDevices'; import { getFilterLabelByKey } from './Filters'; -const textFieldStyle = { marginTop: 0, marginBottom: 15 }; - export const getOptionLabel = option => { const header = Object.values(defaultHeaders).find( ({ attribute }) => attribute.scope === option.scope && (attribute.name === option.key || attribute.alternative === option.key) @@ -150,7 +148,7 @@ export const AttributeAutoComplete = ({ attributes, disabled = false, filter = e updateFilterKey(key, scope); }} options={options} - renderInput={params => } + renderInput={params => } key={reset} value={getFilterLabelByKey(key, attributes)} /> diff --git a/frontend/src/js/components/devices/widgets/FilterItem.tsx b/frontend/src/js/components/devices/widgets/FilterItem.tsx index 4f8a9d3d..e7f6a924 100644 --- a/frontend/src/js/components/devices/widgets/FilterItem.tsx +++ b/frontend/src/js/components/devices/widgets/FilterItem.tsx @@ -22,8 +22,6 @@ import { DEVICE_FILTERING_OPTIONS, TIMEOUTS, emptyFilter } from '@northern.tech/ import AttributeAutoComplete from './AttributeAutocomplete'; -const textFieldStyle = { marginTop: 0, marginBottom: 15 }; - const filterOptionsByPlan = { os: { $eq: { title: 'equals' } }, professional: DEVICE_FILTERING_OPTIONS, @@ -103,7 +101,7 @@ export const FilterItem = ({ attributes, onChange, onSelect, plan, reset }) => { const showValue = typeof (filterOptions[operator] || {}).value === 'undefined'; return ( <> -
+
{filterNotifications[key]} { ))} - {showValue && ( - - )} + {showValue && } {!!key && ( diff --git a/frontend/src/js/components/header/Header.tsx b/frontend/src/js/components/header/Header.tsx index 9e36bc58..8dc3e853 100644 --- a/frontend/src/js/components/header/Header.tsx +++ b/frontend/src/js/components/header/Header.tsx @@ -146,7 +146,8 @@ const useStyles = makeStyles()(theme => ({ organization: { marginBottom: theme.spacing() }, redAnnouncementIcon: { color: theme.palette.error.dark - } + }, + search: { alignSelf: 'center' } })); const AccountMenu = () => { @@ -378,7 +379,7 @@ export const Header = ({ isDarkMode }) => { ) : ( <> - +
diff --git a/frontend/src/js/components/login/Login.tsx b/frontend/src/js/components/login/Login.tsx index 21de8d94..665836ef 100644 --- a/frontend/src/js/components/login/Login.tsx +++ b/frontend/src/js/components/login/Login.tsx @@ -78,7 +78,7 @@ const useStyles = makeStyles()(theme => { transform: `skew(0, -${skew}deg)`, zIndex: 1 }, - link: { marginLeft: theme.spacing(-0.5) }, + link: { marginTop: theme.spacing(0.5) }, ntBranding: { bottom: `calc(${theme.mixins.toolbar.minHeight}px + 3vh)`, right: 0, zIndex: 0 }, tfaNote: { maxWidth: 300 }, tfaTip: { position: 'absolute', right: -120 } @@ -213,7 +213,7 @@ export const Login = () => {
- + {isHosted ? (
diff --git a/frontend/src/js/components/login/signup-steps/OrgdataEntry.tsx b/frontend/src/js/components/login/signup-steps/OrgdataEntry.tsx index 887ad28c..061ee3e4 100644 --- a/frontend/src/js/components/login/signup-steps/OrgdataEntry.tsx +++ b/frontend/src/js/components/login/signup-steps/OrgdataEntry.tsx @@ -45,7 +45,7 @@ export const OrgDataEntry = ({ classes, emailVerified, recaptchaSiteKey = '', se {!emailVerified && }
-
+

Choose a hosting region for your account.

diff --git a/frontend/src/js/components/releases/ReleaseDetails.tsx b/frontend/src/js/components/releases/ReleaseDetails.tsx index 6796234c..4d31563b 100644 --- a/frontend/src/js/components/releases/ReleaseDetails.tsx +++ b/frontend/src/js/components/releases/ReleaseDetails.tsx @@ -227,7 +227,7 @@ const ReleaseTags = ({ existingTags = [], release: { tags = [] }, onChange }) =>

Tags

{!isEditing && }
-
+
({ container: { maxWidth: 1600 }, searchNote: { minHeight: '1.8rem' }, tabContainer: { alignSelf: 'flex-start' }, - uploadButton: { minWidth: 164, marginRight: theme.spacing(2) } + uploadButton: { minWidth: 164, marginRight: theme.spacing(2) }, + nameSearch: { [`.${inputBaseClasses.root}.${outlinedInputClasses.root}`]: { paddingTop: theme.spacing(), paddingBottom: theme.spacing() } } })); const Header = ({ canUpload, releasesListState, setReleasesListState, onUploadClick }) => { @@ -116,6 +117,7 @@ const Header = ({ canUpload, releasesListState, setReleasesListState, onUploadCl title: 'Release name', Component: ControlledSearch, componentProps: { + className: classes.nameSearch, onSearch: searchUpdated, placeholder: 'Starts with' } diff --git a/frontend/src/js/components/releases/dialogs/ArtifactInformationForm.tsx b/frontend/src/js/components/releases/dialogs/ArtifactInformationForm.tsx index c6bbc83f..d539678a 100644 --- a/frontend/src/js/components/releases/dialogs/ArtifactInformationForm.tsx +++ b/frontend/src/js/components/releases/dialogs/ArtifactInformationForm.tsx @@ -14,7 +14,8 @@ import React, { useEffect, useState } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; -import { FormControl, InputLabel, OutlinedInput, TextField } from '@mui/material'; +import { FormControl, InputLabel, OutlinedInput, TextField, inputLabelClasses } from '@mui/material'; +import { makeStyles } from 'tss-react/mui'; import ChipSelect from '@northern.tech/common-ui/ChipSelect'; import { DOCSTIPS, DocsTooltip } from '@northern.tech/common-ui/DocsLink'; @@ -25,6 +26,19 @@ import { FileInformation } from './FileInformation'; const defaultVersion = '1.0.0'; +const useStyles = makeStyles()(theme => ({ + releaseName: { + display: 'flex', + alignItems: 'center', + [`&.${inputLabelClasses.shrink}`]: { + background: theme.palette.background.default, + paddingLeft: theme.spacing(0.5), + paddingRight: theme.spacing(), + marginTop: theme.spacing(-0.5) + } + } +})); + export const VersionInformation = ({ creation = {}, onRemove, updateCreation }) => { const { file, fileSystem: propFs, name, softwareName: propName, softwareVersion: version = '', type } = creation; const [fileSystem, setFileSystem] = useState(propFs); @@ -64,6 +78,7 @@ export const ArtifactInformation = ({ creation = {}, deviceTypes = [], onRemove, const methods = useForm({ mode: 'onChange', defaultValues: { deviceTypes: selectedDeviceTypes } }); const { watch } = methods; const formDeviceTypes = watch('deviceTypes'); + const { classes } = useStyles(); useEffect(() => { updateCreation({ selectedDeviceTypes: formDeviceTypes }); @@ -82,23 +97,23 @@ export const ArtifactInformation = ({ creation = {}, deviceTypes = [], onRemove, const isValidDestination = checkDestinationValidity(destination); return ( -
+
Destination has to be an absolute path
} - inputProps={{ style: { marginTop: 16 } }} - InputLabelProps={{ shrink: true }} - label="Destination directory where the file will be installed on your devices" + helperText={ + !isValidDestination ?
Destination has to be an absolute path
: 'where the file will be installed on your devices' + } + label="Destination directory" onChange={onDestinationChange} placeholder="Example: /opt/installed-by-single-file" value={destination} />

Artifact information

- e.preventDefault()}> + e.preventDefault()}> Release name @@ -118,7 +133,7 @@ export const ArtifactInformation = ({ creation = {}, deviceTypes = [], onRemove, diff --git a/frontend/src/js/components/settings/AccessTokenManagement.tsx b/frontend/src/js/components/settings/AccessTokenManagement.tsx index be69dd1e..355a1683 100644 --- a/frontend/src/js/components/settings/AccessTokenManagement.tsx +++ b/frontend/src/js/components/settings/AccessTokenManagement.tsx @@ -47,7 +47,10 @@ const useStyles = makeStyles()(theme => ({ minWidth: 900 }, creationDialog: { - minWidth: 500 + minWidth: 500, + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(2) }, formEntries: { minWidth: 270 @@ -136,8 +139,8 @@ export const AccessTokenCreationDialog = ({ onCancel, generateToken, isEnterpris
- Expiration - {Object.entries(expirationTimes).map(([title, item]) => ( {title} @@ -154,7 +157,7 @@ export const AccessTokenCreationDialog = ({ onCancel, generateToken, isEnterpris
{token && ( -
+

This is the only time you will be able to see the token, so make sure to store it in a safe place.

diff --git a/frontend/src/js/components/settings/ArtifactGeneration.tsx b/frontend/src/js/components/settings/ArtifactGeneration.tsx index 0c26be22..b07c6162 100644 --- a/frontend/src/js/components/settings/ArtifactGeneration.tsx +++ b/frontend/src/js/components/settings/ArtifactGeneration.tsx @@ -16,7 +16,7 @@ import { useDispatch, useSelector } from 'react-redux'; // material ui import { InfoOutlined as InfoOutlinedIcon } from '@mui/icons-material'; -import { Checkbox, FormControlLabel, TextField, Typography, formControlLabelClasses, textFieldClasses } from '@mui/material'; +import { Checkbox, FormControlLabel, TextField, Typography, textFieldClasses } from '@mui/material'; import { makeStyles } from 'tss-react/mui'; import EnterpriseNotification from '@northern.tech/common-ui/EnterpriseNotification'; @@ -30,6 +30,7 @@ import DeltaIcon from '../../../assets/img/deltaicon.svg'; const useStyles = makeStyles()(theme => ({ deviceLimitBar: { backgroundColor: theme.palette.grey[500], margin: '15px 0' }, + formWrapper: { display: 'flex', flexDirection: 'column', gap: theme.spacing(2), marginLeft: theme.spacing(2) }, wrapper: { backgroundColor: theme.palette.background.lightgrey, display: 'flex', @@ -39,8 +40,7 @@ const useStyles = makeStyles()(theme => ({ paddingTop: 0, '&>h5': { marginTop: 0, marginBottom: 0 }, '.flexbox>span': { alignSelf: 'flex-end' }, - [`.${textFieldClasses.root}`]: { maxWidth: 200, minWidth: 100 }, - [`.${formControlLabelClasses.root}`]: { marginTop: theme.spacing() } + [`.${textFieldClasses.root}`]: { maxWidth: 200, minWidth: 100 } } })); @@ -185,7 +185,7 @@ export const ArtifactGenerationSettings = () => { xDelta3 arguments -
+
setDisableChecksum(checked)} size="small" /> @@ -193,6 +193,7 @@ export const ArtifactGenerationSettings = () => { label="Disable checksum" /> onSaveClick(e, { attribute: attributeSelection, scope: attributes.find(({ value }) => value === attributeSelection).scope }); return ( -
- - - Device identity attribute - - - -
Choose a device identity attribute to use to identify your devices throughout the UI.
-
- to your devices. -
- - +
+
+ + Device identity attribute + + +
Choose a device identity attribute to use to identify your devices throughout the UI.
+
+ to your devices. +
+ + +
{dialog && (
diff --git a/frontend/src/js/components/devices/device-details/Monitoring.tsx b/frontend/src/js/components/devices/device-details/Monitoring.tsx index 99402ef1..b8dc8c2b 100644 --- a/frontend/src/js/components/devices/device-details/Monitoring.tsx +++ b/frontend/src/js/components/devices/device-details/Monitoring.tsx @@ -14,8 +14,6 @@ import React, { useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { useTheme } from '@mui/material/styles'; - import DocsLink from '@northern.tech/common-ui/DocsLink'; import EnterpriseNotification from '@northern.tech/common-ui/EnterpriseNotification'; import Pagination from '@northern.tech/common-ui/Pagination'; @@ -42,11 +40,11 @@ export const DeviceMonitorsMissingNote = () => ( ); -const MonitoringAlert = ({ alert, onDetailsClick, style }) => { +const MonitoringAlert = ({ alert, className = '', onDetailsClick, style }) => { const { description, lines_before = [], lines_after = [], line_matching = '' } = alert.subject.details; const lines = [...lines_before, line_matching, ...lines_after].filter(i => i); return ( -
+
{(severityMap[alert.level] ?? severityMap[monitoringSeverities.UNKNOWN]).icon}
{alert.name} @@ -60,7 +58,6 @@ const MonitoringAlert = ({ alert, onDetailsClick, style }) => { const paginationCutoff = defaultPerPage; export const DeviceMonitoring = ({ device, onDetailsClick }) => { - const theme = useTheme(); const { hasMonitor } = useSelector(state => getTenantCapabilities(state)); const { alerts = [], latest: latestAlerts = [] } = useSelector(state => state.monitor.alerts.byDeviceId[device.id]) ?? {}; const alertListState = useSelector(state => state.monitor.alerts.alertList) ?? {}; @@ -89,7 +86,7 @@ export const DeviceMonitoring = ({ device, onDetailsClick }) => { <> {hasMonitorsDefined && !latestAlerts.length && } {latestAlerts.map(alert => ( - + ))} {isOffline && } diff --git a/frontend/src/js/components/settings/ArtifactGeneration.tsx b/frontend/src/js/components/settings/ArtifactGeneration.tsx index b07c6162..07524ee2 100644 --- a/frontend/src/js/components/settings/ArtifactGeneration.tsx +++ b/frontend/src/js/components/settings/ArtifactGeneration.tsx @@ -69,8 +69,7 @@ const NumberInputLimited = ({ limit, onChange, value: propsValue, ...remainder } return ( value || value > max : false} value={value} onChange={({ target: { value } }) => setValue(Number(value) || 0)} diff --git a/frontend/src/js/components/settings/Global.tsx b/frontend/src/js/components/settings/Global.tsx index 08a64fa2..72ec7bae 100644 --- a/frontend/src/js/components/settings/Global.tsx +++ b/frontend/src/js/components/settings/Global.tsx @@ -221,7 +221,7 @@ export const GlobalSettingsDialog = ({ className={classes.textInput} type="number" onChange={onChangeOfflineInterval} - inputProps={{ min: '1', max: '1000' }} + slotProps={{ htmlInput: { min: '1', max: '1000' } }} error={!!intervalErrorText} value={currentInterval} /> diff --git a/frontend/src/js/components/settings/role-management/RoleDefinition.tsx b/frontend/src/js/components/settings/role-management/RoleDefinition.tsx index 3f1796cf..d0cddb4f 100644 --- a/frontend/src/js/components/settings/role-management/RoleDefinition.tsx +++ b/frontend/src/js/components/settings/role-management/RoleDefinition.tsx @@ -233,7 +233,7 @@ export const FormContent: FunctionComponent = ({ ) : ( )} - +
`; diff --git a/frontend/src/js/common-ui/__snapshots__/Search.test.tsx.snap b/frontend/src/js/common-ui/__snapshots__/Search.test.tsx.snap index a0caaa19..f7537d1c 100644 --- a/frontend/src/js/common-ui/__snapshots__/Search.test.tsx.snap +++ b/frontend/src/js/common-ui/__snapshots__/Search.test.tsx.snap @@ -15,14 +15,9 @@ exports[`Search Component renders correctly 1`] = ` margin: 0; border: 0; vertical-align: top; - margin-top: 18px; min-width: 240px; } -.emotion-0 input { - font-size: 13px; -} - .emotion-1 { line-height: 1.4375em; font-family: Lato,sans-serif; @@ -41,6 +36,9 @@ exports[`Search Component renders correctly 1`] = ` -ms-flex-align: center; align-items: center; position: relative; + border-radius: 4px; + padding-left: 14px; + padding-right: 14px; } .emotion-1.Mui-disabled { @@ -48,77 +46,30 @@ exports[`Search Component renders correctly 1`] = ` cursor: default; } -label+.emotion-1 { - margin-top: 16px; -} - -.emotion-1::after { - left: 0; - bottom: 0; - content: ""; - position: absolute; - right: 0; - -webkit-transform: scaleX(0); - -moz-transform: scaleX(0); - -ms-transform: scaleX(0); - transform: scaleX(0); - -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; - transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; - pointer-events: none; -} - -.emotion-1.Mui-focused:after { - -webkit-transform: scaleX(1) translateX(0); - -moz-transform: scaleX(1) translateX(0); - -ms-transform: scaleX(1) translateX(0); - transform: scaleX(1) translateX(0); -} - -.emotion-1.Mui-error::before, -.emotion-1.Mui-error::after { - border-bottom-color: #ab1000; -} - -.emotion-1::before { - border-bottom: 1px solid rgba(0, 0, 0, 0.42); - left: 0; - bottom: 0; - content: "\\00a0"; - position: absolute; - right: 0; - -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - pointer-events: none; -} - -.emotion-1:hover:not(.Mui-disabled, .Mui-error):before { - border-bottom: 2px solid rgba(10, 10, 11, 0.78); +.emotion-1:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(10, 10, 11, 0.78); } @media (hover: none) { - .emotion-1:hover:not(.Mui-disabled, .Mui-error):before { - border-bottom: 1px solid rgba(0, 0, 0, 0.42); + .emotion-1:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.23); } } -.emotion-1.Mui-disabled:before { - border-bottom-style: dotted; +.emotion-1.Mui-focused .MuiOutlinedInput-notchedOutline { + border-width: 2px; } -.emotion-1::after { - border-bottom: 2px solid #337a87; +.emotion-1.Mui-focused .MuiOutlinedInput-notchedOutline { + border-color: #337a87; } -.emotion-1:before { - border-bottom: 1px solid rgb(224, 224, 224); +.emotion-1.Mui-error .MuiOutlinedInput-notchedOutline { + border-color: #ab1000; } -.emotion-1:hover:not($disabled):before { - border-bottom: 2px solid #337a87!important; -} - -.emotion-1:after { - border-bottom: 2px solid #337a87; +.emotion-1.Mui-disabled .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.26); } .emotion-2 { @@ -177,6 +128,10 @@ label+.emotion-1 { -webkit-animation-duration: 10ms; animation-duration: 10ms; padding-top: 1px; + padding: 16.5px 14px; + padding: 8.5px 14px; + padding-left: 0; + padding-right: 0; } .emotion-4::-webkit-input-placeholder { @@ -248,6 +203,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p animation-name: mui-auto-fill; } +.emotion-4:-webkit-autofill { + border-radius: inherit; +} + .emotion-5 { display: -webkit-box; display: -webkit-flex; @@ -263,17 +222,46 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p margin-left: 8px; } +.emotion-6 { + text-align: left; + position: absolute; + bottom: 0; + right: 0; + top: -5px; + left: 0; + margin: 0; + padding: 0 8px; + pointer-events: none; + border-radius: inherit; + border-style: solid; + border-width: 1px; + overflow: hidden; + min-width: 0%; + border-color: rgba(0, 0, 0, 0.23); +} + +.emotion-7 { + float: unset; + width: auto; + overflow: hidden; + padding: 0; + line-height: 11px; + -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; + transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; +} +
span { + padding-left: 5px; + padding-right: 5px; + display: inline-block; + opacity: 0; + visibility: visible; +} + +.emotion-11 { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -531,7 +539,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p font-size: 1.3929rem; } -.emotion-9 iconButton { +.emotion-11 iconButton { margin-right: 8px; } @@ -554,7 +562,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p style="margin-top: 0px;" >
@@ -615,7 +635,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p >
+
@@ -1309,7 +1362,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p >
diff --git a/frontend/src/js/common-ui/forms/__snapshots__/Form.test.tsx.snap b/frontend/src/js/common-ui/forms/__snapshots__/Form.test.tsx.snap index d5926b39..46c28b97 100644 --- a/frontend/src/js/common-ui/forms/__snapshots__/Form.test.tsx.snap +++ b/frontend/src/js/common-ui/forms/__snapshots__/Form.test.tsx.snap @@ -156,7 +156,6 @@ exports[`Form Component renders correctly 1`] = ` margin: 0; border: 0; vertical-align: top; - margin-top: 18px; min-width: 240px; } @@ -184,6 +183,13 @@ exports[`Form Component renders correctly 1`] = ` transform: translate(0, 20px) scale(1); -webkit-transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; + z-index: 1; + pointer-events: none; + -webkit-transform: translate(14px, 16px) scale(1); + -moz-transform: translate(14px, 16px) scale(1); + -ms-transform: translate(14px, 16px) scale(1); + transform: translate(14px, 16px) scale(1); + max-width: calc(100% - 24px); } .emotion-6.Mui-focused { @@ -220,6 +226,8 @@ exports[`Form Component renders correctly 1`] = ` -ms-flex-align: center; align-items: center; position: relative; + border-radius: 4px; + padding-right: 14px; } .emotion-7.Mui-disabled { @@ -227,77 +235,30 @@ exports[`Form Component renders correctly 1`] = ` cursor: default; } -label+.emotion-7 { - margin-top: 16px; -} - -.emotion-7::after { - left: 0; - bottom: 0; - content: ""; - position: absolute; - right: 0; - -webkit-transform: scaleX(0); - -moz-transform: scaleX(0); - -ms-transform: scaleX(0); - transform: scaleX(0); - -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; - transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; - pointer-events: none; -} - -.emotion-7.Mui-focused:after { - -webkit-transform: scaleX(1) translateX(0); - -moz-transform: scaleX(1) translateX(0); - -ms-transform: scaleX(1) translateX(0); - transform: scaleX(1) translateX(0); -} - -.emotion-7.Mui-error::before, -.emotion-7.Mui-error::after { - border-bottom-color: #ab1000; -} - -.emotion-7::before { - border-bottom: 1px solid rgba(0, 0, 0, 0.42); - left: 0; - bottom: 0; - content: "\\00a0"; - position: absolute; - right: 0; - -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - pointer-events: none; -} - -.emotion-7:hover:not(.Mui-disabled, .Mui-error):before { - border-bottom: 2px solid rgba(10, 10, 11, 0.78); +.emotion-7:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(10, 10, 11, 0.78); } @media (hover: none) { - .emotion-7:hover:not(.Mui-disabled, .Mui-error):before { - border-bottom: 1px solid rgba(0, 0, 0, 0.42); + .emotion-7:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.23); } } -.emotion-7.Mui-disabled:before { - border-bottom-style: dotted; +.emotion-7.Mui-focused .MuiOutlinedInput-notchedOutline { + border-width: 2px; } -.emotion-7::after { - border-bottom: 2px solid #337a87; +.emotion-7.Mui-focused .MuiOutlinedInput-notchedOutline { + border-color: #337a87; } -.emotion-7:before { - border-bottom: 1px solid rgb(224, 224, 224); +.emotion-7.Mui-error .MuiOutlinedInput-notchedOutline { + border-color: #ab1000; } -.emotion-7:hover:not($disabled):before { - border-bottom: 2px solid #337a87!important; -} - -.emotion-7:after { - border-bottom: 2px solid #337a87; +.emotion-7.Mui-disabled .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.26); } .emotion-8 { @@ -318,6 +279,8 @@ label+.emotion-7 { animation-name: mui-auto-fill-cancel; -webkit-animation-duration: 10ms; animation-duration: 10ms; + padding: 16.5px 14px; + padding-right: 0; } .emotion-8::-webkit-input-placeholder { @@ -389,6 +352,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p animation-name: mui-auto-fill; } +.emotion-8:-webkit-autofill { + border-radius: inherit; +} + .emotion-9 { display: -webkit-box; display: -webkit-flex; @@ -503,6 +470,34 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p } .emotion-13 { + text-align: left; + position: absolute; + bottom: 0; + right: 0; + top: -5px; + left: 0; + margin: 0; + padding: 0 8px; + pointer-events: none; + border-radius: inherit; + border-style: solid; + border-width: 1px; + overflow: hidden; + min-width: 0%; + border-color: rgba(0, 0, 0, 0.23); +} + +.emotion-14 { + float: unset; + width: auto; + overflow: hidden; + padding: 0; + line-height: 11px; + -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; + transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; +} + +.emotion-15 { color: rgba(0, 0, 0, 0.54); font-family: Lato,sans-serif; font-weight: 400; @@ -513,17 +508,165 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p margin-right: 0; margin-bottom: 0; margin-left: 0; + margin-left: 14px; + margin-right: 14px; } -.emotion-13.Mui-disabled { +.emotion-15.Mui-disabled { color: rgba(0, 0, 0, 0.38); } -.emotion-13.Mui-error { +.emotion-15.Mui-error { color: #ab1000; } +.emotion-18 { + line-height: 1.4375em; + font-family: Lato,sans-serif; + font-weight: 400; + font-size: 0.9286rem; + color: rgba(10, 10, 11, 0.78); + box-sizing: border-box; + position: relative; + cursor: text; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + border-radius: 4px; +} + +.emotion-18.Mui-disabled { + color: rgba(0, 0, 0, 0.38); + cursor: default; +} + +.emotion-18:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(10, 10, 11, 0.78); +} + +@media (hover: none) { + .emotion-18:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.23); + } +} + +.emotion-18.Mui-focused .MuiOutlinedInput-notchedOutline { + border-width: 2px; +} + +.emotion-18.Mui-focused .MuiOutlinedInput-notchedOutline { + border-color: #337a87; +} + +.emotion-18.Mui-error .MuiOutlinedInput-notchedOutline { + border-color: #ab1000; +} + +.emotion-18.Mui-disabled .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.26); +} + .emotion-19 { + font: inherit; + letter-spacing: inherit; + color: currentColor; + padding: 4px 0 5px; + border: 0; + box-sizing: content-box; + background: none; + height: 1.4375em; + margin: 0; + -webkit-tap-highlight-color: transparent; + display: block; + min-width: 0; + width: 100%; + -webkit-animation-name: mui-auto-fill-cancel; + animation-name: mui-auto-fill-cancel; + -webkit-animation-duration: 10ms; + animation-duration: 10ms; + padding: 16.5px 14px; +} + +.emotion-19::-webkit-input-placeholder { + color: currentColor; + opacity: 0.42; + -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; +} + +.emotion-19::-moz-placeholder { + color: currentColor; + opacity: 0.42; + -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; +} + +.emotion-19::-ms-input-placeholder { + color: currentColor; + opacity: 0.42; + -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; +} + +.emotion-19:focus { + outline: 0; +} + +.emotion-19:invalid { + box-shadow: none; +} + +.emotion-19::-webkit-search-decoration { + -webkit-appearance: none; +} + +label[data-shrink=false]+.MuiInputBase-formControl .emotion-19::-webkit-input-placeholder { + opacity: 0!important; +} + +label[data-shrink=false]+.MuiInputBase-formControl .emotion-19::-moz-placeholder { + opacity: 0!important; +} + +label[data-shrink=false]+.MuiInputBase-formControl .emotion-19::-ms-input-placeholder { + opacity: 0!important; +} + +label[data-shrink=false]+.MuiInputBase-formControl .emotion-19:focus::-webkit-input-placeholder { + opacity: 0.42; +} + +label[data-shrink=false]+.MuiInputBase-formControl .emotion-19:focus::-moz-placeholder { + opacity: 0.42; +} + +label[data-shrink=false]+.MuiInputBase-formControl .emotion-19:focus::-ms-input-placeholder { + opacity: 0.42; +} + +.emotion-19.Mui-disabled { + opacity: 1; + -webkit-text-fill-color: rgba(0, 0, 0, 0.38); +} + +.emotion-19:-webkit-autofill { + -webkit-animation-duration: 5000s; + animation-duration: 5000s; + -webkit-animation-name: mui-auto-fill; + animation-name: mui-auto-fill; +} + +.emotion-19:-webkit-autofill { + border-radius: inherit; +} + +.emotion-23 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -538,7 +681,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p margin-top: 32px; } -.emotion-20 { +.emotion-24 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -597,57 +740,57 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p font-weight: bold; } -.emotion-20::-moz-focus-inner { +.emotion-24::-moz-focus-inner { border-style: none; } -.emotion-20.Mui-disabled { +.emotion-24.Mui-disabled { pointer-events: none; cursor: default; } @media print { - .emotion-20 { + .emotion-24 { -webkit-print-color-adjust: exact; color-adjust: exact; } } -.emotion-20:hover { +.emotion-24:hover { -webkit-text-decoration: none; text-decoration: none; } -.emotion-20.Mui-disabled { +.emotion-24.Mui-disabled { color: rgba(0, 0, 0, 0.26); } -.emotion-20:hover { +.emotion-24:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { - .emotion-20:hover { + .emotion-24:hover { box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } -.emotion-20:active { +.emotion-24:active { box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12); } -.emotion-20.Mui-focusVisible { +.emotion-24.Mui-focusVisible { box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12); } -.emotion-20.Mui-disabled { +.emotion-24.Mui-disabled { color: rgba(0, 0, 0, 0.26); box-shadow: none; background-color: rgba(0, 0, 0, 0.12); } @media (hover: hover) { - .emotion-20:hover { + .emotion-24:hover { --variant-containedBg: rgb(35, 85, 94); --variant-textBg: rgba(51, 122, 135, 0.04); --variant-outlinedBorder: #337a87; @@ -655,15 +798,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p } } -.emotion-20.MuiButton-loading { +.emotion-24.MuiButton-loading { color: transparent; } -.emotion-20:hover { +.emotion-24:hover { colors: #337a87; } -.emotion-20.MuiButton-text { +.emotion-24.MuiButton-text { color: rgba(10, 10, 11, 0.78); } @@ -710,23 +853,23 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p style="width: 400px;" >
@@ -776,31 +934,46 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p style="width: 400px;" >
+

@@ -776,31 +934,46 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p style="width: 400px;" >
+
diff --git a/frontend/src/js/components/__snapshots__/App.test.tsx.snap b/frontend/src/js/components/__snapshots__/App.test.tsx.snap index fcbab630..cab3b65a 100644 --- a/frontend/src/js/components/__snapshots__/App.test.tsx.snap +++ b/frontend/src/js/components/__snapshots__/App.test.tsx.snap @@ -99,6 +99,12 @@ exports[`App Component is embedded in working providers 1`] = ` } .emotion-4 { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; +} + +.emotion-5 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -112,15 +118,13 @@ exports[`App Component is embedded in working providers 1`] = ` margin: 0; border: 0; vertical-align: top; - margin-top: 18px; min-width: 240px; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; } -.emotion-4 input { - font-size: 13px; -} - -.emotion-5 { +.emotion-6 { line-height: 1.4375em; font-family: Lato,sans-serif; font-weight: 400; @@ -138,87 +142,42 @@ exports[`App Component is embedded in working providers 1`] = ` -ms-flex-align: center; align-items: center; position: relative; + border-radius: 4px; + padding-left: 14px; } -.emotion-5.Mui-disabled { +.emotion-6.Mui-disabled { color: rgba(0, 0, 0, 0.38); cursor: default; } -label+.emotion-5 { - margin-top: 16px; -} - -.emotion-5::after { - left: 0; - bottom: 0; - content: ""; - position: absolute; - right: 0; - -webkit-transform: scaleX(0); - -moz-transform: scaleX(0); - -ms-transform: scaleX(0); - transform: scaleX(0); - -webkit-transition: -webkit-transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; - transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; - pointer-events: none; -} - -.emotion-5.Mui-focused:after { - -webkit-transform: scaleX(1) translateX(0); - -moz-transform: scaleX(1) translateX(0); - -ms-transform: scaleX(1) translateX(0); - transform: scaleX(1) translateX(0); -} - -.emotion-5.Mui-error::before, -.emotion-5.Mui-error::after { - border-bottom-color: #ab1000; -} - -.emotion-5::before { - border-bottom: 1px solid rgba(0, 0, 0, 0.42); - left: 0; - bottom: 0; - content: "\\00a0"; - position: absolute; - right: 0; - -webkit-transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - pointer-events: none; -} - -.emotion-5:hover:not(.Mui-disabled, .Mui-error):before { - border-bottom: 2px solid rgba(10, 10, 11, 0.78); +.emotion-6:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(10, 10, 11, 0.78); } @media (hover: none) { - .emotion-5:hover:not(.Mui-disabled, .Mui-error):before { - border-bottom: 1px solid rgba(0, 0, 0, 0.42); + .emotion-6:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.23); } } -.emotion-5.Mui-disabled:before { - border-bottom-style: dotted; -} - -.emotion-5::after { - border-bottom: 2px solid #337a87; +.emotion-6.Mui-focused .MuiOutlinedInput-notchedOutline { + border-width: 2px; } -.emotion-5:before { - border-bottom: 1px solid rgb(224, 224, 224); +.emotion-6.Mui-focused .MuiOutlinedInput-notchedOutline { + border-color: #337a87; } -.emotion-5:hover:not($disabled):before { - border-bottom: 2px solid #337a87!important; +.emotion-6.Mui-error .MuiOutlinedInput-notchedOutline { + border-color: #ab1000; } -.emotion-5:after { - border-bottom: 2px solid #337a87; +.emotion-6.Mui-disabled .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.26); } -.emotion-6 { +.emotion-7 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -233,7 +192,7 @@ label+.emotion-5 { margin-right: 8px; } -.emotion-7 { +.emotion-8 { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -251,11 +210,11 @@ label+.emotion-5 { color: rgba(0, 0, 0, 0.26); } -.emotion-7 iconButton { +.emotion-8 iconButton { margin-right: 8px; } -.emotion-8 { +.emotion-9 { font: inherit; letter-spacing: inherit; color: currentColor; @@ -274,78 +233,113 @@ label+.emotion-5 { -webkit-animation-duration: 10ms; animation-duration: 10ms; padding-top: 1px; + padding: 16.5px 14px; + padding: 8.5px 14px; + padding-left: 0; } -.emotion-8::-webkit-input-placeholder { +.emotion-9::-webkit-input-placeholder { color: currentColor; opacity: 0.42; -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } -.emotion-8::-moz-placeholder { +.emotion-9::-moz-placeholder { color: currentColor; opacity: 0.42; -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } -.emotion-8::-ms-input-placeholder { +.emotion-9::-ms-input-placeholder { color: currentColor; opacity: 0.42; -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } -.emotion-8:focus { +.emotion-9:focus { outline: 0; } -.emotion-8:invalid { +.emotion-9:invalid { box-shadow: none; } -.emotion-8::-webkit-search-decoration { +.emotion-9::-webkit-search-decoration { -webkit-appearance: none; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-8::-webkit-input-placeholder { +label[data-shrink=false]+.MuiInputBase-formControl .emotion-9::-webkit-input-placeholder { opacity: 0!important; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-8::-moz-placeholder { +label[data-shrink=false]+.MuiInputBase-formControl .emotion-9::-moz-placeholder { opacity: 0!important; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-8::-ms-input-placeholder { +label[data-shrink=false]+.MuiInputBase-formControl .emotion-9::-ms-input-placeholder { opacity: 0!important; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-webkit-input-placeholder { +label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-webkit-input-placeholder { opacity: 0.42; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-moz-placeholder { +label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-moz-placeholder { opacity: 0.42; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-placeholder { +label[data-shrink=false]+.MuiInputBase-formControl .emotion-9:focus::-ms-input-placeholder { opacity: 0.42; } -.emotion-8.Mui-disabled { +.emotion-9.Mui-disabled { opacity: 1; -webkit-text-fill-color: rgba(0, 0, 0, 0.38); } -.emotion-8:-webkit-autofill { +.emotion-9:-webkit-autofill { -webkit-animation-duration: 5000s; animation-duration: 5000s; -webkit-animation-name: mui-auto-fill; animation-name: mui-auto-fill; } -.emotion-9 { +.emotion-9:-webkit-autofill { + border-radius: inherit; +} + +.emotion-10 { + text-align: left; + position: absolute; + bottom: 0; + right: 0; + top: -5px; + left: 0; + margin: 0; + padding: 0 8px; + pointer-events: none; + border-radius: inherit; + border-style: solid; + border-width: 1px; + overflow: hidden; + min-width: 0%; + border-color: rgba(0, 0, 0, 0.23); +} + +.emotion-11 { + float: unset; + width: auto; + overflow: hidden; + padding: 0; + line-height: 11px; + -webkit-transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; + transition: width 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; +} + +.emotion-12 { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -362,11 +356,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p font-size: 1.3929rem; } -.emotion-9 iconButton { +.emotion-12 iconButton { margin-right: 8px; } -.emotion-10 { +.emotion-13 { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -387,11 +381,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p font-size: 20px; } -.emotion-10 iconButton { +.emotion-13 iconButton { margin-right: 8px; } -.emotion-11 { +.emotion-14 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -453,33 +447,33 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p text-transform: none; } -.emotion-11::-moz-focus-inner { +.emotion-14::-moz-focus-inner { border-style: none; } -.emotion-11.Mui-disabled { +.emotion-14.Mui-disabled { pointer-events: none; cursor: default; } @media print { - .emotion-11 { + .emotion-14 { -webkit-print-color-adjust: exact; color-adjust: exact; } } -.emotion-11:hover { +.emotion-14:hover { -webkit-text-decoration: none; text-decoration: none; } -.emotion-11.Mui-disabled { +.emotion-14.Mui-disabled { color: rgba(0, 0, 0, 0.26); } @media (hover: hover) { - .emotion-11:hover { + .emotion-14:hover { --variant-containedBg: rgb(35, 85, 94); --variant-textBg: rgba(51, 122, 135, 0.04); --variant-outlinedBorder: #337a87; @@ -487,34 +481,34 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p } } -.emotion-11.MuiButton-loading { +.emotion-14.MuiButton-loading { color: transparent; } -.emotion-11:hover { +.emotion-14:hover { colors: #337a87; } -.emotion-11.MuiButton-text { +.emotion-14.MuiButton-text { color: rgba(10, 10, 11, 0.78); } -.emotion-11 .MuiMenuItem-root:hover, -.emotion-11 .MuiListItemText-root:hover { +.emotion-14 .MuiMenuItem-root:hover, +.emotion-14 .MuiListItemText-root:hover { color: #679ba5; } -.emotion-12 { +.emotion-15 { display: inherit; margin-right: 8px; margin-left: -4px; } -.emotion-12>*:nth-of-type(1) { +.emotion-15>*:nth-of-type(1) { font-size: 20px; } -.emotion-13 { +.emotion-16 { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -532,16 +526,16 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p color: #cfcfcf; } -.emotion-13 iconButton { +.emotion-16 iconButton { margin-right: 8px; } -.emotion-14 { +.emotion-17 { background-color: #f7f7f7; border-right: 1px solid #e6f2f1; } -.emotion-15 { +.emotion-18 { list-style: none; margin: 0; padding: 0; @@ -550,7 +544,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p padding-bottom: 8px; } -.emotion-16 { +.emotion-19 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -578,25 +572,25 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p padding: 22px 16px 22px 42px; } -.emotion-16.undefined { +.emotion-19.undefined { opacity: 1; } -.emotion-16.active { +.emotion-19.active { background-color: #fff; } -.emotion-16.leftNav.active { +.emotion-19.leftNav.active { border-top: 1px solid #d4e9e7; border-bottom: 1px solid #d4e9e7; } -.emotion-16.navLink, -.emotion-16.navLink .MuiListItemText-root { +.emotion-19.navLink, +.emotion-19.navLink .MuiListItemText-root { color: #969696; } -.emotion-17 { +.emotion-20 { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; @@ -608,15 +602,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p color: rgba(10, 10, 11, 0.78); } -.MuiTypography-root:where(.emotion-17 .MuiListItemText-primary) { +.MuiTypography-root:where(.emotion-20 .MuiListItemText-primary) { display: block; } -.MuiTypography-root:where(.emotion-17 .MuiListItemText-secondary) { +.MuiTypography-root:where(.emotion-20 .MuiListItemText-secondary) { display: block; } -.emotion-18 { +.emotion-21 { margin: 0; line-height: 1.5; font-family: Lato,sans-serif; @@ -624,7 +618,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p font-size: 0.9286rem; } -.emotion-31 { +.emotion-34 { list-style: none; margin: 0; padding: 0; @@ -638,7 +632,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p right: 0; } -.emotion-32 { +.emotion-35 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -666,25 +660,25 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p padding: 16px 16px 16px 42px; } -.emotion-32.undefined { +.emotion-35.undefined { opacity: 1; } -.emotion-32.active { +.emotion-35.active { background-color: #fff; } -.emotion-32.leftNav.active { +.emotion-35.leftNav.active { border-top: 1px solid #d4e9e7; border-bottom: 1px solid #d4e9e7; } -.emotion-32.navLink, -.emotion-32.navLink .MuiListItemText-root { +.emotion-35.navLink, +.emotion-35.navLink .MuiListItemText-root { color: #969696; } -.emotion-36 { +.emotion-39 { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; @@ -698,15 +692,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p color: rgba(10, 10, 11, 0.78); } -.MuiTypography-root:where(.emotion-36 .MuiListItemText-primary) { +.MuiTypography-root:where(.emotion-39 .MuiListItemText-primary) { display: block; } -.MuiTypography-root:where(.emotion-36 .MuiListItemText-secondary) { +.MuiTypography-root:where(.emotion-39 .MuiListItemText-secondary) { display: block; } -.emotion-38 { +.emotion-41 { margin: 0; font-family: Lato,sans-serif; font-weight: 400; @@ -715,14 +709,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p color: rgba(0, 0, 0, 0.54); } -.emotion-39 { +.emotion-42 { font-size: 13px; position: relative; top: 6px; color: #337a87; } -.emotion-40 { +.emotion-43 { -webkit-column-gap: 48px; column-gap: 48px; display: -webkit-box; @@ -736,7 +730,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p margin-bottom: 48px; } -.emotion-41 { +.emotion-44 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -757,12 +751,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p } @media (min-width:1536px) { - .emotion-41 { + .emotion-44 { min-width: 50vw; } } -.emotion-43 { +.emotion-46 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -819,63 +813,63 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p z-index: 1; } -.emotion-43::-moz-focus-inner { +.emotion-46::-moz-focus-inner { border-style: none; } -.emotion-43.Mui-disabled { +.emotion-46.Mui-disabled { pointer-events: none; cursor: default; } @media print { - .emotion-43 { + .emotion-46 { -webkit-print-color-adjust: exact; color-adjust: exact; } } -.emotion-43:active { +.emotion-46:active { box-shadow: 0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12); } -.emotion-43:hover { +.emotion-46:hover { background-color: #f5f5f5; -webkit-text-decoration: none; text-decoration: none; } @media (hover: none) { - .emotion-43:hover { + .emotion-46:hover { background-color: #e6f2f1; } } -.emotion-43.Mui-focusVisible { +.emotion-46.Mui-focusVisible { box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12); } -.emotion-43:hover { +.emotion-46:hover { background-color: rgb(35, 85, 94); } @media (hover: none) { - .emotion-43:hover { + .emotion-46:hover { background-color: #337a87; } } -.emotion-43.Mui-disabled { +.emotion-46.Mui-disabled { color: rgba(0, 0, 0, 0.26); box-shadow: none; background-color: rgba(0, 0, 0, 0.12); } -.emotion-45 { +.emotion-48 { gap: 16px; } -.emotion-46 { +.emotion-49 { max-width: 100%; font-family: Lato,sans-serif; font-size: 0.7545rem; @@ -914,12 +908,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p text-transform: uppercase; } -.emotion-46.Mui-disabled { +.emotion-49.Mui-disabled { opacity: 0.38; pointer-events: none; } -.emotion-46 .MuiChip-avatar { +.emotion-49 .MuiChip-avatar { margin-left: 5px; margin-right: -6px; width: 24px; @@ -928,17 +922,17 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p font-size: 0.6964rem; } -.emotion-46 .MuiChip-avatarColorPrimary { +.emotion-49 .MuiChip-avatarColorPrimary { color: #fff; background-color: rgb(35, 85, 94); } -.emotion-46 .MuiChip-avatarColorSecondary { +.emotion-49 .MuiChip-avatarColorSecondary { color: #fff; background-color: rgb(65, 10, 46); } -.emotion-46 .MuiChip-avatarSmall { +.emotion-49 .MuiChip-avatarSmall { margin-left: 4px; margin-right: -4px; width: 18px; @@ -946,12 +940,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p font-size: 0.5804rem; } -.emotion-46 .MuiChip-icon { +.emotion-49 .MuiChip-icon { margin-left: 5px; margin-right: -6px; } -.emotion-46 .MuiChip-deleteIcon { +.emotion-49 .MuiChip-deleteIcon { -webkit-tap-highlight-color: transparent; color: rgba(10, 10, 11, 0.26); font-size: 22px; @@ -959,23 +953,23 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p margin: 0 5px 0 -6px; } -.emotion-46 .MuiChip-deleteIcon:hover { +.emotion-49 .MuiChip-deleteIcon:hover { color: rgba(10, 10, 11, 0.4); } -.emotion-46 .MuiChip-icon { +.emotion-49 .MuiChip-icon { color: #bcbcbc; } -.emotion-46:hover { +.emotion-49:hover { font-weight: bold; } -.emotion-46:hover { +.emotion-49:hover { font-weight: bold; } -.emotion-47 { +.emotion-50 { overflow: hidden; text-overflow: ellipsis; padding-left: 12px; @@ -983,7 +977,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p white-space: nowrap; } -.emotion-48 { +.emotion-51 { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -1001,15 +995,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p color: #337a87; } -.emotion-48 iconButton { +.emotion-51 iconButton { margin-right: 8px; } -.emotion-48.read { +.emotion-51.read { color: rgba(0, 0, 0, 0.38); } -.emotion-49 { +.emotion-52 { position: absolute; top: -5px; bottom: 0; @@ -1019,16 +1013,16 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p border-radius: 50%; } -.emotion-49.read { +.emotion-52.read { border-color: rgba(0, 0, 0, 0.38); } -.emotion-50 { +.emotion-53 { font-size: 1rem; cursor: pointer; } -.emotion-53 { +.emotion-56 { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; @@ -1039,28 +1033,28 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p padding-top: 0; } -.emotion-53 .deployments .dashboard>h4 { +.emotion-56 .deployments .dashboard>h4 { margin-top: 48px; } -.emotion-53 .deployments .dashboard>h4.margin-top-none { +.emotion-56 .deployments .dashboard>h4.margin-top-none { margin-top: 0; } @media (min-width:1536px) { - .emotion-53 { + .emotion-56 { border-left: 1px solid #e9e9e9; margin-top: -16px; padding-left: 48px; padding-top: 16px; } - .emotion-53 .deployments .dashboard>h4 { + .emotion-56 .deployments .dashboard>h4 { margin-top: 0; } } -.emotion-54 { +.emotion-57 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -1075,11 +1069,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p padding: 8px; } -.emotion-54>div:last-child { +.emotion-57>div:last-child { width: 100%; } -.emotion-55 { +.emotion-58 { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -1096,11 +1090,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p font-size: inherit; } -.emotion-55 iconButton { +.emotion-58 iconButton { margin-right: 8px; } -.emotion-59 { +.emotion-62 { background-color: #f7f7f7; padding: 10px 20px; border-radius: 4px; @@ -1111,61 +1105,61 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p min-height: 70px; } -.emotion-59 .chart-container { +.emotion-62 .chart-container { min-height: 70px; } -.emotion-59 .progress-chart { +.emotion-62 .progress-chart { min-height: 45px; } -.emotion-59 .compact .progress-step, -.emotion-59 .detailed .progress-step { +.emotion-62 .compact .progress-step, +.emotion-62 .detailed .progress-step { min-height: 45px; } -.emotion-59 .progress-step, -.emotion-59 .detailed .progress-step-total { +.emotion-62 .progress-step, +.emotion-62 .detailed .progress-step-total { position: absolute; border-right-style: none; } -.emotion-59 .progress-step-total .progress-bar { +.emotion-62 .progress-step-total .progress-bar { background-color: #d4e9e7; } -.emotion-59 .progress-step-number { +.emotion-62 .progress-step-number { -webkit-align-self: flex-start; -ms-flex-item-align: flex-start; align-self: flex-start; margin-top: -4px; } -.emotion-59.minimal { +.emotion-62.minimal { padding: initial; } -.emotion-59.no-background { +.emotion-62.no-background { background: none; } -.emotion-59.stepped-progress .progress-step-total { +.emotion-62.stepped-progress .progress-step-total { margin-left: -0.25%; width: 100.5%; } -.emotion-59.stepped-progress .progress-step-total .progress-bar { +.emotion-62.stepped-progress .progress-step-total .progress-bar { background-color: #fff; border: 1px solid #a9a9a9; border-radius: 2px; height: 12px; } -.emotion-59.stepped-progress .detailed .progress-step { +.emotion-62.stepped-progress .detailed .progress-step { min-height: 20px; } -.emotion-62 { +.emotion-65 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1176,36 +1170,36 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p max-width: 500px; } -.emotion-62>time { +.emotion-65>time { -webkit-align-self: flex-end; -ms-flex-item-align: flex-end; align-self: flex-end; margin-right: 6px; } -.emotion-64 { +.emotion-67 { background: #fff; border-radius: 4px; padding: 4px; } -.emotion-65 { +.emotion-68 { -webkit-column-gap: 8px; column-gap: 8px; display: grid; grid-template-columns: repeat(auto-fit, 32px); } -.emotion-65>div { +.emotion-68>div { -webkit-column-gap: 4px; column-gap: 4px; } -.emotion-65 .disabled { +.emotion-68 .disabled { opacity: 0.1; } -.emotion-70 { +.emotion-73 { position: fixed; display: grid; bottom: 0; @@ -1277,16 +1271,17 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-8:focus::-ms-input-p