Added arrow in page head component (#730)

* added arrow in page head component
and removed form and dataset icons

* bring back translation keys

* increased font-size of dataset name

karma.conf.js

@@ -32,6 +32,7 @@ module.exports = (config) => {
     proxies: {
       '/fonts/': '/base/public/fonts/',
       '/img/entities-intro.ff844445.svg': '/base/public/images/entities-intro.svg',
+      '/img/arrow.539ababb.svg': '/base/public/images/arrow.svg',
       '/blank.html': '/base/public/blank.html',
       '/test/files/': '/base/test/files/'
     },

src/components/dataset/row.vue

@@ -58,7 +58,10 @@ export default {
 @import '../../assets/scss/mixins';
 
 .dataset-row {
-  .name { @include text-overflow-ellipsis; }
+  .name {
+    @include text-overflow-ellipsis;
+    font-size: 18px;
+   }
   .entities {
     text-align: right;
     padding-right: 10%;

src/components/dataset/show.vue

@@ -14,12 +14,11 @@ except according to the terms contained in the LICENSE file.
   <div id="dataset-show">
     <page-back v-show="dataExists" :to="projectPath('datasets')">
       <template #title>{{ project.dataExists ? project.nameWithArchived : '' }}</template>
-      <template #back>{{ $t('back') }}</template>
+      <template #back>{{ $t('resource.datasets') }}</template>
     </page-back>
     <page-head v-show="dataExists">
       <template #title>
         {{ datasetName }}
-        <span class="icon-cube title-icon"></span>
       </template>
       <template #tabs>
         <li :class="tabClass('')" role="presentation">

src/components/form/head.vue

@@ -13,20 +13,17 @@ except according to the terms contained in the LICENSE file.
   <div id="form-head">
     <page-back :to="projectPath()" link-title>
       <template #title>{{ project.dataExists ? project.nameWithArchived : '' }}</template>
-      <template #back>{{ $t('projectNav.action.back') }}</template>
+      <template #back>{{ $t('resource.forms') }}</template>
     </page-back>
     <div id="form-head-form-nav" class="row">
       <div class="col-xs-12">
         <div class="row">
           <!-- Using .col-xs-6 so that if the form name is long, it is not
           behind #form-head-draft-nav. -->
-          <div class="col-xs-6 form-title">
+          <div class="col-xs-6">
             <div v-if="form.dataExists" class="h1" v-tooltip.text>
               {{ form.nameOrId }}
             </div>
-            <div class="icon-wrapper">
-              <span class="icon-file-o title-icon"></span>
-            </div>
           </div>
         </div>
         <div class="row">
@@ -179,14 +176,6 @@ $tab-li-margin-top: 5px;
     // fewer elements have margin.
     margin-top: $tab-li-margin-top;
   }
-
-  .form-title{
-    display: flex;
-
-    .icon-wrapper{
-      margin: 26px 0 -10px 0;
-    }
-  }
 }
 
 #form-head-form-tabs {

src/components/page/back.vue

@@ -21,6 +21,9 @@ except according to the terms contained in the LICENSE file.
             <slot name="title"></slot>
           </template>
         </span>
+        <div class="arrow">
+          <img src="../../../public/images/arrow.svg" alt="">
+        </div>
         <router-link id="page-back-back" :to="to">
           <slot name="back"></slot>
         </router-link>
@@ -67,7 +70,23 @@ export default {
       position: absolute;
       width: 0;
     }
+
+    &.arrow {
+      display: inline;
+      border-bottom: none;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      margin-top: -15px;
+      position: absolute;
+      height: 100%;
+
+      img {
+        margin-top: -3px;
+      }
+    }
   }
+
 }
 
 #page-back-title {
@@ -77,5 +96,8 @@ export default {
   a { @include text-link; }
 }
 
-#page-back-back { font-size: 12px; }
+#page-back-back {
+  font-size: 16px;
+  margin-left: 30px
+}
 </style>