🎉 Add invitation section to dashboard

frontend/resources/styles/main/partials/dashboard-header.scss

@@ -5,14 +5,18 @@
 // Copyright (c) UXBOX Labs SL
 
 .dashboard-header {
-  align-items: center;
-  background-color: $color-white;
   display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: $color-white;
   height: 63px;
   padding: $size-1 $size-4 $size-1 $size-2;
   position: relative;
   z-index: 10;
-  justify-content: space-between;
+  &.team {
+    display: grid;
+    grid-template-columns: 20% 1fr 20%;
+  }
 
   .element-name {
     margin-right: $size-2;
@@ -33,27 +37,26 @@
 
   nav {
     display: flex;
-    width: 300px;
+    align-items: flex-end;
     justify-content: center;
     z-index: 1;
-    margin-top: 39px;
 
     ul {
       display: flex;
-      align-items: center;
       font-size: $fs14;
       justify-content: center;
+      margin: 0;
     }
 
     li {
       a {
+        display: flex;
         align-items: center;
+        flex-basis: 140px;
         border-bottom: 3px solid transparent;
         color: $color-gray-30;
-        display: flex;
         height: 40px;
         padding: $size-1 $size-5;
-        flex-basis: 140px;
 
         &:hover {
           color: $color-black;
@@ -71,6 +74,8 @@
 
   .dashboard-title {
     display: flex;
+    align-items: center;
+
     h1 {
       color: $color-black;
       display: flex;
@@ -103,6 +108,12 @@
     }
   }
 
+  .dashboard-buttons {
+    display: flex;
+    justify-content: end;
+    align-items: center;
+  }
+
   .dashboard-header-actions {
     display: flex;
   }

frontend/resources/styles/main/partials/dashboard-team.scss

@@ -4,7 +4,7 @@
   padding: 14px;
   box-shadow: 0px 4px 8px rgba($color-black, 0.25);
   border-radius: 8px;
-  width: 414px;
+  width: 500px;
   position: fixed;
 
   form {
@@ -18,12 +18,12 @@
   }
 
   .custom-input {
-    width: 272px;
+    width: 314px;
     margin-right: 10px;
   }
 
   .custom-select {
-    width: 103px;
+    width: 160px;
     overflow: hidden;
   }
 
@@ -40,7 +40,20 @@
   }
 }
 
-.dashboard-team-members {
+.dashboard-team-members,
+.dashboard-team-invitations {
+  .empty-invitations {
+    height: 156px;
+    max-width: 1040px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    border: 1px dashed $color-gray-20;
+    margin-top: 16px;
+  }
+
   .table-row {
     background-color: $color-white;
     height: 63px;
@@ -88,13 +101,16 @@
       .rol-selector {
         &.has-priv {
           border: 1px solid $color-gray-20;
+          cursor: pointer;
         }
         min-width: 160px;
         height: 32px;
         display: flex;
         justify-content: space-between;
+        align-items: center;
         border-radius: 2px;
         padding: 3px 8px;
+        font-size: $fs14;
       }
     }
 
@@ -105,6 +121,30 @@
         min-width: 180px;
       }
     }
+
+    &.status {
+      .status-badge {
+        color: $color-white;
+        border-radius: 12px;
+        min-width: 74px;
+        height: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &.pending {
+          background-color: $color-warning;
+        }
+
+        &.expired {
+          background-color: $color-gray-20;
+        }
+
+        .status-label {
+          font-size: $fs12;
+        }
+      }
+    }
   }
 
   .dropdown {

frontend/resources/styles/main/partials/dashboard.scss

@@ -90,14 +90,25 @@
   margin-top: 20px;
   font-size: $fs16;
 
+  &.team-members {
+    margin-bottom: 52px;
+  }
+
+  &.invitations {
+    .table-row {
+      display: grid;
+      grid-template-columns: 43% 1fr 109px 12px;
+    }
+  }
+
   .table-header {
+    display: grid;
+    grid-template-columns: 43% 1fr 109px 12px;
     max-width: 1040px;
-    display: flex;
     background-color: $color-white;
     color: $color-gray-30;
     width: 100%;
     height: 40px;
-    align-items: center;
     padding: 0px 16px;
   }