🛠 modify landing page

kitze · kitze · commit 57760fc46309 · 2016-09-25T15:05:19.000+02:00
diff --git a/packages/react-scripts/template/src/App.js b/packages/react-scripts/template/src/App.js
@@ -12,11 +12,18 @@ class App extends Component {
       <div className="App">
         <div className="App-header">
           <img src={logo} className="App-logo" alt="logo"/>
-          <h2 className="App-title"> ☢ Customizable create-react-app ☢ </h2>
+          <h2 className="App-title"> ☢ custom-react-scripts ☢ </h2>
+          <div className="App-subtitle"> allow custom config for create-react-app without ejecting</div>
         </div>
 
         <div className={styles.description}>
-          <p> If you want to enable certain features just modify the <b>.env</b> file in the root directory of this
+
+          <div className={styles.command}>
+            <code>create-react-app my-app --scripts-version custom-react-scripts</code>
+          </div>
+
+          <p> If you want to enable/disable certain features just modify the <b>.env</b> file in the root directory of
+              the
               project.
           </p>
 
@@ -60,7 +67,7 @@ class App extends Component {
           <ul className="configs babel-configs">
             <li>
               <code>REACT_APP_WEBPACK_DASHBOARD=true</code>
-              <span>- Enable webpack-dashboard ⚠️ (this will turn off the original create-react-app message logs)</span>
+              <span>- Enable webpack-dashboard ⚠️ <span className={styles.experimental}>(experimental)</span> </span>
             </li>
           </ul>
 
@@ -76,6 +83,11 @@ class App extends Component {
             </li>
           </ul>
 
+          <br/>
+          <br/>
+          <a target="_blank" className={styles.readmeLink} href="https://github.com/kitze/create-react-app/tree/master/packages/react-scripts">
+            Link to full README.md
+          </a>
         </div>
       </div>
     )
diff --git a/packages/react-scripts/template/src/App.less b/packages/react-scripts/template/src/App.less
@@ -2,4 +2,9 @@
   &-title {
     justify-content: center;
   }
+
+  &-subtitle {
+    font-weight: 100;
+  }
+
 }
diff --git a/packages/react-scripts/template/src/App.scss b/packages/react-scripts/template/src/App.scss
@@ -17,7 +17,7 @@
 .App {
   &-header {
     background-color: #222;
-    height: 150px;
+    height: 180px;
     padding: 20px;
     color: white;
     text-align: center;
@@ -32,13 +32,14 @@
   li {
     margin: 15px 0px;
   }
-  code {
-    border-radius: 3px;
-    padding: 2px 10px;
-    font-size: 17px;
-    margin-right: 10px;
-    background-color: rgba(222, 222, 222, 0.34);
-    border: 1px solid #cccccc;
-    color: #868686;
-  }
+}
+
+code {
+  border-radius: 3px;
+  padding: 2px 10px;
+  font-size: 17px;
+  margin-right: 10px;
+  background-color: rgba(222, 222, 222, 0.34);
+  border: 1px solid #cccccc;
+  color: #868686;
 }
diff --git a/packages/react-scripts/template/src/Modules.css b/packages/react-scripts/template/src/Modules.css
@@ -18,4 +18,17 @@
     line-height: 20px;
     font-weight: 100;
     color: #e68484;
+}
+
+.command {
+    margin: 40px 0px 50px 0;
+}
+
+.readmeLink {
+    font-size: 18px;
+}
+
+.experimental {
+    font-size: 12px;
+    font-weight: 100;
 }

Original file line number	Diff line number	Diff line change
`@@ -2,4 +2,9 @@`
`2`	`2`	`&-title {`
`3`	`3`	`justify-content: center;`
`4`	`4`	`}`
	`5`	`+`
	`6`	`+ &-subtitle {`
	`7`	`+ font-weight: 100;`
	`8`	`+ }`
	`9`	`+`
`5`	`10`	`}`