dylan.derr/Send
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tweak some styles for trailhead

Browse source
This commit is contained in:
John Gruen 2019-05-03 18:26:10 +02:00
parent f603f40f43
commit 51296d5489
14 changed files with 35 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/ui/archiveTile.js
View file

@ -430,7 +430,7 @@ module.exports.empty = function(state, emit) {
`;
return html`
<send-upload-area
class="flex flex-col items-center justify-center border-2 border-dashed border-grey rounded px-6 py-16 h-full w-full"
class="flex flex-col items-center justify-center border-2 border-dashed border-grey-transparent rounded px-6 py-16 h-full w-full"
onclick="${e => {
if (e.target.tagName !== 'LABEL') {
document.getElementById('file-upload').click();

2
app/ui/blank.js
View file

@ -4,7 +4,7 @@ module.exports = function() {
return html`
<main class="main">
<section
class="h-full w-full p-6 md:flex md:flex-row md:rounded-lg md:shadow-big"
class="h-full w-full p-6 md:p-8 md:flex md:flex-row md:rounded-xl md:shadow-big"
>
<div class="md:mr-6 md:w-1/2 w-full"></div>
<div class="md:w-1/2 mt-6 md:mt-0 w-full"></div>

4
app/ui/download.js
View file

@ -76,7 +76,9 @@ module.exports = function(state, emit) {
return html`
<main class="main">
${state.modal && modal(state, emit)}
<section class="relative h-full w-full p-6 md:rounded-lg md:shadow-big">
<section
class="relative h-full w-full p-6 md:p-8 md:rounded-xl md:shadow-big"
>
${content}
</section>
</main>

2
app/ui/error.js
View file

@ -7,7 +7,7 @@ module.exports = function(state, emit) {
<main class="main">
${state.modal && modal(state, emit)}
<section
class="flex flex-col items-center justify-center h-full w-full p-6 overflow-hidden md:rounded-lg md:shadow-big"
class="flex flex-col items-center justify-center h-full w-full p-6 md:p-8 overflow-hidden md:rounded-xl md:shadow-big"
>
<h1 class="text-center font-bold my-2">
${state.translate('errorPageHeader')}

2
app/ui/footer.js
View file

@ -19,7 +19,7 @@ class Footer extends Component {
const feedbackUrl = `https://qsurvey.mozilla.com/s3/Firefox-Send-Product-Feedback?ver=${version}&browser=${browser}`;
return html`
<footer
class="flex flex-col md:flex-row items-start w-full flex-none self-start p-6 font-medium text-xs text-grey-dark md:items-center justify-between"
class="flex flex-col md:flex-row items-start w-full flex-none self-start p-6 md:p-8 font-medium text-xs text-grey-dark md:items-center justify-between"
>
<a
class="mozilla-logo pb-10 md:pb-0 m-2"

2
app/ui/header.js
View file

@ -28,7 +28,7 @@ class Header extends Component {
`;
return html`
<header
class="relative flex-none flex flex-row items-center justify-between w-full px-6 h-16 md:h-24 z-20 bg-transparent"
class="main-header relative flex-none flex flex-row items-center justify-between w-full px-6 md:px-8 h-16 md:h-24 z-20 bg-transparent"
>
${title} ${this.account.render()}
</header>

4
app/ui/home.js
View file

@ -30,9 +30,9 @@ module.exports = function(state, emit) {
<main class="main">
${state.modal && modal(state, emit)}
<section
class="h-full w-full p-6 overflow-hidden md:flex md:flex-row md:rounded-lg md:shadow-big"
class="h-full w-full p-6 md:p-8 overflow-hidden md:flex md:flex-row md:rounded-xl md:shadow-big"
>
<div class="px-2 w-full md:px-0 md:mr-6 md:w-1/2">${left}</div>
<div class="px-2 w-full md:px-0 md:mr-8 md:w-1/2">${left}</div>
<div class="mt-6 w-full md:w-1/2 md:-m-2">${right}</div>
</section>
</main>

4
app/ui/intro.js
View file

@ -7,10 +7,10 @@ module.exports = function intro(state) {
class="flex flex-col items-center justify-center bg-white px-6 md:py-0 py-6 mb-0 h-full w-full"
>
<div class="mt-12 flex flex-col h-full">
<h1 class="font-bold">
<h1 class="font-bold md:pb-2">
${state.translate('introTitle')}
</h1>
<p class="max-w-sm leading-normal mt-6 md:mt-2 md:pr-16">
<p class="max-w-sm leading-loose mt-6 md:mt-2 md:pr-14">
${state.translate('introDescription')}
</p>
<img class="intro" src="${assets.get('intro.svg')}" />

2
app/ui/modal.js
View file

@ -3,7 +3,7 @@ const html = require('choo/html');
module.exports = function(state, emit) {
return html`
<send-modal
class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-white md:rounded-lg md:my-8"
class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-white md:rounded-xl md:my-8"
onclick="${close}"
>
<div

2
app/ui/notFound.js
View file

@ -7,7 +7,7 @@ module.exports = function(state, emit) {
<main class="main">
${state.modal && modal(state, emit)}
<section
class="flex flex-col items-center justify-center h-full w-full p-6 overflow-hidden md:rounded-lg md:shadow-big"
class="flex flex-col items-center justify-center h-full w-full p-6 md:p-8 overflow-hidden md:rounded-xl md:shadow-big"
>
<h1 class="text-center font-bold my-2">
${state.translate('expiredTitle')}