rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add styled-components (#1126)

Browse Source
This commit is contained in:
Aman Harwara
2022-06-21 12:49:30 +05:30
committed by GitHub
parent 49bb5c2001
commit 946d50b5df
3 changed files with 14 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/web/package.json
View File

@@ -77,7 +77,8 @@
"react-dnd": "^16.0.1", "react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1", "react-dnd-html5-backend": "^16.0.1",
"react-dnd-touch-backend": "^16.0.1", "react-dnd-touch-backend": "^16.0.1",
"react-dom": "^18.1.0" "react-dom": "^18.1.0",
"styled-components": "^5.3.5"
}, },
"lint-staged": { "lint-staged": {
"app/**/*.{js,ts,jsx,tsx}": "eslint --cache --fix", "app/**/*.{js,ts,jsx,tsx}": "eslint --cache --fix",

21
packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx
View File

@@ -1,12 +1,20 @@
import { getPlatformString } from '@/Utils' import { getPlatformString } from '@/Utils'
import { DialogOverlay, DialogContent } from '@reach/dialog' import { DialogOverlay, DialogContent } from '@reach/dialog'
import { ReactNode } from 'react' import { ReactNode } from 'react'
import styled from 'styled-components'
type Props = { type Props = {
children: ReactNode children: ReactNode
onDismiss: () => void onDismiss: () => void
} }
const StyledDialogContent = styled(DialogContent)`
width: 90%;
max-width: 90%;
min-height: 90%;
background: var(--modal-background-color);
`
const HistoryModalDialog = ({ children, onDismiss }: Props) => { const HistoryModalDialog = ({ children, onDismiss }: Props) => {
return ( return (
<DialogOverlay <DialogOverlay
@@ -14,18 +22,9 @@ const HistoryModalDialog = ({ children, onDismiss }: Props) => {
onDismiss={onDismiss} onDismiss={onDismiss}
aria-label="Note revision history" aria-label="Note revision history"
> >
<DialogContent <StyledDialogContent aria-label="Note revision history" className="rounded shadow-overlay">
aria-label="Note revision history"
className="rounded shadow-overlay"
style={{
width: '90%',
maxWidth: '90%',
minHeight: '90%',
background: 'var(--modal-background-color)',
}}
>
<div className="bg-default flex flex-col h-full overflow-hidden">{children}</div> <div className="bg-default flex flex-col h-full overflow-hidden">{children}</div>
</DialogContent> </StyledDialogContent>
</DialogOverlay> </DialogOverlay>
) )
} }

3
yarn.lock
View File

@@ -6154,6 +6154,7 @@ __metadata:
react-dnd-touch-backend: ^16.0.1 react-dnd-touch-backend: ^16.0.1
react-dom: ^18.1.0 react-dom: ^18.1.0
sass-loader: ^12.6.0 sass-loader: ^12.6.0
styled-components: ^5.3.5
svg-jest: ^1.0.1 svg-jest: ^1.0.1
ts-jest: ^27.1.4 ts-jest: ^27.1.4
ts-loader: ^9.2.8 ts-loader: ^9.2.8
@@ -29911,7 +29912,7 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"styled-components@npm:5.3.5": "styled-components@npm:5.3.5, styled-components@npm:^5.3.5":
version: 5.3.5 version: 5.3.5
resolution: "styled-components@npm:5.3.5" resolution: "styled-components@npm:5.3.5"
dependencies: dependencies: