쪽지- 디자인 수정

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html

@@ -128,9 +128,9 @@
   </div>
 
   <div class="message-section" [style.display]="isSearch ? 'block' : 'none'">
-    <div class="search-sub">
+    <div class="search-sub input-lineless">
       <form [formGroup]="fgSearchType" class="w-100-p">
-        <mat-form-field style="width: 100px;">
+        <mat-form-field>
           <mat-select
             value="A"
             formControlName="searchMessageType"

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss

@@ -30,10 +30,36 @@
       position: relative;
       height: 100%;
     }
-
+    .search-sub {
+      padding: 0 20px;
+      font-size: 0.9em;
+      height: 50px;
+      align-items: center;
+      display: flex;
+      border-bottom: 1px solid #dddddd;
+      form {
+        .mat-form-field {
+          width: 30%;
+          flex: 0 0 auto;
+          margin-right: 10px;
+          font-size: 1em;
+        }
+        .mat-radio-group {
+          .mat-radio-button {
+            margin: 0 4px;
+            .mat-radio-label {
+              .mat-radio-label-content {
+                padding-left: 4px;
+              }
+            }
+          }
+        }
+      }
+    }
     .no-search-result {
-      padding-top: 10px;
+      justify-content: center;
-      padding-left: 10px;
+      align-items: center;
+      display: flex;
     }
   }
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.scss

@@ -22,7 +22,6 @@
       color: #444444;
     }
   }
-
   .mat-card-content {
     flex: 0 0 auto;
     display: flex;
@@ -46,16 +45,10 @@
               align-items: self-start;
               justify-content: flex-start;
             }
-            .mat-ink-bar {
-              display: none;
-            }
           }
-        }
+          .mat-ink-bar {
-        .mat-tab-body-wrapper {
+            display: none;
-          border-left: 1px solid #dddddd;
+          }
-          position: relative;
-          height: 100%;
-          padding: 0 0 10px 10px;
         }
       }
     }
@@ -77,9 +70,11 @@
     position: relative;
     height: 100%;
     width: 100%;
+
     .mat-tab-header {
       width: 160px;
       flex-flow: column;
+      border-right: 1px solid #dddddd;
       .mat-tab-label-container {
         .mat-tab-list {
           .mat-tab-labels {
@@ -113,8 +108,15 @@
     position: relative;
     .mat-list-item {
       font-size: 15px;
+      .mat-tab-header {
+        border-right: none;
+      }
     }
     .mat-divider {
+      //margin-top: 10px;
+    }
+    .mat-subheader {
+      font-weight: 600;
     }
   }
 }

projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss

@@ -439,4 +439,7 @@ $daesang-grey: (
       }
     }
   }
+  .mat-calendar-body-selected{
+     background-color: mat-color($accent);
+  }
 }

projects/ucap-webmessenger-ui-message/src/lib/dialogs/schedule-send.dialog.component.html

@@ -14,9 +14,11 @@
               (selected)="onSelectedDate($event)"
             ></ucap-pick-date>
           </div>
-          <div fxFlex="30px" style="margin-top: 30px;">
+          <div class="pick-time">
-            <span flFlex="1 1 auto"></span>
+            <span class="icon-img"
-            <span style="width: 100px;">
+              ><i class="mid mdi-clock-check-outline"></i
+            ></span>
+            <span class="pick-time-select">
               <ucap-pick-time
                 [hour]="selectedDate.hour()"
                 [hourStep]="hourStep"
@@ -33,8 +35,8 @@
       </div>
       <div fxFlex="40%" style="margin-left: 30px;">
         <div fxLayout="column">
-          <div fxFlex="40px" style="margin-top: 30px;">
+          <div fxFlex="40px" style="margin-top: 30px;" class="Reservation-dete">
-            <span flFlexFill style="font-size: 22px;">
+            <span flFlexFill style="font-size: 20px;" class="text-accent-dark">
               {{ selectedDate.format('MMM DD YYYY, HH:mm') }}
             </span>
           </div>
@@ -102,12 +104,11 @@
   </mat-card-content>
   <mat-card-actions>
     <div class="actions-container">
-      <div class="actions-message">
+      <div class="actions-message text-warn-color">
         <span *ngIf="dateIsToEarly">
           {{ 'message.errors.minTimeReservation' | translate }}
         </span>
       </div>
-      <div class="actions-spacer"></div>
       <div class="actions">
         <button
           mat-stroked-button
@@ -117,7 +118,7 @@
           {{ 'common.messages.cancel' | translate }}
         </button>
         <button
-          mat-stroked-button
+          mat-flat-button
           [disabled]="dateIsToEarly"
           (click)="onClickSend()"
           class="mat-primary"

projects/ucap-webmessenger-ui-message/src/lib/dialogs/schedule-send.dialog.component.scss

@@ -4,9 +4,10 @@
 
 .actions-container {
   display: flex;
-  position: fixed;
+  flex-flow: column;
 
   .actions-message {
+    font-size: 0.9em;
   }
 
   .actions-spacer {
@@ -14,5 +15,22 @@
   }
 
   .actions {
+    margin-left: auto;
+    button {
+      margin-left: 8px;
+    }
+  }
+}
+
+.pick-time {
+  display: flex;
+  flex-flow: row;
+  margin-top: 20px;
+  width: 100%;
+  &-select {
+    width: 100%;
+  }
+  .icon-img {
+    margin-right: 20px;
   }
 }

projects/ucap-webmessenger-ui-settings/src/lib/components/notification.component.html

@@ -79,10 +79,10 @@
             'settings.notification.receiveForMobileTypeAlways' | translate
           }}</mat-checkbox
         >
-        <br />({{
+        <span class="text-guide">({{
           'settings.notification.descriptionReceiveForMobileTypeAlways'
             | translate
-        }})
+        }})</span>
       </span>
     </mat-list-item>
 
@@ -102,10 +102,10 @@
             'settings.notification.receiveForMessageTypePopup' | translate
           }}</mat-checkbox
         >
-        <br />({{
+        <span class="text-guide">({{
           'settings.notification.descriptionReceiveForMobileTypePopup'
             | translate
-        }})
+        }})</span>
       </span>
     </mat-list-item>
   </mat-list>

projects/ucap-webmessenger-ui-settings/src/lib/components/notification.component.scss

@@ -9,3 +9,13 @@
 .item-input[fullWidth] {
   width: 100%;
 }
+
+.text-guide {
+  display: block;
+  font-size: 0.9em;
+  color: rgb(0, 0, 0, 0.7);
+}
+
+.mat-radio-container {
+  margin-right: 20px;
+}

projects/ucap-webmessenger-ui/src/lib/components/pick-time.component.scss

@@ -7,9 +7,12 @@
   border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 
   .hour-input {
-    width: 40px;
+    width: 60px;
+    + span {
+      padding: 0 10px;
+    }
   }
   .minute-input {
-    width: 40px;
+    width: 60px;
   }
 }

projects/ucap-webmessenger-ui/src/lib/components/step-input.component.scss

@@ -26,7 +26,7 @@
     font-size: 1rem;
     color: inherit;
     outline: none;
-    text-align: end;
+    text-align: start;
 
     &:disabled {
       background-color: transparent;