Migrate Vanilla CSS to styled-components

6 files changed, 133 insertions, 150 deletions

diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx
index a0e22e4..a23c459 100644
--- a/src/console/components/Console.tsx
+++ b/src/console/components/Console.tsx
@@ -11,6 +11,13 @@ import CommandLineParser, {
 } from "../commandline/CommandLineParser";
 import { Command } from "../../shared/Command";
 import ColorScheme from "../../shared/ColorScheme";
+import { LightTheme, DarkTheme } from "./Theme";
+import styled from "./Theme";
+import { ThemeProvider } from "styled-components";
+
+const ConsoleWrapper = styled.div`
+  border-top: 1px solid gray;
+`;
 
 const COMPLETION_MAX_ITEMS = 33;
 
@@ -143,28 +150,34 @@ class Console extends React.Component<Props> {
       case "command":
       case "find":
         return (
-          <div data-theme={theme} className="vimvixen-console-command-wrapper">
-            <Completion
-              size={COMPLETION_MAX_ITEMS}
-              completions={this.props.completions}
-              select={this.props.select}
-            />
-            <Input
-              ref={this.input}
-              mode={this.props.mode}
-              onBlur={this.onBlur.bind(this)}
-              onKeyDown={this.onKeyDown.bind(this)}
-              onChange={this.onChange.bind(this)}
-              value={this.props.consoleText}
-            />
-          </div>
+          <ThemeProvider
+            theme={theme === ColorScheme.Dark ? DarkTheme : LightTheme}
+          >
+            <ConsoleWrapper>
+              <Completion
+                size={COMPLETION_MAX_ITEMS}
+                completions={this.props.completions}
+                select={this.props.select}
+              />
+              <Input
+                ref={this.input}
+                mode={this.props.mode}
+                onBlur={this.onBlur.bind(this)}
+                onKeyDown={this.onKeyDown.bind(this)}
+                onChange={this.onChange.bind(this)}
+                value={this.props.consoleText}
+              />
+            </ConsoleWrapper>
+          </ThemeProvider>
         );
       case "info":
       case "error":
         return (
-          <div data-theme={theme}>
+          <ThemeProvider
+            theme={theme === ColorScheme.Dark ? DarkTheme : LightTheme}
+          >
             <Message mode={this.props.mode}>{this.props.messageText}</Message>
-          </div>
+          </ThemeProvider>
         );
       default:
         return null;
diff --git a/src/console/components/console.scss b/src/console/components/console.scss
index ccb769b..c9ffae7 100644
--- a/src/console/components/console.scss
+++ b/src/console/components/console.scss
@@ -33,6 +33,18 @@
 html, body, * {
   margin: 0;
   padding: 0;
+
+  font-style: normal;
+  font-family: monospace;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+input {
+  font-style: normal;
+  font-family: monospace;
+  font-size: 12px;
+  line-height: 16px;
 }
 
 body {
@@ -47,95 +59,4 @@ body {
   bottom: 0;
   margin: 0;
   padding: 0;
-
-  @mixin console-font {
-    font-style: normal;
-    font-family: monospace;
-    font-size: 12px;
-    line-height: 16px;
-  }
-
-  &-command-wrapper {
-    border-top: 1px solid gray;
-  }
-
-  &-completion {
-    @include console-font;
-
-    &-title {
-      background-color: var(--completion-title-background);
-      color: var(--completion-title-foreground);
-      font-weight: bold;
-      margin: 0;
-      padding: 0;
-    }
-
-    &-item {
-      background-color: var(--completion-item-background);
-      color: var(--completion-item-foreground);
-
-      padding-left: 1.5rem;
-      background-position: 0 center;
-      background-size: contain;
-      background-repeat: no-repeat;
-      white-space: pre;
-
-      &.vimvixen-completion-selected {
-        background-color: var(--completion-selected-background);
-        color: var(--completion-selected-foreground);
-      }
-
-      &-caption {
-        display: inline-block;
-        width: 40%;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-
-      &-url {
-        display: inline-block;
-        color: var(--completion-item-description-foreground);
-        width: 60%;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-    }
-  }
-
-  &-message {
-    @include console-font;
-
-    border-top: 1px solid gray;
-  }
-
-  &-error {
-    background-color: var(--console-error-background);
-    color: var(--console-error-foreground);
-    font-weight: bold;
-  }
-
-  &-info {
-    background-color: var(--console-info-background);
-    color: var(--console-info-foreground);
-    font-weight: normal;
-  }
-
-  &-command {
-    background-color: var(--command-background);
-    color: var(--command-foreground);
-    display: flex;
-
-    &-prompt {
-      @include console-font;
-    }
-
-    &-input {
-      border: none;
-      flex-grow: 1;
-      background-color: var(--command-background);
-      color: var(--command-foreground);
-
-      @include console-font;
-    }
-  }
 }
diff --git a/src/console/components/console/CompletionItem.tsx b/src/console/components/console/CompletionItem.tsx
index 657f360..da07bf0 100644
--- a/src/console/components/console/CompletionItem.tsx
+++ b/src/console/components/console/CompletionItem.tsx
@@ -1,5 +1,37 @@
 import React from "react";
-import PropTypes from "prop-types";
+import styled from "../Theme";
+
+const Container = styled.li<{ icon: string; highlight: boolean }>`
+  backgroundimage: ${({ icon }) => "url(" + icon + ")"};
+  background-color: ${({ highlight, theme }) =>
+    highlight
+      ? theme.completionSelectedBackground
+      : theme.completionItemBackground};
+  color: ${({ highlight, theme }) =>
+    highlight
+      ? theme.completionSelectedForeground
+      : theme.completionItemForeground};
+  padding-left: 1.5rem;
+  background-position: 0 center;
+  background-size: contain;
+  background-repeat: no-repeat;
+  white-space: pre;
+`;
+
+const Caption = styled.span`
+  display: inline-block;
+  width: 40%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
+const Description = styled.span`
+  display: inline-block;
+  color: ${({ theme }) => theme.completionItemDescriptionForeground};
+  width: 60%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
 
 interface Props {
   highlight: boolean;
@@ -8,28 +40,11 @@ interface Props {
   icon?: string;
 }
 
-const CompletionItem = (props: Props) => {
-  let className = "vimvixen-console-completion-item";
-  if (props.highlight) {
-    className += " vimvixen-completion-selected";
-  }
-  return (
-    <li
-      className={className}
-      style={{ backgroundImage: "url(" + props.icon + ")" }}
-    >
-      <span className="vimvixen-console-completion-item-caption">
-        {props.caption}
-      </span>
-      <span className="vimvixen-console-completion-item-url">{props.url}</span>
-    </li>
-  );
-};
-
-CompletionItem.propTypes = {
-  highlight: PropTypes.bool,
-  caption: PropTypes.string,
-  url: PropTypes.string,
-};
+const CompletionItem: React.FC<Props> = ({ highlight, caption, url, icon }) => (
+  <Container icon={icon || ""} highlight={highlight}>
+    <Caption>{caption}</Caption>
+    <Description>{url}</Description>
+  </Container>
+);
 
 export default CompletionItem;
diff --git a/src/console/components/console/CompletionTitle.tsx b/src/console/components/console/CompletionTitle.tsx
index 7257006..55c3c2e 100644
--- a/src/console/components/console/CompletionTitle.tsx
+++ b/src/console/components/console/CompletionTitle.tsx
@@ -1,11 +1,20 @@
 import React from "react";
+import styled from "../Theme";
+
+const Li = styled.li`
+  background-color: ${({ theme }) => theme.completionTitleBackground};
+  color: ${({ theme }) => theme.completionTitleForeground};
+  font-weight: bold;
+  margin: 0;
+  padding: 0;
+`;
 
 interface Props {
   title: string;
 }
 
-const CompletionTitle = (props: Props) => {
-  return <li className="vimvixen-console-completion-title">{props.title}</li>;
+const CompletionTitle: React.FC<Props> = ({ title }) => {
+  return <Li>{title}</Li>;
 };
 
 export default CompletionTitle;
diff --git a/src/console/components/console/Input.tsx b/src/console/components/console/Input.tsx
index e412a0c..61fbc46 100644
--- a/src/console/components/console/Input.tsx
+++ b/src/console/components/console/Input.tsx
@@ -1,4 +1,22 @@
 import React from "react";
+import styled from "../Theme";
+
+const Container = styled.div`
+  background-color: ${({ theme }) => theme.commandBackground};
+  color: ${({ theme }) => theme.commandForeground};
+  display: flex;
+`;
+
+const Prompt = styled.i`
+  font-style: normal;
+`;
+
+const InputInner = styled.input`
+  border: none;
+  flex-grow: 1;
+  background-color: ${({ theme }) => theme.commandBackground};
+  color: ${({ theme }) => theme.commandForeground};
+`;
 
 interface Props {
   mode: string;
@@ -32,9 +50,9 @@ class Input extends React.Component<Props> {
     }
 
     return (
-      <div className="vimvixen-console-command">
-        <i className="vimvixen-console-command-prompt">{prompt}</i>
-        <input
+      <Container>
+        <Prompt>{prompt}</Prompt>
+        <InputInner
           className="vimvixen-console-command-input"
           ref={this.input}
           onBlur={this.props.onBlur}
@@ -42,7 +60,7 @@ class Input extends React.Component<Props> {
           onChange={this.props.onChange}
           value={this.props.value}
         />
-      </div>
+      </Container>
     );
   }
 }
diff --git a/src/console/components/console/Message.tsx b/src/console/components/console/Message.tsx
index fd1c9d7..e039020 100644
--- a/src/console/components/console/Message.tsx
+++ b/src/console/components/console/Message.tsx
@@ -1,24 +1,31 @@
 import React from "react";
+import styled from "../Theme";
+
+const Error = styled.p`
+  border-top: 1px solid gray;
+  background-color: ${({ theme }) => theme.consoleErrorBackground};
+  color: ${({ theme }) => theme.consoleErrorForeground};
+  font-weight: bold;
+`;
+
+const Info = styled.p`
+  border-top: 1px solid gray;
+  background-color: ${({ theme }) => theme.consoleInfoBackground};
+  color: ${({ theme }) => theme.consoleInfoForeground};
+  font-weight: normal;
+`;
 
 interface Props {
   mode: string;
   children: string;
 }
 
-const Message = (props: Props) => {
-  switch (props.mode) {
+const Message: React.FC<Props> = ({ mode, children }) => {
+  switch (mode) {
     case "error":
-      return (
-        <p className="vimvixen-console-message vimvixen-console-error">
-          {props.children}
-        </p>
-      );
+      return <Error>{children}</Error>;
     case "info":
-      return (
-        <p className="vimvixen-console-message vimvixen-console-info">
-          {props.children}
-        </p>
-      );
+      return <Info>{children}</Info>;
   }
   return null;
 };