Small fixes in language and style

Signed-off-by: Olga Bulat <obulat@gmail.com>

src/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-    <b-navbar wrapperClass = "container">
+    <b-navbar wrapperClass="container">
         <template slot="brand">
             <b-navbar-item>
                 <img
@@ -12,6 +12,7 @@
         <template slot="end">
             <b-navbar-item
                 href="https://docs.google.com/forms/d/e/1FAIpQLSfF7MCKxlPsPuMn17v_sLYWMkxBkudQSPXCXoJKjh5GCtx63g/viewform"
+                title="Feedback"
                 :class="'navbar-item-feedback'">
                 {{$t('header.nav-feedback')}}
             </b-navbar-item>

src/components/LicenseIcons.vue

@@ -25,7 +25,7 @@ export default LicenseIcons
     .photo-license-icons {
         display: inline-block;
         white-space: nowrap;
-        vertical-align: text-bottom;
+        vertical-align: middle;
         margin-right:3px;
     }
     .photo-license-icon {

src/components/Stepper.vue

@@ -136,10 +136,10 @@ export default {
         },
         isStepReversed(stepName) {
             /**
-             * NC and ND steps are reversed: unlike BY and SA, they are selected when the user
+             * NC, ND and SA steps are reversed: unlike BY, they are selected when the user
              * answers no, and not selected when the user answers yes
              */
-            return stepName === 'NC' || stepName === 'ND'
+            return ['NC', 'ND', 'SA'].indexOf(stepName) > -1
         },
         nextButtonEnabledState(stepId) {
             /**
@@ -160,8 +160,9 @@ export default {
                 this.$store.commit('setSelected', { stepName, isSelected })
                 // When the user first selects a license attribute, the dropdown step's Next button should be enabled
                 // as the dropdown will be populated with the selected license from the state
-                if (this.steps[5].selected === undefined && stepName === 'BY') {
-                    this.steps[5].selected = true
+                const DROPDOWNSTEP = 5
+                if (this.steps[DROPDOWNSTEP].selected === undefined && stepName === 'BY') {
+                    this.$set(this.steps, DROPDOWNSTEP, { ...this.steps[DROPDOWNSTEP], selected: true })
                 }
             }
             this.$set(this.steps, stepId, { ...this.steps[stepId], selected: isSelected })
@@ -308,7 +309,7 @@ export default {
                     const stepId = this.steps[step].id
                     const stepName = this.steps[step].name
                     const isStepSelected = this.steps[step].selected
-                    const isAttrSelected = this.$store.state.currentLicenseAttributes[stepName]
+                    const isAttrSelected = state.currentLicenseAttributes[stepName]
                     if (this.isLicenseAttribute(stepName) && isStepSelected !== isAttrSelected) {
                         this.$set(this.steps, stepId, { ...this.steps[stepId], selected: isAttrSelected })
                         this.updateDisabledAndVisibleSteps(stepName, isAttrSelected)
@@ -345,6 +346,7 @@ export default {
     }
     .stepper-card:last-of-type {
         border-bottom: 2px solid #D8D8D8;
+        margin-bottom: 15rem;
     }
     .stepper-card-header {
         background-color: transparent;
@@ -404,28 +406,34 @@ export default {
     .inactive .vocab.h5b {
         color: #B0B0B0;
     }
-    .step-navigation {
-        margin: 13px 0 13px -4px;
-    }
-    .pagination-next {
-        background-color: #04A635;
-        color: white!important;
-        font-family: Roboto Condensed,sans-serif;
-        font-style: normal;
-        font-weight: 500;
-        font-size: 18px;
-        line-height: 24px;
-    }
-    .pagination-next.disabled {
-        background-color: #D8D8D8;
-    }
-    .pagination-next.disabled:hover,
-    .pagination-next.disabled:active {
-        box-shadow: none;
-        border: 1px solid transparent;
+    .stepper-card .b-radio.radio input[type=radio]:not(:disabled) + .check {
+        border-color: rgba(51, 51, 51, 0.2);
+        }
+    .stepper-card .b-radio.radio:hover input[type=radio]:not(:disabled) + .check {
+         border: 4px solid #0464E1;
     }
-    .slide-enter-active {
-        /*transition: all .3s ease;*/
+        .step-navigation {
+            margin: 13px 0 13px -4px;
+        }
+        .pagination-next {
+            background-color: #04A635;
+            color: white!important;
+            font-family: Roboto Condensed,sans-serif;
+            font-style: normal;
+            font-weight: 500;
+            font-size: 18px;
+            line-height: 24px;
+        }
+        .pagination-next.disabled {
+            background-color: #D8D8D8;
+        }
+        .pagination-next.disabled:hover,
+        .pagination-next.disabled:active {
+            box-shadow: none;
+            border: 1px solid transparent;
+        }
+        .slide-enter-active {
+            /*transition: all .3s ease;*/
         animation: slide-down .5s;
     }
     .slide-leave-active {

src/locales/en.json

@@ -24,32 +24,32 @@
         "FS": {
             "heading": "License Expertise",
             "question": "Do you know which license you need?",
-            "selected": "Yes, I know which license I need",
-            "not-selected": "No, I need help selecting a license"
+            "selected": "I know which license I need",
+            "not-selected": "I need help selecting a license"
         },
         "BY": {
             "heading": "Attribution",
             "question": "Do you want attribution for your work?",
-            "selected": "Yes, anyone using my work must include proper attribution.",
-            "not-selected": "No, anyone can use my work, even without giving me attribution."
+            "selected": "Anyone using my work must include proper attribution.",
+            "not-selected": "Anyone can use my work, even without giving me attribution."
         },
         "NC": {
             "heading": "Commercial Use",
             "question": "Do you want to allow others to use your work commercially?",
-            "selected": "Yes, others can use my work, even for commercial purposes.",
-            "not-selected": "No, others can not use my work for commercial purposes."
+            "selected": "Others can use my work, even for commercial purposes.",
+            "not-selected": "Others can not use my work for commercial purposes."
         },
         "ND": {
             "heading": "Derivative Works",
             "question": "Do you want to allow others to remix, adapt, or build upon your work?",
-            "selected": "Yes, others can remix, adapt, or build upon my work.",
-            "not-selected": "No, others may only use my work in unadapted form."
+            "selected": "Others can remix, adapt, or build upon my work.",
+            "not-selected": "Others may only use my work in unadapted form."
         },
         "SA": {
             "heading": "Sharing Requirements",
             "question": "Do you want to allow others to share adaptations under any terms?",
-            "selected": "Yes, others can share adaptations of my work under any terms.",
-            "not-selected": "No, others must license adaptations of my work under identical terms."
+            "selected": "Others can share adaptations of my work under any terms.",
+            "not-selected": "Others must license adaptations of my work under identical terms."
         },
         "CW": {
             "heading": "Copyright Waiver",