Update styling for rule list settings and remove use of legacy color …

…names
safing · Feb 1, 2022 · f02d575 · f02d575
1 parent 9d22c29
commit f02d575
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 56 deletions.
diff --git a/modules/portmaster/src/app/shared/config/rule-list/list-item.html b/modules/portmaster/src/app/shared/config/rule-list/list-item.html
@@ -1,4 +1,4 @@
-<div class="action" [class.allow]="isAllow" [class.block]="isBlock" [class.edit]="edit">
+<div class="flex items-center action justify-evenly" [class.text-green-300]="isAllow" [class.text-red]="isBlock">
   <ng-container *ngIf="!edit; else: selectAction">
     <span *ngIf="isAllow">Allow</span>
     <span *ngIf="isBlock">Block</span>

diff --git a/modules/portmaster/src/app/shared/config/rule-list/list-item.scss b/modules/portmaster/src/app/shared/config/rule-list/list-item.scss
@@ -1,66 +1,60 @@
 :host {
   display: flex;
   outline: none;
+  @apply space-x-2;
 
   &>* {
     @apply rounded;
-    @apply bg-buttons-light;
-
-    &:not(:last-child) {
-      @apply mr-1;
-    }
+    @apply bg-gray-300;
   }
 }
 
 div.action {
-  @apply p-2;
+  @apply border-gray-500 border;
   flex-shrink: 0;
-  min-width  : 4rem;
-  text-align : center;
-
-  &.edit {
-    @apply p-0;
-  }
-
-  &.allow {
-    color: theme('colors.info.green');
-  }
-
-  &.block {
-    color: theme('colors.info.red');
-  }
+  min-width: 6rem;
+  text-align: center;
 }
 
 div.value {
-  @apply p-2;
+  @apply border-gray-500 border;
+  @apply p-1.5;
   @apply px-2;
 
   &.edit {
     @apply p-0;
-    @apply pr-2;
+    @apply bg-gray-400;
 
     input {
-      margin   : 0;
-      width    : auto;
+      margin: 0;
+      width: auto;
+      height: 100%;
       flex-grow: 1;
-      border   : none;
+      border: none;
+      @apply shadow-none;
+    }
+
+    input:focus+.buttons {
+      @apply bg-gray-500 border-gray-600 bg-opacity-75 border-opacity-75;
     }
   }
 
-  flex-grow      : 1;
-  display        : flex;
+  flex-grow : 1;
+  display : flex;
   justify-content: space-between;
-  align-items    : center;
+  align-items : center;
 
   .buttons {
     flex-shrink: 0;
-    @apply ml-2;
+    height: 100%;
+    width: 4rem;
+    @apply flex items-center justify-evenly;
 
     fa-icon {
       cursor: pointer;
       @apply text-primary;
       @apply p-1;
-      opacity  : 0.7;
+      opacity: 0.7;
       font-size: 0.6rem;
 
       &:hover {

diff --git a/modules/portmaster/src/app/shared/config/rule-list/rule-list.html b/modules/portmaster/src/app/shared/config/rule-list/rule-list.html
@@ -1,16 +1,26 @@
 <div class="list-items" cdkDropList (cdkDropListDropped)="drop($event)">
   <div class="item" *ngFor="let entry of entries; let index=index; trackBy: trackBy" cdkDrag
     [cdkDragDisabled]="readonly">
-    <fa-icon icon="grip-vertical" cdkDragHandle *ngIf="!readonly"></fa-icon>
+    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-2 text-secondary" fill="none" viewBox="0 0 24 24"
+      stroke="currentColor" cdkDragHandle [class.opacity-0]="readonly" [class.cusor-move]="!readonly">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4" />
+    </svg>
     <app-rule-list-item [readonly]="readonly" [value]="entry" (valueChange)="updateValue(index, $event)"
       (delete)="deleteEntry(index)">
     </app-rule-list-item>
   </div>
 </div>
 
-<div class="button-list" *ngIf="!readonly">
-  <div class="new-entry" (click)="addEntry()">
-    <fa-icon icon="plus-circle" [inverse]="false"></fa-icon>
-    <span>Add rule</span>
+<div class="button-list">
+  <div class="dotted" *ngIf="!entries.length && readonly">
+    No entries available
   </div>
+
+  <button class="new-entry dotted" (click)="addEntry()" *ngIf="!readonly">
+    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+      <path fill-rule="evenodd"
+        d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
+    </svg>
+    <span>Add Rule</span>
+  </button>
 </div>
diff --git a/modules/portmaster/src/app/shared/config/rule-list/rule-list.scss b/modules/portmaster/src/app/shared/config/rule-list/rule-list.scss
@@ -4,9 +4,9 @@
 
 .item,
 .cdk-drag-preview {
-  display    : flex;
+  display: flex;
   align-items: center;
-  padding    : 3px;
+  padding: 3px;
 
   fa-icon {
     cursor: pointer;
@@ -21,8 +21,8 @@
 }
 
 .cdk-drag-placeholder {
-  left        : -4px;
-  padding     : 1px;
+  left: -4px;
+  padding: 1px;
   padding-left: 4px;
 }
 
@@ -32,19 +32,18 @@
 }
 
 .cdk-drag-preview {
-  left        : -4px;
-  padding     : 1px;
+  left: -4px;
+  padding: 1px;
   padding-left: 4px;
 }
 
 .button-list {
   @apply mt-2;
+  @apply ml-8;
 }
 
-.new-entry {
-  position: relative;
-  cursor  : pointer;
-  width   : 100%;
+.dotted {
+  @apply w-full;
   @apply rounded;
   @apply p-1;
   @apply border-2;
@@ -53,26 +52,24 @@
   @apply bg-background;
   @apply text-secondary;
 
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
   span {
-    @apply ml-2;
     @apply font-medium;
-
   }
+}
 
-  fa-icon {
-    font-size: 1rem;
-  }
+.new-entry {
+  cursor: pointer;
 
   &:hover {
     @apply text-primary;
-    @apply bg-cards-secondary;
+    @apply bg-gray-300;
 
     span {
       @apply text-primary;
     }
   }
-
-  display        : flex;
-  align-items    : center;
-  justify-content: center;
 }