Added more css changes for Filters

src/app/tts-filters/filter-item/filter-item.component.html

@@ -1,9 +1,13 @@
 <ul>
   <li>
-    {{item.search}}
+    <span>
+      {{item.search}}
+    </span>
   </li>
   <li>
-    {{item.replace}}
+    <span>
+      {{item.replace}}
+    </span>
   </li>
   <li>
     <mat-menu #filterMenu>
@@ -11,7 +15,7 @@
       <button mat-menu-item (click)="onDelete.emit(item)">Delete</button>
     </mat-menu>
 
-    <button mat-icon-button [matMenuTriggerFor]="filterMenu">
+    <button mat-icon-button class="small-button" [matMenuTriggerFor]="filterMenu">
       <mat-icon>more_vert</mat-icon>
     </button>
   </li>

src/app/tts-filters/filter-item/filter-item.component.scss

@@ -13,9 +13,14 @@ ul {
     li {
         list-style-type: none;
         white-space: pre;
-        text-align: justify;
+        text-align: start;
         text-wrap: wrap;
 
+        span {
+          overflow: hidden;
+          text-overflow: hidden;
+        }
+
         > button {
             background: #dddddd;
             border-radius: 50%;
@@ -30,4 +35,8 @@ ul {
     li:nth-child(2) {
         flex: 1;
     }
+}
+
+.small-button {
+  transform: scale(0.8);
 }

src/app/tts-filters/filter-list/filter-list.component.html

@@ -1,5 +1,5 @@
 <div>
-  <ul>
+  <ul class="data">
     <li>
         <ul class="header">
             <li>Search</li>

src/app/tts-filters/filter-list/filter-list.component.scss

@@ -1,40 +1,50 @@
-ul {
-    margin: 0;
-    padding: 0;
+div {
+  background-color: #fafafa;
 }
 
-li {
+ul.data {
+  margin: 0;
+  padding: 0;
+
+  > li {
     display: block;
     list-style-type: none;
     padding: 0.75em 1em;
     border-bottom: 1px solid #aaaaaa;
-}
+  }
 
-li:first-child {
+  > li:first-child {
     padding: 0 1em;
     border-bottom: 0 solid #aaaaaa;
-}
+  }
 
-li:last-child {
+  > li:last-child {
     border-bottom: 0 solid #aaaaaa;
+  }
+
+  > li:nth-child(2n) {
+    background-color: #f5f5f5;
+  }
 }
 
 ul.header {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  background-color: #fafafa;
 
-    li {
-        border-bottom: 0 solid #aaaaaa;
-        font-weight: 500;
-        list-style-type: none;
-        white-space: pre;
-        text-align: justify;
-    }
+  li {
+    border-bottom: 0 solid #aaaaaa;
+    font-weight: 500;
+    list-style-type: none;
+    white-space: pre;
+    text-align: justify;
+    background-color: #fafafa;
+  }
 
-    li:nth-child(1),
-    li:nth-child(2) {
-        flex: 1;
-    }
+  li:nth-child(1),
+  li:nth-child(2) {
+    flex: 1;
+  }
 }

src/app/tts-filters/filters/filters.component.scss

@@ -1,5 +1,13 @@
+main {
+  background-color: #fafafa;
+}
+
 article {
     display: flex;
-    justify-content: space-between;
-    width: 70%;
+    justify-content: center;
+    gap: 10em;
+}
+
+button {
+  transform: scale(0.7);
 }