style all the things

iamtekeste · Jun 18, 2017 · 4fa09c2 · 4fa09c2
1 parent eeb1146
commit 4fa09c2
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 21 deletions.
diff --git a/public/index.html b/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <link href="https://fonts.googleapis.com/css?family=Montserrat:700|Roboto" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:400, 700|Roboto" rel="stylesheet">
     <title>Type Hero</title>
   </head>
   <body>

diff --git a/src/App.css b/src/App.css
@@ -1,3 +1,11 @@
+input:focus,
+select:focus {
+  outline-color: #fff;
+  box-radius: 0px;
+}
+select#fontsizes:focus {
+  outline: none;
+}
 input::-webkit-calendar-picker-indicator {
     opacity: 1;
 }
@@ -54,31 +62,85 @@ input::-webkit-calendar-picker-indicator {
   width: 40%;
   margin: 0 auto;
 }
-
+.text-styler {
+    max-width: 200px;
+}
 .tools {
   color: #FFF;
   padding-left: 15px;
 }
 .section-title {
-    font-size: 18px;
-    font-family: Roboto;
-    font-weight: bold;
-    text-transform: uppercase;
+  font-size: 18px;
+  font-family: Roboto;
+  font-weight: bold;
+  margin-bottom: 15px;
+  text-transform: uppercase;
 }
 
 /* Ediable select input */
 .font-size {
     position: relative;
     width: 60px;
+    float: right;
 }
 .font-size select {
     width: 100%;
 }
 .font-size > * {
     box-sizing: border-box;
-    height: 1.5em;
 }
 .font-size input {
     position: absolute;
     width: calc(100% - 20px);
 }
+
+/* Font selector */
+.react-autosuggest__input {
+  background: #000;
+  border: none;
+  color: #fff;
+  height: 30px;
+  padding-left: 10px;
+  margin-bottom: 15px;
+  min-width: 191px;
+}
+.react-autosuggest__suggestions-list {
+    margin-top: -14px;
+    list-style: none;
+    background: #000;
+    color: #fff;
+    max-width: 200px;
+    padding-left: 0px;
+}
+.react-autosuggest__suggestion {
+    padding: 8px 0px;
+    padding-left: 8px;
+}
+.react-autosuggest__suggestion--highlighted {
+    background: #fff;
+    color: #000;
+    cursor: pointer;
+}
+
+.variants, .font-size {
+    display: inline-block;
+}
+/* Font variant selector */
+.variants {
+  margin-right: 35px;
+}
+.variants select {
+  background: #000;
+  color: #fff;
+  height: 30px;
+  border:  0px;
+}
+
+/* Font size selector */
+.font-size input, select {
+  background: #000;
+  border: none;
+  color: #FFF;
+  height: 30px;
+  padding-left: 10px;
+}
diff --git a/src/App.js b/src/App.js
@@ -11,7 +11,7 @@ class App extends Component {
     this.state = {
       fontFamily: 'Montserrat',
       fontSize: 34,
-      fontWeight: 700,
+      fontWeight: 400,
       fontStyle: 'normal',
       textColor: '#9B51E0',
       backgroundColor: '#F8F3F3',

diff --git a/src/components/AutoSuggest.js b/src/components/AutoSuggest.js
@@ -108,20 +108,26 @@ export default class Algo extends Component {
 
     // only display the style selector only if they have selected a font
     let selectVariants = '';
-    if (value) {
-      let defaultValue = {
-        weight: '400',
+    let defaultValues = [
+      {
+        weight: 400,
         style: 'normal',
-      };
-      defaultValue = JSON.stringify(defaultValue);
-      selectVariants =
-        (
-          <select onChange={this.updateFontVariant}>
-            <option value={defaultValue}>Select Style</option>
-            {variants}
-          </select>
-        );
-    }
+      },
+      {
+        weight: 700,
+        style: 'normal',
+      },
+    ];
+    defaultValues = defaultValues.map(val => (
+      <option value={JSON.stringify(val)} key={val.weight+val.style}>{val.weight}</option>
+    ));
+    selectVariants =
+      (
+        <select onChange={this.updateFontVariant}>
+          {defaultValues}
+          {variants}
+        </select>
+      );
 
     return (
       <div>