Skip to content

Commit 0452607

Browse files
sahil-shubhamMukul Mehta
sahil-shubham
and
Mukul Mehta
authored
Add custom theme styles and use them in GlobalStyle (#72)
#72 * Add custom theme styles and use them in GlobalStyle * removed desktop specific traffic light component; Signed-off-by: Sahil Shubham <[email protected]> * fixed custom styles on webapp; Signed-off-by: Sahil Shubham <[email protected]> Co-authored-by: Mukul Mehta <[email protected]>
1 parent 116f467 commit 0452607

24 files changed

+1364
-45
lines changed

‎apps/extension/src/Components/Editor/index.tsx

+17-15
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { useDebouncedCallback } from 'use-debounce'
1515
import React, { useState, useEffect, useMemo, useRef } from 'react'
1616
import styled from 'styled-components'
1717

18-
import { useEditorChange } from '@mexit/shared'
18+
import { EditorStyles, useEditorChange } from '@mexit/shared'
1919
import generatePlugins from '../../Utils/plugins'
2020
import { useAuthStore } from '../../Hooks/useAuth'
2121
import { EditorWrapper } from './styled'
@@ -170,20 +170,22 @@ export const Editor: React.FC<EditorProps> = ({ readOnly, onChange }) => {
170170

171171
return (
172172
<EditorWrapper style={springProps} onClick={() => setPreviewMode(false)} onBlur={() => setPreviewMode(true)}>
173-
<MexEditor
174-
comboboxConfig={comboboxConfig}
175-
meta={{
176-
path: node.path
177-
}}
178-
// debug
179-
components={components}
180-
BalloonMarkToolbarButtons={<BallonMarkToolbarButtons />}
181-
onChange={debounced}
182-
options={editorOptions}
183-
editorId={node.nodeid}
184-
value={nodeContent}
185-
portalElement={document.getElementById('mexit').shadowRoot.getElementById('sputlit-main')}
186-
/>
173+
<EditorStyles>
174+
<MexEditor
175+
comboboxConfig={comboboxConfig}
176+
meta={{
177+
path: node.path
178+
}}
179+
// debug
180+
components={components}
181+
BalloonMarkToolbarButtons={<BallonMarkToolbarButtons />}
182+
onChange={debounced}
183+
options={editorOptions}
184+
editorId={node.nodeid}
185+
value={nodeContent}
186+
portalElement={document.getElementById('mexit').shadowRoot.getElementById('sputlit-main')}
187+
/>
188+
</EditorStyles>
187189
</EditorWrapper>
188190
)
189191
}

‎apps/extension/src/Components/Editor/styled.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import styled, { css } from 'styled-components'
22
import { Scroll } from '../Results/styled'
33
import { animated } from 'react-spring'
4-
import { EditorStyles } from '@mexit/shared'
54

65
export const EditorWrapper = styled(animated.div)`
76
display: flex;
@@ -13,5 +12,4 @@ export const EditorWrapper = styled(animated.div)`
1312
color: ${({ theme }) => theme.colors.text.fade};
1413
border-radius: 10px;
1514
${Scroll}
16-
${EditorStyles}
1715
`

‎apps/webapp/src/Components/Editor/Editor.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,11 @@ import Todo from '../Todo'
2222
import { useEditorChange } from '@mexit/shared'
2323
import { EditorStyles } from '@mexit/shared'
2424

25-
const EditorWrapper = styled.div`
25+
const EditorWrapper = styled(EditorStyles)`
2626
flex: 1;
2727
max-width: 800px;
2828
margin: 1rem;
2929
padding: 1rem;
30-
31-
${EditorStyles}
3230
`
3331

3432
interface EditorProps {

‎apps/webapp/src/Components/EditorPreviewRenderer.tsx

+12-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
import { ComboboxConfig, ComboboxKey, MexEditor, useDataStore } from '@workduck-io/mex-editor'
1+
import {
2+
ComboboxConfig,
3+
ComboboxKey,
4+
ELEMENT_ILINK,
5+
ELEMENT_TAG,
6+
MexEditor,
7+
useDataStore
8+
} from '@workduck-io/mex-editor'
29
import React, { useEffect } from 'react'
310
import styled from 'styled-components'
411
import { useBlockHighlightStore, useFocusBlock } from '../Stores/useFocusBlock'
@@ -20,12 +27,10 @@ interface EditorPreviewRendererProps {
2027
onDoubleClick?: (ev: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
2128
}
2229

23-
const PreviewStyles = styled.div<{ noMouseEvents: boolean }>`
30+
const PreviewStyles = styled(EditorStyles)<{ noMouseEvents: boolean }>`
2431
${({ noMouseEvents }) => noMouseEvents && 'pointer-events: none;'};
2532
user-select: none;
2633
font-size: 14px;
27-
28-
${EditorStyles}
2934
`
3035
/* ${TodoContainer}, button, input, textarea, select, option {
3136
pointer-events: none;
@@ -50,12 +55,15 @@ const EditorPreviewRenderer = ({
5055
keys: {
5156
ilink: {
5257
// @ts-ignore
58+
slateElementType: ELEMENT_ILINK,
5359
newItemHandler: (ilink: string, parentId?: string) => addILink(ilink, null, parentId)
5460
},
5561
tag: {
62+
slateElementType: ELEMENT_TAG,
5663
newItemHandler: (tag: string) => addTag(tag)
5764
},
5865
slash_command: {
66+
slateElementType: 'slash_command',
5967
newItemHandler: () => undefined
6068
}
6169
},

‎apps/webapp/src/Components/Sidebar/Nav.tsx

+15-9
Original file line numberDiff line numberDiff line change
@@ -144,9 +144,11 @@ const Nav = ({ links }: NavProps) => {
144144
content={l.shortcut ? <TooltipTitleWithShortcut title={l.title} shortcut={l.shortcut} /> : l.title}
145145
>
146146
<Link tabIndex={-1} className={(s) => (s.isActive ? 'active' : '')} to={l.path} key={`nav_${l.title}`}>
147-
{l.icon !== undefined ? l.icon : l.title}
148-
<NavTitle>{l.title}</NavTitle>
149-
{l.count > 0 && <Count>{l.count}</Count>}
147+
<>
148+
{l.icon !== undefined ? l.icon : l.title}
149+
<NavTitle>{l.title}</NavTitle>
150+
{l.count > 0 && <Count>{l.count}</Count>}
151+
</>
150152
</Link>
151153
</NavTooltip>
152154
)
@@ -206,9 +208,11 @@ const Nav = ({ links }: NavProps) => {
206208
to={ROUTE_PATHS.archive}
207209
key="nav_search"
208210
>
209-
{GetIcon(archiveFill)}
210-
<NavTitle>Archive</NavTitle>
211-
{archiveCount > 0 && <Count>{archiveCount}</Count>}
211+
<>
212+
{GetIcon(archiveFill)}
213+
<NavTitle>Archive</NavTitle>
214+
{archiveCount > 0 && <Count>{archiveCount}</Count>}
215+
</>
212216
</Link>
213217
</NavTooltip>
214218
{/*
@@ -229,13 +233,15 @@ const Nav = ({ links }: NavProps) => {
229233
to={`${ROUTE_PATHS.settings}/themes`}
230234
key="nav_settings"
231235
>
232-
{GetIcon(settings4Line)}
233-
<NavTitle>Settings</NavTitle>
236+
<>
237+
{GetIcon(settings4Line)}
238+
<NavTitle>Settings</NavTitle>
239+
</>
234240
</Link>
235241
</NavTooltip>
236242
</EndLinkContainer>
237243
</NavWrapper>
238-
<TrafficLightBG />
244+
{/* <TrafficLightBG /> */}
239245
<SidebarToggle />
240246
</>
241247
)

‎apps/webapp/src/Style/Combobox.tsx

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import styled, { css } from 'styled-components'
2+
3+
export const ComboboxItem = styled.div`
4+
display: flex;
5+
align-items: center;
6+
font-size: 14px;
7+
gap: ${({ theme }) => theme.spacing.tiny};
8+
9+
:first-child {
10+
border-radius: 6px 6px 0 0;
11+
}
12+
13+
:last-child {
14+
border-radius: 0 0 6px 6px;
15+
}
16+
17+
font-weight: 400;
18+
padding: 0 8px;
19+
min-height: 36px;
20+
user-select: none;
21+
width: 300px;
22+
color: ${({ theme }) => theme.colors.text.default};
23+
&.highlight {
24+
background: ${({ theme }) => theme.colors.background.highlight};
25+
}
26+
cursor: pointer;
27+
28+
:hover {
29+
background-color: ${({ theme }) => theme.colors.background.highlight};
30+
}
31+
32+
& > svg {
33+
color: ${({ theme }) => theme.colors.gray[4]};
34+
}
35+
`
36+
export const ComboboxRoot = styled.div<{ isOpen: boolean }>`
37+
:hover {
38+
${ComboboxItem} {
39+
&.highlight {
40+
&:hover {
41+
}
42+
}
43+
}
44+
}
45+
/* &.reversed {
46+
transform: rotate(180deg);
47+
${ComboboxItem} {
48+
transform: rotate(-180deg);
49+
}
50+
} */
51+
52+
${({ isOpen, theme }) =>
53+
isOpen &&
54+
css`
55+
top: -9999px;
56+
left: -9999px;
57+
position: absolute;
58+
padding: 0;
59+
background: none !important;
60+
display: flex;
61+
margin: 0;
62+
z-index: 11;
63+
height: fit-content;
64+
65+
> div {
66+
background: ${theme.colors.background.modal};
67+
height: fit-content;
68+
/* max-height: 400px; */
69+
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;
70+
border-radius: ${theme.borderRadius.small};
71+
72+
> section {
73+
max-height: 30vh;
74+
overflow-y: auto;
75+
overflow-x: hidden;
76+
}
77+
}
78+
`}
79+
`
80+
81+
export const ItemTitle = styled.div`
82+
text-overflow: ellipsis;
83+
white-space: nowrap;
84+
overflow: hidden;
85+
/* width: 200px; */
86+
`
87+
88+
export const ItemRightIcons = styled.div`
89+
display: flex;
90+
flex-gap: ${({ theme }) => theme.spacing.tiny};
91+
`
92+
93+
export const ItemDesc = styled.div`
94+
margin: ${({ theme }) => theme.spacing.tiny} 0;
95+
color: ${({ theme }) => theme.colors.text.fade};
96+
font-size: 0.8rem;
97+
white-space: nowrap;
98+
overflow: hidden;
99+
text-overflow: ellipsis;
100+
`
101+
export const ItemCenterWrapper = styled.div`
102+
width: 90%;
103+
`

‎apps/webapp/src/Style/GlobalStyle.ts

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { normalize } from '@mexit/shared'
21
import { createGlobalStyle, css } from 'styled-components'
32

4-
import { ThinScrollbar } from './Helpers'
5-
import { EditorBalloonStyles, TippyBalloonStyles } from '@mexit/shared'
3+
import { EditorBalloonStyles, TippyBalloonStyles, normalize } from '@mexit/shared'
64

5+
import { ThinScrollbar } from './Helpers'
76
import { ModalStyles } from './Refactor'
7+
import { customStyles } from '../Themes/customStyles'
88

99
const GlobalStyle = createGlobalStyle`
1010
${normalize}; // NormalizeCSS normalization
@@ -84,6 +84,8 @@ const GlobalStyle = createGlobalStyle`
8484
button {
8585
border: none;
8686
}
87+
88+
${({ theme }) => theme.custom && customStyles[theme.custom]}
8789
`
8890

8991
export default GlobalStyle

‎apps/webapp/src/Style/Search.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,16 @@ export const SearchFilterList = styled.div`
8181
gap: ${({ theme }) => theme.spacing.small};
8282
`
8383

84+
export const SearchFilterListWrap = styled.div`
85+
display: flex;
86+
align-items: center;
87+
justify-content: flex-start;
88+
gap: ${({ theme }) => theme.spacing.small};
89+
margin-right: ${({ theme }) => theme.spacing.medium};
90+
max-width: 70vw;
91+
overflow-x: auto;
92+
`
93+
8494
export const SearchFilterCancel = styled.div`
8595
cursor: pointer;
8696
display: flex;

‎apps/webapp/src/Themes/SpaceAmethyst.tsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { transparentize } from 'polished'
2+
import { css } from 'styled-components'
3+
import { SpaceBlocksCss } from './spaceBlocks'
4+
5+
const blockCss = SpaceBlocksCss({
6+
containerStyle: css`
7+
background-color: ${({ theme }) => transparentize(0.1, '#1b1e2a')};
8+
box-shadow: 0px 15px 40px ${({ theme }) => transparentize(0.9, theme.colors.palette.black)};
9+
border: 1px solid ${({ theme }) => transparentize(0.8, theme.colors.gray[6])};
10+
border-radius: ${({ theme }) => theme.borderRadius.small};
11+
`,
12+
containerStyleReset: css`
13+
background-color: transparent;
14+
box-shadow: none;
15+
border-radius: 0;
16+
`,
17+
heightMain: 'calc(100vh - 4rem)'
18+
})
19+
export const SpaceAmethyst = css`
20+
${blockCss}
21+
`

‎apps/webapp/src/Themes/customStyles.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { HackerStyles } from './hackerTheme.custom'
2+
import { NeoLightStyles } from './neoLight.custom'
3+
import { NeoDarkStyles } from './neoDark.custom'
4+
import { ImperialStyles, RenarStyles } from './renarTheme.custom'
5+
import { VertigoStyles } from './vertigoTheme.custom'
6+
import { SpaceAmethyst } from './SpaceAmethyst'
7+
8+
export const customStyles = {
9+
VertigoStyles,
10+
ImperialStyles,
11+
RenarStyles,
12+
HackerStyles,
13+
NeoLightStyles,
14+
NeoDarkStyles,
15+
SpaceAmethyst
16+
}

0 commit comments

Comments
 (0)