refactor(templates): extract global css defs
This commit is contained in:
parent
0c6da9d10a
commit
f3918321bd
|
|
@ -1,10 +1,10 @@
|
||||||
import {
|
import {
|
||||||
Body,
|
Body,
|
||||||
Button,
|
Button,
|
||||||
Code,
|
|
||||||
Container,
|
Container,
|
||||||
Heading,
|
Heading,
|
||||||
Html,
|
Html,
|
||||||
|
Img,
|
||||||
Preview,
|
Preview,
|
||||||
Section,
|
Section,
|
||||||
Text,
|
Text,
|
||||||
|
|
@ -12,6 +12,8 @@ import {
|
||||||
import { Signature } from './components/Signature.tsx'
|
import { Signature } from './components/Signature.tsx'
|
||||||
import type { Template } from '../types.ts'
|
import type { Template } from '../types.ts'
|
||||||
import type { JSX } from 'preact'
|
import type { JSX } from 'preact'
|
||||||
|
import { bodyCss, messageCss, rootCss, textCss } from './styles/base.tsx'
|
||||||
|
import { BaseStyle } from './styles/base.tsx'
|
||||||
|
|
||||||
function Welcome(
|
function Welcome(
|
||||||
{ firstname, lastname, login }: {
|
{ firstname, lastname, login }: {
|
||||||
|
|
@ -21,24 +23,35 @@ function Welcome(
|
||||||
},
|
},
|
||||||
) {
|
) {
|
||||||
return (
|
return (
|
||||||
<Html lang='fr'>
|
<Html lang='fr' style={{ fontSize: '14px' }}>
|
||||||
|
<BaseStyle />
|
||||||
<Preview>Bienvenue au FabLab Coh@bit</Preview>
|
<Preview>Bienvenue au FabLab Coh@bit</Preview>
|
||||||
<Body>
|
<Body style={bodyCss}>
|
||||||
<Container style={{ border: '1px solid darkgrey' }}>
|
<Container style={messageCss}>
|
||||||
<Section>
|
<Section>
|
||||||
<Heading as='h1'>Bienvenue à Coh@bit</Heading>
|
<Heading as='h1' style={headingCss}>
|
||||||
<Text>
|
Bienvenue au<Img
|
||||||
Bravo ! Vous avez rejoint le FabLab Coh@bit en tant que
|
src='cid:cohabit_logo.svg'
|
||||||
{firstname} {lastname} (id :{' '}
|
alt='FabLab Cohabit'
|
||||||
<Code>{login}</Code>). Laissez parler votre créativité, vous êtes
|
style={imgCss}
|
||||||
prêt à collaborer avec toute une communauté ouverte et
|
/>
|
||||||
accueillante.
|
</Heading>
|
||||||
|
<Text style={textCss}>
|
||||||
|
Bravo ! Vous avez rejoint le FabLab Coh@bit en tant que{' '}
|
||||||
|
{firstname} {lastname}.
|
||||||
</Text>
|
</Text>
|
||||||
<Text>
|
<Text style={textCss}>
|
||||||
Comment débuter :
|
Votre identifiant est <span style={preCss}>{login}</span>.
|
||||||
|
</Text>
|
||||||
|
<Text style={textCss}>
|
||||||
|
Laissez parler votre créativité, vous êtes prêt à collaborer avec
|
||||||
|
toute une communauté ouverte et accueillante.
|
||||||
|
</Text>
|
||||||
|
<Text style={textCss}>
|
||||||
|
Par où commencer ?
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
<ul>
|
<ul style={{ fontSize: '1rem' }}>
|
||||||
<li>
|
<li>
|
||||||
Accéder au <a href='https://cohabit.fr'>site de Coh@bit</a>{' '}
|
Accéder au <a href='https://cohabit.fr'>site de Coh@bit</a>{' '}
|
||||||
et découvrir le FabLab.
|
et découvrir le FabLab.
|
||||||
|
|
@ -72,9 +85,13 @@ function Welcome(
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<Button href='https://cohabit.fr/profile'>
|
<Container
|
||||||
|
style={{ width: '100%', textAlign: 'center', padding: '1rem' }}
|
||||||
|
>
|
||||||
|
<Button href='https://cohabit.fr/profil' style={buttonCss}>
|
||||||
Accéder à mon compte
|
Accéder à mon compte
|
||||||
</Button>
|
</Button>
|
||||||
|
</Container>
|
||||||
</Section>
|
</Section>
|
||||||
</Container>
|
</Container>
|
||||||
<Signature />
|
<Signature />
|
||||||
|
|
@ -83,13 +100,34 @@ function Welcome(
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const bodyCss: JSX.CSSProperties = {
|
const headingCss: JSX.CSSProperties = {
|
||||||
fontSize: 'large',
|
fontFamily: 'Garamond, serif',
|
||||||
fontFamily: 'sans-serif',
|
color: rootCss.accentColor,
|
||||||
|
textAlign: 'center',
|
||||||
|
margin: '-1rem 0 3rem',
|
||||||
|
fontSize: '2.5rem',
|
||||||
}
|
}
|
||||||
|
|
||||||
const messageCss: JSX.CSSProperties = {
|
const preCss: JSX.CSSProperties = {
|
||||||
|
fontFamily: 'monospace',
|
||||||
|
fontSize: '1rem',
|
||||||
|
padding: '0.2rem',
|
||||||
|
borderRadius: '0.4rem',
|
||||||
|
backgroundColor: rootCss.backgroundColor,
|
||||||
|
}
|
||||||
|
|
||||||
|
const buttonCss: JSX.CSSProperties = {
|
||||||
|
color: 'white',
|
||||||
padding: '1rem',
|
padding: '1rem',
|
||||||
|
borderRadius: '0.4rem',
|
||||||
|
fontSize: '1.2rem',
|
||||||
|
backgroundColor: rootCss.accentColor,
|
||||||
|
}
|
||||||
|
|
||||||
|
const imgCss: JSX.CSSProperties = {
|
||||||
|
display: 'inline',
|
||||||
|
padding: '1rem',
|
||||||
|
transform: 'translateY(40%)',
|
||||||
}
|
}
|
||||||
|
|
||||||
const template: Template<typeof Welcome, Parameters<typeof Welcome>[0]> = {
|
const template: Template<typeof Welcome, Parameters<typeof Welcome>[0]> = {
|
||||||
|
|
|
||||||
38
templates/styles/base.tsx
Normal file
38
templates/styles/base.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
import type { JSX } from 'preact'
|
||||||
|
|
||||||
|
export const rootCss = {
|
||||||
|
accentColor: '#48D200',
|
||||||
|
backgroundColor: '#F2E6DC',
|
||||||
|
} satisfies JSX.CSSProperties
|
||||||
|
|
||||||
|
export const bodyCss: JSX.CSSProperties = {
|
||||||
|
fontFamily: 'system-ui, "Trebuchet MS", sans-serif',
|
||||||
|
accentColor: rootCss.accentColor,
|
||||||
|
backgroundColor: rootCss.backgroundColor,
|
||||||
|
padding: '0.5rem 0',
|
||||||
|
}
|
||||||
|
|
||||||
|
export const messageCss: JSX.CSSProperties = {
|
||||||
|
padding: '1rem',
|
||||||
|
borderRadius: '0.4rem',
|
||||||
|
backgroundColor: 'white',
|
||||||
|
textWrap: 'balance',
|
||||||
|
}
|
||||||
|
|
||||||
|
export const textCss: JSX.CSSProperties = {
|
||||||
|
fontSize: '1rem',
|
||||||
|
}
|
||||||
|
|
||||||
|
export const rawCss = `
|
||||||
|
a {
|
||||||
|
color: ${rootCss.accentColor};
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: ${rootCss.accentColor};
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export function BaseStyle() {
|
||||||
|
return <style dangerouslySetInnerHTML={{ __html: rawCss }}></style>
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue