테마 색상변경

projects/ucap-webmessenger-app/src/app/app.theme.scss

@@ -104,9 +104,11 @@ body.theme-pink-dark {
 
 // Define the primary, accent and warn palettes
 $pink-light-theme-primary-palette: mat-palette($mat-grey,800);
-$pink-light-theme-accent-palette: mat-palette($lg-red, 400);
+//$pink-light-theme-accent-palette: mat-palette($lg-red, 400);
+$pink-light-theme-accent-palette: mat-palette($daesang);
 $pink-light-theme-warn-palette: mat-palette($mat-red);
 
+
 // Create the Material theme object
 $pink-light-theme: mat-light-theme(
   $pink-light-theme-primary-palette,

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

@@ -86,7 +86,6 @@
         stroke-linecap: square;
         stroke-linejoin: miter;
         fill: none;
-        color: #2329d6;
       }
     }
   }
@@ -94,7 +93,6 @@
     opacity: 1;
     .mat-tab-label-content {
       .icon-item {
-        background: #ef4c73;
         transform: scale(1);
         /*svg {
           stroke: #ef4c73;

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

@@ -60,6 +60,8 @@ $lg-red: (
   A200: #ff4081,
   A400: #ff3399,
   A700: #c51162,
+  G100: #ef4c73,
+  G900: #352a37,
   contrast: (
     50: $dark-primary-text,
     100: $dark-primary-text,
@@ -74,7 +76,9 @@ $lg-red: (
     A100: $dark-primary-text,
     A200: $light-primary-text,
     A400: $light-primary-text,
-    A700: $light-primary-text
+    A700: $light-primary-text,
+    G100:$dark-primary-text,
+    G900:$light-primary-text
   )
 );
 
@@ -87,12 +91,14 @@ $daesang: (
   500: #00bcd4,
   /*600: #00acc1,*/ 600: #00b6d5,
   700: #0097a7,
-  800: #00838f,
-  900: #006064,
+  800: #2c8493,
+  900: #126a79,
   A100: #84ffff,
   A200: #18ffff,
   A400: #00e5ff,
   A700: #00b8d4,
+  G100: #6dd5ed,
+  /*G900: #192a2c,*/G900: #2193b0,
   contrast: (
     50: $dark-primary-text,
     100: $dark-primary-text,
@@ -108,6 +114,8 @@ $daesang: (
     A200: $dark-primary-text,
     A400: $dark-primary-text,
     A700: $dark-primary-text,
+    G100: $dark-primary-text,
+    G900: $light-primary-text
   )
 );
 
@@ -122,6 +130,9 @@ $daesang: (
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
 
+  $gradient-darkest:mat-color($accent, G900);
+  $gradient-light:mat-color($accent, G100);
+
   .bg-primary-dark{
     background: mat-color($primary, 900);
     color: mat-color($primary, default-contrast);
@@ -179,6 +190,15 @@ $daesang: (
   /*.mat-form-field-appearance-legacy .mat-hint{
      color: mat-color($accent, 800);
    }*/
+  .global-menu {
+    .mat-tab-label[aria-selected='true']{
+     .mat-tab-label-content{
+      .icon-item{
+        background: mat-color($accent, 300);
+         }
+       }
+     }
+  }
 
   .mat-form-field-appearance-legacy {
     .mat-form-field-label {
@@ -205,4 +225,15 @@ $daesang: (
     background: mat-color($accent, 600);
     color: mat-color($primary, default-contrast);
   }
+  .current-head {
+    display: flex;
+    justify-content: center;
+    padding: 0 10px;
+    height: 70px;
+    background-color: #eeeeee;
+    background: $gradient-light;
+    background: -webkit-linear-gradient(to right, $gradient-darkest, $gradient-light);
+    background: linear-gradient(to right, $gradient-darkest, $gradient-light);
+    color:#ffffff;
+  }
 }

projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html

@@ -51,7 +51,7 @@
     </mat-form-field>
 
     <button
-      class="send-message-button bg-accent-color"
+      class="send-message-button bg-accent-darkest"
       mat-icon-button
       type="submit"
       aria-label="Send message"

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss

@@ -52,7 +52,9 @@
 }
 
 .path {
+  display: flex;
   padding: 6px 4px;
+  align-items: center;
   .btn-toggle {
     padding: 0;
     min-width: 0;
@@ -64,6 +66,7 @@
   }
   .group-menu {
     margin-left: auto;
+    opacity: 0.6;
   }
   + ul {
     li:last-chlid {

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html

@@ -17,7 +17,7 @@
         <div class="room-name">
           <div class="name">{{ getRoomName(roomInfo) }}</div>
           <div
-            class="num text-accent-color"
+            class="num bg-accent-light"
             *ngIf="roomInfo.roomType === RoomType.Multi"
           >
             {{ roomInfo.joinUserCount }}명