From 7cc8e4494b6e3768efc6e8b046827a64ef337354 Mon Sep 17 00:00:00 2001
From: Richard Park <richard.park@loafle.com>
Date: Thu, 3 Oct 2019 18:53:27 +0900
Subject: [PATCH] layouts are fixed

---
 .../game/component/bet-history.component.html |   4 +-
 .../mini-game-settings.component.scss         | 225 +++++++++---------
 .../game/component/mini-game.component.scss   | 225 +++++++++---------
 .../game/component/sport-mix.component.scss   | 225 +++++++++---------
 .../component/sport-result.component.scss     | 225 +++++++++---------
 .../info/component/free-board.component.html  |   2 +-
 .../info/component/free-board.component.scss  |   2 +-
 .../info/component/popup-set.component.html   |   3 +-
 .../component/service-center.component.html   |   2 +-
 .../money/component/deposit.component.html    |   2 +-
 .../money/component/money-log.component.html  |   2 +-
 .../money/component/point-log.component.html  |   2 +-
 .../money/component/withdrawal.component.html |   2 +-
 .../user-connect/user-connect.component.scss  | 117 +++++++++
 .../user-connect/user-connect.component.ts    |  10 +-
 .../user-fees/user-fees.component.scss        | 117 +++++++++
 .../user-fees/user-fees.component.ts          |  14 +-
 17 files changed, 692 insertions(+), 487 deletions(-)

diff --git a/src/app/pages/games/game/component/bet-history.component.html b/src/app/pages/games/game/component/bet-history.component.html
index 03a06f5..63a1fd6 100644
--- a/src/app/pages/games/game/component/bet-history.component.html
+++ b/src/app/pages/games/game/component/bet-history.component.html
@@ -48,9 +48,7 @@
 
     <!-- CONTENT CARD -->
     <div class="content-card">
-      <app-bet-history-table></app-bet-history-table>
-      <app-bet-history-table></app-bet-history-table>
-      <app-bet-history-table></app-bet-history-table>
+      <app-bet-history-table class="bet-history-table"></app-bet-history-table>
       <mat-paginator
         #paginator
         [pageIndex]="0"
diff --git a/src/app/pages/games/game/component/mini-game-settings.component.scss b/src/app/pages/games/game/component/mini-game-settings.component.scss
index 0df904e..1996e63 100644
--- a/src/app/pages/games/game/component/mini-game-settings.component.scss
+++ b/src/app/pages/games/game/component/mini-game-settings.component.scss
@@ -1,122 +1,117 @@
-@import "src/@fuse/scss/fuse";
+@import 'src/@fuse/scss/fuse';
 
-e-commerce-orders {
-
-    #orders {
-
-        .top-bg {
-
-            @include media-breakpoint('xs') {
-                height: 224px;
-            }
-        }
-
-        > .center {
-
-            > .header {
-
-                .search-wrapper {
-                    width: 100%;
-                    max-width: 480px;
-                    border-radius: 28px;
-                    overflow: hidden;
-                    @include mat-elevation(1);
-
-                    @include media-breakpoint('xs') {
-                        width: 100%;
-                    }
-
-                    .search {
-                        width: 100%;
-                        height: 48px;
-                        line-height: 48px;
-                        padding: 0 18px;
-
-                        input {
-                            width: 100%;
-                            height: 48px;
-                            min-height: 48px;
-                            max-height: 48px;
-                            padding: 0 16px;
-                            border: none;
-                            outline: none;
-                        }
-                    }
-                }
-
-                @include media-breakpoint('xs') {
-                    padding: 8px 0;
-                    height: 160px !important;
-                    min-height: 160px !important;
-                    max-height: 160px !important;
-                }
-            }
-        }
+app-mini-game-settings {
+  #orders {
+    .top-bg {
+      @include media-breakpoint('xs') {
+        height: 224px;
+      }
     }
 
-    .mat-tab-group,
-    .mat-tab-body-wrapper,
-    .tab-content {
-        flex: 1 1 auto;
-        max-width: 100%;
+    > .center {
+      > .header {
+        .search-wrapper {
+          width: 100%;
+          max-width: 480px;
+          border-radius: 28px;
+          overflow: hidden;
+          @include mat-elevation(1);
+
+          @include media-breakpoint('xs') {
+            width: 100%;
+          }
+
+          .search {
+            width: 100%;
+            height: 48px;
+            line-height: 48px;
+            padding: 0 18px;
+
+            input {
+              width: 100%;
+              height: 48px;
+              min-height: 48px;
+              max-height: 48px;
+              padding: 0 16px;
+              border: none;
+              outline: none;
+            }
+          }
+        }
+
+        @include media-breakpoint('xs') {
+          padding: 8px 0;
+          height: 160px !important;
+          min-height: 160px !important;
+          max-height: 160px !important;
+        }
+      }
+    }
+  }
+
+  .mat-tab-group,
+  .mat-tab-body-wrapper,
+  .tab-content {
+    flex: 1 1 auto;
+    max-width: 100%;
+  }
+
+  .orders-table {
+    flex: 1 1 auto;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+
+    .mat-header-row {
+      min-height: 64px;
     }
 
-    .orders-table {
-        flex: 1 1 auto;
-        border-bottom: 1px solid rgba(0, 0, 0, .12);
-        overflow: auto;
-        -webkit-overflow-scrolling: touch;
-
-        .mat-header-row {
-            min-height: 64px;
-        }
-
-        .order {
-            position: relative;
-            cursor: pointer;
-            height: 84px;
-        }
-
-        .mat-cell {
-            min-width: 0;
-            display: flex;
-            align-items: center;
-        }
-
-        .mat-column-id {
-            flex: 0 1 84px;
-        }
-
-        .mat-column-image {
-            flex: 0 1 84px;
-
-            .product-image {
-                width: 52px;
-                height: 52px;
-                border: 1px solid rgba(0, 0, 0, .12);
-            }
-        }
-
-        .mat-column-buttons {
-            flex: 0 1 80px;
-        }
-
-        .quantity-indicator {
-            display: inline-block;
-            vertical-align: middle;
-            width: 8px;
-            height: 8px;
-            border-radius: 4px;
-            margin-right: 8px;
-
-            & + span {
-                display: inline-block;
-                vertical-align: middle;
-            }
-        }
-
-        .active-icon {
-            border-radius: 50%;
-        }
+    .order {
+      position: relative;
+      cursor: pointer;
+      height: 84px;
     }
+
+    .mat-cell {
+      min-width: 0;
+      display: flex;
+      align-items: center;
+    }
+
+    .mat-column-id {
+      flex: 0 1 84px;
+    }
+
+    .mat-column-image {
+      flex: 0 1 84px;
+
+      .product-image {
+        width: 52px;
+        height: 52px;
+        border: 1px solid rgba(0, 0, 0, 0.12);
+      }
+    }
+
+    .mat-column-buttons {
+      flex: 0 1 80px;
+    }
+
+    .quantity-indicator {
+      display: inline-block;
+      vertical-align: middle;
+      width: 8px;
+      height: 8px;
+      border-radius: 4px;
+      margin-right: 8px;
+
+      & + span {
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+
+    .active-icon {
+      border-radius: 50%;
+    }
+  }
 }
diff --git a/src/app/pages/games/game/component/mini-game.component.scss b/src/app/pages/games/game/component/mini-game.component.scss
index 0df904e..0a0d822 100644
--- a/src/app/pages/games/game/component/mini-game.component.scss
+++ b/src/app/pages/games/game/component/mini-game.component.scss
@@ -1,122 +1,117 @@
-@import "src/@fuse/scss/fuse";
+@import 'src/@fuse/scss/fuse';
 
-e-commerce-orders {
-
-    #orders {
-
-        .top-bg {
-
-            @include media-breakpoint('xs') {
-                height: 224px;
-            }
-        }
-
-        > .center {
-
-            > .header {
-
-                .search-wrapper {
-                    width: 100%;
-                    max-width: 480px;
-                    border-radius: 28px;
-                    overflow: hidden;
-                    @include mat-elevation(1);
-
-                    @include media-breakpoint('xs') {
-                        width: 100%;
-                    }
-
-                    .search {
-                        width: 100%;
-                        height: 48px;
-                        line-height: 48px;
-                        padding: 0 18px;
-
-                        input {
-                            width: 100%;
-                            height: 48px;
-                            min-height: 48px;
-                            max-height: 48px;
-                            padding: 0 16px;
-                            border: none;
-                            outline: none;
-                        }
-                    }
-                }
-
-                @include media-breakpoint('xs') {
-                    padding: 8px 0;
-                    height: 160px !important;
-                    min-height: 160px !important;
-                    max-height: 160px !important;
-                }
-            }
-        }
+app-mini-game {
+  #orders {
+    .top-bg {
+      @include media-breakpoint('xs') {
+        height: 224px;
+      }
     }
 
-    .mat-tab-group,
-    .mat-tab-body-wrapper,
-    .tab-content {
-        flex: 1 1 auto;
-        max-width: 100%;
+    > .center {
+      > .header {
+        .search-wrapper {
+          width: 100%;
+          max-width: 480px;
+          border-radius: 28px;
+          overflow: hidden;
+          @include mat-elevation(1);
+
+          @include media-breakpoint('xs') {
+            width: 100%;
+          }
+
+          .search {
+            width: 100%;
+            height: 48px;
+            line-height: 48px;
+            padding: 0 18px;
+
+            input {
+              width: 100%;
+              height: 48px;
+              min-height: 48px;
+              max-height: 48px;
+              padding: 0 16px;
+              border: none;
+              outline: none;
+            }
+          }
+        }
+
+        @include media-breakpoint('xs') {
+          padding: 8px 0;
+          height: 160px !important;
+          min-height: 160px !important;
+          max-height: 160px !important;
+        }
+      }
+    }
+  }
+
+  .mat-tab-group,
+  .mat-tab-body-wrapper,
+  .tab-content {
+    flex: 1 1 auto;
+    max-width: 100%;
+  }
+
+  .orders-table {
+    flex: 1 1 auto;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+
+    .mat-header-row {
+      min-height: 64px;
     }
 
-    .orders-table {
-        flex: 1 1 auto;
-        border-bottom: 1px solid rgba(0, 0, 0, .12);
-        overflow: auto;
-        -webkit-overflow-scrolling: touch;
-
-        .mat-header-row {
-            min-height: 64px;
-        }
-
-        .order {
-            position: relative;
-            cursor: pointer;
-            height: 84px;
-        }
-
-        .mat-cell {
-            min-width: 0;
-            display: flex;
-            align-items: center;
-        }
-
-        .mat-column-id {
-            flex: 0 1 84px;
-        }
-
-        .mat-column-image {
-            flex: 0 1 84px;
-
-            .product-image {
-                width: 52px;
-                height: 52px;
-                border: 1px solid rgba(0, 0, 0, .12);
-            }
-        }
-
-        .mat-column-buttons {
-            flex: 0 1 80px;
-        }
-
-        .quantity-indicator {
-            display: inline-block;
-            vertical-align: middle;
-            width: 8px;
-            height: 8px;
-            border-radius: 4px;
-            margin-right: 8px;
-
-            & + span {
-                display: inline-block;
-                vertical-align: middle;
-            }
-        }
-
-        .active-icon {
-            border-radius: 50%;
-        }
+    .order {
+      position: relative;
+      cursor: pointer;
+      height: 84px;
     }
+
+    .mat-cell {
+      min-width: 0;
+      display: flex;
+      align-items: center;
+    }
+
+    .mat-column-id {
+      flex: 0 1 84px;
+    }
+
+    .mat-column-image {
+      flex: 0 1 84px;
+
+      .product-image {
+        width: 52px;
+        height: 52px;
+        border: 1px solid rgba(0, 0, 0, 0.12);
+      }
+    }
+
+    .mat-column-buttons {
+      flex: 0 1 80px;
+    }
+
+    .quantity-indicator {
+      display: inline-block;
+      vertical-align: middle;
+      width: 8px;
+      height: 8px;
+      border-radius: 4px;
+      margin-right: 8px;
+
+      & + span {
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+
+    .active-icon {
+      border-radius: 50%;
+    }
+  }
 }
diff --git a/src/app/pages/games/game/component/sport-mix.component.scss b/src/app/pages/games/game/component/sport-mix.component.scss
index 0df904e..e5ed7a0 100644
--- a/src/app/pages/games/game/component/sport-mix.component.scss
+++ b/src/app/pages/games/game/component/sport-mix.component.scss
@@ -1,122 +1,117 @@
-@import "src/@fuse/scss/fuse";
+@import 'src/@fuse/scss/fuse';
 
-e-commerce-orders {
-
-    #orders {
-
-        .top-bg {
-
-            @include media-breakpoint('xs') {
-                height: 224px;
-            }
-        }
-
-        > .center {
-
-            > .header {
-
-                .search-wrapper {
-                    width: 100%;
-                    max-width: 480px;
-                    border-radius: 28px;
-                    overflow: hidden;
-                    @include mat-elevation(1);
-
-                    @include media-breakpoint('xs') {
-                        width: 100%;
-                    }
-
-                    .search {
-                        width: 100%;
-                        height: 48px;
-                        line-height: 48px;
-                        padding: 0 18px;
-
-                        input {
-                            width: 100%;
-                            height: 48px;
-                            min-height: 48px;
-                            max-height: 48px;
-                            padding: 0 16px;
-                            border: none;
-                            outline: none;
-                        }
-                    }
-                }
-
-                @include media-breakpoint('xs') {
-                    padding: 8px 0;
-                    height: 160px !important;
-                    min-height: 160px !important;
-                    max-height: 160px !important;
-                }
-            }
-        }
+app-sport-mix {
+  #orders {
+    .top-bg {
+      @include media-breakpoint('xs') {
+        height: 224px;
+      }
     }
 
-    .mat-tab-group,
-    .mat-tab-body-wrapper,
-    .tab-content {
-        flex: 1 1 auto;
-        max-width: 100%;
+    > .center {
+      > .header {
+        .search-wrapper {
+          width: 100%;
+          max-width: 480px;
+          border-radius: 28px;
+          overflow: hidden;
+          @include mat-elevation(1);
+
+          @include media-breakpoint('xs') {
+            width: 100%;
+          }
+
+          .search {
+            width: 100%;
+            height: 48px;
+            line-height: 48px;
+            padding: 0 18px;
+
+            input {
+              width: 100%;
+              height: 48px;
+              min-height: 48px;
+              max-height: 48px;
+              padding: 0 16px;
+              border: none;
+              outline: none;
+            }
+          }
+        }
+
+        @include media-breakpoint('xs') {
+          padding: 8px 0;
+          height: 160px !important;
+          min-height: 160px !important;
+          max-height: 160px !important;
+        }
+      }
+    }
+  }
+
+  .mat-tab-group,
+  .mat-tab-body-wrapper,
+  .tab-content {
+    flex: 1 1 auto;
+    max-width: 100%;
+  }
+
+  .orders-table {
+    flex: 1 1 auto;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+
+    .mat-header-row {
+      min-height: 64px;
     }
 
-    .orders-table {
-        flex: 1 1 auto;
-        border-bottom: 1px solid rgba(0, 0, 0, .12);
-        overflow: auto;
-        -webkit-overflow-scrolling: touch;
-
-        .mat-header-row {
-            min-height: 64px;
-        }
-
-        .order {
-            position: relative;
-            cursor: pointer;
-            height: 84px;
-        }
-
-        .mat-cell {
-            min-width: 0;
-            display: flex;
-            align-items: center;
-        }
-
-        .mat-column-id {
-            flex: 0 1 84px;
-        }
-
-        .mat-column-image {
-            flex: 0 1 84px;
-
-            .product-image {
-                width: 52px;
-                height: 52px;
-                border: 1px solid rgba(0, 0, 0, .12);
-            }
-        }
-
-        .mat-column-buttons {
-            flex: 0 1 80px;
-        }
-
-        .quantity-indicator {
-            display: inline-block;
-            vertical-align: middle;
-            width: 8px;
-            height: 8px;
-            border-radius: 4px;
-            margin-right: 8px;
-
-            & + span {
-                display: inline-block;
-                vertical-align: middle;
-            }
-        }
-
-        .active-icon {
-            border-radius: 50%;
-        }
+    .order {
+      position: relative;
+      cursor: pointer;
+      height: 84px;
     }
+
+    .mat-cell {
+      min-width: 0;
+      display: flex;
+      align-items: center;
+    }
+
+    .mat-column-id {
+      flex: 0 1 84px;
+    }
+
+    .mat-column-image {
+      flex: 0 1 84px;
+
+      .product-image {
+        width: 52px;
+        height: 52px;
+        border: 1px solid rgba(0, 0, 0, 0.12);
+      }
+    }
+
+    .mat-column-buttons {
+      flex: 0 1 80px;
+    }
+
+    .quantity-indicator {
+      display: inline-block;
+      vertical-align: middle;
+      width: 8px;
+      height: 8px;
+      border-radius: 4px;
+      margin-right: 8px;
+
+      & + span {
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+
+    .active-icon {
+      border-radius: 50%;
+    }
+  }
 }
diff --git a/src/app/pages/games/game/component/sport-result.component.scss b/src/app/pages/games/game/component/sport-result.component.scss
index 0df904e..30121d9 100644
--- a/src/app/pages/games/game/component/sport-result.component.scss
+++ b/src/app/pages/games/game/component/sport-result.component.scss
@@ -1,122 +1,117 @@
-@import "src/@fuse/scss/fuse";
+@import 'src/@fuse/scss/fuse';
 
-e-commerce-orders {
-
-    #orders {
-
-        .top-bg {
-
-            @include media-breakpoint('xs') {
-                height: 224px;
-            }
-        }
-
-        > .center {
-
-            > .header {
-
-                .search-wrapper {
-                    width: 100%;
-                    max-width: 480px;
-                    border-radius: 28px;
-                    overflow: hidden;
-                    @include mat-elevation(1);
-
-                    @include media-breakpoint('xs') {
-                        width: 100%;
-                    }
-
-                    .search {
-                        width: 100%;
-                        height: 48px;
-                        line-height: 48px;
-                        padding: 0 18px;
-
-                        input {
-                            width: 100%;
-                            height: 48px;
-                            min-height: 48px;
-                            max-height: 48px;
-                            padding: 0 16px;
-                            border: none;
-                            outline: none;
-                        }
-                    }
-                }
-
-                @include media-breakpoint('xs') {
-                    padding: 8px 0;
-                    height: 160px !important;
-                    min-height: 160px !important;
-                    max-height: 160px !important;
-                }
-            }
-        }
+app-sport-result {
+  #orders {
+    .top-bg {
+      @include media-breakpoint('xs') {
+        height: 224px;
+      }
     }
 
-    .mat-tab-group,
-    .mat-tab-body-wrapper,
-    .tab-content {
-        flex: 1 1 auto;
-        max-width: 100%;
+    > .center {
+      > .header {
+        .search-wrapper {
+          width: 100%;
+          max-width: 480px;
+          border-radius: 28px;
+          overflow: hidden;
+          @include mat-elevation(1);
+
+          @include media-breakpoint('xs') {
+            width: 100%;
+          }
+
+          .search {
+            width: 100%;
+            height: 48px;
+            line-height: 48px;
+            padding: 0 18px;
+
+            input {
+              width: 100%;
+              height: 48px;
+              min-height: 48px;
+              max-height: 48px;
+              padding: 0 16px;
+              border: none;
+              outline: none;
+            }
+          }
+        }
+
+        @include media-breakpoint('xs') {
+          padding: 8px 0;
+          height: 160px !important;
+          min-height: 160px !important;
+          max-height: 160px !important;
+        }
+      }
+    }
+  }
+
+  .mat-tab-group,
+  .mat-tab-body-wrapper,
+  .tab-content {
+    flex: 1 1 auto;
+    max-width: 100%;
+  }
+
+  .orders-table {
+    flex: 1 1 auto;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+
+    .mat-header-row {
+      min-height: 64px;
     }
 
-    .orders-table {
-        flex: 1 1 auto;
-        border-bottom: 1px solid rgba(0, 0, 0, .12);
-        overflow: auto;
-        -webkit-overflow-scrolling: touch;
-
-        .mat-header-row {
-            min-height: 64px;
-        }
-
-        .order {
-            position: relative;
-            cursor: pointer;
-            height: 84px;
-        }
-
-        .mat-cell {
-            min-width: 0;
-            display: flex;
-            align-items: center;
-        }
-
-        .mat-column-id {
-            flex: 0 1 84px;
-        }
-
-        .mat-column-image {
-            flex: 0 1 84px;
-
-            .product-image {
-                width: 52px;
-                height: 52px;
-                border: 1px solid rgba(0, 0, 0, .12);
-            }
-        }
-
-        .mat-column-buttons {
-            flex: 0 1 80px;
-        }
-
-        .quantity-indicator {
-            display: inline-block;
-            vertical-align: middle;
-            width: 8px;
-            height: 8px;
-            border-radius: 4px;
-            margin-right: 8px;
-
-            & + span {
-                display: inline-block;
-                vertical-align: middle;
-            }
-        }
-
-        .active-icon {
-            border-radius: 50%;
-        }
+    .order {
+      position: relative;
+      cursor: pointer;
+      height: 84px;
     }
+
+    .mat-cell {
+      min-width: 0;
+      display: flex;
+      align-items: center;
+    }
+
+    .mat-column-id {
+      flex: 0 1 84px;
+    }
+
+    .mat-column-image {
+      flex: 0 1 84px;
+
+      .product-image {
+        width: 52px;
+        height: 52px;
+        border: 1px solid rgba(0, 0, 0, 0.12);
+      }
+    }
+
+    .mat-column-buttons {
+      flex: 0 1 80px;
+    }
+
+    .quantity-indicator {
+      display: inline-block;
+      vertical-align: middle;
+      width: 8px;
+      height: 8px;
+      border-radius: 4px;
+      margin-right: 8px;
+
+      & + span {
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+
+    .active-icon {
+      border-radius: 50%;
+    }
+  }
 }
diff --git a/src/app/pages/infos/info/component/free-board.component.html b/src/app/pages/infos/info/component/free-board.component.html
index e48d551..3e34ff7 100644
--- a/src/app/pages/infos/info/component/free-board.component.html
+++ b/src/app/pages/infos/info/component/free-board.component.html
@@ -49,7 +49,7 @@
     <!-- CONTENT CARD -->
     <div class="content-card">
       <mat-table
-        class="service-center"
+        class="service-center-table"
         #table
         [dataSource]="dataSource"
         matSort
diff --git a/src/app/pages/infos/info/component/free-board.component.scss b/src/app/pages/infos/info/component/free-board.component.scss
index e65611c..69e69f7 100644
--- a/src/app/pages/infos/info/component/free-board.component.scss
+++ b/src/app/pages/infos/info/component/free-board.component.scss
@@ -1,6 +1,6 @@
 @import 'src/@fuse/scss/fuse';
 
-app-service-center {
+app-free-board {
   #service-center {
     .top-bg {
       @include media-breakpoint('xs') {
diff --git a/src/app/pages/infos/info/component/popup-set.component.html b/src/app/pages/infos/info/component/popup-set.component.html
index ab1bf0f..4305fc7 100644
--- a/src/app/pages/infos/info/component/popup-set.component.html
+++ b/src/app/pages/infos/info/component/popup-set.component.html
@@ -46,7 +46,6 @@
 
     <!-- CONTENT CARD -->
     <div class="content-card">
-      <form name="popupSetForm" [formGroup]="mtformgroup" novalidate>
         <mat-table
           class="popup-set-table"
           #table
@@ -239,7 +238,7 @@
           >
           </mat-row>
         </mat-table>
-      </form>
+
       <mat-paginator
         #paginator
         [length]="10"
diff --git a/src/app/pages/infos/info/component/service-center.component.html b/src/app/pages/infos/info/component/service-center.component.html
index e48d551..3e34ff7 100644
--- a/src/app/pages/infos/info/component/service-center.component.html
+++ b/src/app/pages/infos/info/component/service-center.component.html
@@ -49,7 +49,7 @@
     <!-- CONTENT CARD -->
     <div class="content-card">
       <mat-table
-        class="service-center"
+        class="service-center-table"
         #table
         [dataSource]="dataSource"
         matSort
diff --git a/src/app/pages/moneys/money/component/deposit.component.html b/src/app/pages/moneys/money/component/deposit.component.html
index cc483b4..201c1c7 100644
--- a/src/app/pages/moneys/money/component/deposit.component.html
+++ b/src/app/pages/moneys/money/component/deposit.component.html
@@ -49,7 +49,7 @@
     <!-- CONTENT CARD -->
     <div class="content-card">
       <mat-table
-        class="service-center"
+        class="service-center-table"
         #table
         [dataSource]="dataSource"
         matSort
diff --git a/src/app/pages/moneys/money/component/money-log.component.html b/src/app/pages/moneys/money/component/money-log.component.html
index 8b718d0..df69d91 100644
--- a/src/app/pages/moneys/money/component/money-log.component.html
+++ b/src/app/pages/moneys/money/component/money-log.component.html
@@ -49,7 +49,7 @@
     <!-- CONTENT CARD -->
     <div class="content-card">
       <mat-table
-        class="service-center"
+        class="service-center-table"
         #table
         [dataSource]="dataSource"
         matSort
diff --git a/src/app/pages/moneys/money/component/point-log.component.html b/src/app/pages/moneys/money/component/point-log.component.html
index 1939937..2e91340 100644
--- a/src/app/pages/moneys/money/component/point-log.component.html
+++ b/src/app/pages/moneys/money/component/point-log.component.html
@@ -49,7 +49,7 @@
     <!-- CONTENT CARD -->
     <div class="content-card">
       <mat-table
-        class="service-center"
+        class="service-center-table"
         #table
         [dataSource]="dataSource"
         matSort
diff --git a/src/app/pages/moneys/money/component/withdrawal.component.html b/src/app/pages/moneys/money/component/withdrawal.component.html
index c7ff195..9b191a4 100644
--- a/src/app/pages/moneys/money/component/withdrawal.component.html
+++ b/src/app/pages/moneys/money/component/withdrawal.component.html
@@ -49,7 +49,7 @@
     <!-- CONTENT CARD -->
     <div class="content-card">
       <mat-table
-        class="service-center"
+        class="service-center-table"
         #table
         [dataSource]="dataSource"
         matSort
diff --git a/src/app/pages/users/user/component/user-connect/user-connect.component.scss b/src/app/pages/users/user/component/user-connect/user-connect.component.scss
index e69de29..9a6ec64 100644
--- a/src/app/pages/users/user/component/user-connect/user-connect.component.scss
+++ b/src/app/pages/users/user/component/user-connect/user-connect.component.scss
@@ -0,0 +1,117 @@
+@import 'src/@fuse/scss/fuse';
+
+app-user-connect {
+  #users {
+    .top-bg {
+      @include media-breakpoint('xs') {
+        height: 224px;
+      }
+    }
+
+    > .center {
+      > .header {
+        .search-wrapper {
+          width: 100%;
+          max-width: 480px;
+          border-radius: 28px;
+          overflow: hidden;
+          @include mat-elevation(1);
+
+          @include media-breakpoint('xs') {
+            width: 100%;
+          }
+
+          .search {
+            width: 100%;
+            height: 48px;
+            line-height: 48px;
+            padding: 0 18px;
+
+            input {
+              width: 100%;
+              height: 48px;
+              min-height: 48px;
+              max-height: 48px;
+              padding: 0 16px;
+              border: none;
+              outline: none;
+            }
+          }
+        }
+
+        @include media-breakpoint('xs') {
+          padding: 8px 0;
+          height: 160px !important;
+          min-height: 160px !important;
+          max-height: 160px !important;
+        }
+      }
+    }
+  }
+
+  .mat-tab-group,
+  .mat-tab-body-wrapper,
+  .tab-content {
+    flex: 1 1 auto;
+    max-width: 100%;
+  }
+
+  .users-table {
+    flex: 1 1 auto;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+
+    .mat-header-row {
+      min-height: 64px;
+    }
+
+    .user {
+      position: relative;
+      cursor: pointer;
+      height: 84px;
+    }
+
+    .mat-cell {
+      min-width: 0;
+      display: flex;
+      align-items: center;
+    }
+
+    .mat-column-id {
+      flex: 0 1 84px;
+    }
+
+    .mat-column-image {
+      flex: 0 1 84px;
+
+      .product-image {
+        width: 52px;
+        height: 52px;
+        border: 1px solid rgba(0, 0, 0, 0.12);
+      }
+    }
+
+    .mat-column-buttons {
+      flex: 0 1 80px;
+    }
+
+    .quantity-indicator {
+      display: inline-block;
+      vertical-align: middle;
+      width: 8px;
+      height: 8px;
+      border-radius: 4px;
+      margin-right: 8px;
+
+      & + span {
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+
+    .active-icon {
+      border-radius: 50%;
+    }
+  }
+}
diff --git a/src/app/pages/users/user/component/user-connect/user-connect.component.ts b/src/app/pages/users/user/component/user-connect/user-connect.component.ts
index daf0f40..87b515f 100644
--- a/src/app/pages/users/user/component/user-connect/user-connect.component.ts
+++ b/src/app/pages/users/user/component/user-connect/user-connect.component.ts
@@ -1,4 +1,3 @@
-
 import {
   Component,
   ElementRef,
@@ -31,8 +30,7 @@ export class UserConnectComponent implements OnInit, OnDestroy {
     'registTime',
     'holdMoney',
     'point',
-    'fire',
-
+    'fire'
   ];
 
   @ViewChild(MatPaginator, { static: true })
@@ -50,9 +48,7 @@ export class UserConnectComponent implements OnInit, OnDestroy {
   /**
    * Constructor
    */
-  constructor(
-    private _formBuilder: FormBuilder
-  ) {
+  constructor(private _formBuilder: FormBuilder) {
     // Set the private defaults
     this._unsubscribeAll = new Subject();
   }
@@ -65,7 +61,7 @@ export class UserConnectComponent implements OnInit, OnDestroy {
       //     disabled: true
       //   }, Validators.required
       // ],
-      firstName: ['', Validators.required],
+      firstName: ['', Validators.required]
       // lastName: ['', Validators.required],
       // address: ['', Validators.required],
       // address2: ['', Validators.required],
diff --git a/src/app/pages/users/user/component/user-fees/user-fees.component.scss b/src/app/pages/users/user/component/user-fees/user-fees.component.scss
index e69de29..4bd5b7a 100644
--- a/src/app/pages/users/user/component/user-fees/user-fees.component.scss
+++ b/src/app/pages/users/user/component/user-fees/user-fees.component.scss
@@ -0,0 +1,117 @@
+@import 'src/@fuse/scss/fuse';
+
+app-user-fees {
+  #users {
+    .top-bg {
+      @include media-breakpoint('xs') {
+        height: 224px;
+      }
+    }
+
+    > .center {
+      > .header {
+        .search-wrapper {
+          width: 100%;
+          max-width: 480px;
+          border-radius: 28px;
+          overflow: hidden;
+          @include mat-elevation(1);
+
+          @include media-breakpoint('xs') {
+            width: 100%;
+          }
+
+          .search {
+            width: 100%;
+            height: 48px;
+            line-height: 48px;
+            padding: 0 18px;
+
+            input {
+              width: 100%;
+              height: 48px;
+              min-height: 48px;
+              max-height: 48px;
+              padding: 0 16px;
+              border: none;
+              outline: none;
+            }
+          }
+        }
+
+        @include media-breakpoint('xs') {
+          padding: 8px 0;
+          height: 160px !important;
+          min-height: 160px !important;
+          max-height: 160px !important;
+        }
+      }
+    }
+  }
+
+  .mat-tab-group,
+  .mat-tab-body-wrapper,
+  .tab-content {
+    flex: 1 1 auto;
+    max-width: 100%;
+  }
+
+  .users-table {
+    flex: 1 1 auto;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+
+    .mat-header-row {
+      min-height: 64px;
+    }
+
+    .user {
+      position: relative;
+      cursor: pointer;
+      height: 84px;
+    }
+
+    .mat-cell {
+      min-width: 0;
+      display: flex;
+      align-items: center;
+    }
+
+    .mat-column-id {
+      flex: 0 1 84px;
+    }
+
+    .mat-column-image {
+      flex: 0 1 84px;
+
+      .product-image {
+        width: 52px;
+        height: 52px;
+        border: 1px solid rgba(0, 0, 0, 0.12);
+      }
+    }
+
+    .mat-column-buttons {
+      flex: 0 1 80px;
+    }
+
+    .quantity-indicator {
+      display: inline-block;
+      vertical-align: middle;
+      width: 8px;
+      height: 8px;
+      border-radius: 4px;
+      margin-right: 8px;
+
+      & + span {
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+
+    .active-icon {
+      border-radius: 50%;
+    }
+  }
+}
diff --git a/src/app/pages/users/user/component/user-fees/user-fees.component.ts b/src/app/pages/users/user/component/user-fees/user-fees.component.ts
index f8ec354..79bec76 100644
--- a/src/app/pages/users/user/component/user-fees/user-fees.component.ts
+++ b/src/app/pages/users/user/component/user-fees/user-fees.component.ts
@@ -14,10 +14,11 @@ import { MatSort } from '@angular/material/sort';
 @Component({
   selector: 'app-user-fees',
   templateUrl: './user-fees.component.html',
-  styleUrls: ['./user-fees.component.scss']
+  styleUrls: ['./user-fees.component.scss'],
+  animations: fuseAnimations,
+  encapsulation: ViewEncapsulation.None
 })
 export class UserFeesComponent implements OnInit {
-
   displayedColumns = [
     'id',
     'chargeFees',
@@ -26,7 +27,7 @@ export class UserFeesComponent implements OnInit {
     'rotusBetFees',
     'loserSportFees',
     'loserMiniFees',
-    'calculateMethod',
+    'calculateMethod'
   ];
 
   @ViewChild(MatPaginator, { static: true })
@@ -44,15 +45,12 @@ export class UserFeesComponent implements OnInit {
   /**
    * Constructor
    */
-  constructor(
-
-  ) {
+  constructor() {
     // Set the private defaults
     this._unsubscribeAll = new Subject();
   }
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 
   ngOnDestroy(): void {
     // Unsubscribe from all subscriptions