From 5b39576e616aa192863dd5c90fe77122407957f6 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Thu, 24 Mar 2022 18:41:39 +0100
Subject: [PATCH] redis: add key modal style

---
 .../web/src/dbkeyvalue/DbKeyItemDetail.svelte |  7 +++--
 packages/web/src/modals/AddDbKeyModal.svelte  | 26 ++++++++++---------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/web/src/dbkeyvalue/DbKeyItemDetail.svelte b/packages/web/src/dbkeyvalue/DbKeyItemDetail.svelte
index 1b6174d05..472646d5d 100644
--- a/packages/web/src/dbkeyvalue/DbKeyItemDetail.svelte
+++ b/packages/web/src/dbkeyvalue/DbKeyItemDetail.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import _ from 'lodash';
+
   import AceEditor from '../query/AceEditor.svelte';
 
   export let dbKeyFields;
@@ -8,7 +10,7 @@
 
 <div class="props">
   {#each dbKeyFields as column}
-    <div class="colname">{column.name}</div>
+    <div class="colname">{_.startCase(column.name)}</div>
     <div class="colvalue">
       <AceEditor
         readOnly={!onChangeItem}
@@ -34,7 +36,8 @@
   }
 
   .colname {
-    margin: 10px;
+    margin-top: 20px;
+    color: var(--theme-font-3);
   }
 
   .colvalue {
diff --git a/packages/web/src/modals/AddDbKeyModal.svelte b/packages/web/src/modals/AddDbKeyModal.svelte
index aeff778c5..e62ae3dc8 100644
--- a/packages/web/src/modals/AddDbKeyModal.svelte
+++ b/packages/web/src/modals/AddDbKeyModal.svelte
@@ -26,10 +26,22 @@
 
 <FormProvider>
   <ModalBase {...$$restProps}>
-    <svelte:fragment slot="header">Add item</svelte:fragment>
+    <svelte:fragment slot="header">Add key</svelte:fragment>
 
     <div class="container">
-      <FormFieldTemplateLarge label="Type" type="combo">
+      <FormFieldTemplateLarge label="Key" type="text" noMargin>
+        <TextField
+          value={keyName}
+          on:change={e => {
+            // @ts-ignore
+            keyName = e.target.value;
+          }}
+        />
+      </FormFieldTemplateLarge>
+
+      <div class="m-3" />
+
+      <FormFieldTemplateLarge label="Type" type="combo" noMargin>
         <SelectField
           options={driver.supportedKeyTypes.map(t => ({ value: t.name, label: t.label }))}
           value={type}
@@ -40,16 +52,6 @@
         />
       </FormFieldTemplateLarge>
 
-      <FormFieldTemplateLarge label="Name" type="text">
-        <TextField
-          value={keyName}
-          on:change={e => {
-            // @ts-ignore
-            keyName = e.target.value;
-          }}
-        />
-      </FormFieldTemplateLarge>
-
       <DbKeyItemDetail
         dbKeyFields={driver.supportedKeyTypes.find(x => x.name == type).dbKeyFields}
         {item}