From 0fc724bc21d4d95bb7c1cb0fb460e44b0b1190eb Mon Sep 17 00:00:00 2001
From: Yasuaki Uechi <y@uechi.io>
Date: Thu, 1 Aug 2019 02:01:20 +0900
Subject: [PATCH] style: set bg color white when desktop browser

---
 web/src/App.js    | 73 +++++++++++++++++++++++++++++------------------
 web/src/index.css |  1 -
 2 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/web/src/App.js b/web/src/App.js
index e25d1da..fbc0f72 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled, { createGlobalStyle } from 'styled-components'
 
 import { useDeferredState } from './hooks/state'
 import { mobile } from './util/css'
@@ -26,37 +26,50 @@ export default function App() {
   }
 
   return (
-    <Content>
-      <Header>
-        <InputContainer>
-          <Logo>namæ</Logo>
-          <Input onChange={onChange} />
-        </InputContainer>
-      </Header>
+    <>
+      <GlobalStyle />
+      <Content>
+        <Header>
+          <InputContainer>
+            <Logo>namæ</Logo>
+            <Input onChange={onChange} />
+          </InputContainer>
+        </Header>
 
-      {query && query.length > 0 ? (
-        <Cards>
-          <CardHeader>Result for {query}</CardHeader>
-          <CardContainer>
-            <DomainCard name={query} />
-            <GithubCard name={query} />
-            <HomebrewCard name={query} />
-            <NpmCard name={query} />
-            <PypiCard name={query} />
-            <CratesioCard name={query} />
-            <TwitterCard name={query} />
-            <SlackCard name={query} />
-            <S3Card name={query} />
-            <JsOrgCard name={query} />
-          </CardContainer>
-          <EventReporter query={query} />
-        </Cards>
-      ) : null}
-      <Footer />
-    </Content>
+        {query && query.length > 0 ? (
+          <Cards>
+            <CardHeader>Result for {query}</CardHeader>
+            <CardContainer>
+              <DomainCard name={query} />
+              <GithubCard name={query} />
+              <HomebrewCard name={query} />
+              <NpmCard name={query} />
+              <PypiCard name={query} />
+              <CratesioCard name={query} />
+              <TwitterCard name={query} />
+              <SlackCard name={query} />
+              <S3Card name={query} />
+              <JsOrgCard name={query} />
+            </CardContainer>
+            <EventReporter query={query} />
+          </Cards>
+        ) : null}
+        <Footer />
+      </Content>
+    </>
   )
 }
 
+const GlobalStyle = createGlobalStyle`
+body {
+  background: #ffffff;
+
+  ${mobile} {
+    background: #f5f5f5;
+  }
+}
+`
+
 const Content = styled.div``
 
 const Header = styled.header`
@@ -89,6 +102,10 @@ const Logo = styled.div`
   font-weight: bold;
   font-size: 20px;
   color: #4a90e2;
+
+  ${mobile} {
+    font-size: 15px;
+  }
 `
 
 const Input = styled.input.attrs({
diff --git a/web/src/index.css b/web/src/index.css
index 026af7c..f164af2 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -11,7 +11,6 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background: #f5f5f5;
 }
 
 code {