💄 update dots dropdown UI

Author: marcode24

src/app/shared/dropdowns/dots-dropdown/dots-dropdown.component.html

@@ -10,7 +10,7 @@
     <i class="bx bx-palette"></i>
     <span class="title">Cambiar color</span>
   </li>
-  <li role="menuitem" class='dropdown-item' (click)="downloadFile()">
+  <li role="menuitem" class='dropdown-item' (click)="downloadFile()" *ngIf="isFile()"> <!-- wait to compress zip -->
     <i class="bx bx-download"></i>
     <span class="title">Descargar</span>
   </li>

src/app/shared/dropdowns/dots-dropdown/dots-dropdown.component.scss

@@ -9,8 +9,8 @@
   align-items: center;
   border: none;
   border-radius: 50%;
-  height: 28px;
-  width: 28px;
+  height: 2.2rem;
+  width: 2.2rem;
   background: transparent;
   transition: 0.4s ease;
   cursor: pointer;
@@ -37,6 +37,7 @@ ul {
   height: fit-content;
   transition: visibility 0.2s, opacity 0.2s linear, bottom 0.2s linear,
     box-shadow 0.2s linear;
+  min-width: 15rem;
 
   &.show {
     opacity: 1;
@@ -47,15 +48,14 @@ ul {
   }
 
   .dropdown-item {
-    color: rgba(0, 0, 0, 0.6);
-    font-weight: bold;
-    cursor: pointer;
     display: flex;
     align-items: center;
-    justify-content: flex-start;
-    gap: 0.8rem;
-    padding: 0.6rem 0.8rem;
-    transition: background-color 0.2s linear, color 0.2s linear;
+    list-style: none;
+    height: 50px;
+    cursor: pointer;
+    transition: 0.3s ease;
+    padding: 0 1rem;
+    gap: 1.2rem;
 
     &:hover {
       background-color: #b8c1ce77;
@@ -72,12 +72,20 @@ ul {
 
     &:last-child {
       border-radius: 0 0 10px 10px;
+
+      &:hover {
+        background-color: #ff72568c;
+      }
     }
 
     & .title {
-      @include fs-6;
+      @include fs-5;
       @include fw-400;
       color: var(--fc-primary);
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      flex: 1;
     }
 
     & i {

src/app/shared/headers/actions/actions.component.scss

@@ -58,7 +58,7 @@
 
     & i {
       @include fs-4;
-      @include fw-600;
+      @include fw-500;
       color: var(--fc-primary);
     }
   }