Tweaked the global breakpoints

vnsavitri · Mar 3, 2020 · f5364b6 · f5364b6
1 parent 89b2b93
commit f5364b6
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 35 deletions.
diff --git a/src/components/App/App.js b/src/components/App/App.js
@@ -12,7 +12,7 @@ import { ReactComponent as TwitterLogo } from "svg/twitter.svg"
 
 const Container = props => (
  <div className="py-32 flex flex-row justify-center min-h-full bg-gray-100">
- <div className="px-6 w-full max-w-screen-xl">
+ <div className="px-6 w-full max-w-screen-lg">
  {props.children}
  </div>
  </div>

diff --git a/src/components/App/IconGrid.js b/src/components/App/IconGrid.js
@@ -34,12 +34,7 @@ const IconSurface = ({ outline: Outline, solid: Solid, ...props }) => {
  <div className="pb-1/1 relative">
  <div className="absolute inset-0">
  {/* NOTE: Use w/h-full because of button */}
- <button className="relative flex flex-row justify-center items-center w-full h-full text-gray-800 hover:text-white bg-white hover:bg-indigo-500 rounded-lg-xl shadow trans-150" onClick={handleClick}>
- {(props.prefersSolid && props.buggy) && (
- <div className="p-3 absolute inset-0 flex flex-row justify-end text-red-500 hover:text-white z-10 trans-150">
- <Hero.ExclamationSolidSm className="w-6 h-6" />
- </div>
- )}
+ <button className="flex flex-row justify-center items-center w-full h-full text-gray-800 hover:text-white bg-white hover:bg-indigo-500 rounded-lg-xl focus:outline-none shadow trans-150" onClick={handleClick}>
  <Icon ref={ref} className="w-10 h-10" />
  <div className="my-4 absolute x-inset-0 bottom-0">
  <p className="text-center font-semibold -text-px tracking-wide">
@@ -53,7 +48,7 @@ const IconSurface = ({ outline: Outline, solid: Solid, ...props }) => {
 }
 
 const IconGrid = React.memo(props => (
- <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3">
+ <div className="grid grid-cols-2 xs:grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-3">
  {props.icons.map(each => (
  <IconSurface
  key={each.name}

diff --git a/src/components/App/Search.js b/src/components/App/Search.js
@@ -1,20 +1,23 @@
 import * as Hero from "components/Heroicons"
+import originalIcons from "./helpers/icons"
 import React from "react"
 
+const COUNT = originalIcons.length
+
 const Search = ({ value, setValue, solid, setSolid, ...props }) => {
  const ref = React.useRef() // Search bar
  const lhs = React.useRef() // Start of search bar
  const rhs = React.useRef() // End of search bar
 
- const [placeholder, setPlaceholder] = React.useState("Search 140 icons")
+ const [placeholder, setPlaceholder] = React.useState("")
 
  // Responsive placeholder:
  React.useEffect(() => {
  const handler = e => {
  if (window.innerWidth < 1280) {
- setPlaceholder("Search 140 icons")
+ setPlaceholder(`Search ${COUNT} icons`)
  } else {
- setPlaceholder("Search 140 icons (Press \"/\" to focus)")
+ setPlaceholder(`Search ${COUNT} icons (Press \"/\" to focus)`)
  }
  }
  handler() // Once

diff --git a/src/components/App/helpers/icons.js b/src/components/App/helpers/icons.js
@@ -216,12 +216,12 @@ const originalIcons = [
  outline: Hero.CreditCardOutlineMd,
  solid: Hero.CreditCardSolidSm,
  },
- {
- name: "currency-dollar",
- outline: Hero.CurrencyDollarOutlineMd,
- solid: Hero.CurrencyDollarSolidSm,
- buggy: true,
- },
+ // {
+ //  name: "currency-dollar",
+ //  outline: Hero.CurrencyDollarOutlineMd,
+ //  solid: Hero.CurrencyDollarSolidSm,
+ //  buggy: true,
+ // },
  {
  name: "currency-euro",
  outline: Hero.CurrencyEuroOutlineMd,
@@ -447,12 +447,12 @@ const originalIcons = [
  outline: Hero.MinusCircleOutlineMd,
  solid: Hero.MinusCircleSolidSm,
  },
- {
- name: "moon",
- outline: Hero.MoonOutlineMd,
- solid: Hero.MoonSolidSm,
- buggy: true,
- },
+ // {
+ //  name: "moon",
+ //  outline: Hero.MoonOutlineMd,
+ //  solid: Hero.MoonSolidSm,
+ //  buggy: true,
+ // },
  {
  name: "office-building",
  outline: Hero.OfficeBuildingOutlineMd,
@@ -483,12 +483,12 @@ const originalIcons = [
  outline: Hero.PhoneOutgoingOutlineMd,
  solid: Hero.PhoneOutgoingSolidSm,
  },
- {
- name: "phone",
- outline: Hero.PhoneOutlineMd,
- solid: Hero.PhoneSolidSm,
- buggy: true,
- },
+ // {
+ //  name: "phone",
+ //  outline: Hero.PhoneOutlineMd,
+ //  solid: Hero.PhoneSolidSm,
+ //  buggy: true,
+ // },
  {
  name: "photograph",
  outline: Hero.PhotographOutlineMd,
@@ -604,12 +604,12 @@ const originalIcons = [
  outline: Hero.TemplateOutlineMd,
  solid: Hero.TemplateSolidSm,
  },
- {
- name: "ticket",
- outline: Hero.TicketOutlineMd,
- solid: Hero.TicketSolidSm,
- buggy: true,
- },
+ // {
+ //  name: "ticket",
+ //  outline: Hero.TicketOutlineMd,
+ //  solid: Hero.TicketSolidSm,
+ //  buggy: true,
+ // },
  {
  name: "translate",
  outline: Hero.TranslateOutlineMd,

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -80,6 +80,22 @@ module.exports = {
  "1/1": "100%",
  },
  },
+ screens: {
+ xs: `${512 + 24 + 24}px`,
+ // => @media (min+width: 560px) { ... }
+
+ sm: `${640 + 24 + 24}px`,
+ // => @media (min+width: 688px) { ... }
+
+ md: `${768 + 24 + 24}px`,
+ // => @media (min+width: 816px) { ... }
+
+ lg: `${1024 + 24 + 24}px`,
+ // => @media (min+width: 1072px) { ... }
+
+ xl: `${1280 + 24 + 24}px`,
+ // => @media (min-width: 1328px) { ... }
+ },
  },
  variants: {},
  plugins: [],