Skip to content

Commit

Permalink
Refactor: adjust Campaign settings page styles (#7646)
Browse files Browse the repository at this point in the history
  • Loading branch information
@JoshuaHungDinh
JoshuaHungDinh authored Jan 7, 2025
1 parent f74bfa9 commit 623a3d9
Show file tree
Hide file tree
Showing 3 changed files with 127 additions and 50 deletions.
89 changes: 69 additions & 20 deletions src/Campaigns/resources/admin/components/CampaignDetailsPage/CampaignDetailsPage.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,6 @@
margin-top: auto;
}


.flexRow:not(:first-child) {
flex: 1;
justify-content: flex-end;
Expand Down Expand Up @@ -143,7 +142,6 @@ select[name="campaignId"] {
}
}


.tabs [data-reach-tab],
.tabs [role='tab'] {
position: relative;
Expand Down Expand Up @@ -281,18 +279,31 @@ select[name="campaignId"] {
}

.sections {
display: flex;
flex-direction: column;
gap: var(--givewp-spacing-6);

.section {
display: flex;
background-color: #fff;
padding: var(--givewp-spacing-4);
border-radius: var(--givewp-spacing-2);
margin-bottom: var(--givewp-spacing-4);
align-content: flex-start;
flex-direction: row;
flex-wrap: wrap;
background-color: var(--givewp-shades-white);
padding: var(--givewp-spacing-9) var(--givewp-spacing-6);
border-radius: var(--givewp-spacing-2);

@media (max-width: 1100px) {
flex-direction: column;
}

.leftColumn {
flex: 1;
padding-right: var(--givewp-spacing-6);

@media (max-width: 1100px) {
width: 100%;
margin-bottom: var(--givewp-spacing-4);
}
}

.rightColumn {
Expand All @@ -303,30 +314,61 @@ select[name="campaignId"] {
font-size: 18px;
font-weight: 600;
line-height: 1.56;
color: #060c1a;
padding: var(--givewp-spacing-2) 0;
color: var(--givewp-neutral-900);
padding: 0;
margin-bottom: var(--givewp-spacing-1);
}

.sectionDescription {
font-size: 16px;
color: #4b5563;
line-height: 1.5;
color: var(--givewp-neutral-500);
}

.sectionSubtitle {
font-size: 1rem;
font-weight: 500;
line-height: 1.5;
color: #1f2937;
padding: var(--givewp-spacing-2) 0;
color: var(--givewp-neutral-700);
}

.sectionField {
margin-bottom: var(--givewp-spacing-6);
position: relative;

display: flex;
flex-direction: column;
gap: var(--givewp-spacing-1);
margin-bottom: var(--givewp-spacing-10);

input,
textarea,
select,
.editor,
.upload{
margin-top: var(--givewp-spacing-1);
color: var(--givewp-neutral-900);
font-weight: 500;
}

input, select {
padding: var(--givewp-spacing-2) var(--givewp-spacing-4);
}

input:focus, select:focus {
border-color: rgb(34, 113, 177);
outline: none;
box-shadow: rgb(34, 113, 177) 0px 0px 0px 1px;
}
}

.sectionField:last-child {
margin: 0;
}

.sectionFieldDescription {
font-size: 14px;
color: #4b5563;
line-height: 1.43;
color: var(--givewp-neutral-500);
}

.errorMsg {
Expand All @@ -335,6 +377,10 @@ select[name="campaignId"] {
color: #ff0000;
}

select {
max-width: 100%;
}

input,
select,
textarea {
Expand All @@ -345,17 +391,20 @@ select[name="campaignId"] {
border: 1px solid #9ca0af;
border-radius: var(--givewp-spacing-1);
padding: var(--givewp-spacing-2);
margin: var(--givewp-spacing-2) 0;
}

select {
max-width: 100%;
}
}
}

.toggle {
margin: 1rem 0;
margin-top: var(--givewp-spacing-3);

span:is(:global(.components-form-toggle)) {
height: 24px;
}

& > div {
margin-bottom: 0;
}

span:is(:global(.components-form-toggle .components-form-toggle__track)) {
width: 48px;
Expand Down Expand Up @@ -403,8 +452,8 @@ select[name="campaignId"] {

.warningNotice {
display: flex;
margin: 1rem 0 -0.2rem 0;
gap: 0.3rem;
margin-top: var(--givewp-spacing-2);
padding: 0 0.5rem 0 0.5rem;
background-color: #fffaf2;
border-radius: 4px;
Expand Down
64 changes: 38 additions & 26 deletions src/Campaigns/resources/admin/components/CampaignDetailsPage/Tabs/Settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ export default () => {

return (
<div className={styles.sections}>

{/* Campaign Page */}
<div className={styles.section}>
<div className={styles.leftColumn}>
<div className={styles.sectionTitle}>{__('Campaign page', 'give')}</div>
Expand All @@ -43,10 +45,10 @@ export default () => {
)}
</div>
</div>

<div className={styles.rightColumn}>
<div className={styles.sectionField}>
<img
style={{marginTop: '1rem'}}
src={campaignPageImage}
alt={__('Enable campaign page for your campaign.', 'give')}
/>
Expand All @@ -61,6 +63,7 @@ export default () => {
}}
/>
</div>

{!enableCampaignPage && (
<div className={styles.warningNotice}>
<WarningIcon />
Expand All @@ -72,26 +75,29 @@ export default () => {
</p>
</div>
)}

{errors.enableCampaignPage && (
<div className={styles.errorMsg}>{`${errors.enableCampaignPage.message}`}</div>
)}
</div>
</div>
</div>

{/* Campaign Details */}
<div className={styles.section}>
<div className={styles.leftColumn}>
<div className={styles.sectionTitle}>{__('Campaign Details', 'give')}</div>
<div className={styles.sectionDescription}>
{__('This includes the campaign title, description, and the cover of your campaign.', 'give')}
</div>
</div>

<div className={styles.rightColumn}>
<div className={styles.sectionField}>
<div className={styles.sectionSubtitle}>{__("What's the title of your campaign?", 'give')}</div>
<div className={styles.sectionFieldDescription}>
{__("Give your campaign a title that tells donors what it's about.", 'give')}
</div>

<input {...register('title')} disabled={isDisabled} />

{errors.title && <div className={styles.errorMsg}>{`${errors.title.message}`}</div>}
Expand All @@ -108,7 +114,9 @@ export default () => {
{shortDescription.replace(/(<([^>]+)>)/gi, '')}
</textarea>
) : (
<Editor name="shortDescription" />
<div className={styles.editor}>
<Editor name="shortDescription" />
</div>
)}

{errors.shortDescription && (
Expand All @@ -123,37 +131,39 @@ export default () => {
<div className={styles.sectionFieldDescription}>
{__('Upload an image or video to represent and inspire your campaign.', 'give')}
</div>

<Upload
disabled={isDisabled}
id="givewp-campaigns-upload-cover-image"
label={__('Cover', 'give')}
actionLabel={__('Select to upload', 'give')}
value={image}
onChange={(coverImageUrl, coverImageAlt) => {
setValue('image', coverImageUrl, {shouldDirty: true});
}}
reset={() => setValue('image', '', {shouldDirty: true})}
/>
<div className={styles.upload}>
<Upload
disabled={isDisabled}
id="givewp-campaigns-upload-cover-image"
label={__('Cover', 'give')}
actionLabel={__('Select to upload', 'give')}
value={image}
onChange={(coverImageUrl, coverImageAlt) => {
setValue('image', coverImageUrl, {shouldDirty: true});
}}
reset={() => setValue('image', '', {shouldDirty: true})}
/>
</div>

{errors.title && <div className={styles.errorMsg}>{`${errors.title.message}`}</div>}
</div>
</div>
</div>

{/* Campaign Goal */}
<div className={styles.section}>
<div className={styles.leftColumn}>
<div className={styles.sectionTitle}>{__('Campaign Goal', 'give')}</div>
<div className={styles.sectionDescription}>
{__('How would you like to set your goal?', 'give')}
</div>
</div>

<div className={styles.rightColumn}>
<div className={styles.sectionField}>
<div className={styles.sectionSubtitle}>
{__('Set the details of your campaign goal here.', 'give')}
</div>

<select {...register('goalType')} disabled={isDisabled}>
<option value="amount">{__('Amount raised', 'give')}</option>
<option value="donations">{__('Number of donations', 'give')}</option>
Expand All @@ -176,18 +186,20 @@ export default () => {
{errors.goalType && <div className={styles.errorMsg}>{`${errors.goalType.message}`}</div>}
</div>

<div className={styles.sectionSubtitle}>{__('How much do you want to raise?', 'give')}</div>
<div className={styles.sectionFieldDescription}>
{__('Let us know the target amount you’re aiming for in your campaign.', 'give')}
</div>
<div className={styles.sectionField}>
<div className={styles.sectionSubtitle}>{__('How much do you want to raise?', 'give')}</div>
<div className={styles.sectionFieldDescription}>
{__('Let us know the target amount you’re aiming for in your campaign.', 'give')}
</div>

{goalType === 'amount' || goalType === 'amountFromSubscriptions' ? (
<Currency name="goal" currency={window.GiveCampaignDetails.currency} disabled={isDisabled} />
) : (
<input type="number" {...register('goal', {valueAsNumber: true})} disabled={isDisabled} />
)}
{goalType === 'amount' || goalType === 'amountFromSubscriptions' ? (
<Currency name="goal" currency={window.GiveCampaignDetails.currency} disabled={isDisabled} />
) : (
<input type="number" {...register('goal', {valueAsNumber: true})} disabled={isDisabled} />
)}

{errors.goal && <div className={styles.errorMsg}>{`${errors.goal.message}`}</div>}
{errors.goal && <div className={styles.errorMsg}>{`${errors.goal.message}`}</div>}
</div>
</div>
</div>
</div>
Expand Down
24 changes: 20 additions & 4 deletions src/Campaigns/resources/admin/components/Inputs/Upload/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,14 @@ div.media-modal.wp-core-ui {
.givewp-media-library-control {
cursor: pointer;

& > button:not(svg + button) {
min-height: 160px;

& > img {
height: 100%;
}
}

&__reset {
position: relative;
display: flex;
Expand Down Expand Up @@ -88,21 +96,29 @@ div.media-modal.wp-core-ui {
align-items: center;
gap: 0.5rem;
cursor: pointer;
border-radius: 4px;

button {
margin-top: var(--givewp-spacing-2);
padding: 0.4rem 0.8rem 0.4rem 0.8rem;
}

&--remove {
border: 1px solid #F2320C;
color: #F2320C;
border: 1px solid var(--givewp-red-400);
color: var(--givewp-red-400);

&:hover {
background-color: var(--givewp-red-25);
}
}

&--update {
border: 1px solid #9CA0AF;
color: #060C1A;
border: 1px solid var(--givewp-neutral-300);
color: var(--givewp-neutral-900);

&:hover {
background-color: var(--givewp-neutral-50);
}
}
}

Expand Down

0 comments on commit 623a3d9

Please sign in to comment.