feat: new logo

.gitignore

@@ -96,3 +96,5 @@ typings/
 .dynamodb/
 
 # End of https://www.gitignore.io/api/node
+
+.now

web/public/browserconfig.xml

@@ -3,7 +3,7 @@
     <msapplication>
         <tile>
             <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#5180fc</TileColor>
+            <TileColor>#6f3dff</TileColor>
         </tile>
     </msapplication>
 </browserconfig>

web/public/logo.svg

@@ -0,0 +1,10 @@
+<svg width="523" height="100" viewBox="0 0 523 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0H523V100H0V0Z" fill="white"/>
+<path d="M52.4709 36.7859C53.9558 36.7357 54.9692 36.0975 54.9692 32.4227C54.9692 27.1563 50.3204 20.26 50.3204 20.26C50.3204 20.26 45.6715 27.1563 45.6715 32.4227C45.6715 36.1841 46.7333 36.7641 48.2756 36.7885C49.3595 34.8837 50.374 33.5461 50.374 33.5461C50.374 33.5461 51.3876 34.8824 52.4709 36.7859Z" fill="#6F3DFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 0C8.95431 0 0 8.9543 0 20V80C0 91.0457 8.9543 100 20 100H80C91.0457 100 100 91.0457 100 80V20C100 8.95431 91.0457 0 80 0H20ZM41.0129 59.5398C41.2423 60.3792 41.5372 61.1744 41.8918 61.9746H41.2502C39.9188 61.9746 38.5412 61.6451 37.9122 60.6285C36.7712 58.7842 36.3267 55.6689 36.4581 51.906C36.0251 40.743 41.941 21.288 50.0851 14.8438C58.1397 21.1824 64.0046 40.7339 63.5762 51.9179C63.7064 55.6946 63.2642 58.8164 62.1289 60.6489C61.5068 61.6531 60.1443 61.9746 58.8287 61.9746H58.1082C58.4626 61.1751 58.7572 60.3805 58.9866 59.5418C58.9339 59.5428 58.8813 59.5433 58.8287 59.5433H41.2502C41.1712 59.5433 41.092 59.5422 41.0129 59.5398ZM25.7812 62.0307C25.7812 54.4384 28.9283 47.7865 33.6446 44.0935C33.1621 46.77 32.8617 49.366 32.775 51.7487C32.6342 55.615 33.0251 59.4907 34.6625 62.1374C36.1102 64.4773 38.8374 65.054 40.6355 65.152C36.0336 66.0301 31.985 70.5963 29.2817 75C27.0889 71.4281 25.7812 66.9248 25.7812 62.0307ZM59.3813 65.1552C63.9763 66.0412 68.0183 70.6017 70.7184 75C72.9111 71.4281 74.2188 66.9248 74.2188 62.0307C74.2188 54.4658 71.0943 47.8344 66.4063 44.1335C66.8803 46.8054 67.1751 49.3963 67.2599 51.773C67.3978 55.6413 67.0105 59.5236 65.3776 62.1594C63.9179 64.5157 61.1561 65.0682 59.3813 65.1552ZM54.6755 67.6636C54.6755 69.9787 49.9999 85.3516 49.9999 85.3516C49.9999 85.3516 45.3244 69.9787 45.3244 67.6636C45.3244 65.3484 47.4177 61.7866 49.9999 61.7866C52.5822 61.7866 54.6755 65.3484 54.6755 67.6636Z" fill="#6F3DFF"/>
+<path d="M149.387 48.9921C149.387 38.3716 154.396 31.7338 164.353 31.7338C174.249 31.7338 179.258 38.3716 179.258 48.9921V82H194.404V48.9921C194.404 29.4408 183.844 19.122 166.766 19.122C160.31 19.122 152.043 22.0185 149.387 29.7425V20.3289H134.241V82H149.387V48.9921Z" fill="#6F3DFF"/>
+<path d="M254.178 20.3289V30.6476C250.316 22.8633 240.721 19.122 233.118 19.122C214.049 19.122 202.825 32.9407 202.825 51.1644C202.825 69.3882 214.049 83.2069 233.118 83.2069C240.721 83.2069 250.316 79.4656 254.178 71.6812V82H269.324V20.3289H254.178ZM236.256 70.5347C223.463 70.5347 218.334 61.2418 218.334 51.1644C218.334 41.0871 223.463 31.7942 236.256 31.7942C249.048 31.7942 254.178 41.0871 254.178 51.1644C254.178 61.2418 249.048 70.5347 236.256 70.5347Z" fill="#6F3DFF"/>
+<path d="M280.099 82H295.245V46.0352C295.245 37.5268 298.866 31.7338 307.253 31.7338C315.641 31.7338 319.262 37.5268 319.262 46.0352V82H334.408V46.0352C334.408 37.5268 338.029 31.7338 346.416 31.7338C354.804 31.7338 358.425 37.5268 358.425 46.0352V82H373.571V46.0352C373.571 27.027 363.494 19.122 348.709 19.122C340.322 19.122 333.08 23.2254 329.762 27.6304C326.081 22.5012 319.262 19.122 309.546 19.122C303.452 19.122 297.297 22.3202 295.245 26.0012V20.3289H280.099V82Z" fill="#6F3DFF"/>
+<path d="M433.345 20.3289V30.6476C429.483 22.8633 419.888 19.122 412.285 19.122C393.216 19.122 381.993 32.9407 381.993 51.1644C381.993 69.3882 393.216 83.2069 412.285 83.2069C419.888 83.2069 429.483 79.4656 433.345 71.6812V82H448.491V20.3289H433.345ZM415.423 70.5347C402.63 70.5347 397.501 61.2418 397.501 51.1644C397.501 41.0871 402.63 31.7942 415.423 31.7942C428.216 31.7942 433.345 41.0871 433.345 51.1644C433.345 61.2418 428.216 70.5347 415.423 70.5347Z" fill="#6F3DFF"/>
+<path d="M489.438 70.5951C477.128 70.6554 473.205 61.4228 473.205 57.0781H522.023C523.23 32.4579 510.679 19.122 489.438 19.122C468.197 19.122 456.852 32.9407 456.852 51.1644C456.852 69.4485 468.197 83.2069 489.438 83.2069C500.903 83.2069 510.437 80.5517 517.799 73.2502L508.627 64.1383C504.463 67.6382 498.731 70.5347 489.438 70.5951ZM473.205 45.1904C473.205 40.725 477.007 31.7338 489.438 31.7338C501.869 31.7338 505.67 40.725 505.67 45.1904H473.205Z" fill="#6F3DFF"/>
+</svg>

web/public/safari-pinned-tab.svg

@@ -9,25 +9,30 @@ Created by potrace 1.11, written by Peter Selinger 2001-2013
 </metadata>
 <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
 fill="#000000" stroke="none">
-<path d="M1665 3699 c-22 -4 -56 -10 -75 -13 -19 -3 -71 -17 -114 -32 -270
+<path d="M2472 4913 c-48 -48 -97 -101 -110 -118 -12 -16 -37 -50 -56 -75
--90 -450 -295 -481 -546 l-7 -53 197 1 197 1 20 59 c33 98 99 164 206 204 73
+-163 -219 -340 -589 -464 -970 -89 -273 -158 -567 -192 -820 -5 -41 -12 -93
-28 105 33 212 34 157 2 282 -47 367 -144 40 -47 79 -125 88 -180 10 -57 12
+-16 -115 -11 -70 -13 -637 -3 -700 24 -147 65 -266 109 -312 23 -25 70 -52
--210 4 -216 -7 -4 -101 -10 -294 -19 -329 -16 -360 -18 -484 -41 -198 -36
+103 -59 53 -12 147 -16 147 -7 0 6 -11 41 -25 77 -14 37 -25 71 -25 76 0 6
--337 -100 -441 -204 -109 -109 -154 -228 -153 -405 2 -189 77 -337 227 -450
+223 10 620 10 l620 0 -4 -23 c-2 -12 -13 -46 -25 -75 -12 -29 -21 -58 -21 -64
-84 -62 199 -112 303 -131 21 -4 47 -9 58 -12 11 -2 83 -6 160 -8 236 -5 416
+0 -13 132 -4 173 11 91 35 137 112 173 290 22 114 27 179 27 386 0 224 -7 329
-43 579 156 60 40 163 145 206 209 19 28 39 49 45 48 5 -2 24 -28 42 -58 41
+-34 524 -111 800 -458 1633 -825 1982 -33 30 -65 59 -72 63 -8 5 -43 -23 -100
--68 141 -171 213 -217 276 -180 681 -196 995 -39 121 60 228 154 302 266 39
+-81z m180 -403 c66 -115 135 -259 178 -370 86 -221 97 -505 24 -609 -17 -24
-59 87 172 98 234 l7 37 -201 0 -201 0 -27 -57 c-72 -152 -238 -241 -448 -241
+-70 -51 -102 -51 -13 0 -40 33 -86 105 -37 58 -71 107 -76 110 -7 4 -56 -64
--249 0 -440 124 -526 340 -25 63 -45 174 -44 243 l0 50 725 1 c399 1 730 2
+-124 -174 -27 -42 -29 -43 -68 -37 -57 9 -83 30 -109 89 -19 44 -22 70 -23
-737 3 12 1 11 255 -2 336 -42 271 -120 451 -262 601 -103 110 -272 204 -409
+177 -1 156 5 196 55 345 63 187 246 543 269 519 4 -5 32 -52 62 -104z"/>
-228 -16 3 -50 10 -76 14 -69 13 -261 7 -344 -11 -91 -20 -193 -60 -264 -105
+<path d="M1374 2928 c-147 -130 -269 -304 -357 -508 -32 -77 -79 -220 -92
--65 -41 -174 -148 -219 -214 -18 -27 -34 -48 -36 -48 -3 0 -19 25 -37 57 -41
+-289 -31 -153 -37 -205 -40 -371 -3 -223 7 -301 69 -551 21 -82 101 -270 148
-72 -135 164 -218 213 -71 42 -191 86 -279 102 -70 12 -293 17 -346 7z m1714
+-348 l21 -33 41 64 c165 255 385 470 576 560 36 17 85 37 110 43 44 13 45 13
--353 c13 -3 52 -18 86 -35 85 -39 163 -120 209 -214 36 -73 71 -214 64 -260
+15 19 -164 33 -243 67 -306 130 -98 99 -163 273 -186 496 -13 122 -6 467 11
-l-3 -22 -510 -1 c-280 0 -516 1 -522 4 -7 2 -11 7 -9 11 2 3 7 27 10 52 23
+556 2 10 7 46 11 79 3 33 12 90 19 128 7 37 12 67 11 67 -1 0 -24 -19 -51 -42z"/>
-174 136 345 274 417 67 35 117 50 192 58 30 4 56 7 57 8 3 3 119 -11 152 -18z
+<path d="M3704 2938 c9 -41 20 -122 31 -223 3 -33 8 -76 11 -95 3 -19 7 -120
-m-1095 -931 c-2 -130 -12 -183 -52 -260 -41 -80 -145 -176 -242 -223 -157 -75
+8 -225 5 -302 -24 -477 -107 -641 -67 -132 -230 -232 -389 -238 -33 -1 -18
--394 -73 -526 4 -155 91 -185 304 -61 425 78 75 195 112 397 123 170 10 295
+-12 40 -30 204 -63 448 -280 644 -574 l56 -84 27 46 c95 163 179 424 203 636
-18 297 19 1 1 43 2 95 2 l93 0 -1 -90z"/>
+9 76 9 350 0 432 -32 290 -143 574 -316 808 -38 52 -192 210 -204 210 -5 0 -6
+-10 -4 -22z"/>
+<path d="M2502 1735 c-79 -24 -153 -94 -207 -196 -38 -73 -63 -165 -58 -219 7
+-89 89 -411 203 -800 44 -151 83 -284 85 -295 15 -63 33 -107 38 -98 5 9 82
+262 92 303 2 8 28 101 59 205 47 162 127 463 141 530 32 150 34 177 19 245
+-50 220 -221 369 -372 325z"/>
 </g>
 </svg>

web/public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

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}>
+      <Logo to="/" onClick={onLogoClick}>
-        <Link to="/">namae</Link>
+        <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`
+const Logo = styled(Link)`
-  margin-bottom: 5px;
+  display: flex;
-  text-align: center;
+  flex-direction: row;
-  font-family: 'Montserrat', sans-serif;
+  align-items: center;
-  font-weight: 900;
+  margin-bottom: 12px;
-  font-size: 20px;
+  margin-top: 5px;
-  color: #4a90e2;
   cursor: pointer;
 
   ${mobile} {
     font-size: 15px;
   }
+`;
 
-  a:link,
+const LogoImage = styled.img`
-  a:active,
+  width: 140px;
-  a:visited {
-    text-decoration: none;
-    color: #4a90e2;
-  }
 
-  a:hover {
+  ${mobile} {
-    text-decoration: none;
+    width: 90px;
-    color: #0075ff;
   }
 `;
 
@@ -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: 0 10px;
-  padding: 3px 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`