avoid abbreviations

src/assets/stylesheets/avatar-selector.scss

@@ -10,13 +10,13 @@
   display: flex;
   justify-content: center;
 
-  &__prev-button:focus, &__next-button:focus {
+  &__previous-button:focus, &__next-button:focus {
     outline: none;
   }
-  &__prev-button:active, &__next-button:active {
+  &__previous-button:active, &__next-button:active {
     color: grey;
   }
-  &__prev-button, &__next-button {
+  &__previous-button, &__next-button {
     position: absolute;
     top: 50%;
     margin-top: -4em;
@@ -27,7 +27,7 @@
     color: white;
     border: none;
   }
-  &__prev-button {
+  &__previous-button {
     left: -2em;
   }
   &__next-button {

src/react-components/avatar-selector.js

@@ -23,8 +23,8 @@ class AvatarSelector extends Component {
   }
 
   emitChangeToPrevious = () => {
-    const prevAvatarId = this.props.avatars[this.prevAvatarIndex()].id;
-    this.props.onChange(prevAvatarId);
+    const previousAvatarId = this.props.avatars[this.previousAvatarIndex()].id;
+    this.props.onChange(previousAvatarId);
   }
 
   componentDidUpdate() {
@@ -107,7 +107,7 @@ class AvatarSelector extends Component {
           position="0 0 0"
         ></a-gltf-entity>
       </a-scene>
-      <button className="avatar-selector__prev-button" onClick={this.emitChangeToPrevious}>
+      <button className="avatar-selector__previous-button" onClick={this.emitChangeToPrevious}>
         <i className="avatar-selector__button-icon material-icons">keyboard_arrow_left</i>
       </button>
       <button className="avatar-selector__next-button" onClick={this.emitChangeToNext}>