diff --git a/packages/manager/.changeset/pr-9131-tech-stories-1684293772869.md b/packages/manager/.changeset/pr-9131-tech-stories-1684293772869.md new file mode 100644 index 00000000000..69a4b26dfce --- /dev/null +++ b/packages/manager/.changeset/pr-9131-tech-stories-1684293772869.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Tech Stories +--- + +[M3-6374] - MUI v5 Migration - `Components > Placeholder` ([#9131](https://github.com/linode/manager/pull/9131)) diff --git a/packages/manager/.changeset/pr-9131-tech-stories-1684293796866.md b/packages/manager/.changeset/pr-9131-tech-stories-1684293796866.md new file mode 100644 index 00000000000..4b023d9bc09 --- /dev/null +++ b/packages/manager/.changeset/pr-9131-tech-stories-1684293796866.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Tech Stories +--- + +[M3-6344] - MUI v5 Migration - `Components > H1Header` ([#9131](https://github.com/linode/manager/pull/9131)) diff --git a/packages/manager/src/components/Breadcrumb/FinalCrumb.tsx b/packages/manager/src/components/Breadcrumb/FinalCrumb.tsx index 133059abafd..91b07364a5e 100644 --- a/packages/manager/src/components/Breadcrumb/FinalCrumb.tsx +++ b/packages/manager/src/components/Breadcrumb/FinalCrumb.tsx @@ -5,7 +5,7 @@ import { makeStyles } from '@mui/styles'; import { Theme } from '@mui/material/styles'; import Typography from 'src/components/core/Typography'; import EditableText from 'src/components/EditableText'; -import H1Header from 'src/components/H1Header'; +import { H1Header } from 'src/components/H1Header/H1Header'; import { EditableProps, LabelProps } from './types'; const useStyles = makeStyles((theme: Theme) => ({ diff --git a/packages/manager/src/components/EditableText/EditableText.tsx b/packages/manager/src/components/EditableText/EditableText.tsx index b743347ff03..b34e192b915 100644 --- a/packages/manager/src/components/EditableText/EditableText.tsx +++ b/packages/manager/src/components/EditableText/EditableText.tsx @@ -8,7 +8,7 @@ import ClickAwayListener from 'src/components/core/ClickAwayListener'; import { makeStyles } from '@mui/styles'; import { Theme } from '@mui/material/styles'; import { TextFieldProps } from 'src/components/core/TextField'; -import H1Header from 'src/components/H1Header'; +import { H1Header } from 'src/components/H1Header/H1Header'; import TextField from '../TextField'; const useStyles = makeStyles((theme: Theme) => ({ diff --git a/packages/manager/src/components/EmptyLandingPageResources/ResourcesSection.tsx b/packages/manager/src/components/EmptyLandingPageResources/ResourcesSection.tsx index 776d9129ddb..ae7e7afdcd9 100644 --- a/packages/manager/src/components/EmptyLandingPageResources/ResourcesSection.tsx +++ b/packages/manager/src/components/EmptyLandingPageResources/ResourcesSection.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import DocsIcon from 'src/assets/icons/docs.svg'; import ExternalLinkIcon from 'src/assets/icons/external-link.svg'; -import Placeholder from 'src/components/Placeholder'; +import { Placeholder } from 'src/components/Placeholder/Placeholder'; import PointerIcon from 'src/assets/icons/pointer.svg'; import Typography from 'src/components/core/Typography'; import YoutubeIcon from 'src/assets/icons/youtube.svg'; diff --git a/packages/manager/src/components/H1Header/H1Header.tsx b/packages/manager/src/components/H1Header/H1Header.tsx index f91fe03c08c..045d6756d80 100644 --- a/packages/manager/src/components/H1Header/H1Header.tsx +++ b/packages/manager/src/components/H1Header/H1Header.tsx @@ -1,30 +1,21 @@ import * as React from 'react'; -import { makeStyles } from '@mui/styles'; +import { SxProps } from '@mui/system'; import Typography from 'src/components/core/Typography'; -interface Props { - title: string; +interface H1HeaderProps { className?: string; dataQaEl?: string; renderAsSecondary?: boolean; + sx?: SxProps; + title: string; } - -const useStyles = makeStyles({ - root: { - '&:focus': { - outline: 'none', - }, - }, -}); - // Accessibility Feature: // The role of this component is to implement focus to the main content when navigating the application // Since it is a one page APP, we need to help users focus on the main content when switching views // It should serve as the only source for all H1s -const H1Header: React.FC = (props) => { +export const H1Header = (props: H1HeaderProps) => { const h1Header = React.useRef(null); - const { className, title, dataQaEl, renderAsSecondary } = props; - const classes = useStyles(); + const { className, dataQaEl, renderAsSecondary, sx, title } = props; // React.useEffect(() => { // if (h1Header.current !== null) { @@ -34,17 +25,20 @@ const H1Header: React.FC = (props) => { return ( {title} ); }; - -export default H1Header; diff --git a/packages/manager/src/components/H1Header/index.tsx b/packages/manager/src/components/H1Header/index.tsx deleted file mode 100644 index 188a2d67b3b..00000000000 --- a/packages/manager/src/components/H1Header/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -import H1Header from './H1Header'; -export default H1Header; diff --git a/packages/manager/src/components/NotFound.tsx b/packages/manager/src/components/NotFound.tsx index c9c58dde1b1..50d9f21e56c 100644 --- a/packages/manager/src/components/NotFound.tsx +++ b/packages/manager/src/components/NotFound.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import ErrorOutline from '@mui/icons-material/ErrorOutline'; -import Placeholder from 'src/components/Placeholder'; +import { Placeholder } from 'src/components/Placeholder/Placeholder'; interface Props { className?: string; diff --git a/packages/manager/src/components/Placeholder/.Placeholder.stories.mdx b/packages/manager/src/components/Placeholder/.Placeholder.stories.mdx index 52f6f4e4d6e..a7a5edb4a62 100644 --- a/packages/manager/src/components/Placeholder/.Placeholder.stories.mdx +++ b/packages/manager/src/components/Placeholder/.Placeholder.stories.mdx @@ -1,5 +1,5 @@ import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'; -import Placeholder from '/src/components/Placeholder'; +import { Placeholder } from 'src/components/Placeholder/Placeholder'; ({ - '@keyframes scaleIn': { - from: { - transform: 'translateX( -10px ) rotateY( -180deg )', - }, - to: { - transformOrigin: 'center center', - }, - }, - '@keyframes fadeIn': { - from: { - opacity: 0, - }, - to: { - opacity: 1, - }, - }, - container: { - display: 'grid', - gridTemplateColumns: 'repeat(5, 1fr) 35% 35% repeat(5, 1fr)', - gridTemplateRows: - 'max-content 12px max-content 7px max-content 15px max-content 24px max-content 64px min-content', - gridTemplateAreas: ` - ". . . . . icon icon . . . . ." - ". . . . . . . . . . . ." - ". . . . . title title . . . . ." - ". . . . . . . . . . . ." - ". . . . . subtitle subtitle . . . . ." - ". . . . . . . . . . . ." - ". . . . . copy copy . . . . ." - ". . . . . . . . . . . ." - ". . . . . button button . . . . ." - ". . . . . . . . . . . ." - ". . . links links links links links links . . ." - `, - justifyItems: 'center', - }, - containerAdjustment: { - gridTemplateRows: - 'max-content 12px max-content 7px max-content 15px max-content 24px max-content 40px', - gridTemplateAreas: ` - ". . . . . icon icon . . . . ." - ". . . . . . . . . . . ." - ". . . . . title title . . . . ." - ". . . . . . . . . . . ." - ". . . . . subtitle subtitle . . . . ." - ". . . . . . . . . . . ." - ". . . . . copy copy . . . . ." - ". . . . . . . . . . . ." - ". . . . . button button . . . . ." - `, - }, - root: { - padding: `${theme.spacing(2)} 0`, - [theme.breakpoints.up('md')]: { - padding: `${theme.spacing(10)} 0`, - }, - }, - rootWithShowTransferDisplay: { - padding: `${theme.spacing(4)} 0`, - [theme.breakpoints.up('md')]: { - padding: `${theme.spacing(10)} 0 ${theme.spacing(4)}`, - }, - }, - copy: { - textAlign: 'center', - gridArea: 'copy', - minWidth: 'min-content', - maxWidth: '75%', - [theme.breakpoints.down('md')]: { - maxWidth: 'none', - }, - }, - icon: { - width: '160px', - height: '160px', - padding: theme.spacing(2), - '& .outerCircle': { - fill: theme.name === 'light' ? '#fff' : '#000', - stroke: theme.bg.offWhite, - }, - '& .circle': { - fill: theme.name === 'light' ? '#fff' : '#000', - }, - '& .insidePath path': { - opacity: 0, - stroke: theme.palette.primary.main, - }, - '& .bucket.insidePath path': { - fill: theme.palette.primary.main, - }, - }, - entity: { - borderRadius: '50%', - backgroundColor: theme.bg.bgPaper, - color: theme.color.green, - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - }, - title: { - textAlign: 'center', - gridArea: 'title', - }, - subtitle: { - gridArea: 'subtitle', - textAlign: 'center', - color: theme.palette.text.primary, - }, - '& .insidePath path': { - opacity: 0, - animation: '$fadeIn .2s ease-in-out forwards .3s', - stroke: theme.palette.primary.main, - }, - '& .bucket.insidePath path': { - fill: theme.palette.primary.main, - }, - button: { - gridArea: 'button', - display: 'flex', - gap: theme.spacing(2), - [theme.breakpoints.down('xs')]: { - flexDirection: 'column', - }, - }, - linksSection: { - gridArea: 'links', - borderTop: `1px solid ${theme.name === 'light' ? '#e3e5e8' : '#2e3238'}`, - paddingTop: '38px', - }, - linksSectionBottomSeparation: { - paddingBottom: theme.spacing(2), - [theme.breakpoints.up('md')]: { - paddingBottom: theme.spacing(4), - }, - borderBottom: `1px solid ${theme.name === 'light' ? '#e3e5e8' : '#2e3238'}`, - }, - iconWrapper: { - gridArea: 'icon', - padding: theme.spacing(2), - }, -})); +import { fadeIn } from 'src/styles/keyframes'; export interface ExtendedButtonProps extends ButtonProps { target?: string; } -export interface Props { +export interface PlaceholderProps { buttonProps?: ExtendedButtonProps[]; children?: string | React.ReactNode; className?: string; @@ -170,12 +26,12 @@ export interface Props { title: string; } -const Placeholder: React.FC = (props) => { +export const Placeholder = (props: PlaceholderProps) => { const { buttonProps, dataQAPlaceholder, descriptionMaxWidth, - icon: Icon, + icon: Icon = LinodeIcon, isEntity, linksSection, renderAsSecondary, @@ -184,55 +40,73 @@ const Placeholder: React.FC = (props) => { title, } = props; - const classes = useStyles(); - + const theme = useTheme(); const hasSubtitle = subtitle !== undefined; + /** + * TODO: We should use these styles to create a Styled component THEN + * pass that into the Placeholder component + * */ + const IconStyles = { + width: '160px', + height: '160px', + padding: theme.spacing(2), + '& .outerCircle': { + fill: theme.name === 'light' ? '#fff' : '#000', + stroke: theme.bg.offWhite, + }, + '& .circle': { + fill: theme.name === 'light' ? '#fff' : '#000', + }, + '& .insidePath path': { + opacity: 0, + stroke: theme.palette.primary.main, + }, + '& .bucket.insidePath path': { + fill: theme.palette.primary.main, + }, + }; + return ( <> -
-
- {Icon && } -
+ + {Icon && } + {hasSubtitle ? ( - + {subtitle} ) : null} -
+ {typeof props.children === 'string' ? ( {props.children} ) : ( props.children )} -
-
+ + {buttonProps && buttonProps.map((thisButton, index) => (
+ {linksSection !== undefined ? ( -
+ {linksSection} -
+ ) : null} -
+ {showTransferDisplay ? : null} ); }; -Placeholder.defaultProps = { - icon: LinodeIcon, -}; +const StyledIconWrapper = styled('div')>( + ({ theme, ...props }) => ({ + gridArea: 'icon', + padding: theme.spacing(2), + ...(props.isEntity && { + borderRadius: '50%', + backgroundColor: theme.bg.bgPaper, + color: theme.color.green, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }), + }) +); -export default Placeholder; +const StyledButtonWrapper = styled('div')(({ theme }) => ({ + gridArea: 'button', + display: 'flex', + gap: theme.spacing(2), + [theme.breakpoints.down('xs')]: { + flexDirection: 'column', + }, +})); + +const StyledLinksSection = styled('div')< + Pick +>(({ theme, ...props }) => ({ + gridArea: 'links', + borderTop: `1px solid ${theme.name === 'light' ? '#e3e5e8' : '#2e3238'}`, + paddingTop: '38px', + + ...(props.showTransferDisplay && { + paddingBottom: theme.spacing(2), + [theme.breakpoints.up('md')]: { + paddingBottom: theme.spacing(4), + }, + borderBottom: `1px solid ${theme.name === 'light' ? '#e3e5e8' : '#2e3238'}`, + }), +})); + +const StyledCopy = styled('div', { + label: 'StyledCopy', +})>(({ theme, ...props }) => ({ + textAlign: 'center', + gridArea: 'copy', + minWidth: 'min-content', + maxWidth: props.descriptionMaxWidth ? props.descriptionMaxWidth : '75%', + [theme.breakpoints.down('md')]: { + maxWidth: 'none', + }, +})); + +const PlaceholderRoot = styled('div')>( + ({ theme, ...props }) => ({ + display: 'grid', + gridTemplateColumns: 'repeat(5, 1fr) 35% 35% repeat(5, 1fr)', + gridTemplateRows: + props.showTransferDisplay && props.linksSection === undefined + ? 'max-content 12px max-content 7px max-content 15px max-content 24px max-content 40px' + : 'max-content 12px max-content 7px max-content 15px max-content 24px max-content 64px min-content', + gridTemplateAreas: + props.showTransferDisplay && props.linksSection === undefined + ? ` + ". . . . . icon icon . . . . ." + ". . . . . . . . . . . ." + ". . . . . title title . . . . ." + ". . . . . . . . . . . ." + ". . . . . subtitle subtitle . . . . ." + ". . . . . . . . . . . ." + ". . . . . copy copy . . . . ." + ". . . . . . . . . . . ." + ". . . . . button button . . . . ." + ` + : ` + ". . . . . icon icon . . . . ." + ". . . . . . . . . . . ." + ". . . . . title title . . . . ." + ". . . . . . . . . . . ." + ". . . . . subtitle subtitle . . . . ." + ". . . . . . . . . . . ." + ". . . . . copy copy . . . . ." + ". . . . . . . . . . . ." + ". . . . . button button . . . . ." + ". . . . . . . . . . . ." + ". . . links links links links links links . . ." + `, + justifyItems: 'center', + padding: props.showTransferDisplay + ? `${theme.spacing(4)} 0` + : `${theme.spacing(2)} 0`, + [theme.breakpoints.up('md')]: { + padding: props.showTransferDisplay + ? `${theme.spacing(10)} 0 ${theme.spacing(4)}` + : `${theme.spacing(10)} 0`, + }, + + // @TODO: Check! These were in the root of the makeStyles function... + '& .insidePath path': { + opacity: 0, + animation: `${fadeIn} .2s ease-in-out forwards .3s`, + stroke: theme.palette.primary.main, + }, + '& .bucket.insidePath path': { + fill: theme.palette.primary.main, + }, + }) +); diff --git a/packages/manager/src/components/Placeholder/index.ts b/packages/manager/src/components/Placeholder/index.ts deleted file mode 100644 index 030af21aee9..00000000000 --- a/packages/manager/src/components/Placeholder/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import Placeholder, { Props as _PlaceholderProps } from './Placeholder'; -/* tslint:disable */ -export interface PlaceholderProps extends _PlaceholderProps {} - -export default Placeholder; diff --git a/packages/manager/src/components/StackScript/StackScript.tsx b/packages/manager/src/components/StackScript/StackScript.tsx index 3003e5ffe7a..cee491ec0a3 100644 --- a/packages/manager/src/components/StackScript/StackScript.tsx +++ b/packages/manager/src/components/StackScript/StackScript.tsx @@ -9,7 +9,7 @@ import Chip from 'src/components/core/Chip'; import Divider from 'src/components/core/Divider'; import Typography from 'src/components/core/Typography'; import { DateTimeDisplay } from 'src/components/DateTimeDisplay'; -import H1Header from 'src/components/H1Header'; +import { H1Header } from 'src/components/H1Header/H1Header'; import ScriptCode from 'src/components/ScriptCode'; import { useAccountManagement } from 'src/hooks/useAccountManagement'; import { listToItemsByID } from 'src/queries/base'; diff --git a/packages/manager/src/features/CancelLanding/CancelLanding.tsx b/packages/manager/src/features/CancelLanding/CancelLanding.tsx index e823a0d3e84..7b8580e71d9 100644 --- a/packages/manager/src/features/CancelLanding/CancelLanding.tsx +++ b/packages/manager/src/features/CancelLanding/CancelLanding.tsx @@ -7,7 +7,7 @@ import { Theme } from '@mui/material/styles'; import AkamaiLogo from 'src/assets/logo/akamai-logo.svg'; import Button from 'src/components/Button'; import Typography from 'src/components/core/Typography'; -import H1Header from 'src/components/H1Header'; +import { H1Header } from 'src/components/H1Header/H1Header'; const useStyles = makeStyles((theme: Theme) => ({ root: { diff --git a/packages/manager/src/features/Events/EventsLanding.tsx b/packages/manager/src/features/Events/EventsLanding.tsx index e39925c57ac..20f48fe7cc1 100644 --- a/packages/manager/src/features/Events/EventsLanding.tsx +++ b/packages/manager/src/features/Events/EventsLanding.tsx @@ -12,7 +12,7 @@ import { Theme } from '@mui/material/styles'; import { TableBody } from 'src/components/TableBody'; import { TableHead } from 'src/components/TableHead'; import Typography from 'src/components/core/Typography'; -import H1Header from 'src/components/H1Header'; +import { H1Header } from 'src/components/H1Header/H1Header'; import { Table } from 'src/components/Table'; import { TableCell } from 'src/components/TableCell'; import { TableRow } from 'src/components/TableRow'; diff --git a/packages/manager/src/features/Help/Panels/SearchPanel.tsx b/packages/manager/src/features/Help/Panels/SearchPanel.tsx index 374a94c0e31..903b55a92fb 100644 --- a/packages/manager/src/features/Help/Panels/SearchPanel.tsx +++ b/packages/manager/src/features/Help/Panels/SearchPanel.tsx @@ -3,7 +3,7 @@ import LinodeIcon from 'src/assets/addnewmenu/linode.svg'; import Paper from 'src/components/core/Paper'; import { createStyles, withStyles, WithStyles, WithTheme } from '@mui/styles'; import { Theme } from '@mui/material/styles'; -import H1Header from 'src/components/H1Header'; +import { H1Header } from 'src/components/H1Header/H1Header'; import AlgoliaSearchBar from './AlgoliaSearchBar'; type ClassNames = 'root' | 'bgIcon' | 'searchHeading'; diff --git a/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.test.tsx b/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.test.tsx index b01906f60c2..961deab065f 100644 --- a/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.test.tsx +++ b/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.test.tsx @@ -2,7 +2,7 @@ import { shallow } from 'enzyme'; import { assocPath } from 'ramda'; import * as React from 'react'; import { reactRouterProps } from 'src/__data__/reactRouterProps'; -import H1Header from 'src/components/H1Header'; +import { H1Header } from 'src/components/H1Header/H1Header'; import { CombinedProps, SupportSearchLanding } from './SupportSearchLanding'; const classes = { diff --git a/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx b/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx index 5a26e985a2c..57730b29204 100644 --- a/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx +++ b/packages/manager/src/features/Help/SupportSearchLanding/SupportSearchLanding.tsx @@ -7,7 +7,7 @@ import { createStyles, withStyles, WithStyles } from '@mui/styles'; import { Theme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import Box from '@mui/material/Box'; -import H1Header from 'src/components/H1Header'; +import { H1Header } from 'src/components/H1Header/H1Header'; import { Notice } from 'src/components/Notice/Notice'; import TextField from 'src/components/TextField'; import { COMMUNITY_SEARCH_URL, DOCS_SEARCH_URL } from 'src/constants'; diff --git a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Disks/Disks.tsx b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Disks/Disks.tsx index e0722595e7a..ab86a66b406 100644 --- a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Disks/Disks.tsx +++ b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Disks/Disks.tsx @@ -7,7 +7,7 @@ import { Theme } from '@mui/material/styles'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import ErrorState from 'src/components/ErrorState'; import LandingLoading from 'src/components/LandingLoading'; -import Placeholder from 'src/components/Placeholder'; +import { Placeholder } from 'src/components/Placeholder/Placeholder'; import { WithStartAndEnd } from '../../../request.types'; import TimeRangeSelect from '../../../shared/TimeRangeSelect'; import { useGraphs } from '../OverviewGraphs/useGraphs'; diff --git a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Network/NetworkGraphs.tsx b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Network/NetworkGraphs.tsx index ad18501da71..cb0efa65174 100644 --- a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Network/NetworkGraphs.tsx +++ b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Network/NetworkGraphs.tsx @@ -3,7 +3,7 @@ import { CircleProgress } from 'src/components/CircleProgress'; import { withTheme, WithTheme } from '@mui/styles'; import ErrorState from 'src/components/ErrorState'; import LongviewLineGraph from 'src/components/LongviewLineGraph'; -import Placeholder from 'src/components/Placeholder'; +import { Placeholder } from 'src/components/Placeholder/Placeholder'; import { convertNetworkToUnit, formatNetworkTooltip, diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLandingEmptyState.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLandingEmptyState.tsx index 4702107c4cd..2007f7ce7ee 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLandingEmptyState.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancersLandingEmptyState.tsx @@ -6,7 +6,7 @@ import { Theme } from '@mui/material/styles'; import Typography from 'src/components/core/Typography'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import Link from 'src/components/Link'; -import Placeholder from 'src/components/Placeholder'; +import { Placeholder } from 'src/components/Placeholder/Placeholder'; const useStyles = makeStyles((theme: Theme) => ({ placeholderAdjustment: { diff --git a/packages/manager/src/features/Search/SearchLanding.tsx b/packages/manager/src/features/Search/SearchLanding.tsx index 3488e2f60fa..7664a92f039 100644 --- a/packages/manager/src/features/Search/SearchLanding.tsx +++ b/packages/manager/src/features/Search/SearchLanding.tsx @@ -9,7 +9,7 @@ import { makeStyles } from '@mui/styles'; import { Theme } from '@mui/material/styles'; import Typography from 'src/components/core/Typography'; import Grid from '@mui/material/Unstable_Grid2'; -import H1Header from 'src/components/H1Header'; +import { H1Header } from 'src/components/H1Header/H1Header'; import { Notice } from 'src/components/Notice/Notice'; import { REFRESH_INTERVAL } from 'src/constants'; import useAPISearch from 'src/features/Search/useAPISearch'; diff --git a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx index d775a9b4557..e08e4b6fb83 100644 --- a/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx +++ b/packages/manager/src/features/StackScripts/StackScriptBase/StackScriptBase.tsx @@ -14,7 +14,7 @@ import ErrorState from 'src/components/ErrorState'; import { Image } from '@linode/api-v4/lib/images'; import { pathOr } from 'ramda'; import { Notice } from 'src/components/Notice/Notice'; -import Placeholder from 'src/components/Placeholder'; +import { Placeholder } from 'src/components/Placeholder/Placeholder'; import { RouteComponentProps, withRouter } from 'react-router-dom'; import StackScriptsIcon from 'src/assets/icons/entityIcons/stackscript.svg'; import StackScriptTableHead from '../Partials/StackScriptTableHead'; diff --git a/packages/manager/src/features/linodes/LinodesCreate/TabbedContent/FromBackupsContent.tsx b/packages/manager/src/features/linodes/LinodesCreate/TabbedContent/FromBackupsContent.tsx index 1c8fd081533..ef9fdb1901c 100644 --- a/packages/manager/src/features/linodes/LinodesCreate/TabbedContent/FromBackupsContent.tsx +++ b/packages/manager/src/features/linodes/LinodesCreate/TabbedContent/FromBackupsContent.tsx @@ -10,7 +10,7 @@ import Paper from 'src/components/core/Paper'; import { createStyles, withStyles, WithStyles } from '@mui/styles'; import { Theme } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; -import Placeholder from 'src/components/Placeholder'; +import { Placeholder } from 'src/components/Placeholder/Placeholder'; import { reportException } from 'src/exceptionReporting'; import { extendType } from 'src/utilities/extendType'; import getAPIErrorsFor from 'src/utilities/getAPIErrorFor'; diff --git a/packages/manager/src/features/linodes/LinodesCreate/TabbedContent/FromImageContent.tsx b/packages/manager/src/features/linodes/LinodesCreate/TabbedContent/FromImageContent.tsx index c0df442b607..37714f06e67 100644 --- a/packages/manager/src/features/linodes/LinodesCreate/TabbedContent/FromImageContent.tsx +++ b/packages/manager/src/features/linodes/LinodesCreate/TabbedContent/FromImageContent.tsx @@ -6,7 +6,7 @@ import { Theme } from '@mui/material/styles'; import Typography from 'src/components/core/Typography'; import Grid from '@mui/material/Unstable_Grid2'; import ImageSelect from 'src/components/ImageSelect'; -import Placeholder from 'src/components/Placeholder'; +import { Placeholder } from 'src/components/Placeholder/Placeholder'; import { filterImagesByType } from 'src/store/image/image.helpers'; import ImageIcon from 'src/assets/icons/entityIcons/image.svg'; import { diff --git a/packages/manager/src/features/linodes/LinodesCreate/TabbedContent/FromLinodeContent.tsx b/packages/manager/src/features/linodes/LinodesCreate/TabbedContent/FromLinodeContent.tsx index f2fc410e6b3..7dc8b3303cf 100644 --- a/packages/manager/src/features/linodes/LinodesCreate/TabbedContent/FromLinodeContent.tsx +++ b/packages/manager/src/features/linodes/LinodesCreate/TabbedContent/FromLinodeContent.tsx @@ -5,7 +5,7 @@ import { useHistory } from 'react-router-dom'; import VolumeIcon from 'src/assets/icons/entityIcons/volume.svg'; import Paper from 'src/components/core/Paper'; import Grid from '@mui/material/Unstable_Grid2'; -import Placeholder from 'src/components/Placeholder'; +import { Placeholder } from 'src/components/Placeholder/Placeholder'; import { buildQueryStringForLinodeClone } from 'src/features/linodes/LinodesLanding/LinodeActionMenu'; import { extendType } from 'src/utilities/extendType'; import getAPIErrorsFor from 'src/utilities/getAPIErrorFor'; diff --git a/packages/manager/src/features/linodes/LinodesDetail/LinodeBackup/BackupsPlaceholder.tsx b/packages/manager/src/features/linodes/LinodesDetail/LinodeBackup/BackupsPlaceholder.tsx index 511a2cd5070..1910e072cdb 100644 --- a/packages/manager/src/features/linodes/LinodesDetail/LinodeBackup/BackupsPlaceholder.tsx +++ b/packages/manager/src/features/linodes/LinodesDetail/LinodeBackup/BackupsPlaceholder.tsx @@ -3,7 +3,7 @@ import VolumeIcon from 'src/assets/icons/entityIcons/volume.svg'; import { makeStyles } from 'tss-react/mui'; import Typography from 'src/components/core/Typography'; import { Currency } from 'src/components/Currency'; -import Placeholder from 'src/components/Placeholder'; +import { Placeholder } from 'src/components/Placeholder/Placeholder'; import LinodePermissionsError from '../LinodePermissionsError'; import { EnableBackupsDialog } from './EnableBackupsDialog'; diff --git a/packages/manager/src/styles/keyframes.ts b/packages/manager/src/styles/keyframes.ts index 6540f5b4171..5551f922d28 100644 --- a/packages/manager/src/styles/keyframes.ts +++ b/packages/manager/src/styles/keyframes.ts @@ -11,9 +11,9 @@ export const rotate360 = keyframes` export const fadeIn = keyframes` from: { - opacity: 0, + opacity: 0; }, to: { - opacity: 1, + opacity: 1; } `;