From 105a09489c04b82fbc761c35ced4fbe2a1ce59e0 Mon Sep 17 00:00:00 2001 From: Mukul Mehta Date: Wed, 1 Jun 2022 17:42:10 +0530 Subject: [PATCH 1/3] Add custom theme styles and use them in GlobalStyle --- apps/webapp/src/Style/Combobox.tsx | 103 ++++++++ apps/webapp/src/Style/GlobalStyle.ts | 8 +- apps/webapp/src/Style/Search.tsx | 10 + apps/webapp/src/Themes/customStyles.tsx | 14 + apps/webapp/src/Themes/hackerTheme.custom.tsx | 214 +++++++++++++++ apps/webapp/src/Themes/neoDark.custom.tsx | 227 ++++++++++++++++ apps/webapp/src/Themes/neoLight.custom.tsx | 186 +++++++++++++ apps/webapp/src/Themes/renarTheme.custom.tsx | 53 ++++ apps/webapp/src/Themes/spaceBlocks.tsx | 170 ++++++++++++ .../webapp/src/Themes/vertigoTheme.custom.tsx | 247 ++++++++++++++++++ libs/shared/src/Style/Editor.tsx | 53 +++- libs/shared/src/Themes/hackerTheme.tsx | 3 +- libs/shared/src/Themes/neoDarkTheme.tsx | 3 +- libs/shared/src/Themes/neoLightTheme.tsx | 3 +- libs/shared/src/Themes/renarTheme.tsx | 3 +- libs/shared/src/Themes/vertigoTheme.tsx | 3 +- 16 files changed, 1291 insertions(+), 9 deletions(-) create mode 100644 apps/webapp/src/Style/Combobox.tsx create mode 100644 apps/webapp/src/Themes/customStyles.tsx create mode 100644 apps/webapp/src/Themes/hackerTheme.custom.tsx create mode 100644 apps/webapp/src/Themes/neoDark.custom.tsx create mode 100644 apps/webapp/src/Themes/neoLight.custom.tsx create mode 100644 apps/webapp/src/Themes/renarTheme.custom.tsx create mode 100644 apps/webapp/src/Themes/spaceBlocks.tsx create mode 100644 apps/webapp/src/Themes/vertigoTheme.custom.tsx diff --git a/apps/webapp/src/Style/Combobox.tsx b/apps/webapp/src/Style/Combobox.tsx new file mode 100644 index 000000000..e222b59e5 --- /dev/null +++ b/apps/webapp/src/Style/Combobox.tsx @@ -0,0 +1,103 @@ +import styled, { css } from 'styled-components' + +export const ComboboxItem = styled.div` + display: flex; + align-items: center; + font-size: 14px; + gap: ${({ theme }) => theme.spacing.tiny}; + + :first-child { + border-radius: 6px 6px 0 0; + } + + :last-child { + border-radius: 0 0 6px 6px; + } + + font-weight: 400; + padding: 0 8px; + min-height: 36px; + user-select: none; + width: 300px; + color: ${({ theme }) => theme.colors.text.default}; + &.highlight { + background: ${({ theme }) => theme.colors.background.highlight}; + } + cursor: pointer; + + :hover { + background-color: ${({ theme }) => theme.colors.background.highlight}; + } + + & > svg { + color: ${({ theme }) => theme.colors.gray[4]}; + } +` +export const ComboboxRoot = styled.div<{ isOpen: boolean }>` + :hover { + ${ComboboxItem} { + &.highlight { + &:hover { + } + } + } + } + /* &.reversed { + transform: rotate(180deg); + ${ComboboxItem} { + transform: rotate(-180deg); + } + } */ + + ${({ isOpen, theme }) => + isOpen && + css` + top: -9999px; + left: -9999px; + position: absolute; + padding: 0; + background: none !important; + display: flex; + margin: 0; + z-index: 11; + height: fit-content; + + > div { + background: ${theme.colors.background.modal}; + height: fit-content; + /* max-height: 400px; */ + box-shadow: rgba(0, 0, 0, 0.133) 0 3.2px 7.2px 0, rgba(0, 0, 0, 0.11) 0 0.6px 1.8px 0; + border-radius: ${theme.borderRadius.small}; + + > section { + max-height: 30vh; + overflow-y: auto; + overflow-x: hidden; + } + } + `} +` + +export const ItemTitle = styled.div` + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + /* width: 200px; */ +` + +export const ItemRightIcons = styled.div` + display: flex; + flex-gap: ${({ theme }) => theme.spacing.tiny}; +` + +export const ItemDesc = styled.div` + margin: ${({ theme }) => theme.spacing.tiny} 0; + color: ${({ theme }) => theme.colors.text.fade}; + font-size: 0.8rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +` +export const ItemCenterWrapper = styled.div` + width: 90%; +` diff --git a/apps/webapp/src/Style/GlobalStyle.ts b/apps/webapp/src/Style/GlobalStyle.ts index c6b7d00ae..627f73aab 100644 --- a/apps/webapp/src/Style/GlobalStyle.ts +++ b/apps/webapp/src/Style/GlobalStyle.ts @@ -1,10 +1,10 @@ -import { normalize } from '@mexit/shared' import { createGlobalStyle, css } from 'styled-components' -import { ThinScrollbar } from './Helpers' -import { EditorBalloonStyles, TippyBalloonStyles } from '@mexit/shared' +import { EditorBalloonStyles, TippyBalloonStyles, normalize } from '@mexit/shared' +import { ThinScrollbar } from './Helpers' import { ModalStyles } from './Refactor' +import { customStyles } from '../Themes/customStyles' const GlobalStyle = createGlobalStyle` ${normalize}; // NormalizeCSS normalization @@ -84,6 +84,8 @@ const GlobalStyle = createGlobalStyle` button { border: none; } + + ${({ theme }) => theme.custom && customStyles[theme.custom]} ` export default GlobalStyle diff --git a/apps/webapp/src/Style/Search.tsx b/apps/webapp/src/Style/Search.tsx index 9d1bec8f8..6f405312c 100644 --- a/apps/webapp/src/Style/Search.tsx +++ b/apps/webapp/src/Style/Search.tsx @@ -81,6 +81,16 @@ export const SearchFilterList = styled.div` gap: ${({ theme }) => theme.spacing.small}; ` +export const SearchFilterListWrap = styled.div` + display: flex; + align-items: center; + justify-content: flex-start; + gap: ${({ theme }) => theme.spacing.small}; + margin-right: ${({ theme }) => theme.spacing.medium}; + max-width: 70vw; + overflow-x: auto; +` + export const SearchFilterCancel = styled.div` cursor: pointer; display: flex; diff --git a/apps/webapp/src/Themes/customStyles.tsx b/apps/webapp/src/Themes/customStyles.tsx new file mode 100644 index 000000000..75bb9dbaa --- /dev/null +++ b/apps/webapp/src/Themes/customStyles.tsx @@ -0,0 +1,14 @@ +import { HackerStyles } from './hackerTheme.custom' +import { NeoLightStyles } from './neoLight.custom' +import { NeoDarkStyles } from './neoDark.custom' +import { ImperialStyles, RenarStyles } from './renarTheme.custom' +import { VertigoStyles } from './vertigoTheme.custom' + +export const customStyles = { + VertigoStyles, + ImperialStyles, + RenarStyles, + HackerStyles, + NeoLightStyles, + NeoDarkStyles +} diff --git a/apps/webapp/src/Themes/hackerTheme.custom.tsx b/apps/webapp/src/Themes/hackerTheme.custom.tsx new file mode 100644 index 000000000..b7b38791a --- /dev/null +++ b/apps/webapp/src/Themes/hackerTheme.custom.tsx @@ -0,0 +1,214 @@ +import { transparentize } from 'polished' +import { css } from 'styled-components' + +import { EditorStyles, NodeInfo, Button, AsyncButton, Widget } from '@mexit/shared' + +import { EditorPreviewWrapper } from '../Components/Editor/EditorPreview/EditorPreview.styles' +import { DataInfobarWrapper } from '../Components/Infobar/DataInfobar' +import { BackCard } from '../Style/Card' +import { ComboboxRoot, ComboboxItem } from '../Style/Combobox' +import { GridWrapper } from '../Style/Grid' +import { NavWrapper, NavButton, Link } from '../Style/Nav' +import { Result, ResultHeader, SearchContainer } from '../Style/Search' +import { SidebarDiv } from '../Style/Sidebar' +import { SSnippet, CreateSnippet } from '../Style/Snippets' +import { ArchivedNode } from '../Views/Archive' +import { SettingsOptions, SettingTitle } from '../Views/Settings' + +const grayMixerTrans = (n: number) => css` + ${({ theme }) => transparentize(0.33, theme.colors.gray[n])} +` +const grayMainColor = css` + ${grayMixerTrans(10)} +` + +const hackerBorder = css` + border: 2px solid ${({ theme }) => theme.colors.primary}; +` + +const hackerBorderThin = css` + border: 1px solid ${({ theme }) => theme.colors.primary}; +` + +const edStyles = css` + ${EditorStyles} { + border-radius: ${({ theme }) => theme.borderRadius.small}; + ${hackerBorder}; + background-color: ${grayMainColor}; + backdrop-filter: blur(10px); + } + ${NodeInfo} { + ${hackerBorder}; + background-color: ${grayMainColor}; + backdrop-filter: blur(10px); + ${Button}, ${AsyncButton} { + ${hackerBorderThin} + background-color: ${grayMixerTrans(9)}; + color: ${({ theme }) => theme.colors.primary}; + backdrop-filter: blur(10px); + } + } + ${Widget} { + ${hackerBorderThin} + background-color: ${grayMixerTrans(8)}; + } + ${DataInfobarWrapper} { + height: calc(100vh - 4rem); + ${hackerBorder}; + backdrop-filter: blur(10px); + background-color: ${grayMainColor}; + border-radius: ${({ theme }) => theme.borderRadius.small}; + margin-top: 2rem; + } + ${EditorPreviewWrapper} { + ${hackerBorder}; + backdrop-filter: blur(10px); + background: ${grayMainColor} !important; + ${EditorStyles} { + background: transparent; + } + } + ${ComboboxRoot} { + backdrop-filter: blur(10px); + ${hackerBorder}; + background: ${grayMixerTrans(9)}; + } + ${ComboboxItem} { + & > svg { + color: ${({ theme }) => theme.colors.secondary}; + } + } +` + +const settingsStyles = css` + ${SettingsOptions} { + padding: ${({ theme }) => theme.spacing.medium}; + backdrop-filter: blur(10px); + background-color: ${grayMainColor}; + ${hackerBorder}; + border-radius: ${({ theme }) => theme.borderRadius.small}; + } + ${SettingTitle} { + border: 2px solid transparent; + &:hover { + ${hackerBorder}; + background-color: ${grayMixerTrans(8)}; + } + } + ${BackCard} { + border: none; + ${hackerBorder}; + background-color: ${grayMainColor}; + backdrop-filter: blur(10px); + border-radius: ${({ theme }) => theme.borderRadius.small}; + } +` + +const gridCardStyles = css` + ${ArchivedNode}, ${Result} { + ${hackerBorder}; + background-color: ${grayMainColor}; + backdrop-filter: blur(10px); + border-radius: ${({ theme }) => theme.borderRadius.small}; + overflow: hidden; + } + ${ResultHeader} { + ${hackerBorder}; + background-color: ${grayMixerTrans(9)}; + } + ${SSnippet} { + ${hackerBorder}; + background-color: ${grayMainColor}; + backdrop-filter: blur(10px); + } + ${CreateSnippet} { + ${hackerBorder}; + background-color: ${grayMixerTrans(8)}; + backdrop-filter: blur(10px); + } + ${SearchContainer} { + margin-right: 3rem; + } +` + +const navStyles = css` + ${SidebarDiv} { + height: calc(100vh - 4rem); + ${hackerBorder}; + background-color: ${grayMainColor}; + backdrop-filter: blur(10px); + border-radius: ${({ theme }) => theme.borderRadius.small}; + padding: 0 ${({ theme }) => theme.spacing.medium}; + .rc-tree .rc-tree-treenode span.rc-tree-switcher { + color: ${({ theme }) => theme.colors.primary}; + } + .rc-tree .rc-tree-treenode .rc-tree-node-selected { + background-color: ${({ theme }) => theme.colors.primary}; + .rc-tree-title { + color: ${({ theme }) => theme.colors.text.oppositePrimary} !important; + } + box-shadow: 0px 2px 6px ${({ theme }) => theme.colors.primary}; + } + } + ${NavWrapper} { + padding: 0; + margin: 2rem 0; + overflow: auto; + height: calc(100vh - 4rem); + min-height: calc(100vh - 4rem); + border-radius: ${({ theme }) => theme.borderRadius.small}; + ${hackerBorder}; + background-color: ${grayMainColor}; + backdrop-filter: blur(10px); + } + ${GridWrapper} { + margin: 1rem; + height: calc(100vh - 2rem); + width: calc(100vw - 2rem); + grid-gap: ${({ theme }) => theme.spacing.medium}; + } + ${NavButton} { + margin-top: 0; + } + ${Link} { + color: ${({ theme }) => theme.colors.primary}; + } +` + +const HackerFonts = css` + @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Space+Mono:wght@700&display=swap'); + + ${EditorStyles}, body { + font-family: 'Fira Code', monospace; + } + h1, + h2, + h3, + h4, + h5, + h6 { + font-family: 'Space Mono', monospace; + } +` + +const GlobalHackerStyles = css` + .ModalContent { + ${hackerBorder}; + background-color: ${grayMainColor}; + border: none; + } + .ModalOverlay { + backdrop-filter: blur(10px); + } + button { + ${hackerBorderThin} + } +` +export const HackerStyles = css` + ${GlobalHackerStyles} + ${HackerFonts} + ${navStyles} + ${settingsStyles} + ${gridCardStyles} + ${edStyles} +` diff --git a/apps/webapp/src/Themes/neoDark.custom.tsx b/apps/webapp/src/Themes/neoDark.custom.tsx new file mode 100644 index 000000000..636e1ce93 --- /dev/null +++ b/apps/webapp/src/Themes/neoDark.custom.tsx @@ -0,0 +1,227 @@ +import { EditorStyles, Widget, MenuTrigger } from '@mexit/shared' +import { transparentize } from 'polished' +import { css } from 'styled-components' +import { BalloonToolbarBase } from '../Components/Editor/BalloonToolbar' +import { EditorPreviewWrapper } from '../Components/Editor/EditorPreview/EditorPreview.styles' +import { DataInfobarWrapper } from '../Components/Infobar/DataInfobar' +import { BackCard } from '../Style/Card' +import { ComboboxRoot, ComboboxItem } from '../Style/Combobox' +import { Title } from '../Style/Elements' +import { SILink } from '../Style/ILinkElement.styles' +import { StyledMenu } from '../Style/Menu' +import { NavWrapper, NavButton } from '../Style/Nav' +import { Result, ResultHeader, SearchContainer, SplitSearchPreviewWrapper } from '../Style/Search' +import { SidebarDiv } from '../Style/Sidebar' +import { CreateSnippet } from '../Style/Snippets' +import { TodoContainer } from '../Style/Todo.style' +import { ArchivedNode } from '../Views/Archive' +import { SettingsOptions, SettingTitle } from '../Views/Settings' +import { SpaceBlocksCss } from './spaceBlocks' + +const palette = { body: '#1B1F3D' } + +const headingColors = css` + h1 { + color: #dfcc84; + } + h2 { + color: #abc86f; + } + h3 { + color: #83c182; + } + h4 { + color: #82c1aa; + } + h5 { + color: #82bec1; + } + h6 { + color: #699ecf; + } +` + +const listColors = css` + li::marker { + color: ${({ theme }) => transparentize(0.5, theme.colors.secondary)}; + } +` +const grayMixerTrans = (n: number) => css` + ${({ theme }) => transparentize(0.33, theme.colors.gray[n])} +` + +const heightMain = `calc(100vh - 4rem)` + +const edStyles = css` + ${MenuTrigger} { + background-color: ${({ theme }) => theme.colors.gray[10]}; + } + ${EditorStyles} { + border-radius: 1rem; + transition: all 0.25s ease-in-out; + blockquote { + background-color: ${({ theme }) => theme.colors.gray[9]}; + } + ${headingColors} + ${listColors} + } + ${SILink} { + .ILink_decoration { + color: ${({ theme }) => theme.colors.primary}; + &_left { + } + &_right { + margin-left: ${({ theme }) => theme.spacing.tiny}; + } + &_value { + font-weight: 600; + color: ${({ theme }) => theme.colors.primary}; + } + } + } + ${Widget} { + background-color: ${grayMixerTrans(9)}; + } + ${DataInfobarWrapper} { + border-radius: ${({ theme }) => theme.borderRadius.small}; + } + ${BalloonToolbarBase} { + background-color: ${({ theme }) => theme.colors.gray[8]}; + box-shadow: 0px 10px 20px ${({ theme }) => transparentize(0.75, theme.colors.palette.black)}; + .slate-ToolbarButton-active, + .slate-ToolbarButton:hover { + color: ${({ theme }) => theme.colors.secondary}; + background-color: ${({ theme }) => transparentize(0.5, theme.colors.gray[8])}; + } + } + ${EditorPreviewWrapper} { + ${EditorStyles} { + background: transparent; + } + } + ${ComboboxRoot} { + backdrop-filter: blur(10px); + background: ${grayMixerTrans(9)}; + } + ${ComboboxItem} { + & > svg { + color: ${({ theme }) => theme.colors.secondary}; + } + } +` + +const todoStyles = css` + ${TodoContainer} { + ${EditorStyles} { + padding: 0; + } + } +` + +const settingsStyles = css` + ${SettingsOptions} { + padding: ${({ theme }) => theme.spacing.medium}; + border-radius: ${({ theme }) => theme.borderRadius.small}; + } + ${SettingTitle} { + &:hover { + background-color: ${grayMixerTrans(8)}; + } + } + ${BackCard} { + border: none; + border-radius: ${({ theme }) => theme.borderRadius.small}; + } +` + +const gridCardStyles = css` + ${ArchivedNode}, ${Result} { + border-radius: ${({ theme }) => theme.borderRadius.small}; + overflow: hidden; + } + ${ResultHeader} { + background-color: ${grayMixerTrans(9)}; + } + ${CreateSnippet} { + background-color: ${grayMixerTrans(10)}; + } +` + +const searchStyles = css` + ${SearchContainer} { + margin-right: 3rem; + } + ${SplitSearchPreviewWrapper} { + ${Title} { + color: ${({ theme }) => theme.colors.primary}; + } + } +` + +const navStyles = css` + ${NavWrapper} { + border-radius: ${({ theme }) => theme.borderRadius.small}; + } + ${NavButton} { + margin-top: 0; + } +` + +const sidebarStyles = css` + ${SidebarDiv} { + border-radius: ${({ theme }) => theme.borderRadius.small}; + } +` + +const modalStyles = css` + .ModalContent { + border: none; + } + .ModalOverlay { + } + + ${StyledMenu} { + box-shadow: 0px 4px 8px ${({ theme }) => transparentize(0.5, theme.colors.palette.black)}; + background-color: ${({ theme }) => theme.colors.gray[9]}; + } +` +const globalStyles = css` + body { + background-color: ${({ theme }) => theme.colors.gray[10]}; + } +` + +export const NeoDarkStylesPlain = css` + ${modalStyles} + ${navStyles} + ${sidebarStyles} + ${settingsStyles} + ${searchStyles} + ${gridCardStyles} + ${edStyles} + ${todoStyles} +` + +const containerStyle = css` + background-color: ${palette.body}; + box-shadow: 0px 15px 40px ${({ theme }) => transparentize(0.9, theme.colors.palette.black)}; +` + +const containerStyleReset = css` + background-color: transparent; + box-shadow: none; +` +const spaceBlocks = SpaceBlocksCss({ containerStyle, containerStyleReset, heightMain }) + +export const NeoDarkStyles = css` + ${spaceBlocks} + ${globalStyles} + ${modalStyles} + ${navStyles} + ${sidebarStyles} + ${settingsStyles} + ${searchStyles} + ${gridCardStyles} + ${edStyles} + ${todoStyles} +` diff --git a/apps/webapp/src/Themes/neoLight.custom.tsx b/apps/webapp/src/Themes/neoLight.custom.tsx new file mode 100644 index 000000000..07a841dc8 --- /dev/null +++ b/apps/webapp/src/Themes/neoLight.custom.tsx @@ -0,0 +1,186 @@ +import { MenuTrigger, EditorStyles, Widget } from '@mexit/shared' +import { transparentize } from 'polished' +import { css } from 'styled-components' + +import { BalloonToolbarBase } from '../Components/Editor/BalloonToolbar' +import { EditorPreviewWrapper } from '../Components/Editor/EditorPreview/EditorPreview.styles' +import { DataInfobarWrapper } from '../Components/Infobar/DataInfobar' +import { BackCard } from '../Style/Card' +import { ComboboxRoot, ComboboxItem } from '../Style/Combobox' +import { Title } from '../Style/Elements' +import { SILink } from '../Style/ILinkElement.styles' +import { StyledMenu } from '../Style/Menu' +import { NavWrapper, NavButton } from '../Style/Nav' +import { Result, ResultHeader, SearchContainer, SplitSearchPreviewWrapper } from '../Style/Search' +import { SidebarDiv } from '../Style/Sidebar' +import { CreateSnippet } from '../Style/Snippets' +import { TodoContainer } from '../Style/Todo.style' +import { ArchivedNode } from '../Views/Archive' +import { SettingsOptions, SettingTitle } from '../Views/Settings' +import { SpaceBlocksCss } from './spaceBlocks' + +const palette = { body: '#C4CCE0', background: '#D2D9EC', shadow: '#576BA4', primDark: '#4263B6' } + +const grayMixerTrans = (n: number) => css` + ${({ theme }) => transparentize(0.33, theme.colors.gray[n])} +` +const heightMain = `calc(100vh - 3rem)` + +const edStyles = css` + ${MenuTrigger} { + background-color: ${({ theme }) => theme.colors.gray[10]}; + } + ${EditorStyles} { + border-radius: 1rem; + transition: all 0.25s ease-in-out; + blockquote { + background-color: ${({ theme }) => theme.colors.gray[9]}; + } + } + ${SILink} { + .ILink_decoration { + color: ${({ theme }) => theme.colors.primary}; + &_left { + } + &_right { + margin-left: ${({ theme }) => theme.spacing.tiny}; + } + &_value { + font-weight: 600; + color: ${({ theme }) => theme.colors.primary}; + } + } + } + ${Widget} { + background-color: ${grayMixerTrans(9)}; + } + ${DataInfobarWrapper} { + border-radius: ${({ theme }) => theme.borderRadius.small}; + } + ${BalloonToolbarBase} { + background-color: ${({ theme }) => theme.colors.gray[8]}; + box-shadow: 0px 10px 20px ${({ theme }) => transparentize(0.75, theme.colors.palette.black)}; + .slate-ToolbarButton-active, + .slate-ToolbarButton:hover { + color: ${({ theme }) => theme.colors.secondary}; + background-color: ${({ theme }) => transparentize(0.5, theme.colors.gray[8])}; + } + } + ${EditorPreviewWrapper} { + ${EditorStyles} { + background: transparent; + } + } + ${ComboboxRoot} { + backdrop-filter: blur(10px); + background: ${grayMixerTrans(9)}; + } + ${ComboboxItem} { + & > svg { + color: ${({ theme }) => theme.colors.secondary}; + } + } +` + +const todoStyles = css` + ${TodoContainer} { + ${EditorStyles} { + padding: 0; + } + } +` + +const settingsStyles = css` + ${SettingsOptions} { + padding: ${({ theme }) => theme.spacing.medium}; + border-radius: ${({ theme }) => theme.borderRadius.small}; + } + ${SettingTitle} { + &:hover { + background-color: ${grayMixerTrans(8)}; + } + } + ${BackCard} { + border: none; + border-radius: ${({ theme }) => theme.borderRadius.small}; + } +` + +const gridCardStyles = css` + ${ArchivedNode}, ${Result} { + border-radius: ${({ theme }) => theme.borderRadius.small}; + overflow: hidden; + } + ${ResultHeader} { + background-color: ${grayMixerTrans(9)}; + } + ${CreateSnippet} { + background-color: ${grayMixerTrans(10)}; + } +` + +const searchStyles = css` + ${SearchContainer} { + margin-right: 3rem; + } + ${SplitSearchPreviewWrapper} { + ${Title} { + color: ${({ theme }) => theme.colors.primary}; + } + } +` + +const navStyles = css` + ${NavWrapper} { + border-radius: ${({ theme }) => theme.borderRadius.small}; + } + ${NavButton} { + margin-top: 0; + } +` + +const sidebarStyles = css` + ${SidebarDiv} { + border-radius: ${({ theme }) => theme.borderRadius.small}; + } +` + +const modalStyles = css` + .ModalContent { + border: none; + } + .ModalOverlay { + } + + ${StyledMenu} { + box-shadow: 0px 4px 8px ${({ theme }) => transparentize(0.5, theme.colors.palette.black)}; + background-color: ${({ theme }) => theme.colors.gray[9]}; + } +` + +const containerStyle = css` + background-color: ${palette.background}; + box-shadow: 0px 15px 40px ${transparentize(0.9, palette.shadow)}; +` + +const containerStyleReset = css` + background-color: transparent; + box-shadow: none; +` + +const spaceBlocks = SpaceBlocksCss({ containerStyle, containerStyleReset, heightMain }) + +export const NeoLightStyles = css` + body { + background-color: ${palette.body}; + } + ${searchStyles} + ${todoStyles} + ${spaceBlocks} + ${modalStyles} + ${navStyles} + ${sidebarStyles} + ${settingsStyles} + ${gridCardStyles} + ${edStyles} +` diff --git a/apps/webapp/src/Themes/renarTheme.custom.tsx b/apps/webapp/src/Themes/renarTheme.custom.tsx new file mode 100644 index 000000000..deff8a3e2 --- /dev/null +++ b/apps/webapp/src/Themes/renarTheme.custom.tsx @@ -0,0 +1,53 @@ +import { transparentize } from 'polished' +import { css } from 'styled-components' + +import { NeoDarkStylesPlain } from './neoDark.custom' +import { SpaceBlocksCss } from './spaceBlocks' + +const palette = { body: '#1B1F3D' } + +const heightMain = `calc(100vh - 4rem)` + +const containerStyle = css` + background-color: ${transparentize(0.2, palette.body)}; + box-shadow: 0px 15px 40px ${({ theme }) => transparentize(0.9, theme.colors.palette.black)}; +` + +const containerStyleReset = css` + background-color: transparent; + box-shadow: none; +` + +const blur = `10px` + +const spaceBlocks = SpaceBlocksCss({ containerStyle, containerStyleReset, heightMain, blur }) + +export const RenarStylesWithoutContainer = css` + ${NeoDarkStylesPlain} +` + +export const RenarStyles = css` + ${spaceBlocks} + ${RenarStylesWithoutContainer} +` + +const imperialContainerStyle = css` + background-color: ${transparentize(0.2, palette.body)}; + box-shadow: 0px 15px 40px ${({ theme }) => transparentize(0.9, theme.colors.palette.black)}; +` + +const imperialContainerStyleReset = css` + background-color: transparent; + box-shadow: none; +` + +const imperialSpaceBlocks = SpaceBlocksCss({ + containerStyle: imperialContainerStyle, + containerStyleReset: imperialContainerStyleReset, + heightMain +}) + +export const ImperialStyles = css` + ${imperialSpaceBlocks} + ${RenarStylesWithoutContainer} +` diff --git a/apps/webapp/src/Themes/spaceBlocks.tsx b/apps/webapp/src/Themes/spaceBlocks.tsx new file mode 100644 index 000000000..2b1d8b221 --- /dev/null +++ b/apps/webapp/src/Themes/spaceBlocks.tsx @@ -0,0 +1,170 @@ +import { StyledEditor, NodeInfo, EditorWrapper, EditorStyles } from '@mexit/shared' +import { transparentize } from 'polished' +import { css, DefaultTheme, FlattenInterpolation, ThemeProps } from 'styled-components' + +import { BalloonToolbarBase } from '../Components/Editor/BalloonToolbar' +import { EditorPreviewWrapper } from '../Components/Editor/EditorPreview/EditorPreview.styles' +import { DataInfobarWrapper } from '../Components/Infobar/DataInfobar' +import { BackCard } from '../Style/Card' +import { ComboboxRoot, ComboboxItem } from '../Style/Combobox' +import { GridWrapper } from '../Style/Grid' +import { NavWrapper } from '../Style/Nav' +import { Result, SearchFilterListWrap } from '../Style/Search' +import { SidebarDiv } from '../Style/Sidebar' +import { SSnippet, CreateSnippet } from '../Style/Snippets' +import { StyledBoard } from '../Style/Todo' +import { TodoContainer } from '../Style/Todo.style' +import { ArchivedNode } from '../Views/Archive' +import { SettingsOptions } from '../Views/Settings' + +interface SpaceProps { + containerStyle?: FlattenInterpolation> + containerStyleReset?: FlattenInterpolation> + heightMain?: string + blur?: string +} + +export const SpaceBlocksCss = (props: SpaceProps) => { + const { containerStyleReset, heightMain, blur } = props + const grayMixerTrans = (n: number) => css` + ${({ theme }) => transparentize(0.33, theme.colors.gray[n])} + ` + + const containerStyle = css` + ${props.containerStyle}; + ${blur && + css` + backdrop-filter: blur(${blur}); + `} + ` + + const edStyles = css` + ${StyledEditor} { + margin: 0 auto; + padding: 0 3rem; + height: calc(100vh - 4rem); + } + ${NodeInfo} { + ${containerStyle} + } + ${DataInfobarWrapper} { + margin-top: 0rem; + height: ${heightMain}; + ${containerStyle} + margin-top: 0; + } + ${EditorWrapper} { + ${containerStyle} + border-radius: ${({ theme }) => theme.borderRadius.small}; + } + ${BalloonToolbarBase} { + background-color: ${({ theme }) => theme.colors.gray[8]}; + box-shadow: 0px 10px 20px ${({ theme }) => transparentize(0.75, theme.colors.palette.black)}; + .slate-ToolbarButton-active, + .slate-ToolbarButton:hover { + color: ${({ theme }) => theme.colors.secondary}; + background-color: ${({ theme }) => transparentize(0.5, theme.colors.gray[8])}; + } + } + ${EditorPreviewWrapper} { + ${EditorStyles} { + ${containerStyleReset} + } + } + ${ComboboxRoot} { + backdrop-filter: blur(10px); + background: ${grayMixerTrans(9)}; + } + ${ComboboxItem} { + & > svg { + color: ${({ theme }) => theme.colors.secondary}; + } + } + ` + + const todoStyles = css` + ${TodoContainer} { + ${EditorStyles} { + padding: 0; + ${containerStyleReset} + } + } + ${StyledBoard} { + .react-kanban-column { + ${containerStyle} + } + } + ` + + const settingsStyles = css` + ${SettingsOptions} { + padding: ${({ theme }) => theme.spacing.medium}; + ${containerStyle} + } + ${BackCard} { + ${containerStyle} + } + ` + + const gridCardStyles = css` + ${ArchivedNode}, ${Result} { + ${containerStyle} + overflow: hidden; + } + ${SSnippet} { + ${containerStyle} + } + ${CreateSnippet} { + ${containerStyle} + } + ` + + const navStyles = css` + ${NavWrapper} { + margin: 0; + height: ${heightMain}; + min-height: ${heightMain}; + padding: ${({ theme }) => theme.spacing.small} 0 0; + ${containerStyle} + } + ${GridWrapper} { + margin: 2rem; + margin-left: ${({ theme }) => theme.spacing.medium}; + margin-right: -1rem; + margin-bottom: 0; + grid-gap: ${({ theme }) => theme.spacing.medium}; + } + ` + + const searchStyles = css` + ${SearchFilterListWrap} { + width: -webkit-fill-available; + } + ` + + const sidebarStyles = css` + ${SidebarDiv} { + height: ${heightMain}; + ${containerStyle} + margin-top: 0; + padding: 0; + } + ` + + const modalStyles = css` + .ModalContent { + ${containerStyle} + } + ` + const mainCss = css` + ${modalStyles} + ${navStyles} + ${sidebarStyles} + ${settingsStyles} + ${searchStyles} + ${gridCardStyles} + ${edStyles} + ${todoStyles} + ` + return mainCss +} diff --git a/apps/webapp/src/Themes/vertigoTheme.custom.tsx b/apps/webapp/src/Themes/vertigoTheme.custom.tsx new file mode 100644 index 000000000..794c8cc2e --- /dev/null +++ b/apps/webapp/src/Themes/vertigoTheme.custom.tsx @@ -0,0 +1,247 @@ +import { transparentize } from 'polished' +import { css } from 'styled-components' + +import { EditorStyles, MenuTrigger, Widget } from '@mexit/shared' + +import { BalloonToolbarBase } from '../Components/Editor/BalloonToolbar' +import { EditorPreviewWrapper } from '../Components/Editor/EditorPreview/EditorPreview.styles' +import { DataInfobarWrapper } from '../Components/Infobar/DataInfobar' +import { BackCard } from '../Style/Card' +import { ComboboxRoot, ComboboxItem } from '../Style/Combobox' +import { Title } from '../Style/Elements' +import { SILink } from '../Style/ILinkElement.styles' +import { StyledMenu } from '../Style/Menu' +import { NavWrapper, NavButton } from '../Style/Nav' +import { Result, ResultHeader, SearchContainer, SplitSearchPreviewWrapper } from '../Style/Search' +import { SidebarDiv } from '../Style/Sidebar' +import { CreateSnippet } from '../Style/Snippets' +import { TodoContainer } from '../Style/Todo.style' +import { ArchivedNode } from '../Views/Archive' +import { SettingsOptions, SettingTitle } from '../Views/Settings' +import { SpaceBlocksCss } from './spaceBlocks' + +const textStyleColors = css` + b, + i, + strong { + color: #a372e3; + } +` + +const headingColors = css` + h1 { + color: red; + } + h2 { + color: #abc86f; + } + h3 { + color: #83c182; + } + h4 { + color: #82c1aa; + } + h5 { + color: #82bec1; + } + h6 { + color: #699ecf; + } +` + +const listColors = css` + li::marker { + color: ${({ theme }) => transparentize(0.5, theme.colors.secondary)}; + } +` +const grayMixerTrans = (n: number) => css` + ${({ theme }) => transparentize(0.33, theme.colors.gray[n])} +` + +const heightMain = `calc(100vh - 4rem)` + +const edStyles = css` + ${MenuTrigger} { + background-color: ${({ theme }) => theme.colors.gray[10]}; + } + ${EditorStyles} { + border-radius: 1rem; + transition: all 0.25s ease-in-out; + blockquote { + background-color: ${({ theme }) => theme.colors.gray[9]}; + } + ${headingColors} + ${textStyleColors} + ${listColors} + } + ${SILink} { + .ILink_decoration { + color: ${({ theme }) => theme.colors.primary}; + &_left { + } + &_right { + margin-left: ${({ theme }) => theme.spacing.tiny}; + } + &_value { + font-weight: 600; + color: ${({ theme }) => theme.colors.primary}; + } + } + } + ${Widget} { + background-color: ${grayMixerTrans(9)}; + } + ${DataInfobarWrapper} { + border-radius: ${({ theme }) => theme.borderRadius.small}; + } + ${BalloonToolbarBase} { + background-color: ${({ theme }) => theme.colors.gray[8]}; + box-shadow: 0px 10px 20px ${({ theme }) => transparentize(0.75, theme.colors.palette.black)}; + .slate-ToolbarButton-active, + .slate-ToolbarButton:hover { + color: ${({ theme }) => theme.colors.secondary}; + background-color: ${({ theme }) => transparentize(0.5, theme.colors.gray[8])}; + } + } + ${EditorPreviewWrapper} { + ${EditorStyles} { + background: transparent; + } + } + ${ComboboxRoot} { + backdrop-filter: blur(10px); + background: ${grayMixerTrans(9)}; + } + ${ComboboxItem} { + & > svg { + color: ${({ theme }) => theme.colors.secondary}; + } + } +` + +const todoStyles = css` + ${TodoContainer} { + ${EditorStyles} { + padding: 0; + } + } +` + +const settingsStyles = css` + ${SettingsOptions} { + padding: ${({ theme }) => theme.spacing.medium}; + border-radius: ${({ theme }) => theme.borderRadius.small}; + } + ${SettingTitle} { + &:hover { + background-color: ${grayMixerTrans(8)}; + } + } + ${BackCard} { + border: none; + border-radius: ${({ theme }) => theme.borderRadius.small}; + } +` + +const gridCardStyles = css` + ${ArchivedNode}, ${Result} { + border-radius: ${({ theme }) => theme.borderRadius.small}; + overflow: hidden; + } + ${ResultHeader} { + background-color: ${grayMixerTrans(9)}; + } + ${CreateSnippet} { + background-color: ${grayMixerTrans(10)}; + } +` + +const searchStyles = css` + ${SearchContainer} { + margin-right: 3rem; + } + ${SplitSearchPreviewWrapper} { + ${Title} { + color: ${({ theme }) => theme.colors.primary}; + } + } +` + +const navStyles = css` + ${NavWrapper} { + border-radius: ${({ theme }) => theme.borderRadius.small}; + } + ${NavButton} { + margin-top: 0; + } +` + +const sidebarStyles = css` + ${SidebarDiv} { + border-radius: ${({ theme }) => theme.borderRadius.small}; + } +` + +const modalStyles = css` + .ModalContent { + border: none; + } + .ModalOverlay { + } + + ${StyledMenu} { + box-shadow: 0px 4px 8px ${({ theme }) => transparentize(0.5, theme.colors.palette.black)}; + background-color: ${({ theme }) => theme.colors.gray[9]}; + } +` + +const setFonts = (fontFamily: string) => css` + body { + font-family: ${fontFamily}; + } + ${EditorStyles} { + font-family: ${fontFamily}; + } +` + +const globalStyles = css` + ${setFonts('"Inter", sans-serif')} + + ::selection { + color: ${({ theme }) => theme.colors.text.oppositePrimary}; + background: ${({ theme }) => transparentize(0.5, theme.colors.primary)}; + } + + body { + background-color: ${({ theme }) => theme.colors.gray[10]}; + } +` + +const palette = { body: '#211E33', border: '#332A47' } + +const containerStyle = css` + background-color: ${transparentize(0.15, palette.body)}; + box-shadow: 0px 15px 40px ${({ theme }) => transparentize(0.9, theme.colors.palette.black)}; + border: 1px solid ${palette.border}; +` + +const containerStyleReset = css` + background-color: transparent; + box-shadow: none; + border: none; +` + +const spaceBlocks = SpaceBlocksCss({ containerStyle, containerStyleReset, heightMain }) + +export const VertigoStyles = css` + ${spaceBlocks} + ${globalStyles} + ${modalStyles} + ${navStyles} + ${sidebarStyles} + ${settingsStyles} + ${searchStyles} + ${gridCardStyles} + ${edStyles} + ${todoStyles} +` diff --git a/libs/shared/src/Style/Editor.tsx b/libs/shared/src/Style/Editor.tsx index 7c8ee7e66..60626d37b 100644 --- a/libs/shared/src/Style/Editor.tsx +++ b/libs/shared/src/Style/Editor.tsx @@ -2,7 +2,7 @@ import { mix, transparentize } from 'polished' import styled, { css } from 'styled-components' import { FOCUS_MODE_OPACITY } from '@mexit/core' -import { AsyncButton, Button } from '@mexit/shared' +import { Button, AsyncButton } from './Buttons' export interface FocusModeProp { // Focus mode is on? @@ -484,3 +484,54 @@ export const EditorStyles = css` color: ${({ theme }) => theme.colors.primary}; } ` + +interface MenuTriggerProps { + selected: boolean + readOnly: boolean +} + +export const MenuTrigger = styled.div` + display: flex; + align-items: center; + width: max-content; + padding: ${({ theme: { spacing } }) => `${spacing.small} ${spacing.medium}`}; + border-radius: ${({ theme }) => theme.borderRadius.small}; + border: 1px dashed ${({ theme }) => theme.colors.form.input.border}; + svg { + margin-right: ${({ theme }) => theme.spacing.small}; + } + + ${({ readOnly, theme }) => + !readOnly && + css` + cursor: pointer; + &:hover { + border-color: ${theme.colors.primary}; + } + `} + + ${({ theme, selected }) => + selected && + css` + border: 1px solid transparent; + background-color: ${theme.colors.gray[8]}; + svg { + color: ${theme.colors.primary}; + } + `} +` + +export const Widget = styled.div` + display: flex; + align-items: center; + font-size: 0.9rem; + color: ${({ theme }) => theme.colors.text.subheading}; + background-color: ${({ theme }) => theme.colors.gray[9]}; + padding: ${({ theme: { spacing } }) => `${spacing.tiny} ${spacing.medium}`}; + width: max-content; + border-radius: ${({ theme }) => theme.borderRadius.small}; + margin-right: ${({ theme }) => theme.spacing.medium}; + svg { + margin-right: ${({ theme }) => theme.spacing.small}; + } +` diff --git a/libs/shared/src/Themes/hackerTheme.tsx b/libs/shared/src/Themes/hackerTheme.tsx index 9753ec1d8..97a634319 100644 --- a/libs/shared/src/Themes/hackerTheme.tsx +++ b/libs/shared/src/Themes/hackerTheme.tsx @@ -39,5 +39,6 @@ export const hackerTheme = generateTheme({ backgroundImages: { app: 'https://i.imgur.com/OCW3IAi.png', preview: 'https://i.imgur.com/qSimBsf.png' - } + }, + custom: 'HackerStyles' }) diff --git a/libs/shared/src/Themes/neoDarkTheme.tsx b/libs/shared/src/Themes/neoDarkTheme.tsx index 6271ec02e..7f2ff3aa8 100644 --- a/libs/shared/src/Themes/neoDarkTheme.tsx +++ b/libs/shared/src/Themes/neoDarkTheme.tsx @@ -39,5 +39,6 @@ export const neoDark = generateTheme({ accent: '#CC7796', oppositePrimary: '#ffffff' }, - hasBlocks: true + hasBlocks: true, + custom: 'NeoDarkStyles' }) diff --git a/libs/shared/src/Themes/neoLightTheme.tsx b/libs/shared/src/Themes/neoLightTheme.tsx index 4fb1ca603..e4056fd1d 100644 --- a/libs/shared/src/Themes/neoLightTheme.tsx +++ b/libs/shared/src/Themes/neoLightTheme.tsx @@ -42,5 +42,6 @@ export const neoLight = generateTheme({ // backgroundImages: { // app: 'https://i.imgur.com/Z2iNoSC.jpg' // }, - hasBlocks: true + hasBlocks: true, + custom: 'NeoLightStyles' }) diff --git a/libs/shared/src/Themes/renarTheme.tsx b/libs/shared/src/Themes/renarTheme.tsx index c365b731c..505a67915 100644 --- a/libs/shared/src/Themes/renarTheme.tsx +++ b/libs/shared/src/Themes/renarTheme.tsx @@ -38,5 +38,6 @@ export const renarTheme = generateTheme({ backgroundImages: { app: 'https://i.imgur.com/MExxqeL.jpg', preview: 'https://i.imgur.com/Hv7XOvQ.png' - } + }, + custom: 'RenarStyles' }) diff --git a/libs/shared/src/Themes/vertigoTheme.tsx b/libs/shared/src/Themes/vertigoTheme.tsx index 42bc4b9f2..d6c480da9 100644 --- a/libs/shared/src/Themes/vertigoTheme.tsx +++ b/libs/shared/src/Themes/vertigoTheme.tsx @@ -39,5 +39,6 @@ export const vertigoTheme = generateTheme({ backgroundImages: { app: 'https://i.imgur.com/5og7Xot.png', preview: 'https://i.imgur.com/8tfThnE.png' - } + }, + custom: 'VertigoStyles' }) From 8ed363fa1e4adc0436bca9ec4372cc7c9435f77d Mon Sep 17 00:00:00 2001 From: Sahil Shubham Date: Fri, 3 Jun 2022 16:14:51 +0530 Subject: [PATCH 2/3] removed desktop specific traffic light component; Signed-off-by: Sahil Shubham --- apps/webapp/src/Components/Sidebar/Nav.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/webapp/src/Components/Sidebar/Nav.tsx b/apps/webapp/src/Components/Sidebar/Nav.tsx index 9c826889e..e98a5c769 100644 --- a/apps/webapp/src/Components/Sidebar/Nav.tsx +++ b/apps/webapp/src/Components/Sidebar/Nav.tsx @@ -235,7 +235,7 @@ const Nav = ({ links }: NavProps) => { - + {/* */} ) From 891447714e61ab5d26834f755cacbebad9f54256 Mon Sep 17 00:00:00 2001 From: Sahil Shubham Date: Fri, 3 Jun 2022 18:47:50 +0530 Subject: [PATCH 3/3] fixed custom styles on webapp; Signed-off-by: Sahil Shubham --- .../extension/src/Components/Editor/index.tsx | 32 ++++++++++--------- .../src/Components/Editor/styled.tsx | 2 -- apps/webapp/src/Components/Editor/Editor.tsx | 4 +-- .../src/Components/EditorPreviewRenderer.tsx | 16 +++++++--- apps/webapp/src/Components/Sidebar/Nav.tsx | 22 ++++++++----- apps/webapp/src/Themes/SpaceAmethyst.tsx | 21 ++++++++++++ apps/webapp/src/Themes/customStyles.tsx | 4 ++- .../webapp/src/Themes/vertigoTheme.custom.tsx | 2 +- libs/shared/src/Style/Editor.tsx | 2 +- libs/shared/src/Themes/imperialTheme.tsx | 3 +- libs/shared/src/Themes/vvkTheme.tsx | 3 +- 11 files changed, 74 insertions(+), 37 deletions(-) create mode 100644 apps/webapp/src/Themes/SpaceAmethyst.tsx diff --git a/apps/extension/src/Components/Editor/index.tsx b/apps/extension/src/Components/Editor/index.tsx index af1f822a9..b7798406c 100644 --- a/apps/extension/src/Components/Editor/index.tsx +++ b/apps/extension/src/Components/Editor/index.tsx @@ -15,7 +15,7 @@ import { useDebouncedCallback } from 'use-debounce' import React, { useState, useEffect, useMemo, useRef } from 'react' import styled from 'styled-components' -import { useEditorChange } from '@mexit/shared' +import { EditorStyles, useEditorChange } from '@mexit/shared' import generatePlugins from '../../Utils/plugins' import { useAuthStore } from '../../Hooks/useAuth' import { EditorWrapper } from './styled' @@ -170,20 +170,22 @@ export const Editor: React.FC = ({ readOnly, onChange }) => { return ( setPreviewMode(false)} onBlur={() => setPreviewMode(true)}> - } - onChange={debounced} - options={editorOptions} - editorId={node.nodeid} - value={nodeContent} - portalElement={document.getElementById('mexit').shadowRoot.getElementById('sputlit-main')} - /> + + } + onChange={debounced} + options={editorOptions} + editorId={node.nodeid} + value={nodeContent} + portalElement={document.getElementById('mexit').shadowRoot.getElementById('sputlit-main')} + /> + ) } diff --git a/apps/extension/src/Components/Editor/styled.tsx b/apps/extension/src/Components/Editor/styled.tsx index 94097ca26..6e874a724 100644 --- a/apps/extension/src/Components/Editor/styled.tsx +++ b/apps/extension/src/Components/Editor/styled.tsx @@ -1,7 +1,6 @@ import styled, { css } from 'styled-components' import { Scroll } from '../Results/styled' import { animated } from 'react-spring' -import { EditorStyles } from '@mexit/shared' export const EditorWrapper = styled(animated.div)` display: flex; @@ -13,5 +12,4 @@ export const EditorWrapper = styled(animated.div)` color: ${({ theme }) => theme.colors.text.fade}; border-radius: 10px; ${Scroll} - ${EditorStyles} ` diff --git a/apps/webapp/src/Components/Editor/Editor.tsx b/apps/webapp/src/Components/Editor/Editor.tsx index cfc5390ea..92b66fadc 100644 --- a/apps/webapp/src/Components/Editor/Editor.tsx +++ b/apps/webapp/src/Components/Editor/Editor.tsx @@ -22,13 +22,11 @@ import Todo from '../Todo' import { useEditorChange } from '@mexit/shared' import { EditorStyles } from '@mexit/shared' -const EditorWrapper = styled.div` +const EditorWrapper = styled(EditorStyles)` flex: 1; max-width: 800px; margin: 1rem; padding: 1rem; - - ${EditorStyles} ` interface EditorProps { diff --git a/apps/webapp/src/Components/EditorPreviewRenderer.tsx b/apps/webapp/src/Components/EditorPreviewRenderer.tsx index cca1b629d..2655d33a1 100644 --- a/apps/webapp/src/Components/EditorPreviewRenderer.tsx +++ b/apps/webapp/src/Components/EditorPreviewRenderer.tsx @@ -1,4 +1,11 @@ -import { ComboboxConfig, ComboboxKey, MexEditor, useDataStore } from '@workduck-io/mex-editor' +import { + ComboboxConfig, + ComboboxKey, + ELEMENT_ILINK, + ELEMENT_TAG, + MexEditor, + useDataStore +} from '@workduck-io/mex-editor' import React, { useEffect } from 'react' import styled from 'styled-components' import { useBlockHighlightStore, useFocusBlock } from '../Stores/useFocusBlock' @@ -20,12 +27,10 @@ interface EditorPreviewRendererProps { onDoubleClick?: (ev: React.MouseEvent) => void } -const PreviewStyles = styled.div<{ noMouseEvents: boolean }>` +const PreviewStyles = styled(EditorStyles)<{ noMouseEvents: boolean }>` ${({ noMouseEvents }) => noMouseEvents && 'pointer-events: none;'}; user-select: none; font-size: 14px; - - ${EditorStyles} ` /* ${TodoContainer}, button, input, textarea, select, option { pointer-events: none; @@ -50,12 +55,15 @@ const EditorPreviewRenderer = ({ keys: { ilink: { // @ts-ignore + slateElementType: ELEMENT_ILINK, newItemHandler: (ilink: string, parentId?: string) => addILink(ilink, null, parentId) }, tag: { + slateElementType: ELEMENT_TAG, newItemHandler: (tag: string) => addTag(tag) }, slash_command: { + slateElementType: 'slash_command', newItemHandler: () => undefined } }, diff --git a/apps/webapp/src/Components/Sidebar/Nav.tsx b/apps/webapp/src/Components/Sidebar/Nav.tsx index e98a5c769..8fa65af73 100644 --- a/apps/webapp/src/Components/Sidebar/Nav.tsx +++ b/apps/webapp/src/Components/Sidebar/Nav.tsx @@ -144,9 +144,11 @@ const Nav = ({ links }: NavProps) => { content={l.shortcut ? : l.title} > (s.isActive ? 'active' : '')} to={l.path} key={`nav_${l.title}`}> - {l.icon !== undefined ? l.icon : l.title} - {l.title} - {l.count > 0 && {l.count}} + <> + {l.icon !== undefined ? l.icon : l.title} + {l.title} + {l.count > 0 && {l.count}} + ) @@ -206,9 +208,11 @@ const Nav = ({ links }: NavProps) => { to={ROUTE_PATHS.archive} key="nav_search" > - {GetIcon(archiveFill)} - Archive - {archiveCount > 0 && {archiveCount}} + <> + {GetIcon(archiveFill)} + Archive + {archiveCount > 0 && {archiveCount}} + {/* @@ -229,8 +233,10 @@ const Nav = ({ links }: NavProps) => { to={`${ROUTE_PATHS.settings}/themes`} key="nav_settings" > - {GetIcon(settings4Line)} - Settings + <> + {GetIcon(settings4Line)} + Settings + diff --git a/apps/webapp/src/Themes/SpaceAmethyst.tsx b/apps/webapp/src/Themes/SpaceAmethyst.tsx new file mode 100644 index 000000000..dcbdad186 --- /dev/null +++ b/apps/webapp/src/Themes/SpaceAmethyst.tsx @@ -0,0 +1,21 @@ +import { transparentize } from 'polished' +import { css } from 'styled-components' +import { SpaceBlocksCss } from './spaceBlocks' + +const blockCss = SpaceBlocksCss({ + containerStyle: css` + background-color: ${({ theme }) => transparentize(0.1, '#1b1e2a')}; + box-shadow: 0px 15px 40px ${({ theme }) => transparentize(0.9, theme.colors.palette.black)}; + border: 1px solid ${({ theme }) => transparentize(0.8, theme.colors.gray[6])}; + border-radius: ${({ theme }) => theme.borderRadius.small}; + `, + containerStyleReset: css` + background-color: transparent; + box-shadow: none; + border-radius: 0; + `, + heightMain: 'calc(100vh - 4rem)' +}) +export const SpaceAmethyst = css` + ${blockCss} +` diff --git a/apps/webapp/src/Themes/customStyles.tsx b/apps/webapp/src/Themes/customStyles.tsx index 75bb9dbaa..618f04951 100644 --- a/apps/webapp/src/Themes/customStyles.tsx +++ b/apps/webapp/src/Themes/customStyles.tsx @@ -3,6 +3,7 @@ import { NeoLightStyles } from './neoLight.custom' import { NeoDarkStyles } from './neoDark.custom' import { ImperialStyles, RenarStyles } from './renarTheme.custom' import { VertigoStyles } from './vertigoTheme.custom' +import { SpaceAmethyst } from './SpaceAmethyst' export const customStyles = { VertigoStyles, @@ -10,5 +11,6 @@ export const customStyles = { RenarStyles, HackerStyles, NeoLightStyles, - NeoDarkStyles + NeoDarkStyles, + SpaceAmethyst } diff --git a/apps/webapp/src/Themes/vertigoTheme.custom.tsx b/apps/webapp/src/Themes/vertigoTheme.custom.tsx index 794c8cc2e..b1031bcaa 100644 --- a/apps/webapp/src/Themes/vertigoTheme.custom.tsx +++ b/apps/webapp/src/Themes/vertigoTheme.custom.tsx @@ -30,7 +30,7 @@ const textStyleColors = css` const headingColors = css` h1 { - color: red; + color: #dfcc84; } h2 { color: #abc86f; diff --git a/libs/shared/src/Style/Editor.tsx b/libs/shared/src/Style/Editor.tsx index 60626d37b..170bd591c 100644 --- a/libs/shared/src/Style/Editor.tsx +++ b/libs/shared/src/Style/Editor.tsx @@ -90,7 +90,7 @@ export const StyledEditor = styled.div` width: 100%; } ` -export const EditorStyles = css` +export const EditorStyles = styled.div` font-family: 'Inter', sans-serif; /* font-weight: 400; */ line-height: 1.75; diff --git a/libs/shared/src/Themes/imperialTheme.tsx b/libs/shared/src/Themes/imperialTheme.tsx index 98b786760..f90390ae8 100644 --- a/libs/shared/src/Themes/imperialTheme.tsx +++ b/libs/shared/src/Themes/imperialTheme.tsx @@ -39,5 +39,6 @@ export const imperialTheme = generateTheme({ backgroundImages: { app: 'https://i.imgur.com/Z2iNoSC.jpg', preview: 'https://i.imgur.com/2zgshMW.png' - } + }, + custom: 'ImperialStyles' }) diff --git a/libs/shared/src/Themes/vvkTheme.tsx b/libs/shared/src/Themes/vvkTheme.tsx index 684b17bda..851b7bb30 100644 --- a/libs/shared/src/Themes/vvkTheme.tsx +++ b/libs/shared/src/Themes/vvkTheme.tsx @@ -38,5 +38,6 @@ export const vvkTheme = generateTheme({ backgroundImages: { app: 'https://wallpapercave.com/wp/wp2757874.gif', preview: 'https://wallpapercave.com/wp/wp2757874.gif' - } + }, + custom: 'SpaceAmethyst' })