Skip to content

Commit

Permalink
Merge pull request #1 from mzohaibqc/feature/design-update
Browse files Browse the repository at this point in the history 
Added Dark Theme as New Design Changes
  • Loading branch information
@mzohaibqc
mzohaibqc authored Jan 15, 2024
2 parents bf7299b + 301ca75 commit 5261833
Show file tree
Hide file tree
Showing 36 changed files with 2,467 additions and 898 deletions.
53 changes: 53 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,10 @@
"coverage-badge": "coverage-badger -r coverage/clover.xml -d coverage/"
},
"dependencies": {
"@headlessui/react": "^1.7.18",
"classnames": "^2.5.1",
"next": "14.0.4",
"next-themes": "^0.2.1",
"react": "^18",
"react-dom": "^18",
"react-select": "^5.8.0"
Expand Down
18 changes: 16 additions & 2 deletions setupTest.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,18 @@
import { expect } from 'vitest';
import { expect, vi } from 'vitest';
import * as matchers from '@testing-library/jest-dom/matchers';

expect.extend(matchers);
expect.extend(matchers);

Object.defineProperty(window, 'matchMedia', {
writable: true,
value: vi.fn().mockImplementation((query) => ({
matches: false,
media: query,
onchange: null,
addListener: vi.fn(), // deprecated
removeListener: vi.fn(), // deprecated
addEventListener: vi.fn(),
removeEventListener: vi.fn(),
dispatchEvent: vi.fn(),
})),
});
166 changes: 115 additions & 51 deletions src/app/__snapshots__/layout.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,65 +6,129 @@ exports[`Layout > Layout should render 1`] = `
lang="en"
>
<body>
<header
class="z-10 bg-background shadow-md fixed top-0 left-0 right-0"
<div
class="bg-white dark:bg-gray-800 dark:text-white text-gray-900 flex flex-col min-h-screen"
>
<div
class="max-w-6xl py-4 px-4 sm:px-6 lg:px-8 mx-auto flex items-center gap-4"
<header
class="z-10 shadow-md sticky top-0 bg-white dark:bg-gray-800 dark:text-white"
>
<a
class="flex items-center gap-2 px-3 py-1 rounded-md"
href="/"
<div
class="max-w-6xl py-4 px-4 sm:px-6 lg:px-8 mx-auto flex justify-between items-center gap-4"
>
<svg
class="w-10 h-10 logo"
height="1em"
viewBox="0 0 36.00010070884446 36"
width="1em"
<a
class="flex items-center gap-2 px-3 py-1 rounded-md"
href="/"
>
<defs
id="SvgjsDefs4933"
/>
<g
fill="#111111"
transform="matrix(1,0,0,1,0,18)"
>
<path
d=""
/>
</g>
<g
fill="#111111"
transform="matrix(0.4000033230527801,0,0,0.4000033230527801,-1.814864930620253,-2.0004167803314608)"
<svg
class="w-10 h-10 logo dark:text-white text-gray-900"
height="1em"
viewBox="0 0 36.00010070884446 36"
width="1em"
>
<path
d="M86.229,50.001l0.721-0.723c10.115-10.115,10.116-26.574,0-36.69s-26.575-10.116-36.691,0l-0.722,0.721l-0.721-0.721 C38.7,2.472,22.24,2.472,12.124,12.588C2.008,22.704,2.008,39.163,12.125,49.278l0.721,0.723l-0.721,0.721 C2.008,60.838,2.008,77.296,12.124,87.414c10.117,10.115,26.577,10.115,36.692,0l0.721-0.722l0.722,0.722 c10.116,10.115,26.575,10.115,36.691,0c10.116-10.118,10.115-26.576,0-36.692L86.229,50.001z M53.453,15.783 c8.354-8.354,21.947-8.354,30.3,0c8.354,8.354,8.354,21.948,0.001,30.301L59.431,70.407c-1.862,1.863-2.316,4.073-0.109,6.306 l0.831,0.806c4.66,4.66,12.242,4.66,16.902,0s4.66-12.243,0.001-16.903l-0.722-0.722l1.751-1.75l0.722,0.722 c5.627,5.625,5.627,14.78,0,20.405c-5.625,5.625-14.781,5.625-20.406,0c0,0-0.354-0.298-0.833-0.78 c-0.44-0.447-4.823-4.899,0.112-9.835l24.322-24.323c7.389-7.388,7.389-19.409,0-26.798c-7.388-7.387-19.408-7.387-26.796,0.001 l-0.723,0.721l-1.752-1.751L53.453,15.783z M73.86,74.325c-2.899,2.897-7.615,2.897-10.514,0l-0.721-0.722l10.513-10.513l0.722,0.72 C76.758,66.71,76.758,71.425,73.86,74.325z M15.319,15.783c8.354-8.354,21.948-8.354,30.302,0l24.321,24.321l-1.752,1.754 L43.868,17.535c-7.389-7.388-19.408-7.388-26.796,0c-7.389,7.388-7.389,19.409,0,26.797l0.721,0.722l-1.752,1.752l-0.722-0.721 C6.965,37.731,6.965,24.138,15.319,15.783z M62.626,26.398l0.721-0.722c2.898-2.898,7.614-2.898,10.514,0 c2.897,2.898,2.897,7.613,0,10.514l-0.722,0.721L62.626,26.398z M24.337,58.297l-2.319,2.318c-4.661,4.66-4.66,12.243,0,16.903 c4.659,4.66,12.242,4.66,16.902,0l0.722-0.722c3.561-3.559-0.725-7.104-2.787-9.167l-1.343-1.354l-6.383-6.383l1.752-1.75 l8.49,8.489l0.67,0.672c6.242,6.239,1.837,10.76,1.353,11.244l-0.722,0.722c-5.626,5.628-14.78,5.625-20.407,0 c-5.625-5.625-5.625-14.78,0.001-20.407L44.59,34.54l1.751,1.754L34.23,48.403L24.337,58.297z M25.934,63.091l10.513,10.51 l-0.722,0.723c-2.899,2.897-7.614,2.899-10.512,0c-2.898-2.898-2.898-7.615,0-10.513L25.934,63.091z M49.536,39.488l10.512,10.513 L49.536,60.512L39.023,50.001L49.536,39.488z M38.921,22.483c-4.66-4.662-12.243-4.66-16.902,0c-4.66,4.658-4.661,12.242,0,16.902 l0.721,0.722l-1.752,1.751l-0.722-0.721c-5.626-5.627-5.625-14.781,0-20.408c5.627-5.625,14.781-5.626,20.407,0l24.323,24.323 l-1.752,1.752L38.921,22.483z M36.447,26.399L25.934,36.911l-0.721-0.721c-2.899-2.899-2.899-7.615-0.001-10.514 c2.898-2.898,7.614-2.898,10.513,0.002L36.447,26.399z M83.753,84.218c-8.353,8.354-21.946,8.354-30.3,0l-0.909-0.813 c-0.198-0.199-1.873-1.863-3.107-4.434c-1.151,2.43-2.679,4.096-3.094,4.525l-0.722,0.722c-8.354,8.354-21.948,8.354-30.302,0 c-8.354-8.354-8.354-21.947,0-30.303l24.323-24.321l1.752,1.753L17.072,55.669c-7.389,7.389-7.389,19.409,0,26.797 c7.388,7.389,19.408,7.389,26.796,0l0.761-0.762c1.918-1.991,3.366-5.064,3.473-8.229c0-0.093,0.007-0.186,0.009-0.277 c0.022-2.474-0.788-4.981-2.86-7.055c-1.284-1.284-3.86-3.86-3.86-3.86l-0.371-0.395l-6.942-6.941l1.752-1.753l9.693,9.693 l0.813,0.828c1.438,1.439,2.459,2.871,3.161,4.269c0.705-1.348,1.705-2.73,3.102-4.128l0.134-0.148l24.324-24.322 c4.659-4.66,4.659-12.244-0.001-16.904c-4.659-4.66-12.242-4.66-16.902,0l-0.722,0.723l-1.751-1.752l0.721-0.723 c5.625-5.625,14.781-5.625,20.406,0c5.627,5.627,5.627,14.781,0,20.406L54.482,65.46l-0.767,0.77 c-4.868,4.868-2.956,11.839,0.604,15.397l0.886,0.839c7.388,7.389,19.408,7.389,26.796,0c7.389-7.388,7.389-19.408,0-26.797 l-0.722-0.722l1.752-1.753l0.722,0.723C92.107,62.271,92.107,75.863,83.753,84.218z"
<defs
id="SvgjsDefs4933"
/>
</g>
<g
fill="#111111"
transform="matrix(1,0,0,1,41,18)"
<g
fill="currentColor"
transform="matrix(1,0,0,1,0,18)"
>
<path
d=""
/>
</g>
<g
fill="currentColor"
transform="matrix(0.4000033230527801,0,0,0.4000033230527801,-1.814864930620253,-2.0004167803314608)"
>
<path
d="M86.229,50.001l0.721-0.723c10.115-10.115,10.116-26.574,0-36.69s-26.575-10.116-36.691,0l-0.722,0.721l-0.721-0.721 C38.7,2.472,22.24,2.472,12.124,12.588C2.008,22.704,2.008,39.163,12.125,49.278l0.721,0.723l-0.721,0.721 C2.008,60.838,2.008,77.296,12.124,87.414c10.117,10.115,26.577,10.115,36.692,0l0.721-0.722l0.722,0.722 c10.116,10.115,26.575,10.115,36.691,0c10.116-10.118,10.115-26.576,0-36.692L86.229,50.001z M53.453,15.783 c8.354-8.354,21.947-8.354,30.3,0c8.354,8.354,8.354,21.948,0.001,30.301L59.431,70.407c-1.862,1.863-2.316,4.073-0.109,6.306 l0.831,0.806c4.66,4.66,12.242,4.66,16.902,0s4.66-12.243,0.001-16.903l-0.722-0.722l1.751-1.75l0.722,0.722 c5.627,5.625,5.627,14.78,0,20.405c-5.625,5.625-14.781,5.625-20.406,0c0,0-0.354-0.298-0.833-0.78 c-0.44-0.447-4.823-4.899,0.112-9.835l24.322-24.323c7.389-7.388,7.389-19.409,0-26.798c-7.388-7.387-19.408-7.387-26.796,0.001 l-0.723,0.721l-1.752-1.751L53.453,15.783z M73.86,74.325c-2.899,2.897-7.615,2.897-10.514,0l-0.721-0.722l10.513-10.513l0.722,0.72 C76.758,66.71,76.758,71.425,73.86,74.325z M15.319,15.783c8.354-8.354,21.948-8.354,30.302,0l24.321,24.321l-1.752,1.754 L43.868,17.535c-7.389-7.388-19.408-7.388-26.796,0c-7.389,7.388-7.389,19.409,0,26.797l0.721,0.722l-1.752,1.752l-0.722-0.721 C6.965,37.731,6.965,24.138,15.319,15.783z M62.626,26.398l0.721-0.722c2.898-2.898,7.614-2.898,10.514,0 c2.897,2.898,2.897,7.613,0,10.514l-0.722,0.721L62.626,26.398z M24.337,58.297l-2.319,2.318c-4.661,4.66-4.66,12.243,0,16.903 c4.659,4.66,12.242,4.66,16.902,0l0.722-0.722c3.561-3.559-0.725-7.104-2.787-9.167l-1.343-1.354l-6.383-6.383l1.752-1.75 l8.49,8.489l0.67,0.672c6.242,6.239,1.837,10.76,1.353,11.244l-0.722,0.722c-5.626,5.628-14.78,5.625-20.407,0 c-5.625-5.625-5.625-14.78,0.001-20.407L44.59,34.54l1.751,1.754L34.23,48.403L24.337,58.297z M25.934,63.091l10.513,10.51 l-0.722,0.723c-2.899,2.897-7.614,2.899-10.512,0c-2.898-2.898-2.898-7.615,0-10.513L25.934,63.091z M49.536,39.488l10.512,10.513 L49.536,60.512L39.023,50.001L49.536,39.488z M38.921,22.483c-4.66-4.662-12.243-4.66-16.902,0c-4.66,4.658-4.661,12.242,0,16.902 l0.721,0.722l-1.752,1.751l-0.722-0.721c-5.626-5.627-5.625-14.781,0-20.408c5.627-5.625,14.781-5.626,20.407,0l24.323,24.323 l-1.752,1.752L38.921,22.483z M36.447,26.399L25.934,36.911l-0.721-0.721c-2.899-2.899-2.899-7.615-0.001-10.514 c2.898-2.898,7.614-2.898,10.513,0.002L36.447,26.399z M83.753,84.218c-8.353,8.354-21.946,8.354-30.3,0l-0.909-0.813 c-0.198-0.199-1.873-1.863-3.107-4.434c-1.151,2.43-2.679,4.096-3.094,4.525l-0.722,0.722c-8.354,8.354-21.948,8.354-30.302,0 c-8.354-8.354-8.354-21.947,0-30.303l24.323-24.321l1.752,1.753L17.072,55.669c-7.389,7.389-7.389,19.409,0,26.797 c7.388,7.389,19.408,7.389,26.796,0l0.761-0.762c1.918-1.991,3.366-5.064,3.473-8.229c0-0.093,0.007-0.186,0.009-0.277 c0.022-2.474-0.788-4.981-2.86-7.055c-1.284-1.284-3.86-3.86-3.86-3.86l-0.371-0.395l-6.942-6.941l1.752-1.753l9.693,9.693 l0.813,0.828c1.438,1.439,2.459,2.871,3.161,4.269c0.705-1.348,1.705-2.73,3.102-4.128l0.134-0.148l24.324-24.322 c4.659-4.66,4.659-12.244-0.001-16.904c-4.659-4.66-12.242-4.66-16.902,0l-0.722,0.723l-1.751-1.752l0.721-0.723 c5.625-5.625,14.781-5.625,20.406,0c5.627,5.627,5.627,14.781,0,20.406L54.482,65.46l-0.767,0.77 c-4.868,4.868-2.956,11.839,0.604,15.397l0.886,0.839c7.388,7.389,19.408,7.389,26.796,0c7.389-7.388,7.389-19.408,0-26.797 l-0.722-0.722l1.752-1.753l0.722,0.723C92.107,62.271,92.107,75.863,83.753,84.218z"
/>
</g>
<g
fill="currentColor"
transform="matrix(1,0,0,1,41,18)"
>
<path
d=""
/>
</g>
</svg>
<h1
class="text-2xl font-bold"
>
<path
d=""
/>
</g>
</svg>
<h1
class="text-2xl font-bold"
E-Store
</h1>
</a>
<div
class="flex items-center gap-3"
>
E-Store
</h1>
</a>
</div>
</header>
<main
class="min-h-screen max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pt-16"
>
<p>
Test Message
</p>
</main>
<button
class="text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-md text-sm p-1 inline-flex items-center justify-center w-8 h-8"
type="button"
>
<svg
aria-hidden="true"
class="w-4 h-4"
fill="currentColor"
height="1em"
viewBox="0 0 18 20"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.8 13.75a1 1 0 0 0-.859-.5A7.488 7.488 0 0 1 10.52 2a1 1 0 0 0 0-.969A1.035 1.035 0 0 0 9.687.5h-.113a9.5 9.5 0 1 0 8.222 14.247 1 1 0 0 0 .004-.997Z"
/>
</svg>
<span
class="sr-only"
>
Moon
</span>
</button>
<div
class="relative"
data-headlessui-state=""
>
<div
aria-expanded="false"
data-headlessui-state=""
id="headlessui-popover-button-:r0:"
>
<button
class="text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-md text-sm p-1 inline-flex items-center justify-center w-8 h-8"
data-testid="cart-button"
>
<svg
class="w-6 h-6 dark:text-gray-200 text-gray-900"
fill="currentColor"
height="1em"
stroke="currentColor"
stroke-width="0"
viewBox="0 0 20 20"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1 1.75A.75.75 0 011.75 1h1.628a1.75 1.75 0 011.734 1.51L5.18 3a65.25 65.25 0 0113.36 1.412.75.75 0 01.58.875 48.645 48.645 0 01-1.618 6.2.75.75 0 01-.712.513H6a2.503 2.503 0 00-2.292 1.5H17.25a.75.75 0 010 1.5H2.76a.75.75 0 01-.748-.807 4.002 4.002 0 012.716-3.486L3.626 2.716a.25.25 0 00-.248-.216H1.75A.75.75 0 011 1.75zM6 17.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15.5 19a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"
/>
</svg>
</button>
</div>
</div>
<div
style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
/>
</div>
</div>
</header>
<main
class="flex-1 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"
>
<p>
Test Message
</p>
</main>
</div>
</body>
</html>
</div>
Expand Down
Loading

0 comments on commit 5261833

Please sign in to comment.