1 files changed, 19 insertions, 8 deletions
diff --git a/src/settings/components/form/KeymapsForm.tsx b/src/settings/components/form/KeymapsForm.tsx
index b9af0df..6582529 100644
--- a/src/settings/components/form/KeymapsForm.tsx
+++ b/src/settings/components/form/KeymapsForm.tsx
@@ -1,9 +1,21 @@
-import "./KeymapsForm.scss";
 import React from "react";
-import Input from "../ui/Input";
+import styled from "styled-components";
+import Text from "../ui/Text";
 import keymaps from "../../keymaps";
 import { FormKeymaps } from "../../../shared/SettingData";
 
+const Grid = styled.div`
+  column-count: 3;
+`;
+
+const FieldGroup = styled.div`
+  margin-top: 24px;
+
+  &:first-of-type {
+    margin-top: 24px;
+  }
+`;
+
 interface Props {
   value: FormKeymaps;
   onChange: (e: FormKeymaps) => void;
@@ -20,15 +32,14 @@ class KeymapsForm extends React.Component<Props> {
   render() {
     const values = this.props.value.toJSON();
     return (
-      <div className="form-keymaps-form">
+      <Grid>
         {keymaps.fields.map((group, index) => {
           return (
-            <div key={index} className="form-keymaps-form-field-group">
+            <FieldGroup key={index}>
               {group.map(([name, label]) => {
                 const value = values[name] || "";
                 return (
-                  <Input
-                    type="text"
+                  <Text
                     id={name}
                     name={name}
                     key={name}
@@ -39,10 +50,10 @@ class KeymapsForm extends React.Component<Props> {
                   />
                 );
               })}
-            </div>
+            </FieldGroup>
           );
         })}
-      </div>
+      </Grid>
     );
   }