ESY-6296 Code examples

- updated design guide version
- use button icon
- updated css error color

_config.yml

@@ -42,7 +42,7 @@ opengraph:
   image: /image1.png
 design_guide:
   base_url: https://design.swedbankpay.com
-  version: 10.9.1
+  version: 10.10.1
 search:
   enabled: true
   url: /search

_includes/code-example.html

@@ -7,9 +7,7 @@
 
 <p class="code-view-header">
     {{ include.title}}
-<button class="code-view-copy" aria-label="Copy content to clipboard" value='{{include.json}}' onclick='javascript:navigator.clipboard.writeText(this.value)'>
-    copy json
-</button>
+    <button aria-describedby="tooltipCopy" class="code-view-copy tooltip" aria-label="Copy json to clipboard" value='{{include.json}}' onclick='javascript:navigator.clipboard.writeText(this.value)'><i class="at-clipboard small" aria-hidden="true"></i><div role="tooltip">Copy json to clipboard</div></button>
 </p>
 ````http
 {{include.header}}

_sass/code-view.scss

@@ -52,6 +52,10 @@
 
         .code-view-table {
             border-radius: 0px;
+
+            pre {
+                margin-bottom: 0;
+            }
         }
     }
 }

assets/css/pygments-autumn.css

@@ -1,7 +1,7 @@
 .highlight .hll { background-color: #ffffcc }
 .highlight  { background: #ffffff; }
 .highlight .c { color: #aaaaaa; font-style: italic } /* Comment */
-.highlight .err { color: #E7F8D2; } /* Error */
+.highlight .err { color: #FF0000; background-color: #FFAAAA } /* Error */
 .highlight .k { color: #0000aa } /* Keyword */
 .highlight .ch { color: #aaaaaa; font-style: italic } /* Comment.Hashbang */
 .highlight .cm { color: #aaaaaa; font-style: italic } /* Comment.Multiline */