veikko/lintujamaslo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Header -> RegistrationHeader.

Browse Source
This commit is contained in:
codevictory
2021-12-19 21:12:34 +02:00
parent 65687a6e6b
commit ad913d951e
4 changed files with 40 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/Header.scss
View File

@@ -1,44 +0,0 @@
@import '../colors.scss';
.App-header {
display: flex;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
margin-top: 2rem;
h1 {
color: $green-text !important;
text-transform: uppercase;
font-size: 3rem;
font-family: 'Montserrat-Light';
span {
color: $brown-text;
font-size: 0.5em;
}
}
.diamondIcon {
margin-bottom: 1rem;
margin-left: 2rem;
margin-right: 2rem;
}
.dateAndPlace {
text-align: center;
text-transform: uppercase;
h2 {
font-family: 'Montserrat-Medium';
font-size: 1.4rem;
color: $brown-text !important;
margin-bottom: -0.7rem;
}
h3 {
font-size: 1rem;
color: $brown-text !important;
}
}
}

26
src/components/Header.tsx
View File

@@ -1,26 +0,0 @@
import { FormattedMessage } from 'react-intl';
import './Header.scss';
export const Header = () => {
return (
<header className='App-header'>
<h1>
<FormattedMessage id='common.lintu' />
<span> &amp; </span>
<FormattedMessage id='common.maslo' />
</h1>
<svg className="diamondIcon" width="9" height="9" fill="#c1a57c" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M6.95.435c.58-.58 1.52-.58 2.1 0l6.515 6.516c.58.58.58 1.519 0 2.098L9.05 15.565c-.58.58-1.519.58-2.098 0L.435 9.05a1.482 1.482 0 0 1 0-2.098L6.95.435z" />
</svg>
<div className='dateAndPlace'>
<h2>
<FormattedMessage id='common.datetime' />
</h2>
<h3>
<FormattedMessage id='common.place' />
</h3>
</div>
</header>
);
};

22
src/components/RegistrationHeader.scss Normal file
View File

@@ -0,0 +1,22 @@
@import '../colors.scss';
.App-header {
display: flex;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
margin-top: 2rem;
gap: 1rem;
h1 {
color: $green-text !important;
text-transform: uppercase;
font-size: 3rem;
font-family: 'Montserrat-Light';
span {
color: $brown-text;
font-size: 0.5em;
}
}
}

18
src/components/RegistrationHeader.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { FormattedMessage } from 'react-intl';
import { DateAndPlace } from './DateAndPlace';
import { Diamond } from './Diamond';
import './RegistrationHeader.scss';
export const RegistrationHeader = () => {
return (
<header className='App-header'>
<h1>
<FormattedMessage id='common.lintu' />
<span> &amp; </span>
<FormattedMessage id='common.maslo' />
</h1>
<Diamond />
<DateAndPlace />
</header>
);
};