[www] Fix showcase search, checkbox styles (gatsbyjs#7014)

* Fix some styling on the showcase page * Better search input style * Better aligned checkbox * No outline for focused search input
porfirioribeiro · Aug 20, 2018 · 4b9a6b4 · 4b9a6b4
1 parent fec14c5
commit 4b9a6b4
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 6 deletions.
diff --git a/www/src/views/shared/styles.js b/www/src/views/shared/styles.js
@@ -1,8 +1,10 @@
-import { options, /* rhythm, scale, */ rhythm } from "../../utils/typography"
+import typography, { options, rhythm } from "../../utils/typography"
 import presets, { colors } from "../../utils/presets"
 import { style } from "glamor"
 import hex2rgba from "hex2rgba"
 
+const { curveDefault, speedDefault } = presets.animation
+
 const styles = {
   featuredSitesCard: style({
     display: `flex`,
@@ -94,9 +96,9 @@ const styles = {
   sticky: {
     paddingTop: rhythm(options.blockMarginBottom),
     position: `sticky`,
-    top: 0,
+    top: `calc(${presets.bannerHeight} - 1px)`,
     [presets.Desktop]: {
-      top: `calc(${presets.headerHeight} - 1px)`,
+      top: `calc(${presets.headerHeight} + ${presets.bannerHeight} - 1px)`,
     },
   },
   scrollbar: {
@@ -132,6 +134,29 @@ const styles = {
     borderBottom: `none !important`, // i know i know
     boxShadow: `none !important`, // but people really want this
   },
+  searchInput: {
+    appearance: `none`,
+    backgroundColor: `transparent`,
+    border: 0,
+    borderRadius: presets.radiusLg,
+    color: colors.gatsby,
+    paddingTop: rhythm(1 / 8),
+    paddingRight: rhythm(1 / 4),
+    paddingBottom: rhythm(1 / 8),
+    paddingLeft: rhythm(1),
+    overflow: `hidden`,
+    fontFamily: typography.options.headerFontFamily.join(`,`),
+    transition: `width ${speedDefault} ${curveDefault}, background-color ${speedDefault} ${curveDefault}`,
+    width: `6.8rem`,
+    "&::placeholder": {
+      color: colors.lilac,
+    },
+    "&:focus": {
+      outline: "none",
+      width: `9rem`,
+      background: colors.ui.light,
+    },
+  },
 }
 
 export default styles
diff --git a/www/src/views/showcase/collapsible-filter-list.js b/www/src/views/showcase/collapsible-filter-list.js
@@ -60,7 +60,11 @@ const CollapsibleFilterList = ({
             marginRight: 8,
           }}
         >
-          {filters.includes(c) ? <MdCheckbox /> : <MdCheckboxBlank />}
+          {filters.includes(c) ? (
+            <MdCheckbox style={{ verticalAlign: `-0.125em` }} />
+          ) : (
+            <MdCheckboxBlank style={{ verticalAlign: `-0.125em` }} />
+          )}
         </div>
         <div
           css={{

diff --git a/www/src/views/showcase/filtered-showcase.js b/www/src/views/showcase/filtered-showcase.js
@@ -170,7 +170,7 @@ class FilteredShowcase extends Component {
                     <label css={{ position: `relative` }}>
                       <input
                         css={{ ...styles.searchInput }}
-                        type="text"
+                        type="search"
                         value={this.state.search}
                         onChange={e =>
                           this.setState({
@@ -211,7 +211,9 @@ class FilteredShowcase extends Component {
                     }}
                   >
                     Load More
-                    <MdArrowDownward style={{ marginLeft: 4 }} />
+                    <MdArrowDownward
+                      style={{ marginLeft: 4, verticalAlign: `sub` }}
+                    />
                   </button>
                 )}
               </div>