Skip to content

Commit

Permalink
Sc 23124 (#829)
Browse files Browse the repository at this point in the history
  • Loading branch information
@daniellemaxwell
daniellemaxwell committed Jan 16, 2024
1 parent 9d3593d commit 5b60962
Show file tree
Hide file tree
Showing 6 changed files with 101 additions and 79 deletions.
4 changes: 4 additions & 0 deletions web/beacon-app/src/components/layout/AppLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { PATH_DASHBOARD } from '@/application';
import { useFetchProfile } from '@/features/members/hooks/useFetchProfile';
import { isOnboardedMember } from '@/features/members/utils';

// import SandboxBanner from './SanboxBanner/SandboxBanner';
import Topbar from './Topbar';

type PageProps = {
Expand All @@ -28,6 +29,9 @@ function AppLayout({ children, Breadcrumbs }: PageProps) {
return (
<>
<Topbar Breadcrumbs={Breadcrumbs} isOnboarded={isOnboarded} profileData={loaderData} />
{/* TODO: Display SandboxBanner only to user's with the sandbox account type.
<SandboxBanner />
*/}
<Container max={696} centered className="my-10 mt-8 px-4 xl:px-28">
{children}
</Container>
Expand Down
28 changes: 28 additions & 0 deletions web/beacon-app/src/components/layout/SanboxBanner/SandboxBanner.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { Trans } from '@lingui/macro';

import { EXTERNAL_LINKS } from '@/application';
import Alert from '@/components/common/Alert/Alert';

function SandboxBanner() {
return (
<Alert>
<div className="flex h-auto w-full flex-col items-center justify-center gap-x-4 bg-[#EBF5FF] py-6 text-center font-bold text-[#1D65A6] lg:flex-row">
<p>
<Trans>
You are using the Ensign Sandbox. Ready to deploy your models to production?
</Trans>
</p>
<a
href={EXTERNAL_LINKS.ENSIGN_PRICING}
target="_blank"
rel="noreferrer"
className="mt-4 rounded-md border border-white bg-[#1D65A6] px-4 py-1.5 text-white hover:bg-[#1D65A6/50] lg:mt-0"
>
<Trans>Upgrade</Trans>
</a>
</div>
</Alert>
);
}

export default SandboxBanner;
18 changes: 18 additions & 0 deletions web/beacon-app/src/components/layout/SandboxLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import MobileFooter from './MobileFooter';
import SandboxSidebar from './Sidebar/SandboxSidebar';

type SandboxLayoutProps = {
children?: React.ReactNode;
};

function SandboxLayout({ children }: SandboxLayoutProps) {
return (
<div className="flex flex-col md:pl-[250px]">
<SandboxSidebar className="hidden md:block" />
<div>{children}</div>
<MobileFooter />
</div>
);
}

export default SandboxLayout;
9 changes: 0 additions & 9 deletions web/beacon-app/src/components/layout/Topbar/Topbar.styles.ts
View file

This file was deleted.

116 changes: 48 additions & 68 deletions web/beacon-app/src/components/layout/Topbar/Topbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
// import { Trans } from '@lingui/macro';
import { Trans } from '@lingui/macro';
import { memo, ReactNode, useId, useState } from 'react';

// import { EXTERNAL_LINKS } from '@/application';
// import { EXTERNAL_LINKS } from '@/application';
import { ProfileCard } from '@/components/common/ProfileCard/ProfileCard';
import { MenuDropdownMenu } from '@/components/MenuDropdown/MenuDropdown';
import { useDropdownMenu } from '@/components/MenuDropdown/useDropdownMenu';
Expand All @@ -15,7 +13,6 @@ import { useOrgStore } from '@/store';
import ScheduleOfficeHours from '../../ScheduleOfficeHours/ScheduleOfficeHours';
import MobileNav from '../MobileNav/MobileNav';
import ProfileAvatar from '../ProfileAvatar/ProfileAvatar';
import { Header } from './Topbar.styles';
type TopBarProps = {
Breadcrumbs?: ReactNode;
isOnboarded?: boolean;
Expand Down Expand Up @@ -47,71 +44,54 @@ function Topbar({ Breadcrumbs: CustomBreadcrumbs, isOnboarded, profileData }: To
});

return (
<>
<Header className="flex flex-col items-baseline justify-center gap-2 bg-[#1D65A6] md:ml-[250px] md:min-h-[60px] md:border-b md:bg-white">
{/* TODO: Display alert banner when user is on the sandbox. */}
{/* <Alert>
<div className="flex h-auto w-full flex-col items-center justify-center gap-x-4 bg-[#192E5B] py-6 text-center font-bold text-white lg:flex-row">
<p>
<Trans>
You are using the Ensign Sandbox. Ready to deploy your models to production?
</Trans>
</p>
<div className="mt-4 rounded-md border border-white bg-[#316D3C] py-1 px-4 lg:mt-0">
<a href={EXTERNAL_LINKS.ENSIGN_PRICING} target="_blank" rel="noreferrer">
<Trans>Upgrade</Trans>
</a>
<div className="flex flex-col items-baseline justify-center gap-2 overflow-auto bg-[#1D65A6] py-4 md:border-b md:bg-white">
<div className="flex w-[98%] justify-between py-2 xl:w-[92.5%]">
{isOnboarded ? (
<>
{CustomBreadcrumbs ? (
CustomBreadcrumbs
) : (
<Breadcrumbs separator={separator} className="ml-4 hidden md:block">
{items.map((item) => (
<Breadcrumbs.Item key={item + id} className="capitalize">
{item}
</Breadcrumbs.Item>
))}
</Breadcrumbs>
)}
<div className="flex space-x-4">
<ScheduleOfficeHours />
<MenuDropdownMenu
items={dropdownItems}
trigger={<ProfileAvatar name={profileData?.name} />}
onOpenChange={onOpenChange}
isOpen={isOpen}
data-cy="menu-dropdown"
/>
</div>
</div>
</Alert> */}
<div className="flex w-[98%] justify-between py-2 xl:w-[92.5%]">
{isOnboarded ? (
<>
{CustomBreadcrumbs ? (
CustomBreadcrumbs
) : (
<Breadcrumbs separator={separator} className="ml-4 hidden md:block">
{items.map((item) => (
<Breadcrumbs.Item key={item + id} className="capitalize">
{item}
</Breadcrumbs.Item>
))}
</Breadcrumbs>
)}
<div className="flex space-x-4">
<ScheduleOfficeHours />
<MenuDropdownMenu
items={dropdownItems}
trigger={<ProfileAvatar name={profileData?.name} />}
onOpenChange={onOpenChange}
isOpen={isOpen}
data-cy="menu-dropdown"
/>
</div>
</>
) : (
<>
<span></span>
<div className="flex h-20 items-center justify-end">
<ProfileCard
picture={profileData?.picture}
owner_name={profileData?.email}
cardSize="medium"
/>
<button
onClick={Logout}
className="ml-4 pb-1 font-bold text-primary"
data-cy="log-out-bttn"
>
Log Out
</button>
</div>
</>
)}
</div>
{!isOnboarded && <MobileNav />}
</Header>
</>
</>
) : (
<>
<span></span>
<div className="flex items-center justify-end">
<ProfileCard
picture={profileData?.picture}
owner_name={profileData?.email}
cardSize="medium"
/>
<button
onClick={Logout}
className="ml-4 pb-1 font-bold text-primary"
data-cy="log-out-bttn"
>
<Trans>Log Out</Trans>
</button>
</div>
</>
)}
</div>
{!isOnboarded && <MobileNav />}
</div>
);
}

Expand Down
5 changes: 3 additions & 2 deletions web/beacon-app/src/constants/dashLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@ import { TbPlayFootball } from 'react-icons/tb';
import { EXTERNAL_LINKS, PATH_DASHBOARD } from '@/application';
import { MenuItem } from '@/types/MenuItem';

export const SIDEBAR_WIDTH = 250;
export const TOPBAR_HEIGHT = 60;
/* TODO: Verify if styles are used and remove if not. */
export const SIDEBAR_WIDTH = 0;
export const TOPBAR_HEIGHT = 0;

export const menuItems: MenuItem[] = [
{
Expand Down

0 comments on commit 5b60962

Please sign in to comment.