UI polish work on snippets

New snippet icons created. Remove
old logo and use new svg logo + text.
Clean up css and new haml markup. This fixes
some styling issues for embeded snippets.

app/assets/images/ext_snippet_icons/logo.svg

+<svg width="100" height="32" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path fill="#8C929D" d="M67.67 8.11h-2.06l.009 15.364h8.348v-1.9H67.68l-.01-13.465zM81.913 20.778a3.517 3.517 0 01-2.553 1.078c-1.57 0-2.203-.775-2.203-1.787 0-1.522 1.059-2.25 3.309-2.25.487.002.974.04 1.456.113v2.846h-.01zm-2.137-9.313a6.826 6.826 0 00-4.387 1.579l.728 1.267c.841-.492 1.872-.983 3.356-.983 1.693 0 2.44.87 2.44 2.326v.747a9.4 9.4 0 00-1.428-.114c-3.612 0-5.446 1.267-5.446 3.914 0 2.374 1.456 3.565 3.659 3.565 1.484 0 2.912-.68 3.404-1.787l.378 1.503h1.456v-7.866c-.01-2.487-1.087-4.151-4.16-4.151zM90.587 21.926c-.776 0-1.456-.094-1.967-.33v-7.102c.7-.586 1.57-1.011 2.676-1.011 1.995 0 2.76 1.408 2.76 3.687 0 3.234-1.238 4.756-3.47 4.756m.87-10.457a3.775 3.775 0 00-2.836 1.257V10.74l-.01-2.629h-2.013l.01 14.987c1.01.425 2.391.652 3.895.652 3.848 0 5.701-2.458 5.701-6.704-.01-3.356-1.72-5.578-4.746-5.578M45.228 9.776c1.825 0 3.006.605 3.772 1.22l.889-1.541c-1.2-1.06-2.827-1.627-4.567-1.627-4.387 0-7.46 2.676-7.46 8.075 0 5.654 3.319 7.857 7.11 7.857a12.083 12.083 0 004.577-.888L49.5 16.83v-1.9h-5.63v1.9h3.594l.047 4.586c-.473.236-1.286.425-2.392.425-3.045 0-5.087-1.92-5.087-5.957-.01-4.113 2.1-6.108 5.19-6.108M59.744 8.107H57.73l.01 2.582v8.916c0 2.487 1.078 4.15 4.15 4.15.416.002.83-.036 1.24-.113v-1.806c-.31.047-.624.07-.937.066-1.692 0-2.44-.87-2.44-2.326v-6.145h3.376v-1.683h-3.373l-.009-3.64h-.003zM52.608 23.474h2.014V11.75h-2.014zM52.608 10.133h2.014V8.119h-2.014z"/><path d="M31.864 17.907l-1.788-5.496-3.538-10.9a.612.612 0 00-1.16 0L21.84 12.406H10.085L6.547 1.512a.612.612 0 00-1.16 0L1.855 12.405.066 17.907c-.162.5.015 1.05.44 1.36L15.963 30.5l15.456-11.233a1.22 1.22 0 00.446-1.36" fill="#FC6D26"/><path d="M15.966 30.49l5.875-18.086H10.09z" fill="#E24329"/><path d="M15.962 30.49l-5.877-18.086H1.859z" fill="#FC6D26"/><path d="M1.852 12.41L.063 17.906c-.162.5.015 1.05.441 1.36L15.959 30.5 1.852 12.41z" fill="#FCA326"/><path d="M1.854 12.41h8.237L6.546 1.517a.612.612 0 00-1.16 0L1.854 12.41z" fill="#E24329"/><path d="M15.966 30.49l5.875-18.086h8.236z" fill="#FC6D26"/><path d="M30.074 12.41l1.79 5.496a1.219 1.219 0 01-.44 1.36L15.966 30.49l14.107-18.08z" fill="#FCA326"/><path d="M30.079 12.41H21.84L25.38 1.517a.612.612 0 011.16 0l3.539 10.893z" fill="#E24329"/></g></svg>
\ No newline at end of file

app/assets/stylesheets/framework/highlight.scss

@@ -8,7 +8,7 @@
   pre {
     padding: 10px 0;
     border: 0;
-    border-radius: 0 0 $border-radius-default $border-radius-default;
+    border-radius: 0 0 $border-radius-default;
     font-family: $monospace-font;
     font-size: $code-font-size;
     line-height: 1.5;

app/assets/stylesheets/snippets.scss

@@ -11,7 +11,7 @@
   line-height: $code-line-height;
   color: $gl-text-color;
   margin: 20px;
-  font-weight: 200;
+  font-weight: $gl-font-weight-normal;
 
   .gl-snippet-icon {
     display: inline-block;
@@ -34,7 +34,7 @@
 
   .file-content.code {
     border: $border-style;
-    border-radius: 0 0 4px 4px;
+    border-radius: 0 0 $border-radius-default $border-radius-default;
     display: flex;
     box-shadow: none;
     margin: 0;
@@ -45,6 +45,7 @@
       overflow-x: auto;
 
       pre {
+        height: 100%;
         padding: 10px;
         border: 0;
         border-radius: 0;
@@ -110,17 +111,13 @@
         }
       }
 
-      .gitlab-logo {
-        display: inline-block;
-        padding-left: 5px;
-        text-decoration: none;
-        color: $gl-text-color-secondary;
+      .gitlab-logo-wrapper {
+        padding-left: $gl-padding-8;
+        position: relative;
+        top: 2px;
 
-        .logo-text {
-          background: image_url('ext_snippet_icons/logo.png') no-repeat left center;
-          background-size: 18px;
-          font-weight: $gl-font-weight-normal;
-          padding-left: 24px;
+        .gitlab-logo {
+          height: 18px;
         }
       }
     }
@@ -128,7 +125,7 @@
     img,
     .gl-snippet-icon {
       display: inline-block;
-      vertical-align: middle;
+      vertical-align: text-bottom;
     }
   }
 
@@ -136,7 +133,7 @@
     a.btn {
       background-color: $white-light;
       text-decoration: none;
-      padding: 7px 9px;
+      padding: 8px 9px;
       border: $border-style;
       border-right: 0;
 
@@ -147,11 +144,11 @@
       }
 
       &:first-child {
-        border-radius: 3px 0 0 3px;
+        border-radius: $border-radius-default 0 0 $border-radius-default;
       }
 
       &:last-child {
-        border-radius: 0 3px 3px 0;
+        border-radius: 0 $border-radius-default $border-radius-default 0;
         border-right: $border-style;
       }
     }

app/views/shared/snippets/_embed.html.haml

@@ -10,10 +10,8 @@
 
       %small
         = number_to_human_size(blob.raw_size)
-      %a.gitlab-logo{ href: url_for(only_path: false, overwrite_params: nil), title: 'view on gitlab' }
-        on  
-        %span.logo-text
-          GitLab
+      %a.gitlab-logo-wrapper{ href: url_for(only_path: false, overwrite_params: nil), title: 'view on gitlab' }
+        %img.gitlab-logo{ src: image_url('ext_snippet_icons/logo.svg'), alt: "GitLab logo" }
 
     .file-actions.d-none.d-sm-block
       .btn-group{ role: "group" }<

changelogs/unreleased/embed-snippet-ui-polish.yml

+---
+title: Fix embedded snippets UI polish issues
+merge_request: !22637
+author:
+type: changed