add session h1 h2 and h3

This commit is contained in:
Audric Ackermann 2019-12-19 10:05:34 +11:00
parent e3a0d15890
commit 98be71680d
6 changed files with 55 additions and 30 deletions

View File

@ -2404,7 +2404,8 @@
"message": "Paste Session ID of recipient"
},
"usersCanShareTheir...": {
"message": "Users can share their Session ID by going into their account settings and clicking \"Share Public Key\"."
"message":
"Users can share their Session ID by going into their account settings and clicking \"Share Public Key\"."
},
"searchByIDOrDisplayName": {
"message": "Search by ID # or DIsplay Name"

View File

@ -210,7 +210,7 @@
}
}
&-signup-header,
&-description-long,
&-signin-device-pairing-header {
padding-top: 10px;
padding-bottom: 10px;

View File

@ -65,3 +65,26 @@
.discussion-container {
background: none !important;
}
@mixin session-h-title {
color: $session-color-white;
font-weight: bold;
}
h1 {
@include session-h-title;
font-size: 25px;
margin: 0;
}
h2 {
@include session-h-title;
font-size: 22px;
text-align: center;
}
h3 {
@include session-h-title;
font-size: 18px;
padding-top: 22px;
}

View File

@ -104,9 +104,6 @@
}
&__title {
font-family: $session-font-family;
color: $session-color-white;
font-size: 25px;
flex-grow: 1;
}
@ -114,7 +111,7 @@
height: -webkit-fill-available;
}
&-compose{
&-compose {
@include session-dark-background-gradient;
height: -webkit-fill-available;
.session-icon .exit {
@ -123,14 +120,10 @@
h3,
h2 {
color: $session-color-white;
font-size: 22px;
font-weight: bold;
text-align: center;
}
h3 {
font-size: 18px;
padding-top: 22px;
}
@ -156,10 +149,9 @@
left: 50%;
margin-left: -65px;
top: 50%;
margin-top:6px;
margin-top: 6px;
}
}
}
.session-search-input {

View File

@ -167,10 +167,13 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
public renderHeader(): JSX.Element {
return (
<div className="module-left-pane__header">
<div className="module-left-pane__title">
<h1 className="module-left-pane__title">
{window.i18n('messagesHeader')}
</div>
<SessionButton text={window.i18n('compose')} onClick={this.handleComposeClick}/>
</h1>
<SessionButton
text={window.i18n('compose')}
onClick={this.handleComposeClick}
/>
</div>
);
}
@ -180,38 +183,42 @@ export class LeftPaneMessageSection extends React.Component<Props, any> {
<div className="module-left-pane-session">
<div className="module-left-pane">
{this.renderHeader()}
{this.state.showComposeView ? this.renderCompose() : this.renderConversations()}
{this.state.showComposeView
? this.renderCompose()
: this.renderConversations()}
</div>
</div>
);
}
public renderCompose() : JSX.Element {
public renderCompose(): JSX.Element {
return (
<div className="module-left-pane-compose">
<SessionIconButton iconSize={SessionIconSize.Small} iconType={SessionIconType.Exit} onClick={this.handleComposeClick} />
<h2>
{window.i18n('enterRecipient')}
</h2>
<h3>
{window.i18n('enterSessionID')}
</h3>
<div className="module-left-pane-compose">
<SessionIconButton
iconSize={SessionIconSize.Small}
iconType={SessionIconType.Exit}
onClick={this.handleComposeClick}
/>
<h2>{window.i18n('enterRecipient')}</h2>
<h3>{window.i18n('enterSessionID')}</h3>
<div className="module-left-pane-compose-border-container">
<hr className="white" />
<hr className="green"/>
<hr className="green" />
</div>
<SessionIdEditable
editable={true}
placeholder={window.i18n('pasteSessionIDRecipient')}
onChange={this.handleOnPasteSessionID}
/>
/>
<div className="session-description-long">
{window.i18n('usersCanShareTheir...')}
</div>
</div>
);
}
public renderConversations() {
return (
<div>
<SessionConversationSearch

View File

@ -286,7 +286,9 @@ export class RegistrationTabs extends React.Component<{}, State> {
private renderSignUpHeader() {
const allUsersAreRandomly = window.i18n('allUsersAreRandomly...');
return <div className="session-signup-header">{allUsersAreRandomly}</div>;
return (
<div className="session-description-long">{allUsersAreRandomly}</div>
);
}
private renderSignUpButton() {