Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-10 04:22:32 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: add transparent background to fields (#899)

Browse Source
This commit is contained in:
Lucas Smith
2024-02-26 00:10:35 +11:00
committed by GitHub
parent df3ba11655 187a988f9c
commit 6ea6dda99d
4 changed files with 18 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/tailwind-config/index.cjs
View File

@ -45,6 +45,11 @@ module.exports = {
DEFAULT: 'hsl(var(--card))', DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))', foreground: 'hsl(var(--card-foreground))',
}, },
'field-card': {
DEFAULT: 'hsl(var(--field-card))',
border: 'hsl(var(--field-card-border))',
foreground: 'hsl(var(--field-card-foreground))',
},
widget: { widget: {
DEFAULT: 'hsl(var(--widget))', DEFAULT: 'hsl(var(--widget))',
// foreground: 'hsl(var(--widget-foreground))', // foreground: 'hsl(var(--widget-foreground))',

6
packages/ui/primitives/document-flow/add-fields.tsx
View File

@ -323,9 +323,9 @@ export const AddFieldsFormPartial = ({
{selectedField && ( {selectedField && (
<Card <Card
className={cn( className={cn(
'bg-background pointer-events-none fixed z-50 cursor-pointer transition-opacity', 'bg-field-card/80 pointer-events-none fixed z-50 cursor-pointer border-2 backdrop-blur-[1px]',
{ {
'border-primary': isFieldWithinBounds, 'border-field-card-border': isFieldWithinBounds,
'opacity-50': !isFieldWithinBounds, 'opacity-50': !isFieldWithinBounds,
}, },
)} )}
@ -336,7 +336,7 @@ export const AddFieldsFormPartial = ({
width: fieldBounds.current.width, width: fieldBounds.current.width,
}} }}
> >
<CardContent className="text-foreground flex h-full w-full items-center justify-center p-2"> <CardContent className="text-field-card-foreground flex h-full w-full items-center justify-center p-2">
{FRIENDLY_FIELD_TYPE[selectedField]} {FRIENDLY_FIELD_TYPE[selectedField]}
</CardContent> </CardContent>
</Card> </Card>

14
packages/ui/primitives/document-flow/field-item.tsx
View File

@ -128,24 +128,22 @@ export const FieldItem = ({
)} )}
<Card <Card
className={cn('bg-background h-full w-full', { className={cn('bg-field-card/80 h-full w-full backdrop-blur-[1px]', {
'border-primary': !disabled, 'border-field-card-border': !disabled,
'border-primary/80': active, 'border-field-card-border/80': active,
})} })}
> >
<CardContent <CardContent
className={cn( className={cn(
'text-foreground flex h-full w-full flex-col items-center justify-center p-2', 'text-field-card-foreground flex h-full w-full flex-col items-center justify-center p-2',
{ {
'text-muted-foreground/50': disabled, 'text-field-card-foreground/50': disabled,
}, },
)} )}
> >
{FRIENDLY_FIELD_TYPE[field.type]} {FRIENDLY_FIELD_TYPE[field.type]}
<p className="text-muted-foreground/50 w-full truncate text-center text-xs"> <p className="w-full truncate text-center text-xs">{field.signerEmail}</p>
{field.signerEmail}
</p>
</CardContent> </CardContent>
</Card> </Card>
</Rnd>, </Rnd>,

4
packages/ui/styles/theme.css
View File

@ -18,6 +18,10 @@
--card-border-tint: 112 205 159; --card-border-tint: 112 205 159;
--card-foreground: 222.2 47.4% 11.2%; --card-foreground: 222.2 47.4% 11.2%;
--field-card: 95 74% 90%;
--field-card-border: 95.08 71.08% 67.45%;
--field-card-foreground: 222.2 47.4% 11.2%;
--widget: 0 0% 97%; --widget: 0 0% 97%;
--border: 214.3 31.8% 91.4%; --border: 214.3 31.8% 91.4%;