rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 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

6
packages/web/src/javascripts/Components/Input/DecoratedInput.tsx
View File

@@ -3,10 +3,10 @@ import { DecoratedInputProps } from './DecoratedInputProps'
const getClassNames = (hasLeftDecorations: boolean, hasRightDecorations: boolean) => {
return {
container: `flex items-stretch position-relative bg-default border-1 border-solid border-main rounded focus-within:ring-info overflow-hidden ${
container: `flex items-stretch position-relative bg-default border border-solid border-border rounded focus-within:ring-2 focus-within:ring-info overflow-hidden text-sm ${
!hasLeftDecorations && !hasRightDecorations ? 'px-2 py-1.5' : ''
}`,
input: `w-full border-0 focus:shadow-none bg-transparent color-text ${
input: `w-full border-0 focus:shadow-none focus:outline-none focus:ring-none bg-transparent text-text ${
!hasLeftDecorations && hasRightDecorations ? 'pl-2' : ''
} ${hasRightDecorations ? 'pr-2' : ''}`,
disabled: 'bg-passive-5 cursor-not-allowed',
@@ -21,6 +21,7 @@ const DecoratedInput = forwardRef(
{
type = 'text',
className = '',
id = '',
disabled = false,
left,
right,
@@ -49,6 +50,7 @@ const DecoratedInput = forwardRef(
<input
type={type}
id={id}
className={`${classNames.input} ${disabled ? classNames.disabled : ''}`}
disabled={disabled}
value={value}

1
packages/web/src/javascripts/Components/Input/DecoratedInputProps.ts
View File

@@ -3,6 +3,7 @@ import { FocusEventHandler, KeyboardEventHandler, ReactNode } from 'react'
export type DecoratedInputProps = {
type?: 'text' | 'email' | 'password'
className?: string
id?: string
disabled?: boolean
left?: ReactNode[]
right?: ReactNode[]

4
packages/web/src/javascripts/Components/Input/DecoratedPasswordInput.tsx
View File

@@ -8,9 +8,9 @@ const Toggle: FunctionComponent<{
setIsToggled: Dispatch<SetStateAction<boolean>>
}> = ({ isToggled, setIsToggled }) => (
<IconButton
className="w-5 h-5 p-0 justify-center sk-circle hover:bg-passive-4 color-neutral"
className="w-5 h-5 p-0 justify-center rounded-full hover:bg-passive-4 text-neutral"
icon={isToggled ? 'eye-off' : 'eye'}
iconClassName="sn-icon--small"
iconClassName="w-3.5 h-3.5"
title="Show/hide password"
onClick={() => setIsToggled((isToggled) => !isToggled)}
focusable={true}

10
packages/web/src/javascripts/Components/Input/FloatingLabelInput.tsx
View File

@@ -33,14 +33,14 @@ const FloatingLabelInput = forwardRef(
const BASE_CLASSNAME = 'relative bg-default'
const LABEL_CLASSNAME = `hidden absolute ${!focused ? 'color-neutral' : 'color-info'} ${
focused || value ? 'flex top-0 left-2 pt-1.5 px-1' : ''
} ${isInvalid ? 'color-danger' : ''} ${labelClassName}`
const LABEL_CLASSNAME = `absolute ${!focused ? 'text-neutral' : 'text-info'} ${
focused || value ? 'flex top-0 left-2 pt-1.5 px-1' : 'hidden'
} ${isInvalid ? 'text-danger' : ''} ${labelClassName}`
const INPUT_CLASSNAME = `w-full h-full ${
focused || value ? 'pt-6 pb-2' : 'py-2.5'
} px-3 text-input border-1 border-solid border-main rounded placeholder-medium text-input focus:ring-info ${
isInvalid ? 'border-danger placeholder-dark-red' : ''
} px-3 text-sm border border-solid border-border rounded placeholder:font-medium focus:ring-info ${
isInvalid ? 'border-danger placeholder:text-danger' : ''
} ${inputClassName}`
const handleFocus = () => setFocused(true)

2
packages/web/src/javascripts/Components/Input/Input.tsx
View File

@@ -8,7 +8,7 @@ interface Props {
const Input: FunctionComponent<Props> = ({ className = '', disabled = false, text }) => {
const base = 'rounded py-1.5 px-3 text-input my-1 h-8 bg-contrast'
const stateClasses = disabled ? 'no-border' : 'border-solid border-1 border-main'
const stateClasses = disabled ? 'no-border' : 'border-solid border border-border'
const classes = `${base} ${stateClasses} ${className}`
return <input type="text" className={classes} disabled={disabled} value={text} />
}