add SVG to header

app/src/ui/release-notes/release-notes-dialog.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import { Octicon, OcticonSymbol } from '../octicons'
+import { encodePathAsUrl } from '../../lib/path'
 
 import { ReleaseNote, ReleaseSummary } from '../../models/release-notes'
 
@@ -10,6 +11,15 @@ import { Button } from '../lib/button'
 
 import { Dialog, DialogContent, DialogFooter } from '../dialog'
 
+const ReleaseNoteHeaderLeftUri = encodePathAsUrl(
+  __dirname,
+  'static/release-note-header-left.svg'
+)
+const ReleaseNoteHeaderRightUri = encodePathAsUrl(
+  __dirname,
+  'static/release-note-header-right.svg'
+)
+
 interface IReleaseNotesProps {
   readonly onDismissed: () => void
   readonly newRelease: ReleaseSummary
@@ -96,10 +106,18 @@ export class ReleaseNotes extends React.Component<IReleaseNotesProps, {}> {
       <Dialog id="release-notes" onDismissed={this.props.onDismissed}>
         <DialogContent>
           <header className="dialog-header">
+            <img
+              className="welcome-graphic-bottom"
+              src={ReleaseNoteHeaderLeftUri}
+            />
             <div className="title">
               <p className="version">Version {release.latestVersion}</p>
               <p className="date">{release.datePublished}</p>
             </div>
+            <img
+              className="welcome-graphic-bottom"
+              src={ReleaseNoteHeaderRightUri}
+            />
             {this.renderCloseButton()}
           </header>
           {contents}

app/static/common/release-note-header-right.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="144px" height="76px" viewBox="0 0 144 76" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch -->
+    <title>Artboard</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g fill-rule="nonzero">
+            <path d="M99.1920537,27.979008 C99.4209077,28.7232986 98.7246422,29.4195641 97.9800937,29.192062 L96.1182146,28.6188676 L94.2559474,29.1924834 C93.5118754,29.4192089 92.8154395,28.7235252 93.0443631,27.979008 L93.6175353,26.1181955 L93.0444051,24.2565173 C92.81499,23.5124685 93.5128079,22.8154042 94.257395,23.0443493 L96.1182075,23.6175215 L97.9798857,23.0443913 C98.7237085,22.8150459 99.4213571,23.5126945 99.1920758,24.2563093 L98.6188777,26.1181762 L99.1920537,27.979008 Z M96.1285631,23.6207112 C96.1219287,23.6186881 96.1144902,23.6186853 96.1092274,23.620286 L96.1182075,23.6175215 L96.1285631,23.6207112 Z M93.6207174,26.1078646 C93.6186499,26.1146447 93.6186224,26.121579 93.6202348,26.1269644 L93.6175353,26.1181955 L93.6207174,26.1078646 Z M97.66078,26.4047279 C97.6026053,26.2177378 97.6026053,26.0165653 97.660341,25.8330799 L98.2194471,24.0169559 L96.4047417,24.575623 C96.2180062,24.6337185 96.0184106,24.6337185 95.8330218,24.5760399 L94.0168678,24.0166255 L94.5751615,25.830142 C94.6338115,26.0165653 94.6338115,26.2177378 94.5760537,26.4033812 L94.0165376,28.2198654 L95.8316751,27.6607662 C96.0184106,27.6026707 96.2180062,27.6026707 96.4033231,27.6603272 L98.2197778,28.2195362 L97.66078,26.4047279 Z" fill="#C9DEF2"></path>
+            <path d="M57.425,2.71844661 L59.1430545,1 L59.8499999,1.70710678 L58.1319454,3.42555339 L59.8499999,5.144 L59.1430545,5.85110678 L57.425,4.13266017 L55.7069454,5.85110678 L55,5.144 L56.7180545,3.42555339 L55,1.70710678 L55.7069454,1 L57.425,2.71844661 Z" fill="#C9DEF2"></path>
+            <path d="M111.535,13.767 C111.535,13.3436424 111.191358,13 110.767,13 C110.343549,13 110,13.343736 110,13.767 C110,14.1911704 110.343455,14.535 110.767,14.535 C111.191451,14.535 111.535,14.1912641 111.535,13.767 Z M112.535,13.767 C112.535,14.7434269 111.743858,15.535 110.767,15.535 C109.790926,15.535 109,14.7432113 109,13.767 C109,12.7915732 109.791142,12 110.767,12 C111.743642,12 112.535,12.7913576 112.535,13.767 Z" fill="#C9DEF2"></path>
+            <path d="M88.5,67.5 L90,67.5 L90,68.5 L88.5,68.5 L88.5,70 L87.5,70 L87.5,68.5 L86,68.5 L86,67.5 L87.5,67.5 L87.5,66 L88.5,66 L88.5,67.5 Z" fill="#C9DEF2"></path>
+            <path d="M142.016,72.008 C142.016,71.4517457 141.564461,71 141.008,71 C140.452142,71 140,71.4521424 140,72.008 C140,72.5644611 140.451746,73.016 141.008,73.016 C141.564858,73.016 142.016,72.5648576 142.016,72.008 Z M143.016,72.008 C143.016,73.1171424 142.117142,74.016 141.008,74.016 C139.899563,74.016 139,73.1168484 139,72.008 C139,70.8998576 139.899858,70 141.008,70 C142.116848,70 143.016,70.8995635 143.016,72.008 Z" fill="#C9DEF2"></path>
+            <path d="M139.005775,42.9942247 L138,41.1551784 L136.994225,42.9942247 L135.155178,44 L136.994225,45.0057753 L138,46.8448216 L139.005775,45.0057753 L140.844822,44 L139.005775,42.9942247 Z M143,44 L139.76773,45.76773 L138,49 L136.23227,45.76773 L133,44 L136.23227,42.23227 L138,39 L139.76773,42.23227 L143,44 Z M139.840401,42.3651471 L139.634853,42.1595994 L139.76773,42.23227 L139.840401,42.3651471 Z" fill="#C9DEF2"></path>
+            <path d="M121.720444,54.279556 L120,51.133748 L118.279556,54.279556 L115.133748,56 L118.279556,57.7204439 L120,60.866252 L121.720444,57.7204439 L124.866252,56 L121.720444,54.279556 Z M127,56 L122.474822,58.474822 L120,63 L117.525178,58.474822 L113,56 L117.525178,53.5251779 L120,49 L122.474822,53.5251779 L127,56 Z" fill="#C9DEF2"></path>
+            <path d="M54.9691035,34.7254742 L54.8077827,34.7497316 C54.2456747,34.7497316 53.8735538,34.2535704 54.1248747,33.7582603 L56.1367154,28.3271151 L50.7837495,30.3069791 C50.2969392,30.6317304 49.7118643,30.127811 49.7118643,29.6538132 L49.7361217,29.4924924 L49.8405926,29.152962 C47.8413546,29.9129289 45.548494,31.1836039 43.9956645,32.7364334 C41.5883951,35.1437028 41.4347631,38.326082 43.7430329,40.6343592 C46.0517046,42.9430308 49.3162163,42.7865132 51.6409513,40.3817283 C53.1615432,38.8611307 54.4115747,36.6309139 55.1764325,34.6616807 L54.9691035,34.7254742 Z M50.4436278,28.9291509 C50.4705976,28.928755 50.495846,28.9230435 50.5180916,28.9110555 C50.5057008,28.9151858 50.4932927,28.9193385 50.4808677,28.9235135 L50.4436278,28.9291509 Z M56.4224079,27.5558626 C56.4119997,27.5766789 56.4038929,27.5987544 56.3980374,27.6216529 L56.4224079,27.5558626 Z M56.4984208,33.6400731 C56.5974897,33.8382109 56.5969824,34.0808135 56.4821979,34.2804753 C55.7137168,36.5523565 54.2728382,39.301367 52.4232365,41.1508654 C49.6917865,43.9765033 45.7238851,44.1667451 42.9672654,41.4101254 C40.2129321,38.6557832 40.4000121,34.7805521 43.2198976,31.9606666 C45.0962125,30.0843517 47.8851661,28.6322524 50.0993058,27.9000172 C50.6496453,27.6248475 51.1458064,27.9969683 51.1458064,28.5590763 L51.121549,28.7203971 L51.0201976,29.0497894 L56.4701246,27.034063 L56.6604143,27 C57.200592,27 57.7194078,27.4150527 57.427533,27.9914713 L55.4083398,33.4424651 L55.6604354,33.3648972 C55.9713065,33.1901292 56.3452757,33.3337827 56.4984208,33.6400731 Z M47.3564312,41.1883573 C45.0071345,41.1883573 43.1026533,39.2838761 43.1026533,36.9345795 C43.1026533,34.5852828 45.0071345,32.6808016 47.3564312,32.6808016 C49.7057278,32.6808016 51.6102091,34.5852828 51.6102091,36.9345795 C51.6102091,39.2838761 49.7057278,41.1883573 47.3564312,41.1883573 Z M47.3564312,40.0912573 C49.0998162,40.0912573 50.513109,38.6779645 50.513109,36.9345795 C50.513109,35.1911944 49.0998162,33.7779016 47.3564312,33.7779016 C45.6130461,33.7779016 44.1997533,35.1911944 44.1997533,36.9345795 C44.1997533,38.6779645 45.6130461,40.0912573 47.3564312,40.0912573 Z" fill="#CFE5FF"></path>
+            <path d="M6.40799454,19.7606609 C6.86785286,19.4156863 7.49864298,18.8494598 8.13008712,18.2178675 C8.76153125,17.5862752 9.32762496,16.9553371 9.67251869,16.4953709 C9.83679914,16.276279 9.83679914,15.6852229 9.67251869,15.466131 C9.32762496,15.0061648 8.76153125,14.3752266 8.13008712,13.7436344 C7.49864298,13.1120421 6.86785286,12.5458156 6.40799454,12.200841 C6.18895395,12.036522 5.59803654,12.036522 5.37899595,12.200841 C4.91913763,12.5458156 4.2883475,13.1120421 3.65690337,13.7436344 C3.02545923,14.3752266 2.45936553,15.0061648 2.11447179,15.466131 C1.95019135,15.6852229 1.95019135,16.276279 2.11447179,16.4953709 C2.45936553,16.9553371 3.02545923,17.5862752 3.65690337,18.2178675 C4.2883475,18.8494598 4.91913763,19.4156863 5.37899595,19.7606609 C5.59803654,19.9249799 6.18895395,19.9249799 6.40799454,19.7606609 Z M8.51392882,19.3775916 C7.98411623,19.8862015 7.47355503,20.3326781 7.06610016,20.638341 C6.76821656,20.8618061 6.52370095,21.0132084 6.31740747,21.0892291 C6.17536459,21.1415729 6.02860201,21.1600653 5.89349524,21.1433211 C5.75838848,21.1600653 5.61162589,21.1415729 5.46958301,21.0892291 C5.26328954,21.0132084 5.01877392,20.8618061 4.72089032,20.638341 C4.21358423,20.2577721 3.54644515,19.6589171 2.88131845,18.9936344 C2.21619176,18.3283516 1.6174772,17.6610561 1.23699763,17.153631 C1.01358493,16.8556775 0.862218119,16.6111045 0.786215259,16.4047626 C0.733883672,16.2626864 0.715395676,16.1158894 0.732135954,15.9807509 C0.715395676,15.8456125 0.733883672,15.6988155 0.786215259,15.5567393 C0.862218119,15.3503974 1.01358493,15.1058244 1.23699763,14.8078709 C1.54332479,14.3993389 1.99111164,13.887179 2.50112636,13.3558733 L0,10.7615419 L0.78955043,10 L3.27699268,12.5801374 C3.8053993,12.0730926 4.31444326,11.6280677 4.72089032,11.3231609 C5.01877392,11.0996958 5.26328954,10.9482935 5.46958301,10.8722728 C5.61162589,10.819929 5.75838848,10.8014366 5.89349524,10.8181808 C6.02860201,10.8014366 6.17536459,10.819929 6.31740747,10.8722728 C6.52370095,10.9482935 6.76821656,11.0996958 7.06610016,11.3231609 C7.57340626,11.7037298 8.24054534,12.3025848 8.90567203,12.9678675 C9.57079873,13.6331502 10.1695133,14.3004458 10.5499929,14.8078709 C10.7734056,15.1058244 10.9247724,15.3503974 11.0007752,15.5567393 C11.0531068,15.6988155 11.0715948,15.8456125 11.0548545,15.9807509 C11.0715948,16.1158894 11.0531068,16.2626864 11.0007752,16.4047626 C10.9247724,16.6111045 10.7734056,16.8556775 10.5499929,17.153631 C10.2443967,17.5611881 9.79801518,18.0718791 9.28951426,18.6018253 L11.8800001,21.1928634 L11.1044235,21.9686385 L8.51392882,19.3775916 Z" fill="#CFE5FF"></path>
+        </g>
+    </g>
+</svg>