Skip to content

Commit

Permalink
Merge pull request #52 from AIDAPT/fix-bug-41
Browse files Browse the repository at this point in the history 
refactor the tailwind.config
  • Loading branch information
@therockerline
therockerline authored May 20, 2024
2 parents 3bea616 + 031d876 commit c2a44e3
Show file tree
Hide file tree
Showing 19 changed files with 401 additions and 327 deletions.
62 changes: 23 additions & 39 deletions src/renderer/src/components/AddToPhonebookBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,17 +148,19 @@ export function AddToPhonebookBox({

return (
<div className="w-full h-full">
<div className="flex justify-between items-center pb-4 border border-t-0 border-r-0 border-l-0 dark:border-gray-500 border-gray-300 max-h-[28px] px-5">
<h1 className="font-medium text-[14px] leading-5">{t('Phonebook.Add to Phonebook')}</h1>
<div className="flex justify-between items-center pb-4 border border-t-0 border-r-0 border-l-0 dark:border-borderDark border-borderLight max-h-[28px] px-5">
<h1 className="font-medium text-[14px] leading-5 dark:text-titleDark text-titleLight">
{t('Phonebook.Add to Phonebook')}
</h1>
</div>
<form
className="flex flex-col gap-4 p-2 h-full overflow-y-auto max-h-[245px] px-5"
className="flex flex-col gap-5 p-2 h-full overflow-y-auto max-h-[240px] px-5"
onSubmit={(e) => {
e.preventDefault()
handleSubmit(onSubmitForm)(e)
}}
>
<label className="flex flex-col gap-2 dark:text-gray-50 text-gray-900">
<label className="flex flex-col gap-2 dark:text-titleDark text-titleLight">
<p className="font-medium text-[14px] leading-5">{t('Phonebook.Visibility')}</p>
<div className="flex flex-row gap-8 items-center">
<div className="flex flex-row gap-2 items-center">
Expand All @@ -168,7 +170,7 @@ export function AddToPhonebookBox({
type="radio"
value="public"
name="visibility"
className="h-4 w-4 dark:text-blue-500 text-blue-700 dark:focus:ring-blue-200 focus:ring-blue-500 dark:focus:ring-offset-gray-900 focus:ring-offset-gray-50"
className="h-4 w-4 dark:text-textBlueDark text-textBlueLight dark:focus:ring-ringBlueDark focus:ring-ringBlueLight focus:ring-offset-ringOffsetLight dark:focus:ring-offset-ringOffsetDark"
/>
<label
htmlFor="public"
Expand All @@ -184,7 +186,7 @@ export function AddToPhonebookBox({
type="radio"
value="private"
name="visibility"
className="h-4 w-4 dark:text-blue-500 text-blue-700 dark:focus:ring-blue-200 focus:ring-blue-500 dark:focus:ring-offset-gray-900 focus:ring-offset-gray-50"
className="h-4 w-4 dark:text-textBlueDark text-textBlueLight dark:focus:ring-ringBlueDark focus:ring-ringBlueLight dark:focus:ring-offset-ringOffsetDark focus:ring-offset-ringOffsetLight"
/>
<label
htmlFor="private"
Expand All @@ -196,7 +198,7 @@ export function AddToPhonebookBox({
</div>
</label>

<label className="flex flex-col gap-2 dark:text-gray-50 text-gray-900">
<label className="flex flex-col gap-2 dark:text-titleDark text-titleLight">
<p className="font-medium text-[14px] leading-5">{t('Phonebook.Type')}</p>
<div className="flex flex-row gap-8 items-center">
<div className="flex flex-row gap-2 items-center">
Expand All @@ -206,7 +208,7 @@ export function AddToPhonebookBox({
type="radio"
value="person"
name="type"
className="h-4 w-4 dark:text-blue-500 text-blue-700 dark:focus:ring-blue-200 focus:ring-blue-500 dark:focus:ring-offset-gray-900 focus:ring-offset-gray-50"
className="h-4 w-4 dark:text-textBlueDark text-textBlueLight dark:focus:ring-ringBlueDark focus:ring-ringBlueLight dark:focus:ring-offset-ringOffsetDark focus:ring-offset-ringOffsetLight"
/>
<label
htmlFor="person"
Expand All @@ -222,7 +224,7 @@ export function AddToPhonebookBox({
type="radio"
value="company"
name="type"
className="h-4 w-4 dark:text-blue-500 text-blue-700 dark:focus:ring-blue-200 focus:ring-blue-500 dark:focus:ring-offset-gray-900 focus:ring-offset-gray-50"
className="h-4 w-4 dark:text-textBlueDark text-textBlueLight dark:focus:ring-ringBlueDark focus:ring-ringBlueLight dark:focus:ring-offset-ringOffsetDark focus:ring-offset-ringOffsetLight"
/>
<label
htmlFor="company"
Expand All @@ -249,7 +251,7 @@ export function AddToPhonebookBox({
handleSubmit(onSubmitForm)(e)
}
}}
className={`font-normal text-[14px] leading-5 ${errors.name?.message ? `mb-2` : ``} dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white`}
className="font-normal text-[14px] leading-5"
/>
</>
) : null}
Expand All @@ -266,16 +268,13 @@ export function AddToPhonebookBox({
handleSubmit(onSubmitForm)(e)
}
}}
className={`font-normal text-[14px] leading-5 ${errors.company?.message ? `mb-2` : ``} dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white`}
className="font-normal text-[14px] leading-5"
/>

<TextInput
{...register('extension')}
type="tel"
minLength={3}
// onChange={(e) => {
// setValue('extension', e.target.value.replace(/[^\d*#+]/g, ''))
// }}
label={t('Phonebook.Phone number') as string}
helper={errors.extension?.message || undefined}
error={!!errors.extension?.message}
Expand All @@ -286,16 +285,13 @@ export function AddToPhonebookBox({
handleSubmit(onSubmitForm)(e)
}
}}
className="font-normal text-[14px] leading-5 dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white"
className="font-normal text-[14px] leading-5"
/>

<TextInput
{...register('workphone')}
type="tel"
minLength={3}
// onChange={(e) => {
// setValue('workphone', e.target.value.replace(/[^\d*#+]/g, ''))
// }}
label={t('Phonebook.Work phone') as string}
helper={errors.workphone?.message || undefined}
error={!!errors.workphone?.message}
Expand All @@ -306,16 +302,13 @@ export function AddToPhonebookBox({
handleSubmit(onSubmitForm)(e)
}
}}
className="font-normal text-[14px] leading-5 dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white"
className="font-normal text-[14px] leading-5"
/>

<TextInput
{...register('cellphone')}
type="tel"
minLength={3}
// onChange={(e) => {
// setValue('cellphone', e.target.value.replace(/[^\d*#+]/g, ''))
// }}
label={t('Phonebook.Mobile phone') as string}
helper={errors.cellphone?.message || undefined}
error={!!errors.cellphone?.message}
Expand All @@ -326,7 +319,7 @@ export function AddToPhonebookBox({
handleSubmit(onSubmitForm)(e)
}
}}
className="font-normal text-[14px] leading-5 dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white"
className="font-normal text-[14px] leading-5"
/>

<TextInput
Expand All @@ -340,7 +333,7 @@ export function AddToPhonebookBox({
handleSubmit(onSubmitForm)(e)
}
}}
className="font-normal text-[14px] leading-5 dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white"
className="font-normal text-[14px] leading-5"
/>

<TextInput
Expand All @@ -354,32 +347,23 @@ export function AddToPhonebookBox({
handleSubmit(onSubmitForm)(e)
}
}}
className="font-normal text-[14px] leading-5 dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white"
className="font-normal text-[14px] leading-5"
/>

<div className="flex flex-row gap-4 justify-end mb-1">
<Button
variant="ghost"
onClick={() => onCancel()}
disabled={isLoading}
className="dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white"
>
<p className="dark:text-blue-500 text-blue-700 font-medium text-[14px] leading-5">
<Button variant="ghost" onClick={() => onCancel()} disabled={isLoading}>
<p className="dark:text-textBlueDark text-textBlueLight font-medium text-[14px] leading-5">
{t('Common.Cancel')}
</p>
</Button>
<Button
type="submit"
ref={submitButtonRef}
className="gap-3 dark:bg-blue-500 bg-blue-700 dark:hover:bg-blue-300 hover:bg-blue-800 dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white"
>
<p className="dark:text-gray-950 text-gray-50 font-medium text-[14px] leading-5">
<Button type="submit" ref={submitButtonRef} className="gap-3">
<p className="dark:text-titleLight text-titleDark font-medium text-[14px] leading-5">
{t('Common.Save')}
</p>
{isLoading && (
<FontAwesomeIcon
icon={LoadingIcon}
className="dark:text-gray-900 text-gray-50 animate-spin"
className="dark:text-titleLight text-titleDark animate-spin"
/>
)}
</Button>
Expand Down
4 changes: 2 additions & 2 deletions src/renderer/src/components/DisplayedAccountLogin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ export function DisplayedAccountLogin({
<div
onClick={() => handleClick?.()}
className={classNames(
'w-full flex flex-row gap-7 items-center justify-start bg-transparent h-20 rounded-lg text-gray-900 dark:text-gray-50 cursor-pointer',
handleClick ? 'hover:bg-gray-200 dark:hover:bg-gray-600' : ''
'w-full flex flex-row gap-7 items-center justify-start bg-transparent h-20 rounded-lg text-titleLight dark:text-titleDark cursor-pointer',
handleClick ? 'hover:bg-hoverLight dark:hover:bg-hoverDark' : ''
)}
>
<div className="ml-5 w-12 h-12 rounded-full overflow-hidden">
Expand Down
12 changes: 7 additions & 5 deletions src/renderer/src/components/MissedCall.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,13 +87,13 @@ export function MissedCall({
/>
)}
</div>
<div className="flex flex-col gap-1 dark:text-gray-50 text-gray-900">
<div className="flex flex-col gap-1 dark:text-titleDark text-titleLight">
<p className="font-medium text-[14px] leading-5">{truncate(getCallName(call), 15)}</p>
<div className="flex flex-row gap-2 items-center">
<MissedCallIcon />
<NumberCaller
number={getCallExt(call)}
className="dark:text-blue-500 text-blue-700 font-normal text-[14px] leading-5 hover:underline"
className="dark:text-textBlueDark text-textBlueLight font-normal text-[14px] leading-5 hover:underline"
>
{call.cnum}
</NumberCaller>
Expand Down Expand Up @@ -145,14 +145,16 @@ export function MissedCall({
{showCreateButton && (
<Button
variant="ghost"
className="flex gap-3 items-center py-2 px-3 border dark:border-gray-700 border-gray-200 ml-auto dark:focus:ring-2 focus:ring-2 dark:focus:ring-blue-200 focus:ring-blue-500"
className="flex gap-3 items-center py-2 px-3 border dark:border-borderDark border-borderLight ml-auto"
onClick={() => handleSelectedMissedCall(call.cnum, call.ccompany)}
>
<FontAwesomeIcon
className="text-base dark:text-blue-500 text-blue-700"
className="text-base dark:text-textBlueDark text-textBlueLight"
icon={AddUserIcon}
/>
<p className="dark:text-blue-500 text-blue-700 font-medium">{t('SpeedDial.Create')}</p>
<p className="dark:text-textBlueDark text-textBlueLight font-medium">
{t('SpeedDial.Create')}
</p>
</Button>
)}
</div>
Expand Down
16 changes: 9 additions & 7 deletions src/renderer/src/components/MissedCallsBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,18 +26,20 @@ export function MissedCallsBox({
return (
<>
<div className="flex flex-col h-full">
<div className="flex justify-between items-center pb-4 border border-t-0 border-r-0 border-l-0 dark:border-gray-700 border-gray-200 max-h-[28px] px-5 mt-3">
<h1 className="font-medium text-[14px] leading-5">{title}</h1>
<div className="flex justify-between items-center pb-4 border border-t-0 border-r-0 border-l-0 dark:border-borderDark border-borderLight max-h-[28px] px-5 mt-3">
<h1 className="font-medium text-[14px] leading-5 dark:text-titleDark text-titleLight">
{title}
</h1>
<Button
variant="ghost"
className="flex gap-3 items-center pt-2 pr-1 pb-2 pl-1 hover:bg-gray-200 dark:hover:bg-gray-600 dark:focus:ring-2 focus:ring-2 dark:focus:ring-blue-200 focus:ring-blue-500"
className="flex gap-3 items-center pt-2 pr-1 pb-2 pl-1"
onClick={viewAllMissedCalls}
>
<FontAwesomeIcon
className="text-base dark:text-blue-500 text-blue-700"
className="text-base dark:text-textBlueDark text-textBlueLight"
icon={ShowMissedCallIcon}
/>
<p className="dark:text-blue-500 text-blue-700 font-medium text-[14px] leading-5">
<p className="dark:text-textBlueDark text-textBlueLight font-medium text-[14px] leading-5">
{t('Common.View all')}
</p>
</Button>
Expand All @@ -46,12 +48,12 @@ export function MissedCallsBox({
{missedCallsIn.map((call, idx) => {
return (
<div
className={`${idx === missedCallsIn.length - 1 ? `` : `border-b dark:border-gray-700 border-gray-200`}`}
className={`${idx === missedCallsIn.length - 1 ? `` : `border-b dark:border-borderDark border-borderLight`}`}
key={idx}
>
<MissedCall
call={call}
className="dark:hover:bg-gray-600 hover:bg-gray-200"
className="dark:hover:bg-hoverDark hover:bg-hoverLight"
handleSelectedMissedCall={handleSelectedMissedCall}
/>
</div>
Expand Down
Loading

0 comments on commit c2a44e3

Please sign in to comment.