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

feat(web): tailwind css (#1147)

Browse Source
This commit is contained in:
Aman Harwara
2022-06-28 02:50:52 +05:30
committed by GitHub
parent 0ead805412
commit b80038f607
201 changed files with 1824 additions and 2699 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/web/src/javascripts/Components/Preferences/PreferencesComponents/Content.tsx
View File

@@ -2,7 +2,7 @@ import { FunctionComponent } from 'react'
export const Title: FunctionComponent = ({ children }) => (
<>
<h2 className="text-base m-0 mb-1 info">{children}</h2>
<h2 className="text-base m-0 mb-1 text-info font-bold">{children}</h2>
<div className="min-h-2" />
</>
)
@@ -20,9 +20,9 @@ export const Text: FunctionComponent<{ className?: string }> = ({ children, clas
)
const buttonClasses =
'block bg-default color-text rounded border-solid \
border-1 px-4 py-1.75 font-bold text-sm fit-content \
focus:bg-contrast hover:bg-contrast border-main'
'block bg-default text-text rounded border-solid \
border px-4 py-1.5 font-bold text-sm w-fit \
focus:bg-contrast hover:bg-contrast border-border'
export const LinkButton: FunctionComponent<{
label: string

8
packages/web/src/javascripts/Components/Preferences/PreferencesComponents/MenuItem.tsx
View File

@@ -12,16 +12,18 @@ interface Props {
const PreferencesMenuItem: FunctionComponent<Props> = ({ iconType, label, selected, onClick, hasBubble }) => (
<div
className={`preferences-menu-item select-none ${selected ? 'selected' : ''}`}
className={`preferences-menu-item box-border w-auto h-auto rounded min-w-42 py-2 px-4 flex flex-row items-center justify-start text-sm cursor-pointer border-solid border select-none hover:border-border hover:bg-default ${
selected ? 'selected border-info text-info font-bold' : 'border-transparent'
}`}
onClick={(e) => {
e.preventDefault()
onClick()
}}
>
<Icon className="icon" type={iconType} />
<Icon className={`icon text-base ${selected ? 'text-info' : 'text-neutral'}`} type={iconType} />
<div className="min-w-1" />
{label}
{hasBubble && <span className="ml-1 color-warning">⚠️</span>}
{hasBubble && <span className="ml-1 text-warning">⚠️</span>}
</div>
)

2
packages/web/src/javascripts/Components/Preferences/PreferencesComponents/PreferencesGroup.tsx
View File

@@ -1,7 +1,7 @@
import { FunctionComponent } from 'react'
const PreferencesGroup: FunctionComponent = ({ children }) => (
<div className="bg-default border-1 border-solid rounded border-main px-6 py-6 flex flex-col mb-3">{children}</div>
<div className="bg-default border border-solid rounded border-border p-6 flex flex-col mb-3">{children}</div>
)
export default PreferencesGroup

4
packages/web/src/javascripts/Components/Preferences/PreferencesComponents/PreferencesPane.tsx
View File

@@ -1,13 +1,13 @@
import { FunctionComponent } from 'react'
const PreferencesPane: FunctionComponent = ({ children }) => (
<div className="color-foreground flex-grow flex flex-row overflow-y-auto min-h-0">
<div className="text-foreground flex-grow flex flex-row overflow-y-auto min-h-0">
<div className="flex-grow flex flex-col py-6 items-center">
<div className="w-125 max-w-125 flex flex-col">
{children != undefined && Array.isArray(children) ? children.filter((child) => child != undefined) : children}
</div>
</div>
<div className="flex-basis-55 flex-shrink" />
<div className="basis-[13.75rem] flex-shrink" />
</div>
)