From 9ba7bd4966ae9f6d7796ec4a8b072aab22f3a7f6 Mon Sep 17 00:00:00 2001
From: khk <khk@gmail.com>
Date: Thu, 23 Jan 2020 12:11:45 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B2=84=EC=A0=BC=EC=A0=95=EB=B3=B4=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=88=98=EC=A0=95=EC=82=AC=ED=95=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../right-drawer/album-box.component.scss     | 19 ++++++----
 .../right-drawer/file-box.component.scss      |  1 +
 .../room-user-list.component.html             |  2 +-
 .../native/components/top-bar.component.html  | 37 ++++++++----------
 .../native/components/top-bar.component.scss  | 38 ++++++++++++++++++-
 .../src/assets/scss/partials/splash.css       | 16 ++++++--
 .../src/lib/components/login.component.scss   | 12 ------
 .../lib/components/list-item.component.scss   |  8 ++--
 .../src/assets/scss/partials/_list-item.scss  |  2 +-
 .../sticker-selector.component.scss           | 29 +++++++++-----
 10 files changed, 102 insertions(+), 62 deletions(-)

diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
index 9726bb1a..f6094483 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss
@@ -30,6 +30,7 @@
   padding: 10px;
   border: 1px solid #cccccc;
   border-radius: 4px;
+  font-size: 0.9em;
   .select-file {
     color: #212121;
     border-bottom: 1px dotted #dddddd;
@@ -74,8 +75,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 100px;
-        height: 100px;
+        height: 90px;
         background-color: #efefef;
         border: 1px dotted #cccccc;
         box-sizing: border-box;
@@ -87,12 +87,10 @@
       dd {
         .btn-download {
           margin-left: auto;
+          height:40px;
         }
       }
     }
-    &:nth-child(3n + 0) {
-      margin-right: 0;
-    }
   }
 }
 
@@ -102,14 +100,18 @@
       display: flex;
       flex-flow: wrap;
       height: auto;
-      justify-content: space-between;
+      justify-content: stretch;
+      align-content: space-between;
       width: 100%;
       .img-item {
         cursor: pointer;
         margin-bottom: 10px;
         position: relative;
-        height: 130px;
-        width: 33%;
+        width: 32%;
+        margin-right: 2%;
+        &:nth-child(3n + 0) {
+          margin-right: 0;
+        }
       }
     }
   }
@@ -128,6 +130,7 @@
   button {
     margin: 5px;
     font-size: 0.9em;
+    padding: 0 12px;
   }
 }
 
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss
index 85043675..766b9f07 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss
@@ -173,6 +173,7 @@ $listH-row2: 60px;
     button {
       margin: 5px;
       font-size: 0.9em;
+      padding: 0 12px;
     }
   }
 }
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.html
index ccc83de1..1af97737 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/room-user-list.component.html
@@ -1,6 +1,6 @@
 <div fxLayout="column" class="list">
   <div class="search-list">
-    <perfect-scrollbar class="album-scrollbar">
+    <perfect-scrollbar class="room-user-scrollbar">
       <ucap-profile-user-list-item
         *ngFor="let userInfo of userInfoList"
         [userInfo]="userInfo"
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
index 346c6658..9cc4cb61 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html
@@ -439,35 +439,28 @@
     class="version-info-container menu-item"
     (click)="$event.stopPropagation()"
   >
-    <div>
-      <span>
-        {{ 'information.installedVersion' | translate }}:{{ appVersion }}
+    <div class="version-info-now" >
+      <span class="version-info-item">
+        {{ 'information.installedVersion' | translate }}:<span class="info-content">{{ appVersion }}</span>
       </span>
     </div>
-    <div *ngIf="checkingUpdate">
-      <div *ngIf="checkingUpdateIsProcessing" style="display: flex;">
-        <mat-spinner
-          *ngIf="checkingUpdate && checkingUpdateIsProcessing"
-          diameter="20"
-          strokeWidth="1"
-        ></mat-spinner>
-        {{ 'information.checkForUpdatesInProgress' | translate }}
+    <div *ngIf="checkingUpdate" class="version-info-newest">
+      <div *ngIf="checkingUpdateIsProcessing">
+        <span class="version-info-item">
+          {{ 'information.checkForUpdatesInProgress' | translate }}
+          <span class="info-content"> <mat-spinner *ngIf="checkingUpdate && checkingUpdateIsProcessing" diameter="20" strokeWidth="1"></mat-spinner></span>
+        </span>
       </div>
 
       <div *ngIf="!checkingUpdateIsProcessing" style="display: flex;">
-        <span>
-          {{ 'information.latestVersion' | translate }}:{{
+        <span class="version-info-item">
+          {{ 'information.latestVersion' | translate }}:<span class="info-content">{{
             checkingUpdateAppVersion
-          }}
+          }}</span>
         </span>
-        <span>
-          <button
-            *ngIf="checkingUpdateIsExist"
-            mat-button
-            (click)="onClickApplyUpdate($event)"
-          >
-            {{ 'information.applyUpdates' | translate }}
-          </button>
+        <span class="version-info-button">
+           <button *ngIf="checkingUpdateIsExist" mat-flat-button
+            class="mat-primary" (click)="onClickApplyUpdate($event)">{{ 'information.applyUpdates' | translate }}</button>
         </span>
       </div>
     </div>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
index d199ff11..ada34dac 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss
@@ -298,5 +298,41 @@
 }
 
 .version-info-container {
-  width: 250px;
+  display: flex;
+  flex-flow: column;
+  padding: 10px 20px;
+  .version-info-now {
+    .version-info-item {
+      display: flex;
+      height: 2em;
+      justify-items: center;
+      .info-content {
+        margin-left: auto;
+        text-align: end;
+      }
+    }
+  }
+  .version-info-newest {
+    width: 240px;
+    div {
+      display: flex;
+      flex-flow: column;
+      .version-info-item {
+        display: flex;
+        height: 2em;
+        justify-items: center;
+        .info-content {
+          margin-left: auto;
+          text-align: end;
+        }
+      }
+      .version-info-button {
+        display: flex;
+        justify-content: center;
+        button {
+          width: 100%;
+        }
+      }
+    }
+  }
 }
diff --git a/projects/ucap-webmessenger-app/src/assets/scss/partials/splash.css b/projects/ucap-webmessenger-app/src/assets/scss/partials/splash.css
index 5788c47a..3cf87240 100644
--- a/projects/ucap-webmessenger-app/src/assets/scss/partials/splash.css
+++ b/projects/ucap-webmessenger-app/src/assets/scss/partials/splash.css
@@ -60,8 +60,8 @@
   font-size: 10px;
   margin: 50px auto;
   text-indent: -9999em;
-  width: 11em;
-  height: 11em;
+  width: 100px;
+  height: 100px;
   border-radius: 50%;
   background: #ffffff;
   background: -moz-linear-gradient(
@@ -113,7 +113,7 @@
 .credit {
   color: #ffffff;
   margin: 0 auto;
-  font-size: 1.3em;
+  font-size: 1.2em;
   font-weight: 500;
 }
 
@@ -137,3 +137,13 @@
     transform: rotate(360deg);
   }
 }
+
+@media screen and (max-width: 1024px), (max-height: 800px) {
+  .load-container .loader {
+    width: 10vw;
+    height: 10vw;
+  }
+  .credit {
+    font-size: 1em;
+  }
+}
diff --git a/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss
index c1f88f25..c5ffcc61 100644
--- a/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss
+++ b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss
@@ -17,18 +17,6 @@ $login-max-height: 800px;
   }
 }
 
-@include tab {
-  .login-form {
-    width: 34vw;
-    min-width: 34vw;
-    font-size: 0.9em;
-  }
-  .mat-title {
-    width: 14vh;
-    height: 14vh;
-    margin: 10px 0 10px 0;
-  }
-}
 .login-form {
   position: relative;
   transform: scale(1);
diff --git a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
index 0e45ab2c..a7282736 100644
--- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
+++ b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss
@@ -84,7 +84,7 @@ $thumbnail-msize: 40px;
 
     .room-info {
       flex-direction: column;
-      width: calc(100% - 80px);
+      width: calc(100% - 60px);
       .detail {
         display: inline-flex;
         color: $font-dark;
@@ -118,12 +118,12 @@ $thumbnail-msize: 40px;
     }
     .date {
       float: right;
-      width: 70px;
+      width: 60px;
       text-align: right;
-      margin-left: 10px;
       color: $font-mid;
-      align-items: flex-start;
+      align-items: flex-end;
       margin-top: -2px;
+      margin-left: auto;
     }
   }
 
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss
index 22365b4d..32762b42 100644
--- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss
@@ -55,7 +55,7 @@ $line-basic: 1px solid #dddddd;
       height: 40px;
       border-radius: 50%;
       overflow: hidden;
-      margin-right: 16px;
+      margin-right: 12px;
       position: relative;
       img {
         width: 40px;
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.scss
index 8f7adcd4..e55a76a3 100644
--- a/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.scss
+++ b/projects/ucap-webmessenger-ui/src/lib/components/sticker-selector.component.scss
@@ -1,19 +1,28 @@
-.sticker-selector {
+::ng-deep .sticker-selector {
   height: 220px;
   border-top: 1px solid #cccccc;
-
-  .sticker-item-box {
-    flex-wrap: wrap;
-    padding: 20px 20px 0;
+  .mat-tab-header {
+    .mat-tab-label {
+      padding: 0 10px;
+    }
+  }
+  .mat-tab-body-wrapper {
+    height: 180px;
     overflow: auto;
   }
 }
 
-.sticker-item {
-  width: 60px;
-  margin-bottom: 20px;
-  display: inline-flex;
-  cursor: pointer;
+.sticker-item-box {
+  flex-wrap: wrap;
+  padding: 20px 20px 0;
+  overflow: auto;
+
+  .sticker-item {
+    width: 60px;
+    margin-bottom: 20px;
+    display: inline-flex;
+    cursor: pointer;
+  }
 }
 
 .selected-sticker {