Address review comments on style

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

Author: obulat

src/App.vue

@@ -10,19 +10,19 @@
                 <LocaleChooser />
             </div>
             <div class="columns">
-            <Stepper v-model="currentStepId" />
-            <div class="column" >
-                <div class="fixed-right-column">
-                <SelectedLicenseCard
-                    v-if="showLicense"
-                />
-                <LicenseUseCard
-                    v-if="showLicenseUse"
-                />
-                <HelpSection />
+                <Stepper v-model="currentStepId" />
+                <div class="column" >
+                    <div class="fixed-right-column">
+                    <SelectedLicenseCard
+                        v-if="showLicense"
+                    />
+                    <LicenseUseCard
+                        v-if="showLicenseUse"
+                    />
+                    <HelpSection />
+                    </div>
                 </div>
             </div>
-            </div>
         </div>
         <Footer />
     </div>

src/components/HelpSection.vue

@@ -268,8 +268,7 @@ export default {
         color: #ED592F;
     }
     .help-links .help-link .help-link-a:hover {
-        font-weight: bold;
-        color:black!important;
+        color:#363636!important;
     }
     .help-links {
         list-style-position: inside;

src/components/LicenseCode.vue

@@ -12,18 +12,21 @@
             <template v-slot:creator>
                 <a :href="creatorProfileUrl" v-if="creatorProfileUrl && isWeb" rel="cc:attributionURL">
                     <span v-html="creatorSpan" /></a>
-                <span v-else v-html="creatorSpan" />
+                <span v-else-if="creatorName" v-html="creatorSpan" />
             </template>
             <template v-slot:by>
                 {{$t(byString)}}
             </template>
+            <template v-slot:licensed-text>
+                <span>{{$t('license-use.richtext.licensed-text')}}</span>
+            </template>
             <template v-slot:licenseName>
                 <a v-if="isWeb" :href="licenseUrl('web')" target="_blank" rel="license noopener noreferrer"
                    style="display: inline-block;">{{shortName}}</a>
                 <span v-else>{{shortName}}</span>
                 <LicenseIcons
                     v-if="isWeb"
-                    :url="licenseUrl"
+                    :url="licenseUrl('web')"
                     :iconsArr="iconsList"/>
             </template>
         </i18n>
@@ -80,6 +83,6 @@ export default {
 
 <style scoped>
 .license-text .photo-license-icons {
-    height: 22px;
+    height: 1.4rem!important;
 }
 </style>

src/components/PrintMediaLicenseCode.vue

@@ -111,16 +111,15 @@ export default {
 }
 </script>
 <style lang="scss">
-    .attribution-tab .photo-license-icon {
-        height: 26px;
-    }
-    #attribution-richtext>p>span,
-    #attribution-richtext .photo-license-icons{
-        height: 26px;
+    .license-text span * {
         vertical-align: middle;
     }
-    #attribution-richtext p {
-        margin-top: 1rem;
+    .attribution-tab .photo-license-icon {
+        height: 1.4rem;
+    }
+
+    #attribution-plaintext p {
+        margin-top: 0.5rem;
         margin-bottom: 1rem;
     }
     .license-use-hint {
@@ -171,27 +170,4 @@ export default {
             }
         }
     }
-    #generated-html-container {
-        padding-top:10px;
-        padding-bottom: 10px;
-        textarea {
-            word-break: break-all;
-            -ms-word-break: break-all;
-            min-height: 60px;
-            font-family: "Source Sans Pro", "Noto Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
-            font-size:0.845rem;
-        }
-    }
-    #generated-richtext-container {
-        margin-top: 1rem;
-        display: block;
-        .attribution-license-icons {
-            vertical-align: middle;
-            margin-top: 0;
-            margin-left: 2px;
-        }
-        p {
-            display: inline
-        }
-    }
 </style>

src/components/WebLicenseCode.vue

@@ -148,7 +148,7 @@ export default {
         vertical-align: middle;
     }
     #attribution-richtext p {
-        margin-top: 1rem;
+        margin-top: 0.5rem;
         margin-bottom: 1rem;
     }
     .license-use-hint {

src/locales/en.json

@@ -118,9 +118,10 @@
         "copy-label": "Copy",
         "copied-label": "Copied!",
         "richtext": {
-            "full-text": "{workTitle} {by} {creator} is licensed under {licenseName}",
+            "full-text": "{workTitle} {by} {creator}{licensed-text}{licenseName}",
             "workTitle": "This work",
             "by": "by",
+            "licensed-text": " is licensed under ",
             "print-instructions": ". To view a copy of this license, visit {linkToLicenseDeed}."
         }
     },