empty화면 수정

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.html

@@ -1,26 +1,28 @@
 <div fxFlex fxLayout="column" fxLayoutAlign="center center">
-  <div
+  <div class="empty-logo" fxLayoutAlign="center center" fxLayout="column">
-    class="big-circle app-logo"
+    <div
-    fxLayout="column"
+      class="big-circle app-logo border-accent-color"
-    fxLayoutAlign="center center"
+      fxLayoutAlign="center center"
-    [@animate]="{ value: '*', params: { delay: '50ms', scale: '0.2' } }"
+      [@animate]="{ value: '*', params: { delay: '50ms', scale: '0.2' } }"
-  >
+    >
-    <mat-icon class="s-64 s-md-128 mat-accent">chat</mat-icon>
+      <!--<mat-icon class="s-64 s-md-128 mat-accent">chat</mat-icon>-->
+      <img src="assets/images/logo/bg_logo_w120.png" />
+    </div>
+
+    <span
+      class="app-title text-accent-darkest "
+      [@animate]="{ value: '*', params: { delay: '100ms', y: '25px' } }"
+    >
+      {{ getTitle() }}
+    </span>
+
+    <span
+      fxHide
+      fxShow.gt-md
+      class="app-message secondary-text"
+      [@animate]="{ value: '*', params: { delay: '200ms', y: '50px' } }"
+    >
+      Select a contact to start a chat!
+    </span>
   </div>
-
-  <span
-    class="app-title mt-48 mb-8"
-    [@animate]="{ value: '*', params: { delay: '100ms', y: '25px' } }"
-  >
-    {{ getTitle() }}
-  </span>
-
-  <span
-    fxHide
-    fxShow.gt-md
-    class="app-message"
-    [@animate]="{ value: '*', params: { delay: '200ms', y: '50px' } }"
-  >
-    Select a contact to start a chat!
-  </span>
 </div>

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.scss

@@ -3,21 +3,29 @@
   height: 100%;
   flex: 1;
 
-  .big-circle {
+  .empty-logo {
-    border-radius: 50%;
+    flex-flow: column;
-    width: 240px;
+    transform: translateY(-100px);
-    height: 240px;
+    .big-circle {
-    line-height: 240px;
+      border-radius: 50%;
-    text-align: center;
+      width: 200px;
-    border: 1px solid;
+      height: 200px;
-  }
+      display: flex;
+      justify-content: center;
+      justify-items: center;
+    }
 
-  .app-title {
+    .app-title {
-    font-weight: 600;
+      margin-top: 1.4em;
-    font-size: 32px;
+      font-weight: 600;
-  }
+      font-size: 2.6em;
+    }
 
-  .secondary-text {
+    .secondary-text {
-    font-size: 16px;
+      margin-top: 1.4em;
+      font-size: 1.2em;
+      font-weight: 500;
+      color: #666666;
+    }
   }
 }

projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.scss

@@ -85,7 +85,6 @@
     flex: 0 0 0%;
     height: 40px;
     margin-top: 10px;
-    //border: 1px solid #ffffff;
     border-radius: 50px;
     .mat-stroked-button {
       border: none;
@@ -131,7 +130,7 @@
 }
 
 .stroke-bar {
-  width: 1px;
+  width: 2px;
   height: 20px;
   background-color: rgba(255, 255, 255, 0.3);
   margin: 0 10px;