mirror of
https://github.com/lingble/twenty.git
synced 2025-10-29 20:02:29 +00:00
c42ea57b97
#### \ Description - **Added "Exit Settings" Back Button**: Introduced a new back button labeled "Exit Settings" for easy navigation back to the app content. - **Implemented Settings Navbar Breadcrumb**: A breadcrumb navigation bar for each settings page has been added to improve navigation within the settings. This ensures users can easily trace their location within the settings. - **Persistent CTA Zone**: The Call-to-Action (CTA) zone at the top of the page now remains visible even when the user scrolls down, preventing unresponsive behavior and improving accessibility. - **Page Title**: The page title has been added to each settings page and separated from the breadcrumb, following the app's layout standards. - we could not reproduce the Billing and CMR Migrations settings on the app, but we updated the files according, please let's us know if is there any way to log in with access to these pages, or if is everything ok. - Some breadcrumbs are not following the Figma, are following the current app sections isntead, because we would need to change the sidebar structure, and we should not do it on this PR ### Demo <https://www.loom.com/share/21b20a2cd2f3471e94d61563c9901b19?sid=9dc49456-6cae-48e1-9149-8d706f00ab65> ### Refs: #6144 Fixes #6144 --------- Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com> Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
23 lines
604 B
TypeScript
23 lines
604 B
TypeScript
import styled from '@emotion/styled';
|
|
import React from 'react';
|
|
|
|
const StyledPanel = styled.div`
|
|
background: ${({ theme }) => theme.background.primary};
|
|
border: 1px solid ${({ theme }) => theme.border.color.medium};
|
|
border-radius: ${({ theme }) => theme.border.radius.md};
|
|
height: 100%;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
width: 100%;
|
|
padding-bottom: ${({ theme }) => theme.spacing(10)};
|
|
`;
|
|
|
|
type PagePanelProps = {
|
|
children: React.ReactNode;
|
|
hasInformationBar?: boolean;
|
|
};
|
|
|
|
export const PagePanel = ({ children }: PagePanelProps) => (
|
|
<StyledPanel>{children}</StyledPanel>
|
|
);
|