Skip to content

Commit

Permalink
Cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@Civolilah
Civolilah committed Jan 29, 2025
1 parent 4d5c084 commit 0f04cbd
Show file tree
Hide file tree
Showing 6 changed files with 55 additions and 77 deletions.
87 changes: 30 additions & 57 deletions src/components/CompanySwitcher.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import { useHandleCurrentUserChangeProperty } from '$app/common/hooks/useHandleC
import { useCurrentUser } from '$app/common/hooks/useCurrentUser';
import { useUpdateCompanyUser } from '$app/pages/settings/user/common/hooks/useUpdateCompanyUser';
import { useInjectUserChanges } from '$app/common/hooks/useInjectUserChanges';
import { useColorScheme } from '$app/common/colors';

const SwitcherDiv = styled.div`
&:hover {
Expand All @@ -57,6 +58,7 @@ export function CompanySwitcher() {

const logo = useLogo();
const location = useLocation();
const colors = useColorScheme();
const companyName = useCompanyName();
const queryClient = useQueryClient();
const { isAdmin, isOwner } = useAdmin();
Expand Down Expand Up @@ -141,8 +143,8 @@ export function CompanySwitcher() {
src={logo}
alt="Company logo"
style={{
borderColor: '#FFFFFF19',
width: '1.5rem',
borderColor: '#e5e7eb',
width: '1.66rem',
}}
/>
</>
Expand All @@ -163,29 +165,23 @@ export function CompanySwitcher() {
>
<div className="flex items-center">
<Menu.Button className="flex items-center justify-start space-x-3 w-full">
<SwitcherDiv
className="flex items-center space-x-3 p-1.5 rounded-md"
theme={{ hoverColor: '#FFFFFF0D' }}
>
<div className="flex items-center space-x-3 p-1.5 rounded-md hover:bg-gray-700">
<img
className="rounded-full border overflow-hidden aspect-square"
src={logo}
alt="Company logo"
style={{
borderColor: '#FFFFFF19',
borderColor: '#e5e7eb',
width: '1.65rem',
}}
/>

<span
className="text-sm text-start w-28 truncate"
style={{ color: '#FAFAFA' }}
>
<span className="text-sm text-start w-28 truncate text-gray-200">
{companyName}
</span>

<ExpandCollapseChevron />
</SwitcherDiv>
<ExpandCollapseChevron color="#e5e7eb" />
</div>
</Menu.Button>

<div
Expand All @@ -197,7 +193,7 @@ export function CompanySwitcher() {
)
}
>
<CloseNavbarArrow />
<CloseNavbarArrow color="#e5e7eb" />
</div>
</div>

Expand All @@ -211,23 +207,19 @@ export function CompanySwitcher() {
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items
className="origin-top-right absolute left-0 mt-2 rounded shadow-lg"
className="origin-top-right absolute left-0 mt-2 rounded shadow-lg border"
style={{
backgroundColor: 'white',
backgroundColor: colors.$1,
width: '14.5rem',
borderColor: colors.$4,
}}
>
<div className="border-b" style={{ borderColor: '#09090B1A' }}>
<div className="border-b" style={{ borderColor: colors.$4 }}>
<Menu.Item>
<div className="px-3 pb-1.5 pt-2">
<p style={{ fontSize: '0.6875rem', color: '#A1A1AA' }}>
{t('signed_in_as')}
</p>
<p className="text-xs text-gray-500">{t('signed_in_as')}</p>

<p
className="font-medium truncate text-black"
style={{ fontSize: '0.8125rem' }}
>
<p className="font-medium truncate text-sm">
{currentUser?.email}
</p>
</div>
Expand All @@ -236,24 +228,21 @@ export function CompanySwitcher() {

<div
className="flex flex-col pb-1 pt-2 border-b"
style={{ borderColor: '#09090B1A' }}
style={{ borderColor: colors.$4 }}
>
{state?.api?.length >= 1 &&
state?.api?.map((record: any, index: number) => (
<Menu.Item key={index}>
<div className="px-1 space-y-0.5">
{index === 0 && (
<p
className="pl-2"
style={{ color: '#A1A1AA', fontSize: '0.6875rem' }}
>
<p className="pl-2 text-xs text-gray-500">
{t('company')}
</p>
)}

<SwitcherDiv
className="flex items-center px-2 justify-between py-1.5 rounded-md cursor-pointer"
theme={{ hoverColor: `#09090B13` }}
theme={{ hoverColor: colors.$5 }}
onClick={() =>
preventNavigation({
fn: () => switchCompany(index),
Expand All @@ -268,7 +257,7 @@ export function CompanySwitcher() {
src={record.company.settings.company_logo}
alt="Company logo"
style={{
borderColor: '#FFFFFF19',
borderColor: colors.$4,
width: '1.5rem',
}}
/>
Expand All @@ -283,16 +272,15 @@ export function CompanySwitcher() {
/>
)}

<div
className="flex-1 truncate text-black"
style={{ fontSize: '0.8125rem' }}
>
<div className="w-36 truncate text-sm">
{record.company.settings.name ||
t('untitled_company')}
</div>
</div>

{state.currentIndex === index && <Check />}
{state.currentIndex === index && (
<Check color={colors.$3} />
)}
</SwitcherDiv>
</div>
</Menu.Item>
Expand All @@ -307,17 +295,12 @@ export function CompanySwitcher() {
<div className="px-1">
<SwitcherDiv
className="flex items-center pl-3 space-x-3 py-2 rounded-md cursor-pointer"
theme={{ hoverColor: `#09090B13` }}
theme={{ hoverColor: colors.$5 }}
onClick={() => setIsCompanyCreateModalOpened(true)}
>
<Plus />

<span
className="text-black"
style={{ fontSize: '0.8125rem' }}
>
{t('add_company')}
</span>
<span className="text-sm">{t('add_company')}</span>
</SwitcherDiv>
</div>
</Menu.Item>
Expand All @@ -328,7 +311,7 @@ export function CompanySwitcher() {
<div className="px-1">
<SwitcherDiv
className="flex items-center space-x-3 pl-3 py-2 rounded-md cursor-pointer"
theme={{ hoverColor: `#09090B13` }}
theme={{ hoverColor: colors.$5 }}
onClick={() =>
preventNavigation({
url: '/settings/account_management',
Expand All @@ -337,12 +320,7 @@ export function CompanySwitcher() {
>
<Person />

<span
className="text-black"
style={{ fontSize: '0.8125rem' }}
>
{t('account_management')}
</span>
<span className="text-sm">{t('account_management')}</span>
</SwitcherDiv>
</div>
</Menu.Item>
Expand All @@ -352,7 +330,7 @@ export function CompanySwitcher() {
<div className="pl-1.5 pr-1">
<SwitcherDiv
className="flex items-center space-x-3 pl-3 py-2 rounded-md cursor-pointer"
theme={{ hoverColor: `#09090B13` }}
theme={{ hoverColor: colors.$5 }}
onClick={() =>
preventNavigation({
url: '/logout',
Expand All @@ -361,12 +339,7 @@ export function CompanySwitcher() {
>
<Exit />

<span
className="text-black"
style={{ fontSize: '0.8125rem' }}
>
{t('logout')}
</span>
<span className="text-sm">{t('logout')}</span>
</SwitcherDiv>
</div>
</Menu.Item>
Expand Down
12 changes: 8 additions & 4 deletions src/components/icons/Check.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,25 @@
* @license https://www.elastic.co/licensing/elastic-license
*/

export function Check() {
type Props = {
color?: string;
};

export function Check({ color = '#18181B' }: Props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="1rem"
height="1rem"
width="1.1rem"
height="1.1rem"
viewBox="0 0 20 20"
>
<polyline
points="4 11 8 15 16 5"
fill="none"
stroke="#18181B"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
Expand Down
10 changes: 7 additions & 3 deletions src/components/icons/ExpandCollapseChevron.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@
* @license https://www.elastic.co/licensing/elastic-license
*/

export function ExpandCollapseChevron() {
interface Props {
color?: string;
}

export function ExpandCollapseChevron({ color = '#FFFFFF' }: Props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -22,15 +26,15 @@ export function ExpandCollapseChevron() {
<polyline
points="13 7 10 4 7 7"
fill="none"
stroke="#74747C"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
></polyline>
<polyline
points="13 13 10 16 7 13"
fill="none"
stroke="#74747C"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
Expand Down
4 changes: 2 additions & 2 deletions src/components/layouts/Default.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -441,7 +441,7 @@ export function Default(props: Props) {
onClick={() => setSidebarOpen(true)}
>
<span className="sr-only">Open sidebar</span>
<MenuIcon className="dark:text-gray-100" />
<MenuIcon color={colors.$3} />
</button>

<div
Expand All @@ -460,7 +460,7 @@ export function Default(props: Props) {
)
}
>
<OpenNavbarArrow />
<OpenNavbarArrow color={colors.$3} />
</div>
)}

Expand Down
2 changes: 1 addition & 1 deletion src/components/layouts/components/DesktopSidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export function DesktopSidebar(props: Props) {
}
)}
style={{
borderColor: '#FFFFFF13',
borderColor: 'white',
color: colors.$3,
}}
>
Expand Down
17 changes: 7 additions & 10 deletions src/components/layouts/components/MobileSidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import { NavigationItem } from './DesktopSidebar';
import { SidebarItem } from './SidebarItem';
import { useColorScheme } from '$app/common/colors';
import { useInjectUserChanges } from '$app/common/hooks/useInjectUserChanges';
import { useLogo } from '$app/common/hooks/useLogo';
import { HelpSidebarIcons } from '$app/components/HelpSidebarIcons';

interface Props {
Expand All @@ -26,7 +25,6 @@ interface Props {
}

export function MobileSidebar(props: Props) {
const logo = useLogo();
const colors = useColorScheme();
const user = useInjectUserChanges();

Expand Down Expand Up @@ -62,7 +60,10 @@ export function MobileSidebar(props: Props) {
leaveFrom="translate-x-0"
leaveTo="-translate-x-full"
>
<div className="relative flex-1 flex flex-col max-w-xs w-full bg-ninja-gray dark:bg-gray-900">
<div
className="relative flex-1 flex flex-col max-w-xs w-full px-3"
style={{ backgroundColor: colors.$6 }}
>
<Transition.Child
as={Fragment}
enter="ease-in-out duration-300"
Expand All @@ -85,14 +86,10 @@ export function MobileSidebar(props: Props) {
</Transition.Child>

<div
className="flex-shrink-0 flex items-center px-4 py-3 border-b h-16 justify-center border-gray-600"
style={{ backgroundColor: colors.$1, color: colors.$3 }}
className="flex-shrink-0 flex items-center px-0 md:px-4 py-3 border-b h-16 justify-center border-gray-600"
style={{ backgroundColor: colors.$6, color: colors.$3 }}
>
{isMiniSidebar ? (
<img className="w-8" src={logo} alt="Company logo" />
) : (
<CompanySwitcher />
)}
<CompanySwitcher />
</div>

<div className="flex flex-col flex-1 h-0 overflow-y-auto mt-4">
Expand Down

0 comments on commit 0f04cbd

Please sign in to comment.