design 변경

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

@@ -1,11 +1,4 @@
 <div class="container">
-  <!--<div>
-    LG ucap
-    <button mat-icon-button aria-label="New Chat" (click)="onClickNewChat()">
-      <mat-icon>chat</mat-icon>
-    </button>
-  </div>-->
-  <!-- <div class="logo">로고</div> -->
   <mat-tab-group
     mat-stretch-tabs
     animationDuration="0ms"
@@ -14,7 +7,14 @@
   >
     <mat-tab [aria-label]="MainMenu.Group">
       <ng-template mat-tab-label>
-        <mat-icon>group</mat-icon>
+        <!--<mat-icon>group</mat-icon>-->
+        <div class="icon-item">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+            stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+            <circle cx="12" cy="7" r="4"></circle>
+          </svg>
+        </div>
       </ng-template>
       <app-layout-chat-left-sidenav-group
         class="left-group-side"
@@ -23,20 +23,43 @@
     </mat-tab>
     <mat-tab [aria-label]="MainMenu.Chat">
       <ng-template mat-tab-label>
-        <mat-icon
+        <!--<mat-icon
           [matBadgeHidden]="(badgeChatUnReadCount$ | async) <= 0"
           [matBadge]="badgeChatUnReadCount$ | async"
           matBadgeDescription="확인하지 않은 메시지가 있습니다."
           matBadgeColor="accent"
           matBadgePosition="above after"
           >chat</mat-icon
-        >
+        >-->
+        <div class="icon-item"  [matBadgeHidden]="(badgeChatUnReadCount$ | async) <= 0"
+          [matBadge]="badgeChatUnReadCount$ | async"
+          matBadgeDescription="확인하지 않은 메시지가 있습니다."
+          matBadgeColor="accent"
+          matBadgePosition="above after">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000"
+            stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="bevel">
+            <path
+              d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z">
+            </path>
+          </svg>
+        </div>
       </ng-template>
       <app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
     </mat-tab>
     <mat-tab [aria-label]="MainMenu.Organization">
       <ng-template mat-tab-label>
-        <mat-icon>device_hub</mat-icon>
+        <!--<mat-icon>device_hub</mat-icon>-->
+        <div class="icon-item">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000"
+            stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="bevel">
+            <circle class="st0" cx="18.4" cy="18.5" r="3" />
+            <circle class="st0" cx="12" cy="5" r="3" />
+            <path class="st0" d="M12.4,10.5h4c1.1,0,2,0.9,2,2v3" />
+            <circle class="st0" cx="6.1" cy="18.5" r="3" />
+            <path class="st0" d="M6.1,15.5v-3c0-1.1,0.9-2,2-2h4" />
+            <line class="st0" x1="12" y1="8" x2="12" y2="9" />
+          </svg>
+        </div>
       </ng-template>
       <app-layout-chat-left-sidenav-organization
         [selectedUserList]="selectedUserList"
@@ -47,7 +70,20 @@
     </mat-tab>
     <mat-tab [aria-label]="MainMenu.Call">
       <ng-template mat-tab-label>
-        <mat-icon>phone</mat-icon>
+        <!--<mat-icon>phone</mat-icon>-->
+        <div class="icon-item">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-phone">
+            <path class="st0"
+              d="M2,5.8c0.1-0.6,0.3-1.1,0.7-1.6l1.7-1.7C4.7,2.2,5,2.1,5.3,2.1c0.3,0,0.6,0.1,0.8,0.4c0.3,0.3,0.6,0.6,0.9,0.9
+                  		c0.2,0.2,0.3,0.3,0.5,0.5l1.4,1.4c0.3,0.3,0.4,0.6,0.4,0.9S9.2,6.7,8.9,7C8.8,7.2,8.6,7.3,8.5,7.5C8.1,7.9,7.7,8.3,7.2,8.7
+                  		c0,0,0,0,0,0C6.8,9.1,6.9,9.5,7,9.7c0,0,0,0,0,0c0.4,0.9,0.9,1.7,1.6,2.6c1.4,1.7,2.9,3,4.5,4.1c0.2,0.1,0.4,0.2,0.6,0.3
+                  		c0.2,0.1,0.4,0.2,0.5,0.3c0,0,0,0,0.1,0c0.2,0.1,0.3,0.1,0.4,0.1c0.4,0,0.6-0.2,0.7-0.3l1.7-1.7c0.3-0.3,0.6-0.4,0.8-0.4
+                  		c0.4,0,0.6,0.2,0.8,0.4l2.8,2.8c0.6,0.6,0.6,1.2,0,1.7c-0.2,0.2-0.4,0.4-0.6,0.6c-0.3,0.3-0.7,0.6-1,1c-0.5,0.6-1.2,0.8-2,0.8
+                  		c-0.1,0-0.2,0-0.2,0c-1.5-0.1-2.9-0.7-4-1.2c-2.9-1.4-5.4-3.4-7.5-5.9C4.5,13,3.3,11.1,2.6,9C2.1,7.7,1.9,6.7,2,5.8z">
+            </path>
+          </svg>
+        </div>
       </ng-template>
       <app-layout-chat-left-sidenav-call></app-layout-chat-left-sidenav-call>
     </mat-tab>

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

@@ -8,12 +8,8 @@
   height: 100%;
   width: 100%;
 }
-.logo {
+::ng-deep .mat-tab-header {
-  position: absolute;
+  border-bottom: none !important;
-  top: 0;
-  left: 0;
-  height: 60px;
-  width: 70px;
 }
 .container {
   display: flex;
@@ -25,21 +21,22 @@
   width: 100%;
   flex-direction: row;
 }
-::ng-deep .organization-side{
+::ng-deep .organization-side {
   flex-direction: column;
-  height:100%;
+  height: 100%;
 }
 ::ng-deep .global-menu {
-  border-right: 1px solid #dddddd;
+  border-right: 2px solid #4f4f4f;
   .mat-tab-label-container {
-    border-right: 1px solid #dddddd;
+    background-color: #4f4f4f;
     .mat-tab-list {
       .mat-tab-labels {
-        padding-top: 0px;
         flex-flow: column;
         height: 280px;
+        padding-top:10px;
         .mat-tab-label {
           height: 80px;
+          padding:0 16px;
         }
       }
       .mat-ink-bar {
@@ -49,7 +46,48 @@
     }
   }
 }
-.left-group-side{
+.left-group-side {
- position: relative;
+  position: relative;
- height:100%;
+  height: 100%;
+}
+
+::ng-deep .mat-tab-label {
+  .mat-tab-label-content {
+    .icon-item {
+      background: var(--white);
+      border-radius: 4px;
+      display: inline-flex;
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      justify-content: center;
+      align-items: center;
+      transform: scale(0.9);
+      transition: transform .3s cubic-bezier(.4,0,0,1);
+
+      svg {
+        width: 24px;
+        height: 24px;
+        stroke: #ffffff;
+        stroke-width: 1.5;
+        stroke-linecap: square;
+        stroke-linejoin: miter;
+        fill: none;
+        color: #2329d6;
+      }
+    }
+  }
+  &[aria-selected='true'] {
+    opacity: 1;
+    .mat-tab-label-content {
+      .icon-item {
+        background: #ef4c73;
+        transform: scale(1.0);
+        /*svg {
+          stroke: #ef4c73;
+          fill: #ef4c73;
+        }*/
+      }
+    }
+  }
 }

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

@@ -2,11 +2,15 @@
   display: flex;
   justify-content: center;
   padding: 0 10px;
-  height: 60px;
+  height: 70px;
+  background: #352a37;
+  background: -webkit-linear-gradient(to right, #352a37, #f15f79);
+  background: linear-gradient(to right, #352a37, #ef4c73);
   h3 {
     display: inline-flex;
     padding-left: 10px;
     align-items: center;
+    color:#ffffff;
   }
   .btn-box {
     height: 100%;
@@ -23,6 +27,7 @@
   align-items: center;
   padding: 0;
   font-size: 14px;
+  background-color:#f9f9f9;
   border-bottom: 1px solid #dddddd;
   .searchbox {
     width: 100%;
@@ -70,7 +75,7 @@
 }
 
 .app-layout-chat-left-sidenav-chat-list {
-  height: calc(100% - 120px);
+  height: calc(100% - 130px);
 }
 
 .app-layout-chat-left-sidenav-chat-list-viewport {

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

@@ -2,9 +2,6 @@
   <div class="current-head">
     <h3>그룹</h3>
     <div class="btn-box">
-      <button mat-icon-button>
-        <mat-icon>person_add</mat-icon>
-      </button>
       <button
         mat-icon-button
         #groupMenuTrigger="matMenuTrigger"

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

@@ -3,7 +3,12 @@
   display: flex;
   justify-content: center;
   padding: 0 10px;
-  height: 60px;
+  height: 70px;
+  background-color: #eeeeee;
+  background: #f15f79;
+  background: -webkit-linear-gradient(to right, #352a37, #f15f79);
+  background: linear-gradient(to right, #352a37, #ef4c73);
+  color:#ffffff;
   h3 {
     display: inline-flex;
     padding-left: 10px;
@@ -14,12 +19,13 @@
     margin-left: auto;
     display: inline-flex;
     align-items: center;
-    .mat-icon-button {
+    svg{
+      stroke:#333333;
     }
   }
 }
 .search-result {
-  height: calc(100% - 120px);
+  height: calc(100% - 130px);
   overflow: auto;
   .result-num {
     padding: 10px;

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

@@ -10,7 +10,24 @@
           aria-label="chats button"
           class="responsive-chats-button"
         >
-          <mat-icon>chat</mat-icon>
+          <!--<mat-icon>chat</mat-icon>-->
+          <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="currentColor"
+            stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round">
+
+            <g>
+              <path d="M3,21.8c-0.2,0-0.4-0.1-0.5-0.2c-0.2-0.2-0.3-0.5-0.2-0.8l1.8-5.4c-0.6-1.2-0.8-2.5-0.8-3.9c0-3.5,2-6.7,5.1-8.3
+                      		c1.3-0.6,2.7-0.9,4.1-1H13c4.7,0.3,8.5,4,8.7,8.7l0,0.5c0,1.4-0.3,2.9-1,4.1c-1.6,3.2-4.7,5.1-8.3,5.1c0,0,0,0,0,0
+                      		c-1.3,0-2.6-0.3-3.8-0.8l-5.4,1.8C3.2,21.7,3.1,21.8,3,21.8z M12.5,3.8C11.3,3.8,10.1,4,9,4.6c-2.6,1.3-4.3,4-4.3,6.9
+                      		c0,1.2,0.3,2.4,0.8,3.5c0.1,0.2,0.1,0.4,0,0.6l-1.4,4.3l4.3-1.4c0.2-0.1,0.4,0,0.6,0c1.1,0.5,2.3,0.8,3.5,0.8c3,0,5.6-1.6,6.9-4.3
+                      		c0.5-1.1,0.8-2.3,0.8-3.5c0,0,0,0,0,0V11C20,7.1,16.9,4,13,3.7L12.5,3.8C12.5,3.8,12.5,3.8,12.5,3.8z" />
+            </g>
+            <g>
+              <circle cx="9" cy="12" r="1" />
+              <circle cx="12.5" cy="12" r="1" />
+              <circle cx="16" cy="12" r="1" />
+            </g>
+          </svg>
+
         </button>
         <!-- / RESPONSIVE CHATS BUTTON-->
         <button

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

@@ -24,19 +24,19 @@
 }
 .chat-toolbar {
   width: 100%;
-  height: 70px;
+  height: 80px;
   min-height: 70px;
   align-items: center;
   background-color: #ffffff !important;
-  border: 1px solid #dddddd;
+  border-bottom: 1px solid #dddddd;
-
+  box-shadow: 0 3px 6px rgba(0,0,0,.16);
   .chat-header {
     width: 100%;
     align-items: center;
     display: flex;
     justify-content: space-between;
     .profile-img {
-      margin-right: 20px;
+      margin-right: 16px;
       .responsive-chats-button {
         display: none;
         &:last-child {
@@ -45,7 +45,7 @@
           width: 40px;
           height: 40px;
           border-radius: 50%;
-          background-color: #252525;
+          background-color: #604850;
           color: #efefef;
           font-size: 16px;
           line-height: 40px;

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

@@ -1,4 +1,4 @@
-$right-color:#565e6b;
+$right-color:#686566;
 .right{
   height:100%;
   flex-direction: row-reverse;
@@ -8,6 +8,7 @@ $right-color:#565e6b;
     height:100%;
     display:inline-flex;
     background-color:$right-color;
+     background-color:#7a7a7a;
   }
   .slide-box{
     display:inline-flex;

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.html

@@ -10,7 +10,11 @@
       class="button app-layout-native-title-bar-minimize"
       (click)="onClickMinimize()"
     >
-      <mat-icon>minimize</mat-icon>
+      <!--<mat-icon>minimize</mat-icon>-->
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
+        <line x1="5" y1="18" x2="19" y2="18"></line>
+      </svg>
     </button>
     <button
       mat-icon-button
@@ -18,8 +22,20 @@
       (click)="onClickMaxmize()"
     >
       <ng-container [ngSwitch]="windowStateChanged$ | async">
-        <mat-icon *ngSwitchCase="WindowState.Maximized">filter_none</mat-icon>
+        <!--<mat-icon *ngSwitchCase="WindowState.Maximized">filter_none</mat-icon>-->
-        <mat-icon *ngSwitchDefault>maximize</mat-icon>
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+          stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" *ngSwitchCase="WindowState.Maximized">
+          <path class="st0"
+            d="M15,9.5v7c0,0.8-0.7,1.5-1.5,1.5h-7C5.7,18,5,17.3,5,16.5v-7C5,8.7,5.7,8,6.5,8h7C14.3,8,15,8.7,15,9.5z" />
+          <path class="st0" d="M8.8,6.8V6c0-0.8,0.7-1.5,1.5-1.5H17c0.8,0,1.5,0.7,1.5,1.5v6.8c0,0.8-0.7,1.5-1.5,1.5h-0.8" />
+        </svg>
+
+        <!--<mat-icon *ngSwitchDefault>crop_din</mat-icon>-->
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+          stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" *ngSwitchDefault>
+          <rect x="5" y="5" width="12" height="12" rx="2" ry="2"></rect>
+        </svg>
+
       </ng-container>
     </button>
     <button
@@ -27,7 +43,12 @@
       class="button app-layout-native-title-bar-close"
       (click)="onClickClose()"
     >
-      <mat-icon>close</mat-icon>
+      <!--<mat-icon>close</mat-icon>-->
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
+        <line x1="18" y1="6" x2="6" y2="18"></line>
+        <line x1="6" y1="6" x2="18" y2="18"></line>
+      </svg>
     </button>
   </div>
 </mat-toolbar>

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss

@@ -7,15 +7,13 @@
     right: 0;
     top: 0;
     display: flex;
-    padding-left: 5px;
+    padding: 0 10px;
-    padding-right: 0px;
-    // align-items: center;
-    // justify-content: center;
-    // flex-direction: row-reverse;
     cursor: pointer;
-    background: white;
+    background: #4f4f4f;
     height: 30px;
-    border-bottom: 1px solid #d5dadb;
+    color:#ffffff;
+    //background: rgba(37, 27, 30, 0.9);
+    //border-bottom: 1px solid #d5dadb;
 
     .app-layout-native-title-bar-logo {
       width: 16px;
@@ -39,7 +37,7 @@
         outline: 0;
         cursor: pointer;
         border: none;
-        height: 100%;
+        height: 30px;
         min-width: 30px;
         max-width: 30px;
         padding: 5px;
@@ -49,7 +47,9 @@
         transition: background 0.2s linear, color 0.2s linear;
         text-align: center;
         font-size: 10px;
-
+        vertical-align: middle;
+        margin-left:6px;
+        transform: translateY(-2px);
         .mat-icon {
           //transform: translateY(-2px);
           width: 16px;
@@ -62,7 +62,7 @@
         &.app-layout-native-title-bar-close,
         &.app-layout-native-title-bar-maximize,
         &.app-layout-native-title-bar-minimize {
-          color: black;
+          color: darken(white, 20%);
           font-weight: lighter;
         }
 
@@ -72,18 +72,18 @@
 
         &:hover {
           &.app-layout-native-title-bar-close {
-            background: #e81123;
+            background: darken(#000000, 10%);
-            color: darken(white, 20%);
+            color: darken(white, 0);
           }
 
           &.app-layout-native-title-bar-minimize {
             background: darken(#000000, 10%);
-            color: darken(white, 20%);
+            color: darken(white,0);
           }
 
           &.app-layout-native-title-bar-maximize {
             background: darken(#000000, 10%);
-            color: darken(white, 20%);
+            color: darken(white, 0);
           }
         }
       }

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss

@@ -3,6 +3,8 @@
   display: flex;
   flex-flow: row;
   padding-top: 30px;
+  border:3px solid #4f4f4f;
+  border-top:none;
 
   .left-side {
     width: 380px;
@@ -14,7 +16,7 @@
     flex: 1 1 auto;
     min-width: 400px;
     height: 100%;
-
+    
     .messages {
       width: 100%;
       height: 100%;

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

@@ -51,7 +51,8 @@ $lg-red: (
   200: #f48fb1,
   300: #f06292,
   400: #ef4c73,
-  /* 400: #ec407a,*/ 500: #ed097e,
+  /* 400: #ec407a,*/
+  500: #ed097e,
   600: #d81b60,
   700: #c2185b,
   800: #ad1457,
@@ -98,7 +99,7 @@ $lg-red: (
     color: mat-color($primary, default-contrast);
   }
   .bg-accent-light {
-    background: mat-color($accent, 300);
+    background: mat-color($accent, 300) !important;
     color: mat-color($primary, default-contrast);
   }
   .bg-accent-color {
@@ -127,10 +128,6 @@ $lg-red: (
   .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
     background-color: mat-color($accent, 200);
   }
-  /*.mat-form-field-appearance-legacy .mat-hint{
-     color: mat-color($accent, 800);
-   }*/
-
   .mat-form-field-appearance-legacy {
     .mat-form-field-label {
       color: mat-color($primary);

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

@@ -160,11 +160,11 @@ $meBox-bg: #ffffff;
     position: relative;
     display: flex;
     flex-direction: row;
-    margin-right:40px;
+    margin-right: 40px;
-    margin-left:0;
+    margin-left: 0;
     .profile-img {
       flex: 0 0 auto;
-      img{
+      img {
         border-radius: 50%;
       }
     }
@@ -172,8 +172,8 @@ $meBox-bg: #ffffff;
   &.me {
     .chat-row {
       flex-direction: row-reverse;
-      margin-left:40px;
+      margin-left: 40px;
-      margin-right:0;
+      margin-right: 0;
       .profile-info {
         flex-direction: row-reverse;
         display: flex;
@@ -283,8 +283,8 @@ $meBox-bg: #ffffff;
     }
   }
 }
-.bubble-main{
+.bubble-main {
-    word-wrap: break-word;
+  word-wrap: break-word;
-    white-space: pre-wrap;
+  white-space: pre-wrap;
-    word-break: keep-all;
+  word-break: keep-all;
 }

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

@@ -6,7 +6,6 @@
 
   .more-spacer {
     flex: 1 1 auto;
-    width: 20px;
   }
 }
 
@@ -14,7 +13,6 @@
   padding: 0;
 }
 .mat-expansion-panel-header {
-  //height: 40px !important;
   padding: 0 20px;
   .mat-expansion-panel-header-title {
     align-items: center;

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

@@ -20,6 +20,7 @@
   align-items: center;
   padding: 0 10px 0 20px;
   font-size: 14px;
+  background-color:#f9f9f9;
   border-bottom: 1px solid #dddddd;
   .selectbox {
     display: inline-flex;
@@ -52,4 +53,4 @@
 + .searchbox {
   width: 54%;
   display: inline-flex;
-}
+}

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

@@ -107,7 +107,7 @@ $thumbnail-msize: 40px;
     display: flex;
     margin: 0;
     padding: 0;
-    width: calc(100% - 50px);
+    width: calc(100% - 60px);
     .detail {
       flex-direction: column;
       width: calc(100% - 80px);
@@ -116,6 +116,7 @@ $thumbnail-msize: 40px;
         color: $font-dark;
         width: 100%;
         margin-bottom: 2px;
+        align-items: center;
         .name {
           font-size: 16px;
           @include ellipsis(1);
@@ -130,11 +131,16 @@ $thumbnail-msize: 40px;
           font-size: 16px;
           color: #666666;
           margin-left: 4px;
+          line-height:unset;
         }
         .num {
           font-size: 12px;
           flex: none;
           margin-left: 6px;
+          border-radius: 3px;
+          padding: 1px 6px;
+          background-color: #ef4c73;
+          color: #ffffff;
         }
       }
       .room-msg {

projects/ucap-webmessenger-ui/src/lib/components/float-action-button.component.html

@@ -4,7 +4,7 @@
   (click)="onToggleFab()"
 ></div>
 <div class="fab-container">
-  <button mat-fab class="fab-toggler" (click)="onToggleFab()">
+  <button mat-fab class="fab-toggler bg-accent-dark" (click)="onToggleFab()">
     <mat-icon [@fabToggler]="fabTogglerState">add</mat-icon>
   </button>
   <div [@speedDialStagger]="buttons.length">