feat: new logo

web/src/App.tsx

@@ -104,7 +104,7 @@ const Content = styled.div`
 
 const Header = styled.header`
   padding: 0 40px;
-  background-image: linear-gradient(180deg, #a2d4ff 0%, #ac57ff 99%);
+  background-image: linear-gradient(180deg, #bda2ff 0%, #1b24cc 99%);
 
   ${mobile} {
     padding: 0 20px;

web/src/components/Form.tsx

@@ -62,8 +62,8 @@ const Form: React.FC<{
 
   return (
     <InputContainer>
-      <Logo onClick={onLogoClick}>
-        <Link to="/">namae</Link>
+      <Logo to="/" onClick={onLogoClick}>
+        <LogoImage src="/logo.svg" />
       </Logo>
       <InputView
         onChange={onInputChange}
@@ -82,6 +82,9 @@ const Form: React.FC<{
 export default Form;
 
 const InputContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   padding: 30px;
   transform: translateY(40px);
   border-radius: 50px;
@@ -95,29 +98,24 @@ const InputContainer = styled.div`
   }
 `;
 
-const Logo = styled.div`
-  margin-bottom: 5px;
-  text-align: center;
-  font-family: 'Montserrat', sans-serif;
-  font-weight: 900;
-  font-size: 20px;
-  color: #4a90e2;
+const Logo = styled(Link)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 12px;
+  margin-top: 5px;
   cursor: pointer;
 
   ${mobile} {
     font-size: 15px;
   }
+`;
 
-  a:link,
-  a:active,
-  a:visited {
-    text-decoration: none;
-    color: #4a90e2;
-  }
+const LogoImage = styled.img`
+  width: 140px;
 
-  a:hover {
-    text-decoration: none;
-    color: #0075ff;
+  ${mobile} {
+    width: 90px;
   }
 `;
 
@@ -139,4 +137,8 @@ const InputView = styled.input.attrs({
   ${mobile} {
     font-size: 2rem;
   }
+
+  ::placeholder {
+    color: #c8cdda;
+  }
 `;

web/src/components/Suggestion.tsx

@@ -222,18 +222,21 @@ const Container = styled.div`
 `;
 
 const Title = styled.div`
-  margin-top: 20px;
-  padding: 3px 10px;
+  padding: 0 10px;
   color: gray;
   border: 1px solid gray;
   border-radius: 2em;
   text-transform: uppercase;
   font-size: 12px;
   user-select: none;
+
+  ${mobile} {
+    margin-top: 15px;
+  }
 `;
 
 const Items = styled.div`
-  margin-top: 2px;
+  margin: 5px 0;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -246,12 +249,13 @@ const Items = styled.div`
 `;
 
 const Item = styled.div`
-  margin-top: 8px;
+  margin-top: 10px;
   margin-right: 14px;
   cursor: pointer;
   font-weight: bold;
   font-family: monospace;
   font-size: 1.5rem;
+  line-height: 1em;
   border-bottom: 1px dashed black;
   color: black;
 

web/src/components/Welcome.tsx

@@ -131,7 +131,7 @@ const Welcome: React.FC = () => {
 export default Welcome;
 
 const Container = styled.div`
-  margin-top: 60px;
+  margin-top: 30px;
   padding-bottom: 40px;
   text-align: center;
   font-size: 1.5rem;
@@ -146,7 +146,7 @@ const Container = styled.div`
 const HeroTitle = styled.h1`
   padding-bottom: 30px;
   line-height: 1em;
-  font-size: 4rem;
+  font-size: 5rem;
   font-weight: 700;
 
   ${mobile} {
@@ -206,7 +206,7 @@ const HighlightedList = styled.div`
   padding: 50px 20vw 50px 20vw;
   color: white;
   /* background-image: linear-gradient(180deg, #a57bf3 0%, #4364e1 100%); */
-  background: #342d3e;
+  background: #632bec;
 `;
 
 const ListItem = styled.div`