From 2789d935c5efef94eb460c89eeeab661bac4761e Mon Sep 17 00:00:00 2001
From: sunny <sunny@loafle.com>
Date: Wed, 26 Sep 2018 18:36:42 +0900
Subject: [PATCH] design

---
 src/app/app.component.html                    |  14 ++++++++--
 src/app/app.component.scss                    |   9 +++++++
 src/assets/image/logo/overFlow_CI_blue_90.png | Bin 0 -> 2938 bytes
 src/assets/image/logo/overflow_500.svg        |  14 ++++++++++
 .../component/menu/about.component.html       |  24 +++++++++++++-----
 .../component/menu/about.component.scss       |   5 ++++
 6 files changed, 57 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/image/logo/overFlow_CI_blue_90.png
 create mode 100644 src/assets/image/logo/overflow_500.svg

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 5570300..fbad36d 100644
--- a/src/app/app.component.html
+++ b/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>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e69de29..4f9ee37 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -0,0 +1,9 @@
+.ui-dialog-titlebar-svg{
+  div {
+    display: inline-block;
+    margin-right: 5px;
+    svg {
+      margin-bottom: -2px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/assets/image/logo/overFlow_CI_blue_90.png b/src/assets/image/logo/overFlow_CI_blue_90.png
new file mode 100644
index 0000000000000000000000000000000000000000..aed223990ededc44b6214c69d514c1d9467cad86
GIT binary patch
literal 2938
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
Bq`LqB

literal 0
HcmV?d00001

diff --git a/src/assets/image/logo/overflow_500.svg b/src/assets/image/logo/overflow_500.svg
new file mode 100644
index 0000000..4af7bde
--- /dev/null
+++ b/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>
diff --git a/src/commons/component/menu/about.component.html b/src/commons/component/menu/about.component.html
index aead9dc..d8db205 100644
--- a/src/commons/component/menu/about.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/commons/component/menu/about.component.scss b/src/commons/component/menu/about.component.scss
index e69de29..e91b9b9 100644
--- a/src/commons/component/menu/about.component.scss
+++ b/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);
+}
\ No newline at end of file