Fix alignment of tasks in shots

src/styles/_shots.sass

@@ -55,12 +55,12 @@
 				background-color: $color-background-light
 
 			&.shot-name
-				padding: 0px 10px
 				text-align: left
 				position: relative
 				height: 100%
 				a
-					height: 100%
+					display: flex
+					padding: 5px 10px
 					color: $color-text-dark-primary
 
 			&.task-type
@@ -70,12 +70,15 @@
 				overflow: hidden
 
 				a
-					display: inline-block /* Each task in a new line */
+					display: inline-block /* Each task next to each other */
+					vertical-align: middle
 					height: 100%
-					padding: 0 15px
+					min-height: 100%
+					padding: 15px
 					transition: all 150ms ease-in-out
+					position: relative
 
-					@include status-color-property(background-color, ':before', 'dark')
+					@include status-color-property(background-color, ':before', '')
 
 					&:before
 						display: block
@@ -85,17 +88,29 @@
 						height: 16px
 						border-radius: 50%
 						border: 2px solid transparent
-						top: 50%
-						left: 50%
-						transform: translate(-50%, -50%)
+						+position-center-translate
 						transition: all 150ms ease-in-out
 
+					span
+						display: block
+						+position-center-translate
+						z-index: 1
+						font:
+							weight: bold
+							size: .8em
+						text:
+							align: center
+							transform: capitalize
+						color: white
+
 					&.active
 						opacity: 1
 
 						&:before
-							transform: translate(-50%, -50%) scale(1.6)
-							border: 2px solid $color-primary
+							transform: translate(-50%, -50%) scale(1.3)
+							border-color: $color-primary
+						&:hover
+							border-color: $color-primary-light
 
 					&.task-add
 						width: auto
@@ -111,6 +126,8 @@
 					&:hover
 						&:before
 							opacity: .8
+							transform: translate(-50%, -50%) scale(1.2)
+						&.active:before
 							transform: translate(-50%, -50%) scale(1.3)
 
 .attract-box