Merge branch 'aregnery/polish-checkout-instructions' into 'master'

Format code blocks in checkout instructions

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/167469



Merged-by: Stanislav Lashmanov <slashmanov@gitlab.com>
Approved-by: Michael Le <mle@gitlab.com>
Approved-by: Stanislav Lashmanov <slashmanov@gitlab.com>
Co-authored-by: Austin Regnery <aregnery@gitlab.com>

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_how_to_merge_modal.vue

@@ -3,7 +3,6 @@ import { GlModal, GlLink, GlSprintf } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { escapeShellString } from '~/lib/utils/text_utility';
 import { __ } from '~/locale';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
 export default {
   i18n: {
@@ -25,7 +24,6 @@ export default {
         help: __('Push the source branch up to GitLab.'),
       },
     },
-    copyCommands: __('Copy commands'),
     tip: __(
       '%{strongStart}Tip:%{strongEnd} You can also %{linkStart}check out with merge request ID%{linkEnd}.',
     ),
@@ -33,7 +31,6 @@ export default {
   },
   components: {
     GlModal,
-    ClipboardButton,
     GlLink,
     GlSprintf,
   },
@@ -113,6 +110,7 @@ export default {
       }
     });
   },
+  userColorScheme: window.gon.user_color_scheme,
 };
 </script>
 
@@ -132,16 +130,16 @@ export default {
       </strong>
       {{ $options.i18n.steps.step1.help }}
     </p>
-    <div class="gl-flex gl-gap-3">
-      <pre class="gl-w-full" data-testid="how-to-merge-instructions">{{ mergeInfo1 }}</pre>
-      <clipboard-button
-        :text="mergeInfo1"
-        :title="$options.i18n.copyCommands"
-        category="tertiary"
-        class="gl-self-start"
-      />
-    </div>
-    <p v-if="reviewingDocsPath">
+    <pre
+      :class="$options.userColorScheme"
+      class="code highlight js-syntax-highlight gl-rounded-base"
+      data-testid="how-to-merge-instructions"
+      >{{ mergeInfo1 }}</pre
+    >
+    <p
+      v-if="reviewingDocsPath"
+      class="-gl-mt-4 gl-rounded-b-base gl-border-1 gl-border-solid gl-border-default gl-px-4 gl-py-3"
+    >
       <gl-sprintf data-testid="docs-tip" :message="$options.i18n.tip">
         <template #strong="{ content }">
           <strong>{{ content }}</strong>
@@ -153,7 +151,6 @@ export default {
         </template>
       </gl-sprintf>
     </p>
-
     <p>
       <strong>
         {{ $options.i18n.steps.step2.label }}
@@ -178,14 +175,11 @@ export default {
       </strong>
       {{ $options.i18n.steps.step4.help }}
     </p>
-    <div class="gl-flex gl-gap-3">
-      <pre class="gl-w-full" data-testid="how-to-merge-instructions">{{ mergeInfo2 }}</pre>
-      <clipboard-button
-        :text="mergeInfo2"
-        :title="$options.i18n.copyCommands"
-        category="tertiary"
-        class="gl-self-start"
-      />
-    </div>
+    <pre
+      :class="$options.userColorScheme"
+      class="code highlight js-syntax-highlight language-shell gl-rounded-base"
+      data-testid="how-to-merge-instructions"
+      >{{ mergeInfo2 }}</pre
+    >
   </gl-modal>
 </template>