Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix minor visual bugs #414

Merged
merged 13 commits into from
Jan 17, 2024
Merged

Fix minor visual bugs #414

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
9d24d1d
Wait for lint to break :eyes:
officiallygod Jan 15, 2024
aa899a2
Fix Lint :wheelchair:
officiallygod Jan 15, 2024
30aae74
lintttt
officiallygod Jan 15, 2024
98e8a85
Update index.js
officiallygod Jan 15, 2024
4fea781
Update index.js
officiallygod Jan 15, 2024
0d9899e
Update index.js
officiallygod Jan 15, 2024
eb933af
Update index.js
officiallygod Jan 15, 2024
4671e14
Finallyyy linted
officiallygod Jan 15, 2024
7b4ef77
Fix Next Placement
officiallygod Jan 15, 2024
965c7c9
Update index.js
officiallygod Jan 15, 2024
12a6a39
Update index.js
officiallygod Jan 15, 2024
4202460
Merge branch 'enhance/ai-onboarding' into hotfix/fix-minor-bugs
officiallygod Jan 16, 2024
bf1a76a
Update index.js
officiallygod Jan 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions src/OnboardingSPA/components/AdminBar/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,9 @@ $light-grey : #a0a5aa;

&__wplogo {
color: var(--nfd-onboarding-white);
font-size: 16px;
display: flex;
font-size: 16px;
font-weight: 510;
align-items: center;

svg {
Expand All @@ -35,8 +36,9 @@ $light-grey : #a0a5aa;
align-items: center;

&__greeting {
color: $light-grey;
color: var(--nfd-onboarding-white);
font-size: 16px;
font-weight: 510;
margin-right: 5px;
}

Expand Down
11 changes: 7 additions & 4 deletions src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const NextButtonSiteGen = ( {
className,
callback = null,
disabled = false,
showChevronRight = true,
} ) => {
const navigate = useNavigate();
const { nextStep } = useSelect( ( select ) => {
Expand Down Expand Up @@ -37,10 +38,12 @@ const NextButtonSiteGen = ( {
} }
>
{ text }
<Icon
className={ 'nfd-onboarding-button--site-gen-next--icon' }
icon={ chevronRight }
/>
{ showChevronRight && (
<Icon
className={ 'nfd-onboarding-button--site-gen-next--icon' }
icon={ chevronRight }
/>
) }
</Button>
);
};
Expand Down
1 change: 1 addition & 0 deletions src/OnboardingSPA/components/Button/NextButtonSiteGen/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
display: flex;
cursor: pointer;
padding: 0 16px;
padding-left: 22px;
text-align: center;
border-radius: 8px;
align-items: center;
Expand Down
4 changes: 3 additions & 1 deletion src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,9 @@ const SiteGenHeader = () => {
const currentStepIndex = findIndex( allSteps, {
path: currentStep?.path,
} );
const progress = ( currentStepIndex / allSteps.length ) * 100;
const progress = Math.abs(
( ( currentStepIndex - 1 ) / ( allSteps.length - 1 ) ) * 100
);
return (
<>
<Fill name={ `${ HEADER_SITEGEN }/${ HEADER_TOP }` }>
Expand Down
22 changes: 12 additions & 10 deletions src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.nfd-onboarding-image-uploader {

&--with-text {
width: 40vw;
width: 36vw;
margin: 16px;
border: 1.25px dashed var(--nfd-onboarding-site-logo-border);

Expand All @@ -15,7 +15,7 @@
align-items: stretch;
}
border-radius: 8px;
padding: 24px;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: center;
Expand Down Expand Up @@ -123,25 +123,27 @@
&__reset {
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
flex-direction: column;
justify-content: center;

&__button {
font-size: clamp(0.5rem, 0.4091rem + 0.4545vw, 1.5rem);
font-style: normal;
padding: 0;
width: 40px;
height: 40px;
border: none;
font-weight: 510;
font-style: normal;
background-color: #ff0e9099;
color: var(--nfd-onboarding-primary);
background-color: transparent;
border: none;
padding: 0;
font-size: clamp(0.5rem, 0.4091rem + 0.4545vw, 1.5rem);

&:hover {
cursor: pointer;
text-decoration: underline;
}

&__icon {
fill: var(--nfd-onboarding-primary);
fill: rgb(255, 14, 144);
}
}
}
Expand Down
3 changes: 2 additions & 1 deletion src/OnboardingSPA/components/ProgressBar/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@
height: 16px;

&__progress {
background-color: var(--nfd-onboarding-progress-bar-fill);
height: 16px;
transition: width 2s ease-in-out;
background-color: var(--nfd-onboarding-progress-bar-fill);
}
}
}
11 changes: 4 additions & 7 deletions src/OnboardingSPA/components/StartOptions/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,17 +65,14 @@
}

&__heading {
color: var(--nfd-onboarding-primary);
width: 96%;
margin: 50px 0 50px;
line-height: 1;

&__title {
font-weight: 500;
text-align: center;
color: var(--nfd-onboarding-primary);
font-weight: 600;
font-size: 20px;
line-height: 20px;
text-align: center;
margin-bottom: 10px;
color: var(--nfd-onboarding-primary);

@media (max-width: #{ ($break-large) }) {
margin: 8px;
Expand Down
23 changes: 14 additions & 9 deletions src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,12 @@
const TextInputSiteGen = ( {
hint,
height,
children,
placeholder,
customerInput,
setIsValidInput,
setCustomerInput,
customChildren = false,
} ) => {
const textareaRef = useRef( null );
const [ analysisScore, setAnalysisScore ] = useState( 0 );
Expand All @@ -21,7 +23,7 @@
const analysisResult = calculateAnalysisScore( customerInput?.trim() );
setAnalysisScore( analysisResult );
setIsValidInput( analysisResult >= 2 );
}, [ customerInput ] );

Check warning on line 26 in src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks 

React Hook useEffect has missing dependencies: 'height' and 'setIsValidInput'. Either include them or remove the dependency array. If 'setIsValidInput' changes too often, find the parent component that defines it and wrap that definition in useCallback

const calculateAnalysisScore = ( input ) => {
/* Number of Characters in the input
Expand Down Expand Up @@ -85,16 +87,19 @@
onChange={ ( e ) => onTextChange( e ) }
/>
</div>
{ customerInput ? (
<div className={ 'nfd-sg-input-box__info' }>
<div className={ 'nfd-sg-input-box__info-text' }>
{ __( 'Detail', 'wp-module-onboarding' ) }
<div className={ 'nfd-sg-input-box_bottom' }>
{ customerInput ? (
<div className={ 'nfd-sg-input-box__info' }>
<div className={ 'nfd-sg-input-box__info-text' }>
{ __( 'Detail', 'wp-module-onboarding' ) }
</div>
{ renderDetails() }
</div>
{ renderDetails() }
</div>
) : (
<p className={ 'nfd-sg-input-box__hint' }>{ hint }</p>
) }
) : (
<p className={ 'nfd-sg-input-box__hint' }>{ hint }</p>
) }
{ customChildren && children }
</div>
</label>
</div>
);
Expand Down
14 changes: 10 additions & 4 deletions src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ $selected-detail: #1de082;
}

&__hint {
margin-top: 30px;
font-weight: 300;
font-size: 0.87rem;
padding: 0 1.5px;
Expand All @@ -44,7 +43,6 @@ $selected-detail: #1de082;

&__info {
display: flex;
margin-top: 30px;
align-items: center;

&-text {
Expand All @@ -56,8 +54,8 @@ $selected-detail: #1de082;
}

&-icon {
width: 10px;
height: 6px;
width: 12px;
height: 6.5px;
margin: 3px;
border-radius: 6px;
animation: fadeIn 100ms ease-in;
Expand All @@ -69,6 +67,14 @@ $selected-detail: #1de082;
}
}
}

&_bottom {
display: flex;
margin-top: 30px;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}

}
24 changes: 14 additions & 10 deletions src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
return setCustomerInput( currentData.sitegen.siteDetails.prompt );
}
setFooterNavEnabled( false );
}, [] );

Check warning on line 48 in src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks 

React Hook useEffect has missing dependencies: 'currentData.sitegen.siteDetails.prompt', 'setDrawerActiveView', 'setFooterNavEnabled', 'setHeaderActiveView', 'setIsHeaderEnabled', and 'setSidebarActiveView'. Either include them or remove the dependency array

useEffect( () => {
if ( customerInput?.trim() === '' ) {
Expand All @@ -55,7 +55,7 @@
currentData.sitegen.siteDetails.prompt = customerInput?.trim();
setCurrentOnboardingData( currentData );
}
}, [ customerInput ] );

Check warning on line 58 in src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks 

React Hook useEffect has missing dependencies: 'currentData', 'isValidInput', 'setCurrentOnboardingData', and 'setFooterNavEnabled'. Either include them or remove the dependency array

return (
<CommonLayout isCentered>
Expand All @@ -69,16 +69,20 @@
customerInput={ customerInput }
setIsValidInput={ setIsValidInput }
setCustomerInput={ setCustomerInput }
/>
{ isLargeViewport && (
<div className={ 'nfd-sg-site-details-endrow' }>
<NextButtonSiteGen
className={ 'nfd-sg-site-details--next-btn' }
text={ content.buttonText }
disabled={ ! isValidInput }
/>
</div>
) }
customChildren={ true }
>
{ isLargeViewport && (
<div className={ 'nfd-sg-site-details-endrow' }>
<NextButtonSiteGen
className={
'nfd-sg-site-details--next-btn'
}
text={ content.buttonText }
disabled={ ! isValidInput }
/>
</div>
) }
</TextInputSiteGen>
</div>
</Animate>
</CommonLayout>
Expand Down
1 change: 0 additions & 1 deletion src/OnboardingSPA/steps/SiteGen/SiteDetails/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
}

&-endrow {
width: 100%;
display: flex;
justify-content: flex-end;

Expand Down
2 changes: 1 addition & 1 deletion src/OnboardingSPA/steps/SiteGen/SiteLogo/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
}

&__buttons {
width: 108%;
width: 99%;
display: flex;
padding: 16px;
flex-direction: row;
Expand Down
2 changes: 1 addition & 1 deletion src/OnboardingSPA/steps/SiteGen/Welcome/contents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const getContents = () => {
return {
heading: __( 'Website Creator for WordPress', 'wp-module-onboarding' ),
subHeading: __(
'Tell our AI engine what kind of site you want to make and let it handle the content and design for you.',
'Tell our AI engine what kind of site you want to make and let it handle the content and design for you',
'wp-module-onboarding'
),
buttonText: __( 'Get Started', 'wp-module-onboarding' ),
Expand Down
8 changes: 7 additions & 1 deletion src/OnboardingSPA/steps/SiteGen/Welcome/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,13 @@ const SiteGenWelcome = () => {
{ content.subHeading }
</p>
</div>
<NextButtonSiteGen text={ content.buttonText } />
<NextButtonSiteGen
className={
'nfd-onboarding-step--site-gen__welcome--button'
}
text={ content.buttonText }
showChevronRight={ false }
/>
</div>
</CommonLayout>
);
Expand Down
28 changes: 17 additions & 11 deletions src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,12 @@
}

&__heading {
padding: 0;
width: 100%;
display: flex;
align-items: center;
flex-direction: row;
width: 100%;
padding: 0;
justify-content: center;
align-items: center;

&__image {
height: 36px;
Expand All @@ -60,29 +60,35 @@
}

&__text {
color: var(--nfd-onboarding-primary);
font-size: clamp(0.875rem, 0.6818rem + 0.9659vw, 3rem);
line-height: 1;
font-weight: 510;
margin-left: 15px;
white-space: normal;
line-height: 1;
letter-spacing: 0.8px;
color: var(--nfd-onboarding-primary);
font-size: clamp(0.875rem, 0.6818rem + 0.9659vw, 3rem);
}
}

&__sub-heading {
padding: 0;
width: 100%;
margin: 10px;
padding: 0;
margin-bottom: 40px;
margin-bottom: 50px;

&__text {
text-align: center;
color: var(--nfd-onboarding-primary);
font-size: clamp(0.875rem, 0.7727rem + 0.5114vw, 2rem);
margin: 0;
padding: 0;
text-align: center;
color: var(--nfd-onboarding-primary);
font-size: clamp(0.875rem, 0.727rem + 0.5114vw, 2rem);
}
}
}

&--button {
padding: 0 35px;
}
}

}
Expand Down