diff --git a/components/Navbar/Navbar.module.css b/components/Navbar/Navbar.module.css index 1cfa0ba05..9cdd5d30e 100644 --- a/components/Navbar/Navbar.module.css +++ b/components/Navbar/Navbar.module.css @@ -1,12 +1,7 @@ .root { - @apply border-black border-b; + @apply; } .container { - @apply flex justify-between items-center flex-row px-4 border-black border-l border-r h-20 relative; -} - -.logoContainer { - @apply absolute transform -translate-x-1/2; - left: 50%; + @apply flex justify-between items-center flex-row px-6 h-20 relative border-gray-100 border-b; } diff --git a/components/Navbar/Navbar.tsx b/components/Navbar/Navbar.tsx index 4f601f187..f043ea237 100644 --- a/components/Navbar/Navbar.tsx +++ b/components/Navbar/Navbar.tsx @@ -13,15 +13,15 @@ const Navbar: FunctionComponent = ({ className }) => { return (
-
+ +
- - - diff --git a/components/Searchbar/Searchbar.module.css b/components/Searchbar/Searchbar.module.css index f37317886..bce0bd3c4 100644 --- a/components/Searchbar/Searchbar.module.css +++ b/components/Searchbar/Searchbar.module.css @@ -1,3 +1,25 @@ .root { - @apply px-4 border-black border-r h-full flex items-center; + @apply px-4 flex items-center; +} + +.container { + @apply relative rounded-lg flex flex-row text-sm items-center; + background-color: #fafafa; +} + +.input { + @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg; + min-width: 300px; +} + +.input:focus { + @apply outline-none shadow-outline-gray; +} + +.iconContainer { + @apply absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none; +} + +.icon { + @apply h-5 w-5; } diff --git a/components/Searchbar/Searchbar.tsx b/components/Searchbar/Searchbar.tsx index 56ee90ed2..4245d5b89 100644 --- a/components/Searchbar/Searchbar.tsx +++ b/components/Searchbar/Searchbar.tsx @@ -12,13 +12,18 @@ const Searchbar: FunctionComponent = ({ className }) => { return (
- - - +
+ +
+ + + +
+
); diff --git a/package.json b/package.json index 5f475c9c9..19b5bfef8 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "start": "next start" }, "dependencies": { + "@tailwindcss/ui": "^0.6.2", "@types/classnames": "^2.2.10", "classnames": "^2.2.6", "next": "^9.5.4-canary.20", diff --git a/pages/index.tsx b/pages/index.tsx index c83a477d3..2ce395ed2 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -9,7 +9,7 @@ export default function Home() { description="Due to COVID-19, some orders may experience processing and delivery delays." /> - + diff --git a/styles/global.css b/styles/global.css index 50568fca6..9d50fcd5e 100644 --- a/styles/global.css +++ b/styles/global.css @@ -1,5 +1,6 @@ @import "./font.css"; @tailwind base; +@tailwind components; :root { /* Spacing variables */ @@ -190,6 +191,4 @@ a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } -@tailwind components; @tailwind utilities; -@tailwind screens; diff --git a/tailwind.config.js b/tailwind.config.js index b30d53e3c..24a14608b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -15,5 +15,5 @@ module.exports = { }, }, variants: {}, - plugins: [], + plugins: [require("@tailwindcss/ui")], }; diff --git a/ui/Container/Container.module.css b/ui/Container/Container.module.css index b244b6372..0db8285ef 100644 --- a/ui/Container/Container.module.css +++ b/ui/Container/Container.module.css @@ -1,4 +1,5 @@ .root { - @apply max-w-6xl mx-auto px-2; + @apply mx-auto px-2; display: inherit; + max-width: 1440px; } diff --git a/yarn.lock b/yarn.lock index 959424b69..a5d78e0c1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1060,6 +1060,30 @@ dependencies: mkdirp "^1.0.4" +"@tailwindcss/custom-forms@^0.2.1": + version "0.2.1" + resolved "https://registry.yarnpkg.com/@tailwindcss/custom-forms/-/custom-forms-0.2.1.tgz#40e5ed1fff6d29d8ed1c508a0b2aaf8da96962e0" + integrity sha512-XdP5XY6kxo3x5o50mWUyoYWxOPV16baagLoZ5uM41gh6IhXzhz/vJYzqrTb/lN58maGIKlpkxgVsQUNSsbAS3Q== + dependencies: + lodash "^4.17.11" + mini-svg-data-uri "^1.0.3" + traverse "^0.6.6" + +"@tailwindcss/typography@^0.2.0": + version "0.2.0" + resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.2.0.tgz#b597c83502e3c3c6641a8aaabda223cd494ab349" + integrity sha512-aPgMH+CjQiScLZculoDNOQUrrK2ktkbl3D6uCLYp1jgYRlNDrMONu9nMu8LfwAeetYNpVNeIGx7WzHSu0kvECg== + +"@tailwindcss/ui@^0.6.2": + version "0.6.2" + resolved "https://registry.yarnpkg.com/@tailwindcss/ui/-/ui-0.6.2.tgz#4144aba86543bf79fefe0ea14a78a12fb315810e" + integrity sha512-i0sWpAgnF4VitNqaf4JVDuiaQ3MmREwn7gmNYR6lvX29avYLLNOHf0DgzhVEfwfB+CJ6WjZvPoJuDYExZgWlwQ== + dependencies: + "@tailwindcss/custom-forms" "^0.2.1" + "@tailwindcss/typography" "^0.2.0" + hex-rgb "^4.1.0" + postcss-selector-parser "^6.0.2" + "@types/classnames@^2.2.10": version "2.2.10" resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.10.tgz#cc658ca319b6355399efc1f5b9e818f1a24bf999" @@ -2667,6 +2691,11 @@ he@1.1.1: resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd" integrity sha1-k0EP0hsAlzUVH4howvJx80J+I/0= +hex-rgb@^4.1.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/hex-rgb/-/hex-rgb-4.2.0.tgz#fb377f2e5658fc924f1efa189685922e56ecaf0f" + integrity sha512-I7DkKeQ2kR2uyqgbxPgNgClH/rfs1ioKZhZW8VTIAirsxCR5EyhYeywgZbhMScgUbKCkgo6bb6JwA0CLTn9beA== + hmac-drbg@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1" @@ -3170,6 +3199,11 @@ mime-types@^2.1.27: dependencies: mime-db "1.44.0" +mini-svg-data-uri@^1.0.3: + version "1.2.3" + resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz#e16baa92ad55ddaa1c2c135759129f41910bc39f" + integrity sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ== + minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7" @@ -4740,7 +4774,7 @@ tr46@^1.0.1: dependencies: punycode "^2.1.0" -traverse@0.6.6: +traverse@0.6.6, traverse@^0.6.6: version "0.6.6" resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137" integrity sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=