various: graphic tweaks to welcome as per design

This commit is contained in:
Matilde Park 2020-03-24 19:27:34 -04:00
parent 4c26419ff2
commit cdc4fb5da0
8 changed files with 32 additions and 16 deletions

View File

@ -84,6 +84,10 @@ h2 {
font-family: "Source Code Pro", monospace;
}
.bg-welcome-green {
background-color: #ECF6F2;
}
.list-ship {
line-height: 2.2;
}

View File

@ -27,11 +27,11 @@ export class Welcome extends Component {
let inbox = !!this.props.inbox ? this.props.inbox : {};
return ((!wasWelcomed && this.state.show) && (inbox.length !== 0)) ? (
<div className="ma4 pa2 ba bg-gray5 b--gray4 bg-gray0-d b--gray1-d white-d">
<p className="f9 lh-copy">Chats are instant, linear modes of conversation. Many chats can be bundled under one group.</p>
<p className="f9 pt2 dib fw6 pointer"
<div className="ma4 pa2 bg-welcome-green bg-gray1-d white-d">
<p className="f8 lh-copy">Chats are instant, linear modes of conversation. Many chats can be bundled under one group.</p>
<p className="f8 pt2 dib pointer bb"
onClick={(() => this.disableWelcome())}>
Close this message
Close this
</p>
</div>
) : <div/>

View File

@ -55,6 +55,10 @@ a {
line-height: 16px;
}
.bg-welcome-green {
background-color: #ECF6F2;
}
.mono {
font-family: "Source Code Pro", monospace;
}

View File

@ -27,11 +27,11 @@ export class Welcome extends Component {
let contacts = !!this.props.contacts ? this.props.contacts : {};
return ((!wasWelcomed && this.state.show) && (contacts.length !== 0)) ? (
<div className="ma4 pa2 ba bg-gray5 b--gray4 bg-gray0-d b--gray2-d white-d">
<p className="f9 lh-copy">Each Group is a list of other Urbit IDs that share some set of modules: chats, links and notebooks.</p>
<p className="f9 pt2 dib fw6 pointer"
<div className="ma4 pa2 bg-welcome-green bg-gray1-d white-d">
<p className="f8 lh-copy">Each Group is a list of other Urbit IDs that share some set of modules: chats, links and notebooks.</p>
<p className="f8 pt2 dib pointer bb"
onClick={(() => this.disableWelcome())}>
Close this message
Close this
</p>
</div>
) : <div />

View File

@ -64,6 +64,10 @@ a {
line-height: 2.2;
}
.bg-welcome-green {
background-color: #ECF6F2;
}
.c-default {
cursor: default;
}

View File

@ -27,11 +27,11 @@ export class Welcome extends Component {
let associations = !!this.props.associations ? this.props.associations : {};
return ((!wasWelcomed && this.state.show) && (associations.length !== 0)) ? (
<div className="ma4 pa2 ba bg-gray5 b--gray4 bg-gray0-d b--gray1-d white-d">
<p className="f9 lh-copy">Links are for collecting and discussing outside content. Each post is a URL and a comment thread.</p>
<p className="f9 pt2 dib fw6 pointer"
<div className="ma4 pa2 bg-welcome-green bg-gray1-d white-d">
<p className="f8 lh-copy">Links are for collecting and discussing outside content. Each post is a URL and a comment thread.</p>
<p className="f8 pt2 dib bb pointer"
onClick={(() => this.disableWelcome())}>
Close this message
Close this
</p>
</div>
) : <div />

View File

@ -46,6 +46,10 @@ a {
font-family: 'Source Code Pro', monospace;
}
.bg-welcome-green {
background-color: #ECF6F2;
}
@media all and (max-width: 34.375em) {
.dn-s {
display: none;

View File

@ -27,11 +27,11 @@ export class Welcome extends Component {
let notebooks = !!this.props.notebooks ? this.props.notebooks : {};
return ((!wasWelcomed && this.state.show) && (notebooks.length !== 0)) ? (
<div className="ma4 pa2 ba bg-gray5 b--gray4 bg-gray0-d b--gray2-d white-d">
<p className="f9 lh-copy">Notebooks are for longer-form writing and discussion. Each Notebook is a collection of Markdown-formatted notes with optional comments.</p>
<p className="f9 pt2 dib fw6 pointer"
<div className="ma4 pa2 white-d bg-welcome-green bg-gray1-d">
<p className="f8 lh-copy">Notebooks are for longer-form writing and discussion. Each Notebook is a collection of Markdown-formatted notes with optional comments.</p>
<p className="f8 pt2 dib pointer bb"
onClick={(() => this.disableWelcome())}>
Close this message
Close this
</p>
</div>
) : <div />