From e1e7c2d4d86d7aeb40357add27c76a99a18350e7 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Mon, 21 Sep 2020 21:15:46 +0900
Subject: Introduce styled-components on top of form

---
 src/settings/components/form/PartialBlacklistForm.tsx | 9 +++++++--
 src/settings/components/form/SearchForm.tsx           | 9 +++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

(limited to 'src/settings/components/form')

diff --git a/src/settings/components/form/PartialBlacklistForm.tsx b/src/settings/components/form/PartialBlacklistForm.tsx
index 4c6bd35..dcdd00c 100644
--- a/src/settings/components/form/PartialBlacklistForm.tsx
+++ b/src/settings/components/form/PartialBlacklistForm.tsx
@@ -6,6 +6,11 @@ import Blacklist, { BlacklistItem } from "../../../shared/settings/Blacklist";
 
 const Grid = styled.div``;
 
+const GridHeader = styled.div`
+  display: flex;
+  font-weight: bold;
+`;
+
 const GridRow = styled.div`
   display: flex;
 `;
@@ -48,10 +53,10 @@ class PartialBlacklistForm extends React.Component<Props> {
     return (
       <>
         <Grid>
-          <GridRow>
+          <GridHeader>
             <GridCell>URL</GridCell>
             <GridCell>Keys</GridCell>
-          </GridRow>
+          </GridHeader>
           {this.props.value.items.map((item, index) => {
             if (!item.partial) {
               return null;
diff --git a/src/settings/components/form/SearchForm.tsx b/src/settings/components/form/SearchForm.tsx
index 3ba0299..cc7061a 100644
--- a/src/settings/components/form/SearchForm.tsx
+++ b/src/settings/components/form/SearchForm.tsx
@@ -6,6 +6,11 @@ import { FormSearch } from "../../../shared/SettingData";
 
 const Grid = styled.div``;
 
+const GridHeader = styled.div`
+  display: flex;
+  font-weight: bold;
+`;
+
 const GridRow = styled.div`
   display: flex;
 `;
@@ -50,11 +55,11 @@ class SearchForm extends React.Component<Props> {
     return (
       <>
         <Grid>
-          <GridRow>
+          <GridHeader>
             <GridCell>Name</GridCell>
             <GridCell>URL</GridCell>
             <GridCell>Default</GridCell>
-          </GridRow>
+          </GridHeader>
           {value.engines.map((engine, index) => {
             return (
               <GridRow key={index}>
-- 
cgit v1.2.3