TheCloneArmy/crater
1
0
Fork 1
mirror of https://github.com/crater-invoice/crater.git synced 2025-10-29 12:41:10 -04:00
Code Issues Packages Projects Releases Wiki Activity

add dark dropdown & company switch (#1167)

Browse Source 
* add dark mode in basedropdown

* dark mod add in global search, header

* add dark mode in company switch

* indentation issue fix company switch

* fix dropdown issues

---------

Co-authored-by: yogesh-gohil <yogeshgohil1611@gmail.com>
This commit is contained in:
Yash Kanakiya
2023-03-28 11:30:00 +05:30
committed by GitHub
parent c5acf1343e
commit f6639f5863
21 changed files with 225 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
resources/scripts/components/CompanySwitcher.vue
View File

@ -1,21 +1,23 @@
<template>
<div ref="companySwitchBar" class="relative rounded">
<div ref="companySwitchBar" class="relative rounded dark:text-white">
<CompanyModal />
<div
class="
flex
items-center
justify-center
px-3
h-8
md:h-9
ml-2
text-sm text-white
bg-white
rounded
cursor-pointer
bg-opacity-20
flex
items-center
justify-center
px-3
h-8
md:h-9
ml-2
text-sm
text-white
bg-white
rounded
cursor-pointer
bg-opacity-20
dark:bg-gray-700
"
@click="isShow = !isShow"
>
@ -38,28 +40,42 @@
>
<div
v-if="isShow"
class="absolute right-0 mt-2 bg-white rounded-md shadow-lg"
class="
absolute
right-0
mt-2
bg-white
rounded-md
shadow-lg
dark:border
dark:border-white/10
dark:text-white
dark:bg-gray-800/[.95]
dark:shadow-glass
dark:backdrop-blur-xl
"
>
<BaseDarkHighlight class="z-[-1] top-0 left-0" />
<div
class="
overflow-y-auto
scrollbar-thin scrollbar-thumb-rounded-full
w-[250px]
max-h-[350px]
scrollbar-thumb-gray-300 scrollbar-track-gray-10
pb-4
overflow-y-auto
scrollbar-thin
scrollbar-thumb-rounded-full
w-[250px] max-h-[350px]
scrollbar-thumb-gray-300
scrollbar-track-gray-10
pb-4
"
>
<label
class="
px-3
py-2
text-xs
font-semibold
text-gray-400
mb-0.5
block
uppercase
px-3
py-2
text-xs
font-semibold
text-gray-400
mb-0.5
block uppercase
"
>
{{ $t('company_switcher.label') }}
@ -68,13 +84,13 @@
<div
v-if="companyStore.companies.length < 1"
class="
flex flex-col
items-center
justify-center
p-2
px-3
mt-4
text-base text-gray-400
flex flex-col
items-center
justify-center
p-2
px-3
mt-4
text-base text-gray-400
"
>
<BaseIcon name="ExclamationCircleIcon" class="h-5 text-gray-400" />
@ -86,14 +102,17 @@
v-for="(company, index) in companyStore.companies"
:key="index"
class="
p-2
px-3
rounded-md
cursor-pointer
hover:bg-gray-100 hover:text-primary-500
p-2
px-3
rounded-md
cursor-pointer
hover:bg-gray-100 hover:text-primary-500
dark:hover:bg-gray-700
text-gray-900
dark:text-white
"
:class="{
'bg-gray-100 text-primary-500':
'bg-gray-100 text-primary-500 dark:bg-gray-700':
companyStore.selectedCompany.id === company.id,
}"
@click="changeCompany(company)"
@ -101,18 +120,19 @@
<div class="flex items-center">
<span
class="
flex
items-center
justify-center
mr-3
overflow-hidden
text-base
font-semibold
bg-gray-200
rounded-md
w-9
h-9
text-primary-500
flex
items-center
justify-center
mr-3
overflow-hidden
text-sm
font-semibold
bg-gray-200
rounded-md
w-9
h-9
text-primary-500
dark:bg-gray-900
"
>
<span v-if="!company.logo">
@ -136,15 +156,17 @@
<div
v-if="userStore.currentUser.is_owner"
class="
flex
items-center
justify-center
p-4
pl-3
border-t-2 border-gray-100
cursor-pointer
text-primary-400
hover:text-primary-500
flex
items-center
justify-center
p-4
pl-3
border-t-2
border-gray-100
cursor-pointer
text-primary-400
hover:text-primary-500
dark:border-gray-600
"
@click="addNewCompany"
>