From 4bda19a57992f93f7133a101b41df6cc84a29721 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Tue, 7 Sep 2021 23:23:56 +0300
Subject: [PATCH] Layout StatePresenter (#157)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/StatePresenter.svelte      | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/plugins/view-resources/src/components/StatePresenter.svelte b/plugins/view-resources/src/components/StatePresenter.svelte
index 9d32ec087e..fdf0d7fa0e 100644
--- a/plugins/view-resources/src/components/StatePresenter.svelte
+++ b/plugins/view-resources/src/components/StatePresenter.svelte
@@ -15,11 +15,30 @@
 -->
 
 <script lang="ts">
+  import type { State } from '@anticrm/core'
 
-import type { State } from '@anticrm/core'
-
-export let value: State
+  export let value: State
 
+  const bgColor: string = '#7C6FCD'
 </script>
 
-{value.label}
+<div class="state-container" style="background-color: {bgColor}">
+  {value.label}
+</div>
+
+<style lang="scss">
+  .state-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: .375rem 1rem;
+    width: min-content;
+    text-transform: uppercase;
+    font-weight: 500;
+    letter-spacing: .5px;
+    font-size: .625rem;
+    color: #fff;
+    border: 1px solid rgba(0, 0, 0, .1);
+    border-radius: .5rem;
+  }
+</style>