From 96441946b6eb77b85871787a443f53f9d49b1727 Mon Sep 17 00:00:00 2001
From: Tom <mail@goblincaves.com>
Date: Tue, 7 Jan 2025 17:55:14 +0000
Subject: [PATCH] Added more css changes for Filters

---
 .../filter-item/filter-item.component.html    | 10 +++-
 .../filter-item/filter-item.component.scss    | 11 +++-
 .../filter-list/filter-list.component.html    |  2 +-
 .../filter-list/filter-list.component.scss    | 56 +++++++++++--------
 .../filters/filters.component.scss            | 12 +++-
 5 files changed, 61 insertions(+), 30 deletions(-)

diff --git a/src/app/tts-filters/filter-item/filter-item.component.html b/src/app/tts-filters/filter-item/filter-item.component.html
index cd0643b..fca947d 100644
--- a/src/app/tts-filters/filter-item/filter-item.component.html
+++ b/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>
diff --git a/src/app/tts-filters/filter-item/filter-item.component.scss b/src/app/tts-filters/filter-item/filter-item.component.scss
index 90352b5..46a6f59 100644
--- a/src/app/tts-filters/filter-item/filter-item.component.scss
+++ b/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);
 }
\ No newline at end of file
diff --git a/src/app/tts-filters/filter-list/filter-list.component.html b/src/app/tts-filters/filter-list/filter-list.component.html
index 6a2c648..28ec100 100644
--- a/src/app/tts-filters/filter-list/filter-list.component.html
+++ b/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>
diff --git a/src/app/tts-filters/filter-list/filter-list.component.scss b/src/app/tts-filters/filter-list/filter-list.component.scss
index af28acf..2c973f9 100644
--- a/src/app/tts-filters/filter-list/filter-list.component.scss
+++ b/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;
+  }
 }
\ No newline at end of file
diff --git a/src/app/tts-filters/filters/filters.component.scss b/src/app/tts-filters/filters/filters.component.scss
index 00f008a..f582cf5 100644
--- a/src/app/tts-filters/filters/filters.component.scss
+++ b/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);
 }
\ No newline at end of file