Use stylus in components instead pure css

Author: danielbarion

src/components/app-footer-nav/component.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import './style.css'
+import './style.styl'
 import github from '../../assets/github/GitHub-Mark-Light-32px.png'
 import {
   Keyboard

src/components/app-footer-nav/style.css

@@ -0,0 +1,65 @@
+.footer-nav
+	position absolute
+	right 2rem
+	bottom 0
+	color white
+
+	ul
+		list-style none
+		display flex
+		justify-content center
+		flex-direction column
+		padding 0
+
+		li
+			padding 0.5rem
+			display flex
+			justify-content center
+			cursor pointer
+			transition background-color 400ms ease-out
+			border-radius 50%
+			margin 0.6rem
+			position relative
+
+			&:hover
+				background-color rgba(255, 255, 255, 0.2)
+			&.active
+				background-color rgba(255, 255, 255, 0.2)
+
+.popup-shortcut
+	position absolute
+	bottom -0.75rem
+	right 3rem
+	background-color rgba(255, 255, 255, 0.2)
+	width 20rem
+	cursor default
+
+	&::after
+		position absolute
+		content ''
+		width 0
+		height 0
+		right -10px
+		bottom 10px
+		border-top 10px solid transparent
+		border-bottom 10px solid transparent
+		border-left 10px solid rgba(255, 255, 255, 0.23)
+
+	ul
+		list-style none
+
+		li
+			display grid
+			grid-template-areas 'shortcut description'
+			grid-template-columns 6rem 1fr
+			border-radius unset
+			cursor default
+
+			&:hover
+				border-radius unset
+				background-color unset
+
+			span
+				text-align center
+				font-weight 500
+				margin-right 5px

src/components/app-footer-nav/style.styl

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import './style.css'
+import './style.styl'
 import rise from '../../assets/music/rise.mp3'
 import fantastic from '../../assets/music/fantastic.mp3'
 import legendsNeverDie from '../../assets/music/legends-never-die.mp3'