Skip to content
This repository has been archived by the owner on Dec 27, 2020. It is now read-only.

Add neutral animation #2

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Conversation

JackieYJC
Copy link

Added animation component for neutral reaction face.

I followed https://en.bem.info/methodology/naming-convention/ while naming css classes.

Screenshots of final result:

Screen Shot 2020-08-23 at 9 46 55 PM
Screen Shot 2020-08-23 at 9 47 00 PM

Comment on lines +38 to 40
className={classNames(`${styles.face}`, {
[`${styles.face_active}`]: this.props.isActive
})}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
className={classNames(`${styles.face}`, {
[`${styles.face_active}`]: this.props.isActive
})}
className={classNames({
[styles.face]: true,
[styles.face_active]: this.props.isActive
})}

width="60" height="60" viewBox="0 0 100 100"
>
<circle className={`${styles.face__background}`} cx="49.5" cy="49.5" r="49.5"/>
<circle className={`${styles.face__eyesAndMouth} face__eyesAndMouth`} cx="21.6" cy="50.7" r="6"/>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<circle className={`${styles.face__eyesAndMouth} face__eyesAndMouth`} cx="21.6" cy="50.7" r="6"/>
<circle className={`${styles.face__eyesAndMouth}`} cx="21.6" cy="50.7" r="6"/>

>
<circle className={`${styles.face__background}`} cx="49.5" cy="49.5" r="49.5"/>
<circle className={`${styles.face__eyesAndMouth} face__eyesAndMouth`} cx="21.6" cy="50.7" r="6"/>
<circle className={`${styles.face__eyesAndMouth} face__eyesAndMouth`} cx="77.4" cy="50.7" r="6"/>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<circle className={`${styles.face__eyesAndMouth} face__eyesAndMouth`} cx="77.4" cy="50.7" r="6"/>
<circle className={`${styles.face__eyesAndMouth}`} cx="77.4" cy="50.7" r="6"/>

<circle className={`${styles.face__background}`} cx="49.5" cy="49.5" r="49.5"/>
<circle className={`${styles.face__eyesAndMouth} face__eyesAndMouth`} cx="21.6" cy="50.7" r="6"/>
<circle className={`${styles.face__eyesAndMouth} face__eyesAndMouth`} cx="77.4" cy="50.7" r="6"/>
<path className={`${styles.face__eyesAndMouth} face__eyesAndMouth`} d={neutralMouthSVGPath}/>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<path className={`${styles.face__eyesAndMouth} face__eyesAndMouth`} d={neutralMouthSVGPath}/>
<path className={`${styles.face__eyesAndMouth}`} d={neutralMouthSVGPath}/>

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants