Skip to content

Commit 0bde7db

Browse files
ellatrixellatrix
committed
Reorg
1 parent b7b6ff3 commit 0bde7db

File tree

6 files changed

+61
-89
lines changed

6 files changed

+61
-89
lines changed

‎client/dashboard/sites/add-new-site/index.tsx

Lines changed: 32 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
__experimentalVStack as VStack,
77
__experimentalText as Text,
88
Button,
9-
Modal,
109
} from '@wordpress/components';
1110
import { useViewportMatch } from '@wordpress/compose';
1211
import { __, sprintf } from '@wordpress/i18n';
@@ -52,7 +51,7 @@ const bigSkyClick = () => {
5251
} );
5352
};
5453

55-
export default function AddNewSiteModal( { onRequestClose }: { onRequestClose: () => void } ) {
54+
function AddNewSite() {
5655
const isDesktop = useViewportMatch( 'medium' );
5756
const Wrapper = isDesktop ? HStack : VStack;
5857
const offer = sprintf(
@@ -64,7 +63,6 @@ export default function AddNewSiteModal( { onRequestClose }: { onRequestClose: (
6463
);
6564

6665
return (
67-
<<<<<<< HEAD
6866
<Wrapper alignment="flex-start" style={ { padding: '16px' } } spacing={ 6 }>
6967
<Column title={ __( 'Add new site' ) }>
7068
<MenuItem
@@ -107,76 +105,37 @@ export default function AddNewSiteModal( { onRequestClose }: { onRequestClose: (
107105
href="/setup/site-migration/create-site?source=sites-dashboard&ref=new-site-popover&action=import"
108106
/>
109107
</Column>
110-
=======
111-
<Modal
112-
title={ __( 'Add New Site' ) }
113-
onRequestClose={ onRequestClose }
114-
className="dashboard-add-new-site-modal"
115-
>
116-
<Wrapper alignment="flex-start" style={ { padding: '16px' } } spacing={ 6 }>
117-
<Column title={ __( 'Add new site' ) }>
118-
<MenuItem
119-
icon={ <WordPressLogo /> }
120-
title="WordPress.com"
121-
description={ __( 'Build and grow your site, all in one powerful platform.' ) }
122-
onClick={ wordpressClick }
123-
href="/start?source=sites-dashboard&ref=new-site-popover"
124-
/>
125-
<MenuItem
126-
icon={ <JetpackLogo /> }
127-
title={ __( 'Via the Jetpack plugin' ) }
128-
description={ __( 'Install the Jetpack plugin on an existing site.' ) }
129-
onClick={ jetpackClick }
130-
href={ `/jetpack/connect?cta_from=${ TRACK_SOURCE_NAME }&cta_id=add-site` }
131-
/>
132-
</Column>
133-
<Column title={ __( 'Migrate and import' ) }>
134-
<MenuItem
135-
icon={ reusableBlock }
136-
title={ __( 'Migrate' ) }
137-
description={ __( 'Bring your entire WordPress site to WordPress.com.' ) }
138-
onClick={ migrateClick }
139-
href="/setup/site-migration?source=sites-dashboard&ref=new-site-popover&action=migrate"
140-
/>
141-
<MenuItem
142-
icon={ <Icon icon={ download } size={ 18 } /> }
143-
title={ __( 'Import' ) }
144-
description={ __( 'Use a backup to only import content from other platforms.' ) }
145-
onClick={ importClick }
146-
href="/setup/site-migration/create-site?source=sites-dashboard&ref=new-site-popover&action=import"
147-
/>
148-
</Column>
149-
>>>>>>> 60b5d2a1eb8 (Use modal)
150108

151-
<Button
152-
href="https://wordpress.com/setup/onboarding"
153-
onClick={ offerClick }
154-
style={ {
155-
display: 'block',
156-
height: 'auto',
157-
textAlign: 'left',
158-
width: '260px',
159-
padding: 0,
160-
} }
161-
>
162-
<VStack className="dashboard-add-new-site-modal__banner">
163-
<img src={ devSiteBanner } alt={ offer } />
164-
<Text size="title">{ offer }</Text>
165-
<Text variant="muted" as="p">
166-
{ sprintf(
167-
// translators: %s is a percentage like 55% off
168-
__(
169-
'Save up to %s on annual plans and get a free custom domain for a year. Your next site is just a step away.'
170-
),
171-
formatNumber( 0.55, {
172-
numberFormatOptions: { style: 'percent' },
173-
} )
174-
) }
175-
</Text>
176-
<div>{ __( 'Unlock offer' ) }</div>
177-
</VStack>
178-
</Button>
179-
</Wrapper>
180-
</Modal>
109+
<Button
110+
href="https://wordpress.com/setup/onboarding"
111+
onClick={ offerClick }
112+
style={ {
113+
display: 'block',
114+
height: 'auto',
115+
textAlign: 'left',
116+
width: '260px',
117+
padding: 0,
118+
} }
119+
>
120+
<VStack className="dashboard-add-new-site__banner">
121+
<img src={ devSiteBanner } alt={ offer } />
122+
<Text size="title">{ offer }</Text>
123+
<Text variant="muted" as="p">
124+
{ sprintf(
125+
// translators: %s is a percentage like 55% off
126+
__(
127+
'Save up to %s on annual plans and get a free custom domain for a year. Your next site is just a step away.'
128+
),
129+
formatNumber( 0.55, {
130+
numberFormatOptions: { style: 'percent' },
131+
} )
132+
) }
133+
</Text>
134+
<div>{ __( 'Unlock offer' ) }</div>
135+
</VStack>
136+
</Button>
137+
</Wrapper>
181138
);
182139
}
140+
141+
export default AddNewSite;

‎client/dashboard/sites/add-new-site/menu-item.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,14 @@ function MenuItem( {
2323
}: Props & React.ComponentProps< typeof Button > ) {
2424
return (
2525
<Button
26-
className="dashboard-add-new-site-modal__menu-item"
26+
className="dashboard-add-new-site__menu-item"
2727
{ ...buttonProps }
2828
label={ title }
2929
showTooltip={ false }
3030
>
3131
<HStack alignment="start" spacing={ 2 }>
3232
<div style={ { flexShrink: 0 } }>
33-
<Icon className="dashboard-add-new-site-modal__menu-item-icon" icon={ icon } />
33+
<Icon className="dashboard-add-new-site__menu-item-icon" icon={ icon } />
3434
</div>
3535
<VStack>
3636
<Text>{ title }</Text>

‎client/dashboard/sites/add-new-site/style.scss

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,7 @@
33
@import '@wordpress/base-styles/variables';
44
@import '@wordpress/base-styles/colors';
55

6-
// Above the site switcher dropdown.
7-
.components-modal__screen-overlay:has(.dashboard-add-new-site-modal) {
8-
z-index: 1000000;
9-
}
10-
11-
.dashboard-add-new-site-modal__menu-item {
6+
.dashboard-add-new-site__menu-item {
127
height: auto;
138
text-align: left;;
149
padding: 8px;
@@ -20,7 +15,7 @@
2015
}
2116
}
2217

23-
.dashboard-add-new-site-modal__menu-item-icon {
18+
.dashboard-add-new-site__menu-item-icon {
2419
width: 24px;
2520
height: auto;
2621
display: none;
@@ -30,7 +25,7 @@
3025
}
3126
}
3227

33-
.dashboard-add-new-site-modal__banner {
28+
.dashboard-add-new-site__banner {
3429
background: $gray-100;
3530
border-radius: $radius-medium;
3631
padding: $grid-unit-20;

‎client/dashboard/sites/index.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { DataViews, filterSortAndPaginate } from '@automattic/dataviews';
22
import { useQuery } from '@tanstack/react-query';
33
import { useNavigate, Link } from '@tanstack/react-router';
4-
import { Button } from '@wordpress/components';
4+
import { Button, Modal } from '@wordpress/components';
55
import { useResizeObserver } from '@wordpress/compose';
66
import { __ } from '@wordpress/i18n';
77
import { Icon, check } from '@wordpress/icons';
@@ -12,7 +12,7 @@ import DataViewsCard from '../components/dataviews-card';
1212
import { PageHeader } from '../components/page-header';
1313
import PageLayout from '../components/page-layout';
1414
import { STATUS_LABELS, getSiteStatus, getSiteStatusLabel } from '../utils/site-status';
15-
import AddNewSiteModal from './add-new-site';
15+
import AddNewSite from './add-new-site';
1616
import SiteIcon from './site-icon';
1717
import SitePreview from './site-preview';
1818
import type { Site } from '../data/types';
@@ -201,7 +201,11 @@ export default function Sites() {
201201

202202
return (
203203
<>
204-
{ isModalOpen && <AddNewSiteModal onRequestClose={ () => setIsModalOpen( false ) } /> }
204+
{ isModalOpen && (
205+
<Modal title={ __( 'Add New Site' ) } onRequestClose={ () => setIsModalOpen( false ) }>
206+
<AddNewSite />
207+
</Modal>
208+
) }
205209
<PageLayout
206210
header={
207211
<PageHeader

‎client/dashboard/sites/site/switcher.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// Above the site switcher dropdown.
2+
.components-modal__screen-overlay:has(.dashboard-site-switcher__modal) {
3+
z-index: 1000000;
4+
}

‎client/dashboard/sites/site/switcher.tsx

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
import { filterSortAndPaginate } from '@automattic/dataviews';
22
import { useQuery } from '@tanstack/react-query';
3-
import { MenuGroup, MenuItem, SearchControl, Icon } from '@wordpress/components';
3+
import { MenuGroup, MenuItem, SearchControl, Icon, Modal } from '@wordpress/components';
44
import { __ } from '@wordpress/i18n';
55
import { plus } from '@wordpress/icons';
66
import { useState } from 'react';
77
import { sitesQuery } from '../../app/queries';
88
import RouterLinkMenuItem from '../../components/router-link-menu-item';
9-
import AddNewSiteModal from '../add-new-site';
9+
import AddNewSite from '../add-new-site';
1010
import SiteIcon from '../site-icon';
1111
import type { View } from '@automattic/dataviews';
1212

13+
import './switcher.scss';
14+
1315
const fields = [ { id: 'name', enableGlobalSearch: true } ];
1416

1517
const DEFAULT_VIEW: View = {
@@ -62,7 +64,15 @@ export default function Switcher( { onClose }: { onClose: () => void } ) {
6264
</div>
6365
</MenuItem>
6466
</MenuGroup>
65-
{ isModalOpen && <AddNewSiteModal onRequestClose={ () => setIsModalOpen( false ) } /> }
67+
{ isModalOpen && (
68+
<Modal
69+
title={ __( 'Add New Site' ) }
70+
onRequestClose={ () => setIsModalOpen( false ) }
71+
className="dashboard-site-switcher__modal"
72+
>
73+
<AddNewSite />
74+
</Modal>
75+
) }
6676
</div>
6777
);
6878
}

0 commit comments

Comments
 (0)