Skip to content

Commit

Permalink
update conditional classnames using clsx (wasp-lang#71)
Browse files Browse the repository at this point in the history 
* update conditional classnames using clsx

* added tw-merge, created util function cn() and replaced clsx usage with cn

* add dark text to account page

---------

Co-authored-by: Boris Martinovic <boris@martinovic.dev>
  • Loading branch information
@vincanger @martinovicdev
vincanger and martinovicdev authored Mar 8, 2024
1 parent 731ce7c commit 62a48dc
Show file tree
Hide file tree
Showing 22 changed files with 591 additions and 483 deletions.
22 changes: 22 additions & 0 deletions app/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 app/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/typography": "^0.5.7",
"apexcharts": "^3.41.0",
"clsx": "^2.1.0",
"headlessui": "^0.0.0",
"node-fetch": "3.3.0",
"openai": "^4.24.1",
Expand All @@ -19,6 +20,7 @@
"react-hot-toast": "^2.4.1",
"react-icons": "4.11.0",
"stripe": "11.15.0",
"tailwind-merge": "^2.2.1",
"wasp": "file:.wasp/out/sdk/wasp",
"zod": "3.22.4"
},
Expand Down
28 changes: 13 additions & 15 deletions app/src/client/admin/components/CheckboxOne.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,30 @@
import { useState } from 'react';
import { cn } from '../../../shared/utils';

const CheckboxOne = () => {
const [isChecked, setIsChecked] = useState<boolean>( false);
const [isChecked, setIsChecked] = useState<boolean>(false);

return (
<div>
<label
htmlFor="checkboxLabelFour"
className="flex cursor-pointer select-none items-center"
>
<div className="relative">
<label htmlFor='checkboxLabelFour' className='flex cursor-pointer select-none items-center'>
<div className='relative'>
<input
type="checkbox"
id="checkboxLabelFour"
className="sr-only"
type='checkbox'
id='checkboxLabelFour'
className='sr-only'
onChange={() => {
setIsChecked(!isChecked);
}}
/>
<div
className={`mr-4 flex h-5 w-5 items-center justify-center rounded-full border ${
isChecked && 'border-primary'
}`}
className={cn('mr-4 flex h-5 w-5 items-center justify-center rounded-full border', {
'border-primary': isChecked,
})}
>
<span
className={`h-2.5 w-2.5 rounded-full bg-transparent ${
isChecked && '!bg-primary'
}`}
className={cn('h-2.5 w-2.5 rounded-full bg-transparent', {
'!bg-primary': isChecked,
})}
>
{' '}
</span>
Expand Down
13 changes: 9 additions & 4 deletions app/src/client/admin/components/CheckboxTwo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useState } from 'react';
import { cn } from '../../../shared/utils';

const CheckboxTwo = () => {
const [enabled, setEnabled] = useState<boolean>(false);
Expand All @@ -16,11 +17,15 @@ const CheckboxTwo = () => {
}}
/>
<div
className={`ml-2 flex h-5 w-5 items-center justify-center rounded border ${
enabled && 'border-primary bg-gray dark:bg-transparent'
}`}
className={cn('ml-2 flex h-5 w-5 items-center justify-center rounded border', {
'border-primary bg-gray dark:bg-transparent': enabled,
})}
>
<span className={`opacity-0 ${enabled && '!opacity-100'}`}>
<span
className={cn('opacity-0', {
'!opacity-100': enabled,
})}
>
<svg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
d='M10.0915 0.951972L10.0867 0.946075L10.0813 0.940568C9.90076 0.753564 9.61034 0.753146 9.42927 0.939309L4.16201 6.22962L1.58507 3.63469C1.40401 3.44841 1.11351 3.44879 0.932892 3.63584C0.755703 3.81933 0.755703 4.10875 0.932892 4.29224L0.932878 4.29225L0.934851 4.29424L3.58046 6.95832C3.73676 7.11955 3.94983 7.2 4.1473 7.2C4.36196 7.2 4.55963 7.11773 4.71406 6.9584L10.0468 1.60234C10.2436 1.4199 10.2421 1.1339 10.0915 0.951972ZM4.2327 6.30081L4.2317 6.2998C4.23206 6.30015 4.23237 6.30049 4.23269 6.30082L4.2327 6.30081Z'
Expand Down
57 changes: 25 additions & 32 deletions app/src/client/admin/components/DarkModeSwitcher.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,57 @@
import { cn } from '../../../shared/utils';
import useColorMode from '../../hooks/useColorMode';

const DarkModeSwitcher = () => {
const [colorMode, setColorMode] = useColorMode();

return (
<li>
<div>
<label
className={`relative m-0 block h-7.5 w-14 rounded-full ${
colorMode === 'dark' ? 'bg-primary' : 'bg-stroke'
}`}
className={cn('relative m-0 block h-7.5 w-14 rounded-full', {
'bg-primary': colorMode === 'dark',
'bg-stroke': colorMode === 'light',
})}
>
<input
type="checkbox"
type='checkbox'
onChange={() => {
if (typeof setColorMode === 'function') {
setColorMode(colorMode === 'light' ? 'dark' : 'light');
}
}}
className="dur absolute top-0 z-50 m-0 h-full w-full cursor-pointer opacity-0"
className='dur absolute top-0 z-50 m-0 h-full w-full cursor-pointer opacity-0'
/>
<span
className={`absolute top-1/2 left-[3px] flex h-6 w-6 -translate-y-1/2 translate-x-0 items-center justify-center rounded-full bg-white shadow-switcher duration-75 ease-linear ${
colorMode === 'dark' && '!right-[3px] !translate-x-full'
}`}
className={cn(
'absolute top-1/2 left-[3px] flex h-6 w-6 -translate-y-1/2 translate-x-0 items-center justify-center rounded-full bg-white shadow-switcher duration-75 ease-linear',
{
'!right-[3px] !translate-x-full': colorMode === 'dark',
}
)}
>
<span className="dark:hidden">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<span className='dark:hidden'>
<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
d="M7.99992 12.6666C10.5772 12.6666 12.6666 10.5772 12.6666 7.99992C12.6666 5.42259 10.5772 3.33325 7.99992 3.33325C5.42259 3.33325 3.33325 5.42259 3.33325 7.99992C3.33325 10.5772 5.42259 12.6666 7.99992 12.6666Z"
fill="#969AA1"
d='M7.99992 12.6666C10.5772 12.6666 12.6666 10.5772 12.6666 7.99992C12.6666 5.42259 10.5772 3.33325 7.99992 3.33325C5.42259 3.33325 3.33325 5.42259 3.33325 7.99992C3.33325 10.5772 5.42259 12.6666 7.99992 12.6666Z'
fill='#969AA1'
/>
<path
d="M8.00008 15.3067C7.63341 15.3067 7.33342 15.0334 7.33342 14.6667V14.6134C7.33342 14.2467 7.63341 13.9467 8.00008 13.9467C8.36675 13.9467 8.66675 14.2467 8.66675 14.6134C8.66675 14.9801 8.36675 15.3067 8.00008 15.3067ZM12.7601 13.4267C12.5867 13.4267 12.4201 13.3601 12.2867 13.2334L12.2001 13.1467C11.9401 12.8867 11.9401 12.4667 12.2001 12.2067C12.4601 11.9467 12.8801 11.9467 13.1401 12.2067L13.2267 12.2934C13.4867 12.5534 13.4867 12.9734 13.2267 13.2334C13.1001 13.3601 12.9334 13.4267 12.7601 13.4267ZM3.24008 13.4267C3.06675 13.4267 2.90008 13.3601 2.76675 13.2334C2.50675 12.9734 2.50675 12.5534 2.76675 12.2934L2.85342 12.2067C3.11342 11.9467 3.53341 11.9467 3.79341 12.2067C4.05341 12.4667 4.05341 12.8867 3.79341 13.1467L3.70675 13.2334C3.58008 13.3601 3.40675 13.4267 3.24008 13.4267ZM14.6667 8.66675H14.6134C14.2467 8.66675 13.9467 8.36675 13.9467 8.00008C13.9467 7.63341 14.2467 7.33342 14.6134 7.33342C14.9801 7.33342 15.3067 7.63341 15.3067 8.00008C15.3067 8.36675 15.0334 8.66675 14.6667 8.66675ZM1.38675 8.66675H1.33341C0.966748 8.66675 0.666748 8.36675 0.666748 8.00008C0.666748 7.63341 0.966748 7.33342 1.33341 7.33342C1.70008 7.33342 2.02675 7.63341 2.02675 8.00008C2.02675 8.36675 1.75341 8.66675 1.38675 8.66675ZM12.6734 3.99341C12.5001 3.99341 12.3334 3.92675 12.2001 3.80008C11.9401 3.54008 11.9401 3.12008 12.2001 2.86008L12.2867 2.77341C12.5467 2.51341 12.9667 2.51341 13.2267 2.77341C13.4867 3.03341 13.4867 3.45341 13.2267 3.71341L13.1401 3.80008C13.0134 3.92675 12.8467 3.99341 12.6734 3.99341ZM3.32675 3.99341C3.15341 3.99341 2.98675 3.92675 2.85342 3.80008L2.76675 3.70675C2.50675 3.44675 2.50675 3.02675 2.76675 2.76675C3.02675 2.50675 3.44675 2.50675 3.70675 2.76675L3.79341 2.85342C4.05341 3.11342 4.05341 3.53341 3.79341 3.79341C3.66675 3.92675 3.49341 3.99341 3.32675 3.99341ZM8.00008 2.02675C7.63341 2.02675 7.33342 1.75341 7.33342 1.38675V1.33341C7.33342 0.966748 7.63341 0.666748 8.00008 0.666748C8.36675 0.666748 8.66675 0.966748 8.66675 1.33341C8.66675 1.70008 8.36675 2.02675 8.00008 2.02675Z"
fill="#969AA1"
d='M8.00008 15.3067C7.63341 15.3067 7.33342 15.0334 7.33342 14.6667V14.6134C7.33342 14.2467 7.63341 13.9467 8.00008 13.9467C8.36675 13.9467 8.66675 14.2467 8.66675 14.6134C8.66675 14.9801 8.36675 15.3067 8.00008 15.3067ZM12.7601 13.4267C12.5867 13.4267 12.4201 13.3601 12.2867 13.2334L12.2001 13.1467C11.9401 12.8867 11.9401 12.4667 12.2001 12.2067C12.4601 11.9467 12.8801 11.9467 13.1401 12.2067L13.2267 12.2934C13.4867 12.5534 13.4867 12.9734 13.2267 13.2334C13.1001 13.3601 12.9334 13.4267 12.7601 13.4267ZM3.24008 13.4267C3.06675 13.4267 2.90008 13.3601 2.76675 13.2334C2.50675 12.9734 2.50675 12.5534 2.76675 12.2934L2.85342 12.2067C3.11342 11.9467 3.53341 11.9467 3.79341 12.2067C4.05341 12.4667 4.05341 12.8867 3.79341 13.1467L3.70675 13.2334C3.58008 13.3601 3.40675 13.4267 3.24008 13.4267ZM14.6667 8.66675H14.6134C14.2467 8.66675 13.9467 8.36675 13.9467 8.00008C13.9467 7.63341 14.2467 7.33342 14.6134 7.33342C14.9801 7.33342 15.3067 7.63341 15.3067 8.00008C15.3067 8.36675 15.0334 8.66675 14.6667 8.66675ZM1.38675 8.66675H1.33341C0.966748 8.66675 0.666748 8.36675 0.666748 8.00008C0.666748 7.63341 0.966748 7.33342 1.33341 7.33342C1.70008 7.33342 2.02675 7.63341 2.02675 8.00008C2.02675 8.36675 1.75341 8.66675 1.38675 8.66675ZM12.6734 3.99341C12.5001 3.99341 12.3334 3.92675 12.2001 3.80008C11.9401 3.54008 11.9401 3.12008 12.2001 2.86008L12.2867 2.77341C12.5467 2.51341 12.9667 2.51341 13.2267 2.77341C13.4867 3.03341 13.4867 3.45341 13.2267 3.71341L13.1401 3.80008C13.0134 3.92675 12.8467 3.99341 12.6734 3.99341ZM3.32675 3.99341C3.15341 3.99341 2.98675 3.92675 2.85342 3.80008L2.76675 3.70675C2.50675 3.44675 2.50675 3.02675 2.76675 2.76675C3.02675 2.50675 3.44675 2.50675 3.70675 2.76675L3.79341 2.85342C4.05341 3.11342 4.05341 3.53341 3.79341 3.79341C3.66675 3.92675 3.49341 3.99341 3.32675 3.99341ZM8.00008 2.02675C7.63341 2.02675 7.33342 1.75341 7.33342 1.38675V1.33341C7.33342 0.966748 7.63341 0.666748 8.00008 0.666748C8.36675 0.666748 8.66675 0.966748 8.66675 1.33341C8.66675 1.70008 8.36675 2.02675 8.00008 2.02675Z'
fill='#969AA1'
/>
</svg>
</span>
<span className="hidden dark:inline-block">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<span className='hidden dark:inline-block'>
<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
d="M14.3533 10.62C14.2466 10.44 13.9466 10.16 13.1999 10.2933C12.7866 10.3667 12.3666 10.4 11.9466 10.38C10.3933 10.3133 8.98659 9.6 8.00659 8.5C7.13993 7.53333 6.60659 6.27333 6.59993 4.91333C6.59993 4.15333 6.74659 3.42 7.04659 2.72666C7.33993 2.05333 7.13326 1.7 6.98659 1.55333C6.83326 1.4 6.47326 1.18666 5.76659 1.48C3.03993 2.62666 1.35326 5.36 1.55326 8.28666C1.75326 11.04 3.68659 13.3933 6.24659 14.28C6.85993 14.4933 7.50659 14.62 8.17326 14.6467C8.27993 14.6533 8.38659 14.66 8.49326 14.66C10.7266 14.66 12.8199 13.6067 14.1399 11.8133C14.5866 11.1933 14.4666 10.8 14.3533 10.62Z"
fill="#969AA1"
d='M14.3533 10.62C14.2466 10.44 13.9466 10.16 13.1999 10.2933C12.7866 10.3667 12.3666 10.4 11.9466 10.38C10.3933 10.3133 8.98659 9.6 8.00659 8.5C7.13993 7.53333 6.60659 6.27333 6.59993 4.91333C6.59993 4.15333 6.74659 3.42 7.04659 2.72666C7.33993 2.05333 7.13326 1.7 6.98659 1.55333C6.83326 1.4 6.47326 1.18666 5.76659 1.48C3.03993 2.62666 1.35326 5.36 1.55326 8.28666C1.75326 11.04 3.68659 13.3933 6.24659 14.28C6.85993 14.4933 7.50659 14.62 8.17326 14.6467C8.27993 14.6533 8.38659 14.66 8.49326 14.66C10.7266 14.66 12.8199 13.6067 14.1399 11.8133C14.5866 11.1933 14.4666 10.8 14.3533 10.62Z'
fill='#969AA1'
/>
</svg>
</span>
</span>
</label>
</li>
</div>
);
};

Expand Down
11 changes: 8 additions & 3 deletions app/src/client/admin/components/DropdownEditDelete.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useEffect, useRef, useState } from 'react';
import { cn } from '../../../shared/utils';

const DropdownDefault = () => {
const [dropdownOpen, setDropdownOpen] = useState(false);
Expand Down Expand Up @@ -49,9 +50,13 @@ const DropdownDefault = () => {
ref={dropdown}
onFocus={() => setDropdownOpen(true)}
onBlur={() => setDropdownOpen(false)}
className={`absolute right-0 top-full z-40 w-40 space-y-1 rounded-sm border border-stroke bg-white p-1.5 shadow-default dark:border-strokedark dark:bg-boxdark ${
dropdownOpen === true ? 'block' : 'hidden'
}`}
className={cn(
'absolute right-0 top-full z-40 w-40 space-y-1 rounded-sm border border-stroke bg-white p-1.5 shadow-default dark:border-strokedark dark:bg-boxdark',
{
block: dropdownOpen,
hidden: !dropdownOpen,
}
)}
>
<button className='flex w-full items-center gap-2 rounded-sm py-1.5 px-4 text-left text-sm hover:bg-gray dark:hover:bg-meta-4'>
<svg
Expand Down
46 changes: 31 additions & 15 deletions app/src/client/admin/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { type AuthUser } from 'wasp/auth/types';
import DarkModeSwitcher from './DarkModeSwitcher';
import MessageButton from './MessageButton';
import DropdownUser from '../../components/DropdownUser';
import { cn } from '../../../shared/utils';

const Header = (props: {
sidebarOpen: string | boolean | undefined;
Expand All @@ -25,31 +26,46 @@ const Header = (props: {
<span className='relative block h-5.5 w-5.5 cursor-pointer'>
<span className='du-block absolute right-0 h-full w-full'>
<span
className={`relative top-0 left-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-[0] duration-200 ease-in-out dark:bg-white ${
!props.sidebarOpen && '!w-full delay-300'
}`}
className={cn(
'relative top-0 left-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-[0] duration-200 ease-in-out dark:bg-white',
{
'!w-full delay-300': !props.sidebarOpen,
}
)}
></span>
<span
className={`relative top-0 left-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-150 duration-200 ease-in-out dark:bg-white ${
!props.sidebarOpen && 'delay-400 !w-full'
}`}
className={cn(
'relative top-0 left-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-150 duration-200 ease-in-out dark:bg-white',
{
'delay-400 !w-full': !props.sidebarOpen,
}
)}
></span>
<span
className={`relative top-0 left-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-200 duration-200 ease-in-out dark:bg-white ${
!props.sidebarOpen && '!w-full delay-500'
}`}
className={cn(
'relative top-0 left-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-200 duration-200 ease-in-out dark:bg-white',
{
'!w-full delay-500': !props.sidebarOpen,
}
)}
></span>
</span>
<span className='absolute right-0 h-full w-full rotate-45'>
<span
className={`absolute left-2.5 top-0 block h-full w-0.5 rounded-sm bg-black delay-300 duration-200 ease-in-out dark:bg-white ${
!props.sidebarOpen && '!h-0 !delay-[0]'
}`}
className={cn(
'absolute left-2.5 top-0 block h-full w-0.5 rounded-sm bg-black delay-300 duration-200 ease-in-out dark:bg-white',
{
'!h-0 !delay-[0]': !props.sidebarOpen,
}
)}
></span>
<span
className={`delay-400 absolute left-0 top-2.5 block h-0.5 w-full rounded-sm bg-black duration-200 ease-in-out dark:bg-white ${
!props.sidebarOpen && '!h-0 !delay-200'
}`}
className={cn(
'delay-400 absolute left-0 top-2.5 block h-0.5 w-full rounded-sm bg-black duration-200 ease-in-out dark:bg-white',
{
'!h-0 !delay-200': !props.sidebarOpen,
}
)}
></span>
</span>
</span>
Expand Down
Loading

0 comments on commit 62a48dc

Please sign in to comment.