feat: move appname input to settings

Author: Naturalclar

src/components/common/Settings.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
-import { Popover, Button, Checkbox } from 'antd'
+import { Popover, Button, Checkbox, Form, Input } from 'antd'
 import { SHOW_LATEST_RCS } from '../../utils'
 
-const Settings = ({ handleSettingsChange }) => {
+const Settings = ({ handleSettingsChange, appName, setAppName }) => {
   const [popoverVisibility, setVisibility] = useState(false)
 
   const handleClickChange = visibility => setVisibility(visibility)
@@ -14,11 +14,23 @@ const Settings = ({ handleSettingsChange }) => {
     <Popover
       placement="bottomRight"
       content={
-        <Checkbox.Group onChange={updateCheckboxValues}>
-          <div>
-            <Checkbox value={SHOW_LATEST_RCS}>{SHOW_LATEST_RCS}</Checkbox>
-          </div>
-        </Checkbox.Group>
+        <Form>
+          <Form.Item>
+            <Checkbox.Group onChange={updateCheckboxValues}>
+              <div>
+                <Checkbox value={SHOW_LATEST_RCS}>{SHOW_LATEST_RCS}</Checkbox>
+              </div>
+            </Checkbox.Group>
+          </Form.Item>
+          <Form.Item label="Your AppName">
+            <Input
+              value={appName}
+              onChange={e => {
+                setAppName(e.target.value)
+              }}
+            />
+          </Form.Item>
+        </Form>
       }
       trigger="click"
       visible={popoverVisibility}

src/components/pages/Home.js

@@ -44,15 +44,6 @@ const TitleHeader = styled.h1`
   margin-left: 15px;
 `
 
-const AppNameInput = styled.input`
-  border-radius: 5px;
-  outline: none;
-  border: solid 1px #ddd;
-  padding: 8px;
-  width: 50%;
-  margin-bottom: 8px;
-`
-
 const StarButton = styled(({ className, ...props }) => (
   <div className={className}>
     <GitHubButton {...props} />
@@ -121,17 +112,13 @@ const Home = () => {
             Star
           </StarButton>
 
-          <Settings handleSettingsChange={handleSettingsChange} />
+          <Settings
+            handleSettingsChange={handleSettingsChange}
+            appName={appName}
+            setAppName={setAppName}
+          />
         </TitleContainer>
 
-        <h4>Enter your App Name.</h4>
-        <AppNameInput
-          value={appName}
-          onChange={e => {
-            setAppName(e.target.value)
-          }}
-        />
-
         <VersionSelector
           showDiff={handleShowDiff}
           showReleaseCandidates={settings[SHOW_LATEST_RCS]}