From be4e3a8cb5a8f7c24ab5a8aa2040f446f7ad9188 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Tue, 28 Sep 2021 23:48:16 +0300
Subject: [PATCH] Update ApplicationsPopup layout (#228)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/ApplicationsPopup.svelte      | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/plugins/recruit-resources/src/components/ApplicationsPopup.svelte b/plugins/recruit-resources/src/components/ApplicationsPopup.svelte
index 9129ef5df3..266dced3c8 100644
--- a/plugins/recruit-resources/src/components/ApplicationsPopup.svelte
+++ b/plugins/recruit-resources/src/components/ApplicationsPopup.svelte
@@ -48,12 +48,13 @@
 
 <div class="flex-col">
   {#each applications as app}
-    <div class="flex-row-center app" on:click={() => show(app)}>
+    <div class="app" on:click={() => show(app)}>
       <div class="app-icon"><CircleButton icon={Vacancy} size={'large'} /></div>
       <div class="flex-grow flex-col">
         <div class="overflow-label label">{getApplicationLabel(app)}</div>
         <div class="overflow-label desc">Cisco</div>
       </div>
+      <div class="status" style="background-color: var(--primary-button-enabled)">status</div>
     </div>
   {/each}
 </div>
@@ -61,6 +62,10 @@
 <style lang="scss">
   .app {
     position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
     .app-icon {
       margin-right: 1.25rem;
       width: 2rem;
@@ -71,6 +76,15 @@
       font-size: .75rem;
       color: var(--theme-content-dark-color);
     }
+    .status {
+      margin-left: 1rem;
+      padding: .5rem .75rem;
+      text-transform: uppercase;
+      font-weight: 500;
+      font-size: .625rem;
+      color: #fff;
+      border-radius: .5rem;
+    }
   }
 
   .app + .app {