design

src/app/app.component.html

@@ -12,8 +12,18 @@
 
 <p-dialog [(visible)]="displayAbout" [modal]="true" [responsive]="true" [width]="350" [minWidth]="200" [minY]="70"
   [closable]="false">
-  <p-header>
-    About overFlow
+  <p-header class="ui-dialog-titlebar-svg">
+    <div>
+      <svg svg aria-hidden="true" class="app-icon" version="1.1" viewBox="0 0 16 16" width="16" height="16">
+        <polygon points="6.7,6.3 8,5.6 11.9,7.8 11.9,5.8 8,3.5 4.1,5.8 4.1,10.3 8,12.5 8,10.5 5.8,9.3 5.8,7.8 14,12.5
+          14.9,12 14.9,11 	" />
+        <polygon points="8,0.1 1.1,4.1 1.1,12 8,16 13.2,13 11.5,12 8,14 2.8,11 2.8,5.1 8,2.1 13.1,5.1 13.1,9.2 14.9,10.2
+          14.9,4.1 	" />
+      </svg>
+    </div>
+    <div>
+      About overFlow
+    </div>
   </p-header>
 
   <app-menu-about></app-menu-about>

src/app/app.component.scss

@@ -0,0 +1,9 @@
+.ui-dialog-titlebar-svg{
+  div {
+    display: inline-block;
+    margin-right: 5px;
+    svg {
+      margin-bottom: -2px;
+    }
+  }
+}

src/assets/image/logo/overflow_500.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#293071;}
+</style>
+<g>
+	<polygon class="st0" points="210.1,195.4 250,172.3 371.9,242.7 371.9,179.6 250,109.2 128.1,179.6 128.1,320.4 250,390.8 
+		250,327.7 182.7,288.8 182.7,242.7 439.2,390.8 466.5,375 466.5,343.5 	"/>
+	<polygon class="st0" points="250,0 33.5,125 33.5,375 250,500 415.4,404.5 360.5,373.1 250,436.9 88.1,343.5 88.1,156.5 250,63.1 
+		411.9,156.5 411.9,288 466.5,319.5 466.5,125 	"/>
+</g>
+</svg>

src/commons/component/menu/about.component.html

@@ -1,10 +1,20 @@
 <div>
-  <div>
-    <img src="https://www.loafle.com/images/commons/overFlow_CI_blue_90.png">
-    <h1>
-      Network Scanner
-    </h1>
+  <div class="ui-logo-section">
+    <div style="display:inline-block; width: 90px; height: 80px;">
+      <svg svg aria-hidden="true" version="1.1" width="80" height="80">
+        <g>
+          <image _ngcontent-c11="" x="0" y="0" width="80" height="80" xmlns:xlink="http://www.w3.org/1999/xlink"
+            xlink:href="../../assets/image/logo/overflow_500.svg"></image>
+        </g>
+      </svg>
+    </div>
+    <div style="display:inline-block;vertical-align:top;padding-top: 20px;">
+      <img src="../../assets/image/logo/overFlow_CI_blue_90.png">
+      <h1>
+        Network Scanner
+      </h1>
+    </div>
   </div>
-  <div>Version 1.0.0</div>
-  <div>Copyright 2018 Loafle Corp. All rights reserved.</div>
+  <p>Version 1.0.0<br />
+    2018 Loafle Corp. All rights reserved.</p>
 </div>

src/commons/component/menu/about.component.scss

@@ -0,0 +1,5 @@
+.ui-logo-section{
+  margin: 0px 0px 20px 0px;
+  padding: 15px 0px;
+  border-bottom: 1px solid var(--box-border-color);
+}