Merge branch 'release-updates' into 'master'

Update color and spacing of releases page

See merge request !148474



Merged-by: Andrew Fontaine <afontaine@gitlab.com>
Approved-by: Emily Bauman <ebauman@gitlab.com>
Approved-by: Andrew Fontaine <afontaine@gitlab.com>
Co-authored-by: Annabel Dunstone Gray <annabel.dunstone@gmail.com>

app/assets/javascripts/releases/components/evidence_block.vue

@@ -76,7 +76,7 @@ export default {
           <gl-icon name="external-link" class="gl-ml-2 gl-flex-shrink-0 gl-flex-grow-0" />
         </gl-link>
 
-        <expand-button>
+        <expand-button class="gl-ml-4">
           <template #short>
             <span class="js-short monospace">{{ shortSha(index) }}</span>
           </template>

app/assets/javascripts/releases/components/release_block_assets.vue

@@ -102,7 +102,7 @@ export default {
     <gl-button
       data-testid="accordion-button"
       variant="link"
-      class="gl-font-weight-bold"
+      class="gl-font-weight-bold gl-text-black-normal!"
       @click="toggleAssetsExpansion"
     >
       <gl-icon

app/assets/javascripts/releases/components/release_block_footer.vue

@@ -85,36 +85,37 @@ export default {
 };
 </script>
 <template>
-  <div>
-    <div
-      v-if="commit"
-      class="gl-float-left gl-mr-5 gl-display-flex gl-align-items-center js-commit-info"
-    >
-      <gl-icon ref="commitIcon" name="commit" class="gl-mr-2" />
+  <div class="gl-display-flex gl-gap-5">
+    <div v-if="commit" class="gl-display-flex gl-align-items-center js-commit-info">
+      <gl-icon ref="commitIcon" name="commit" class="gl-mr-2 gl-text-gray-700" />
       <div v-gl-tooltip.bottom :title="commit.title">
-        <gl-link v-if="commitPath" :href="commitPath">
+        <gl-link
+          v-if="commitPath"
+          :href="commitPath"
+          class="gl-font-sm gl-font-monospace gl-mr-0 gl-text-gray-700"
+        >
           {{ commit.shortId }}
         </gl-link>
         <span v-else>{{ commit.shortId }}</span>
       </div>
     </div>
 
-    <div
-      v-if="tagName"
-      class="gl-float-left gl-mr-5 gl-display-flex gl-align-items-center js-tag-info"
-    >
-      <gl-icon name="tag" class="gl-mr-2" />
+    <div v-if="tagName" class="gl-display-flex gl-align-items-center js-tag-info">
+      <gl-icon name="tag" class="gl-mr-2 gl-text-gray-700" />
       <div v-gl-tooltip.bottom :title="__('Tag')">
-        <gl-link v-if="tagPath" :href="tagPath">
+        <gl-link
+          v-if="tagPath"
+          :href="tagPath"
+          class="gl-font-sm gl-font-monospace gl-mr-0 gl-text-gray-700"
+        >
           {{ tagName }}
         </gl-link>
         <span v-else>{{ tagName }}</span>
       </div>
     </div>
-
     <div
       v-if="timeAt || author"
-      class="gl-float-left gl-display-flex gl-align-items-center js-author-date-info"
+      class="gl-display-flex gl-align-items-center js-author-date-info gl-font-sm"
     >
       <span class="gl-text-secondary">{{ createdTime }}&nbsp;</span>
       <template v-if="timeAt">
@@ -130,11 +131,10 @@ export default {
       <div v-if="author" class="gl-display-flex">
         <span class="gl-text-secondary">{{ __('by') }}&nbsp;</span>
         <user-avatar-link
-          class="gl-my-n1 gl-display-flex"
           :link-href="author.webUrl"
           :img-src="author.avatarUrl"
           :img-alt="userImageAltDescription"
-          :img-size="24"
+          :img-size="16"
           :tooltip-text="author.username"
           tooltip-placement="bottom"
         />

app/assets/javascripts/releases/components/release_block_header.vue

@@ -6,7 +6,7 @@ import { BACK_URL_PARAM } from '~/releases/constants';
 
 export default {
   i18n: {
-    editButton: __('Edit this release'),
+    editButton: __('Edit release'),
     historical: __('Historical release'),
     historicalTooltip: __(
       'This release was created with a date in the past. Evidence collection at the moment of the release is unavailable.',
@@ -49,12 +49,12 @@ export default {
 
 <template>
   <div class="card-header d-flex gl-align-items-center bg-white pr-0">
-    <h2 class="card-title my-2 mr-auto">
-      <gl-link v-if="selfLink" :href="selfLink">
+    <h2 class="card-title gl-my-2 mr-auto gl-font-size-h2">
+      <gl-link v-if="selfLink" class="gl-text-black-normal" :href="selfLink">
         {{ release.name }}
       </gl-link>
       <template v-else>
-        {{ release.name }}
+        <span class="gl-text-black-normal">{{ release.name }}</span>
         <gl-icon
           v-gl-tooltip
           name="lock"
@@ -80,14 +80,13 @@ export default {
     </h2>
     <gl-button
       v-if="editLink"
-      v-gl-tooltip
       category="primary"
+      size="small"
       variant="default"
-      icon="pencil"
       class="gl-mr-3 js-edit-button gl-ml-3 gl-pb-3"
-      :title="$options.i18n.editButton"
-      :aria-label="$options.i18n.editButton"
       :href="editLink"
-    />
+    >
+      {{ $options.i18n.editButton }}
+    </gl-button>
   </div>
 </template>

locale/gitlab.pot

@@ -19077,6 +19077,9 @@ msgstr ""
 msgid "Edit public deploy key"
 msgstr ""
+msgid "Edit release"
+msgstr ""
+
 msgid "Edit sidebar"
 msgstr ""
@@ -19092,9 +19095,6 @@ msgstr ""
 msgid "Edit this file only."
 msgstr ""
-msgid "Edit this release"
-msgstr ""
-
 msgid "Edit title and description"
 msgstr ""