electron-rare/docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Nathan Panchout
2024-12-12 14:48:31 +01:00
parent e9a66dd1b3
commit 37e78b542f
23 changed files with 264 additions and 619 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/frontend/apps/impress/cunningham.ts
+26 -22
View File
@@ -170,8 +170,8 @@ const config = {
danger: {
'color-hover': 'white',
background: {
color: 'var(--c--theme--colors--danger-400)',
'color-hover': 'var(--c--theme--colors--danger-500)',
color: 'var(--c--theme--colors--danger-600)',
'color-hover': '#FF2725',
'color-disabled': 'var(--c--theme--colors--danger-100)',
},
},
@@ -272,15 +272,15 @@ const config = {
'success-800': '#1e2e22',
'success-900': '#19281d',
'info-text': '#0078f3',
'info-100': '#f4f6ff',
'info-200': '#e8edff',
'info-300': '#dde5ff',
'info-400': '#bdcdff',
'info-500': '#0078f3',
'info-600': '#0063cb',
'info-700': '#f4f6ff',
'info-800': '#222a3f',
'info-900': '#1d2437',
'info-100': '#E8EDFF',
'info-200': '#DDE5FF',
'info-300': '#BCCDFF',
'info-400': '#518FFF',
'info-500': '#0078F3',
'info-600': '#0063CB',
'info-700': '#273961',
'info-800': '#222A3F',
'info-900': '#1D2437',
'warning-text': '#d64d00',
'warning-100': '#fff4f3',
'warning-200': '#ffe9e6',
@@ -291,16 +291,16 @@ const config = {
'warning-700': '#5e2c21',
'warning-800': '#3e241e',
'warning-900': '#361e19',
'danger-text': '#e1000f',
'danger-100': '#fef4f4',
'danger-200': '#fee9e9',
'danger-300': '#fddede',
'danger-400': '#fcbfbf',
'danger-500': '#e1000f',
'danger-600': '#c9191e',
'danger-700': '#642727',
'danger-text': '#FFF',
'danger-100': '#FFE9E9',
'danger-200': '#FFDDDD',
'danger-300': '#FFBDBD',
'danger-400': '#FF5655',
'danger-500': '#F60700',
'danger-600': '#CE0500',
'danger-700': '#642626',
'danger-800': '#412121',
'danger-900': '#3a1c1c',
'danger-900': '#391C1C',
},
font: {
families: {
@@ -319,8 +319,12 @@ const config = {
alert: {
'border-radius': '0',
},
modal: {
'width-small': '342px',
},
button: {
'medium-height': '48px',
'medium-height': '40px',
'medium-text-height': '40px',
'border-radius': '4px',
primary: {
background: {
@@ -352,7 +356,7 @@ const config = {
},
'tertiary-text': {
background: {
'color-hover': 'var(--c--theme--colors--primary-100)',
'color-hover': 'var(--c--theme--colors--greyscale-100)',
},
'color-hover': 'var(--c--theme--colors--primary-text)',
color: 'var(--c--theme--colors--primary-600)',
src/frontend/apps/impress/src/assets/fonts/Marianne/Marianne-Bold.woff2
BIN
View File
Binary file not shown.
src/frontend/apps/impress/src/assets/fonts/Marianne/Marianne-Medium.woff2
BIN
View File
Binary file not shown.
src/frontend/apps/impress/src/assets/fonts/Marianne/Marianne-Regular.woff2
BIN
View File
Binary file not shown.
src/frontend/apps/impress/src/cunningham/cunningham-style.css
+24 -3
View File
@@ -352,14 +352,23 @@ input:-webkit-autofill:focus {
}
.c__button--nano {
padding: 0 var(--c--theme--spacings--2xs);
gap: var(--c--theme--spacings--2xs);
padding: 0 var(--c--theme--spacings--3xs);
gap: var(--c--theme--spacings--3xs);
}
.c__button--nano {
padding: 0 var(--c--theme--spacings--3xs);
gap: var(--c--theme--spacings--3xs);
}
.c__button--nano.c__button--icon-only {
width: auto;
}
.c__button--nano.c__button--icon-only.c__button--full-width {
width: 100%;
}
.c__button--medium {
padding: 0.9rem var(--c--theme--spacings--s);
}
@@ -528,8 +537,20 @@ input:-webkit-autofill:focus {
box-shadow: none;
}
.c__modal__footer {
margin-top: -1.5rem;
}
.c__modal__close button {
padding: 1.5rem 1rem;
padding: 0px;
font-size: 88px;
width: 28px !important;
height: 28px;
}
.c__modal__close button .material-icons {
padding: 0px;
font-size: 24px;
}
.c__modal--full .c__modal__content {
src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
+25 -456
View File
File diff suppressed because it is too large Load Diff
src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
+24 -22
View File
@@ -264,8 +264,8 @@ export const tokens = {
danger: {
'color-hover': 'white',
background: {
color: 'var(--c--theme--colors--danger-400)',
'color-hover': 'var(--c--theme--colors--danger-500)',
color: 'var(--c--theme--colors--danger-600)',
'color-hover': '#FF2725',
'color-disabled': 'var(--c--theme--colors--danger-100)',
},
},
@@ -407,15 +407,15 @@ export const tokens = {
'success-800': '#1e2e22',
'success-900': '#19281d',
'info-text': '#0078f3',
'info-100': '#f4f6ff',
'info-200': '#e8edff',
'info-300': '#dde5ff',
'info-400': '#bdcdff',
'info-500': '#0078f3',
'info-600': '#0063cb',
'info-700': '#f4f6ff',
'info-800': '#222a3f',
'info-900': '#1d2437',
'info-100': '#E8EDFF',
'info-200': '#DDE5FF',
'info-300': '#BCCDFF',
'info-400': '#518FFF',
'info-500': '#0078F3',
'info-600': '#0063CB',
'info-700': '#273961',
'info-800': '#222A3F',
'info-900': '#1D2437',
'warning-text': '#d64d00',
'warning-100': '#fff4f3',
'warning-200': '#ffe9e6',
@@ -426,16 +426,16 @@ export const tokens = {
'warning-700': '#5e2c21',
'warning-800': '#3e241e',
'warning-900': '#361e19',
'danger-text': '#e1000f',
'danger-100': '#fef4f4',
'danger-200': '#fee9e9',
'danger-300': '#fddede',
'danger-400': '#fcbfbf',
'danger-500': '#e1000f',
'danger-600': '#c9191e',
'danger-700': '#642727',
'danger-text': '#FFF',
'danger-100': '#FFE9E9',
'danger-200': '#FFDDDD',
'danger-300': '#FFBDBD',
'danger-400': '#FF5655',
'danger-500': '#F60700',
'danger-600': '#CE0500',
'danger-700': '#642626',
'danger-800': '#412121',
'danger-900': '#3a1c1c',
'danger-900': '#391C1C',
},
font: { families: { accent: 'Marianne', base: 'Marianne' } },
logo: {
@@ -447,8 +447,10 @@ export const tokens = {
},
components: {
alert: { 'border-radius': '0' },
modal: { 'width-small': '342px' },
button: {
'medium-height': '48px',
'medium-height': '40px',
'medium-text-height': '40px',
'border-radius': '4px',
primary: {
background: {
@@ -477,7 +479,7 @@ export const tokens = {
},
'tertiary-text': {
background: {
'color-hover': 'var(--c--theme--colors--primary-100)',
'color-hover': 'var(--c--theme--colors--greyscale-100)',
},
'color-hover': 'var(--c--theme--colors--primary-text)',
color: 'var(--c--theme--colors--primary-600)',
src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
+36 -11
View File
@@ -6,6 +6,7 @@ import { useCreateBlockNote } from '@blocknote/react';
import { HocuspocusProvider } from '@hocuspocus/provider';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';
import { Box, TextErrors } from '@/components';
import { useAuthStore } from '@/core/auth';
@@ -18,11 +19,35 @@ import { randomColor } from '../utils';
import { BlockNoteToolbar } from './BlockNoteToolbar';
const cssEditor = (readonly: boolean) => `
&, & > .bn-container, & .ProseMirror {
height:100%
};
const cssEditor = (readonly: boolean) => css`
color: red;
&,
& > .bn-container,
& .ProseMirror {
height: 100%;
a {
color: var(--c--theme--colors--greyscale-500);
cursor: pointer;
}
.bn-block-group
.bn-block-group
.bn-block-outer:not([data-prev-depth-changed]):before {
border-left: none;
}
}
.bn-block-outer:not(:first-child) {
&:has(h1) {
padding-top: 32px;
}
&:has(h2) {
padding-top: 24px;
}
&:has(h3) {
padding-top: 16px;
}
}
& .bn-inline-content code {
background-color: gainsboro;
padding: 2px;
@@ -33,14 +58,14 @@ const cssEditor = (readonly: boolean) => `
padding-left: 40px;
padding-right: 10px;
${readonly && `padding-left: 10px;`}
};
.bn-side-menu[data-block-type=heading][data-level="1"] {
height: 46px;
}
.bn-side-menu[data-block-type=heading][data-level="2"] {
.bn-side-menu[data-block-type='heading'][data-level='1'] {
height: 46px;
}
.bn-side-menu[data-block-type='heading'][data-level='2'] {
height: 40px;
}
.bn-side-menu[data-block-type=heading][data-level="3"] {
.bn-side-menu[data-block-type='heading'][data-level='3'] {
height: 40px;
}
& .bn-editor h1 {
@@ -52,7 +77,7 @@ const cssEditor = (readonly: boolean) => `
& .bn-editor h3 {
font-size: 1.2rem;
}
.bn-block-content[data-is-empty-and-focused][data-content-type="paragraph"]
.bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
.bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
font-size: 14px;
}
src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx
+3 -3
View File
@@ -72,10 +72,10 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
<Box $direction="row">
{isDesktop && (
<>
<Text $variation="400" $size="s" $weight="bold">
<Text $variation="600" $size="s" $weight="bold">
{transRole(currentDocRole(doc.abilities))}&nbsp;·&nbsp;
</Text>
<Text $variation="400" $size="s">
<Text $variation="600" $size="s">
{t('Last update: {{update}}', {
update: DateTime.fromISO(doc.updated_at).toRelative(),
})}
@@ -92,8 +92,8 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
<DocToolBox doc={doc} />
</Box>
</Box>
<HorizontalSeparator $withPadding={false} />
</Box>
<HorizontalSeparator $withPadding={true} />
</>
);
};
src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx
+2 -1
View File
@@ -43,6 +43,7 @@ export const DocTitleText = ({ title }: DocTitleTextProps) => {
as="h2"
$margin={{ all: 'none', left: 'none' }}
$size={isMobile ? 'h4' : 'h2'}
$variation="1000"
>
{title}
</Text>
@@ -113,7 +114,7 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
onBlurCapture={(event) =>
handleTitleSubmit(event.target.textContent || '')
}
$color={colorsTokens()['greyscale-text']}
$color={colorsTokens()['greyscale-1000']}
$margin={{ left: '-2px', right: '10px' }}
$css={css`
&[contenteditable='true']:empty:not(:focus):before {
src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
+10 -6
View File
@@ -148,7 +148,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
<Box $direction="row" $margin={{ left: 'auto' }} $gap={spacings['2xs']}>
{authenticated && !isSmallMobile && (
<Button
color="primary-text"
color="tertiary-text"
onClick={() => {
setIsModalShareOpen(true);
}}
@@ -159,7 +159,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
)}
{!isSmallMobile && (
<Button
color="primary-text"
color="tertiary-text"
icon={
<Icon iconName="download" $theme="primary" $variation="800" />
}
@@ -174,14 +174,18 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
isHorizontal
$theme="primary"
$radius={spacings['3xs']}
$css={
isSmallMobile
$padding={{ all: 'xs' }}
$css={css`
&:hover {
background-color: ${colors['greyscale-100']};
}
${isSmallMobile
? css`
padding: 10px;
border: 1px solid ${colors['greyscale-300']};
`
: ''
}
: ''}
`}
aria-label={t('Open the document options')}
/>
</DropdownMenu>
src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx
+31 -40
View File
@@ -1,5 +1,4 @@
import {
Alert,
Button,
Modal,
ModalSize,
@@ -47,42 +46,36 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
<Modal
isOpen
closeOnClickOutside
hideCloseButton
leftActions={
<Button
aria-label={t('Close the modal')}
color="secondary"
fullWidth
onClick={() => onClose()}
>
{t('Cancel')}
</Button>
}
onClose={() => onClose()}
rightActions={
<Button
aria-label={t('Confirm deletion')}
color="danger"
fullWidth
onClick={() =>
removeDoc({
docId: doc.id,
})
}
>
{t('Confirm deletion')}
</Button>
<>
<Button
aria-label={t('Close the modal')}
color="secondary"
fullWidth
onClick={() => onClose()}
>
{t('Cancel')}
</Button>
<Button
aria-label={t('Confirm deletion')}
color="danger"
fullWidth
onClick={() =>
removeDoc({
docId: doc.id,
})
}
>
{t('Delete')}
</Button>
</>
}
size={ModalSize.MEDIUM}
size={ModalSize.SMALL}
title={
<Box $align="center" $gap="1rem">
<Text $isMaterialIcon $size="48px" $theme="primary" $variation="600">
delete_forever
</Text>
<Text as="h2" $size="h3" $margin="none">
{t('Deleting the document "{{title}}"', { title: doc.title })}
</Text>
</Box>
<Text $size="h6" $align="flex-start">
{t('Delete a doc')}
</Text>
}
>
<Box
@@ -90,13 +83,11 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
aria-label={t('Content modal to delete document')}
>
{!isError && (
<Alert canClose={false} type={VariantType.WARNING}>
<Text>
{t('Are you sure you want to delete the document "{{title}}"?', {
title: doc.title,
})}
</Text>
</Alert>
<Text $size="sm" $variation="600">
{t('Are you sure you want to delete the document "{{title}}"?', {
title: doc.title,
})}
</Text>
)}
{isError && <TextErrors causes={error.cause} />}
src/frontend/apps/impress/src/features/docs/doc-management/stores/useDocStore.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ export const useDocStore = create<UseDocStore>((set, get) => ({
} else {
const initialDocContent = [
{
type: 'heading',
type: 'paragraph',
content: '',
},
];
src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx
+1 -1
View File
@@ -107,7 +107,7 @@ export const TableContent = ({ headings }: TableContentProps) => {
gap: var(--c--theme--spacings--2xs);
width: 200px;
height: auto;
max-height: calc(100vh - 60px - 15vh);
max-height: calc(50vh - 60px);
}
`}
>
src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx
+12 -6
View File
@@ -42,7 +42,7 @@ export const ModalSelectVersion = ({
<>
<Modal
isOpen
hideCloseButton
hideCloseButton={true}
closeOnClickOutside={true}
size={ModalSize.EXTRA_LARGE}
onClose={onClose}
@@ -52,7 +52,8 @@ export const ModalSelectVersion = ({
aria-label="version history modal"
className="noPadding"
$direction="row"
$height="calc(100vh - 50px);"
$height="100%"
$maxHeight="calc(100vh - 2em - 12px)"
$overflow="hidden"
>
<Box
@@ -64,7 +65,11 @@ export const ModalSelectVersion = ({
flex: 1;
`}
>
<Box $width="100%" $padding="base" $align="center">
<Box
$width="100%"
$padding={{ horizontal: 'base', vertical: 'xl' }}
$align="center"
>
{selectedVersionId && (
<DocEditor doc={doc} versionId={selectedVersionId} />
)}
@@ -81,7 +86,8 @@ export const ModalSelectVersion = ({
$direction="column"
$justify="space-between"
$width="250px"
$height="calc(100vh - 2em - 30px);"
$height="100%"
$maxHeight="calc(100vh - 2em - 12px)"
$css={css`
overflow-y: hidden;
border-left: 1px solid var(--c--theme--colors--greyscale-200);
@@ -105,7 +111,7 @@ export const ModalSelectVersion = ({
`}
$padding="sm"
>
<Text $size="h6" $weight="bold">
<Text $size="h6" $variation="1000" $weight="bold">
{t('History')}
</Text>
<Button
@@ -123,7 +129,7 @@ export const ModalSelectVersion = ({
/>
</Box>
<Box
$padding="base"
$padding="xs"
$css={css`
border-top: 1px solid var(--c--theme--colors--greyscale-200);
`}
src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
+12 -8
View File
@@ -53,37 +53,41 @@ export const DocsGrid = ({
return (
<Box $position="relative" $width="100%" $maxWidth="960px">
<DocsGridLoader isLoading={isRefetching} />
<Card data-testid="docs-grid" $padding="md">
<Card
data-testid="docs-grid"
$padding={{ top: 'base', horizontal: 'md', bottom: 'md' }}
>
<Text
as="h4"
$size="h4"
$variation="1000"
$weight="700"
$margin={{ top: '0px', bottom: 'xs' }}
$margin={{ top: '0px', bottom: '10px' }}
>
{title}
</Text>
<Box>
<Box $gap="6px">
<Box
$direction="row"
$padding="xs"
$padding={{ horizontal: 'xs' }}
$gap="20px"
data-testid="docs-grid-header"
>
<Box $flex={6} $padding="3xs">
<Text $size="xs" $variation="600">
<Text $size="xs" $weight="400" $variation="600">
{t('Name')}
</Text>
</Box>
{isDesktop && (
<Box $flex={1.3} $padding="3xs">
<Text $size="xs" $variation="600">
<Box $flex={1.4} $padding="3xs">
<Text $size="xs" $weight="400" $variation="600">
{t('Updated at')}
</Text>
</Box>
)}
<Box $flex={1} $align="flex-end" $padding="3xs" />
<Box $flex={0.9} $align="flex-end" $padding="3xs" />
</Box>
{/* Body */}
src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
+5 -2
View File
@@ -29,7 +29,7 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
$align="center"
$gap="20px"
role="row"
$padding={{ vertical: 'xs', horizontal: 'sm' }}
$padding={{ vertical: '2xs', horizontal: 'sm' }}
$css={css`
cursor: pointer;
border-radius: 4px;
@@ -55,7 +55,7 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
)}
</StyledLink>
<Box
$flex={1}
$flex={0.9}
$direction="row"
$align="center"
$justify="flex-end"
@@ -68,6 +68,7 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
event.stopPropagation();
}}
size="nano"
fullWidth
icon={<Icon $variation="000" iconName="public" />}
>
{isShared ? sharedCount : undefined}
@@ -79,6 +80,7 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
event.preventDefault();
event.stopPropagation();
}}
fullWidth
color="tertiary"
size="nano"
icon={<Icon $variation="800" $theme="primary" iconName="group" />}
@@ -93,6 +95,7 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
event.stopPropagation();
}}
size="nano"
fullWidth
icon={<Icon $variation="000" iconName="corporate_fare" />}
>
{sharedCount}
src/frontend/apps/impress/src/features/docs/docs-grid/components/SimpleDocItem.tsx
+7 -2
View File
@@ -60,7 +60,12 @@ export const SimpleDocItem = ({
>
{doc.title}
</Text>
<Box $direction="row" $align="center" $gap={spacings['3xs']}>
<Box
$direction="row"
$align="center"
$gap={spacings['3xs']}
$margin={{ top: '-2px' }}
>
{!isDesktop && (
<>
{isPublic && <Icon iconName="public" $size="16px" />}
@@ -72,7 +77,7 @@ export const SimpleDocItem = ({
</>
)}
<Text $size="xs" $variation="500" $weight="500" $css={ItemTextCss}>
<Text $size="xs" $variation="500" $weight="400" $css={ItemTextCss}>
{subText ??
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel ante libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed imperdiet neque quam, sed euismod metus mollis ut. '}
</Text>
src/frontend/apps/impress/src/features/header/components/Header.tsx
+22 -23
View File
@@ -65,29 +65,28 @@ export const Header = () => {
>
<Image priority src={IconDocs} alt={t('Docs Logo')} width={25} />
<Text
$margin="none"
as="h2"
$color="#000091"
$zIndex={1}
$size="1.30rem"
>
{t('Docs')}
</Text>
<Text
$padding="2px 3px"
$size="8px"
$background="#368bd6"
$color="white"
$position="absolute"
$radius="5px"
$css={`
bottom: 13px;
right: -17px;
`}
>
BETA
</Text>
<Box $direction="row" $align="center" $gap={spacings['2xs']}>
<Text
$margin="none"
as="h2"
$color="#000091"
$zIndex={1}
$size="1.30rem"
>
{t('Docs')}
</Text>
<Text
$padding={{ horizontal: 'xs', vertical: '1px' }}
$size="11px"
$theme="primary"
$variation="500"
$weight="bold"
$radius="12px"
$background={colors['primary-200']}
>
BETA
</Text>
</Box>
</Box>
</StyledLink>
{!isDesktop ? (
src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
+10 -3
View File
@@ -14,6 +14,7 @@ const SelectStyled = styled(Select)<{ $isSmall?: boolean }>`
.c__select__wrapper {
min-height: 2rem;
height: auto;
border-color: transparent;
padding: 0 0.15rem 0 0.45rem;
border-radius: 1px;
@@ -27,7 +28,7 @@ const SelectStyled = styled(Select)<{ $isSmall?: boolean }>`
}
&:hover {
box-shadow: var(--c--theme--colors--primary-100) 0 0 0 2px !important;
box-shadow: none !important;
}
}
`;
@@ -48,10 +49,16 @@ export const LanguagePicker = () => {
$gap="0.7rem"
$align="center"
>
<Text $isMaterialIcon $size="1rem" $theme="primary" $variation="600">
<Text
$isMaterialIcon
$size="1rem"
$theme="primary"
$weight="bold"
$variation="800"
>
translate
</Text>
<Text $theme="primary" $variation="600">
<Text $theme="primary" $weight="500" $variation="800">
{LANGUAGES_ALLOWED[lang]}
</Text>
</Box>
src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx
+11 -7
View File
@@ -54,7 +54,7 @@ export const LeftPanelTargetFilters = () => {
<Box
$justify="center"
$padding={{ horizontal: 'xs' }}
$gap={spacing['2xs']}
$gap={spacing['4xs']}
>
{defaultQueries.map((query) => {
const isActive = target === query.targetQuery;
@@ -69,22 +69,26 @@ export const LeftPanelTargetFilters = () => {
$align="center"
$justify="flex-start"
$gap={spacing['xs']}
$radius={spacing['2xs']}
$padding={{ all: 'xs' }}
$radius={spacing['3xs']}
$padding={{ all: '2xs' }}
$css={css`
cursor: pointer;
background-color: ${isActive
? colors['greyscale-100']
: undefined};
font-weight: ${isActive ? 700 : undefined};
font-weight: ${isActive ? 700 : 500};
&:hover {
background-color: ${colors['greyscale-100']};
font-weight: 700;
}
`}
>
<Icon $variation="1000" iconName={query.icon} />
<Text $variation="1000">{query.label}</Text>
<Icon
$variation={isActive ? '1000' : '700'}
iconName={query.icon}
/>
<Text $variation={isActive ? '1000' : '700'} $size="sm">
{query.label}
</Text>
</BoxButton>
);
})}
src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
+1 -1
View File
@@ -42,7 +42,7 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
<Button
onClick={goToHome}
size="medium"
color="primary-text"
color="tertiary-text"
icon={<Icon iconName="house" />}
/>
</Box>
src/frontend/apps/impress/src/layouts/MainLayout.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ export function MainLayout({
$height={`calc(100dvh - ${HEADER_HEIGHT}px)`}
$padding={{
vertical: isDesktop ? 'base' : 'xs',
horizontal: isDesktop ? '6xl' : 'xs',
horizontal: isDesktop ? 'base' : 'xs',
}}
$background={
backgroundColor === 'white'