redis: add key modal style

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 {

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}