Chapril/drop.chapril.org-firefoxsend
Chapril/drop.chapril.org-firefoxsend
25
1
Fork 0
Code Issues Releases Activity

Work in progress on latest design

Browse Source
This commit is contained in:
Danny Coates 2019-02-11 13:48:06 -08:00
parent 0fa963f1ab
commit fc37fd1fe3
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
23 changed files with 215 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
android/android.js
View File

@ -69,7 +69,7 @@ function body(main) {
*/
return html`
<body
class="flex flex-col items-center font-sans bg-blue-lightest h-screen"
class="flex flex-col items-center font-sans bg-grey-lightest h-screen"
>
${state.cache(Header, 'header').render()} ${main(state, emit)}
</body>

48
app/main.css
View File

@ -13,8 +13,15 @@ a {
text-decoration: none;
}
body {
background-image: url('../assets/bg.svg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.btn {
@apply bg-blue;
@apply bg-blue-dark;
@apply text-white;
@apply font-semibold;
@apply cursor-pointer;
@ -24,11 +31,11 @@ a {
}
.btn:hover {
@apply bg-blue-dark;
@apply bg-blue-darker;
}
.btn:focus {
@apply bg-blue-dark;
@apply bg-blue-darker;
}
.checkbox {
@ -46,7 +53,7 @@ a {
}
.checkbox > label::before {
@apply bg-blue-lightest;
/* @apply bg-grey-lightest; */
@apply border;
@apply rounded-sm;
@ -58,14 +65,17 @@ a {
}
.checkbox > label:hover::before {
@apply border-blue;
@apply border-blue-dark;
}
.checkbox > input:focus + label::before {
@apply border-blue;
@apply border-blue-dark;
}
.checkbox > input:checked + label::before {
@apply bg-blue-dark;
@apply border-blue-dark;
background-image: url('../assets/lock.svg');
background-position: center;
background-size: 1.25rem;
@ -77,6 +87,9 @@ a {
}
.checkbox > input:disabled + label::before {
@apply bg-blue-dark;
@apply border-blue-dark;
background-image: url('../assets/lock.svg');
background-position: center;
background-size: 1.25rem;
@ -116,11 +129,11 @@ footer li:hover {
}
.header-logo {
background-image: url('../assets/send_logo_white.svg');
background-image: url('../assets/logo.svg');
background-position: left;
background-repeat: no-repeat;
background-size: 1.8rem;
padding-left: 2.4rem;
background-size: 2.25rem;
padding-left: 3rem;
text-decoration: none;
}
@ -220,7 +233,7 @@ progress::-moz-progress-bar {
@screen md {
.header-logo {
background-image: url('../assets/send_logo.svg');
background-image: url('../assets/logo.svg');
}
.main {
@ -234,10 +247,6 @@ progress::-moz-progress-bar {
max-height: 40rem;
width: calc(100% - 3rem);
}
.main > section {
@apply shadow-md;
}
}
@tailwind utilities;
@ -245,3 +254,14 @@ progress::-moz-progress-bar {
.word-break-all {
word-break: break-all;
}
@responsive {
.shadow-light {
box-shadow: 0 0 8px 0 rgba(12, 12, 13, 0.1);
}
.shadow-big {
box-shadow: 0 0 32px 0 rgba(12, 12, 13, 0.1),
0 2px 16px 0 rgba(12, 12, 13, 0.05);
}
}

2
app/ui/account.js
View File

@ -62,7 +62,7 @@ class Account extends Component {
return html`
<send-account>
<button
class="p-2 border rounded border-white text-white hover:bg-white hover:text-blue md:text-blue md:border-blue md:hover:text-white md:hover:bg-blue"
class="p-2 border rounded border-white text-white hover:bg-white hover:text-black md:text-blue-dark md:border-blue-dark md:hover:text-white md:hover:bg-blue-dark"
onclick="${e => this.login(e)}"
>
${translate('signInMenuOption')}

44
app/ui/archiveTile.js
View File

@ -29,7 +29,7 @@ function password(state) {
const MAX_LENGTH = 32;
return html`
<div class="my-2 px-4">
<div class="my-2 px-1">
<div class="checkbox inline-block mr-3">
<input
id="add-password"
@ -46,7 +46,7 @@ function password(state) {
id="password-input"
class="${state.archive.password
? ''
: 'invisible'} border rounded-sm focus:border-blue leading-normal my-2 py-1 px-2 h-8"
: 'invisible'} border rounded-sm focus:border-blue-dark leading-normal my-2 py-1 px-2 h-8"
autocomplete="off"
maxlength="${MAX_LENGTH}"
type="password"
@ -126,7 +126,7 @@ function archiveDetails(translate, archive) {
${archive.open ? 'open' : ''}
ontoggle="${toggled}"
>
<summary
<summary class="text-blue-dark text-sm cursor-pointer"
>${translate('fileCount', {
num: archive.manifest.files.length
})}</summary
@ -149,7 +149,7 @@ module.exports = function(state, emit, archive) {
platform() !== 'android'
? html`
<button
class="text-blue hover:text-blue-dark focus:text-blue-darker self-end font-medium flex items-center"
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end font-medium flex items-center"
onclick=${copy}
>
<img src="${assets.get('copy-16.svg')}" class="mr-2" />
@ -158,7 +158,7 @@ module.exports = function(state, emit, archive) {
`
: html`
<button
class="text-blue hover:text-blue-dark focus:text-blue-darker self-end font-medium flex items-center"
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end font-medium flex items-center"
onclick=${share}
>
<img src="${assets.get('share-24.svg')}" class="mr-2" /> Share
@ -168,10 +168,10 @@ module.exports = function(state, emit, archive) {
platform() === 'web'
? html`
<a
class="flex items-end text-blue hover:text-blue-dark focus:text-blue-darker font-medium"
class="flex items-baseline text-blue-dark hover:text-blue-darker focus:text-blue-darker font-medium"
href="${archive.url}"
>
<img src="${assets.get('download.svg')}" class="mr-1" />
<img src="${assets.get('dl.svg')}" class="mr-2" />
${state.translate('downloadButtonLabel')}
</a>
`
@ -181,7 +181,7 @@ module.exports = function(state, emit, archive) {
return html`
<send-archive
id="archive-${archive.id}"
class="flex flex-col items-start border border-grey-light bg-white p-4 w-full">
class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full">
<p class="w-full">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<input
@ -235,11 +235,11 @@ module.exports.wip = function(state, emit) {
Array.from(state.archive.files)
.reverse()
.map(f => fileInfo(f, remove(f))),
'list-reset overflow-y-auto px-4 bg-blue-lightest md:h-full md:max-h-half-screen',
'bg-white px-2 mt-3 border border-grey-light rounded'
'bg-grey-lightest rounded-t list-reset overflow-y-auto px-4 md:h-full md:max-h-half-screen',
'bg-white px-2 my-2 shadow-light rounded'
)}
<div
class="flex-grow flex items-end p-4 bg-blue-lightest mb-6 font-medium"
class="flex-grow flex items-end p-4 bg-grey-lightest rounded-b mb-6 font-medium"
>
<input
id="file-upload"
@ -265,7 +265,7 @@ module.exports.wip = function(state, emit) {
${expiryOptions(state, emit)} ${password(state, emit)}
<button
id="upload-btn"
class="btn rounded flex-no-shrink"
class="btn rounded-lg flex-no-shrink"
title="${state.translate('uploadFilesButton')}"
onclick="${upload}"
>
@ -319,7 +319,7 @@ module.exports.uploading = function(state, emit) {
return html`
<send-upload-area
id="${archive.id}"
class="flex flex-col items-start border border-grey-light bg-white p-4 w-full">
class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full">
<p class="w-full">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
@ -334,10 +334,10 @@ module.exports.uploading = function(state, emit) {
expiresAt: Date.now() + 500 + state.archive.timeLimit * 1000
})}
</div>
<div class="text-blue text-sm font-medium mt-2">${progressPercent}</div>
<div class="text-blue-dark text-sm font-medium mt-2">${progressPercent}</div>
<progress class="my-3" value="${progress}">${progressPercent}</progress>
<button
class="text-blue hover:text-blue-dark focus:text-blue-darker self-end font-medium"
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end font-medium"
onclick=${cancel}>
${state.translate('uploadingPageCancel')}
</button>
@ -353,7 +353,7 @@ module.exports.uploading = function(state, emit) {
module.exports.empty = function(state, emit) {
return html`
<send-upload-area
class="flex flex-col items-center justify-center border-2 border-dashed border-blue-light px-6 py-16 h-full w-full"
class="flex flex-col items-center justify-center border-2 border-dashed border-grey rounded px-6 py-16 h-full w-full"
onclick="${e => {
if (e.target.tagName !== 'LABEL') {
document.getElementById('file-upload').click();
@ -362,7 +362,7 @@ module.exports.empty = function(state, emit) {
>
<img src="${assets.get('addfiles.svg')}" width="48" height="48" />
<div
class="pt-6 pb-2 text-center text-lg font-bold uppercase tracking-wide"
class="pt-6 pb-2 text-center text-lg font-bold capitalize tracking-wide"
>
${state.translate('uploadDropDragMessage')}
</div>
@ -380,7 +380,7 @@ module.exports.empty = function(state, emit) {
<label
for="file-upload"
role="button"
class="btn rounded flex items-center mt-4"
class="btn rounded-lg flex items-center mt-4"
title="${state.translate('addFilesButton')}"
>
${state.translate('addFilesButton')}
@ -402,7 +402,7 @@ module.exports.preview = function(state, emit) {
archive.open = true;
}
return html`
<send-archive class="flex flex-col max-h-full bg-white border border-grey-light p-4 w-full md:w-4/5">
<send-archive class="flex flex-col max-h-full bg-white rounded shadow-light p-4 w-full md:w-4/5">
<p class="w-full mb-4">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
@ -415,7 +415,7 @@ module.exports.preview = function(state, emit) {
</div>
<button
id="download-btn"
class="btn rounded mt-4 w-full flex-no-shrink"
class="btn rounded-lg mt-4 w-full flex-no-shrink"
title="${state.translate('downloadButtonLabel')}"
onclick=${download}>
${state.translate('downloadButtonLabel')}
@ -434,7 +434,7 @@ module.exports.downloading = function(state) {
const progress = state.transfer.progressRatio;
const progressPercent = percent(progress);
return html`
<send-archive class="flex flex-col bg-white border border-grey-light p-4 w-full md:w-4/5">
<send-archive class="flex flex-col bg-white rounded shadow-light p-4 w-full md:w-4/5">
<p class="w-full mb-4">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
@ -442,7 +442,7 @@ module.exports.downloading = function(state) {
archive.size
)}</div>
</p>
<div class="text-blue text-sm font-medium mt-2">${progressPercent}</div>
<div class="text-blue-dark text-sm font-medium mt-2">${progressPercent}</div>
<progress class="my-3" value="${progress}">${progressPercent}</progress>
</send-archive>`;
};

4
app/ui/blank.js
View File

@ -3,7 +3,9 @@ const html = require('choo/html');
module.exports = function() {
return html`
<main class="main relative">
<section class="h-full w-full p-6 md:flex md:flex-row z-10">
<section
class="h-full w-full p-6 z-10 md:flex md:flex-row md:rounded-lg 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>
</section>

2
app/ui/body.js
View File

@ -13,7 +13,7 @@ module.exports = function body(main) {
return function(state, emit) {
const b = html`
<body
class="flex flex-col items-center font-sans bg-blue-lightest md:h-screen md:bg-grey-lightest"
class="flex flex-col items-center font-sans md:h-screen md:bg-grey-lightest"
>
${banner(state, emit)} ${state.cache(Header, 'header').render()}
${main(state, emit)} ${state.cache(Footer, 'footer').render()}

2
app/ui/copyDialog.js
View File

@ -18,7 +18,7 @@ module.exports = function(name, url) {
value="${url}"
readonly="true"
/>
<button class="btn rounded w-full flex-no-shrink" onclick="${copy}">
<button class="btn rounded-lg w-full flex-no-shrink" onclick="${copy}">
${state.translate('copyUrlFormButton')}
</button>
<a

4
app/ui/download.js
View File

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

2
app/ui/expiryOptions.js
View File

@ -6,7 +6,7 @@ const selectbox = require('./selectbox');
module.exports = function(state, emit) {
const el = html`
<div class="px-4">
<div class="px-1">
${raw(
state.translate('frontPageExpireInfo', {
downloadCount:

2
app/ui/footer.js
View File

@ -19,7 +19,7 @@ class Footer extends Component {
const feedbackUrl = `https://qsurvey.mozilla.com/s3/txp-firefox-send?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 bg-grey-lightest"
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"
>
<a
class="mozilla-logo pb-10 md:pb-0 m-2"

10
app/ui/header.js
View File

@ -21,21 +21,21 @@ class Header extends Component {
platform() === 'android'
? html`
<a class="header-logo">
<h1 class="text-2xl text-white md:text-black font-normal">
Firefox <b>Send</b>
<h1 class="text-3xl text-white md:text-black font-normal">
<b>Firefox</b> Send
</h1>
</a>
`
: html`
<a class="header-logo" href="/">
<h1 class="text-2xl text-white md:text-black font-normal">
Firefox <b>Send</b>
<h1 class="text-3xl text-white md:text-black font-normal">
<b>Firefox</b> Send
</h1>
</a>
`;
return html`
<header
class="relative flex-none flex flex-row items-center justify-between bg-blue md:bg-white w-full px-6 h-16 md:shadow z-20"
class="relative flex-none flex flex-row items-center justify-between bg-black w-full px-6 h-16 z-20 md:bg-transparent"
>
${title} ${this.account.render()}
</header>

12
app/ui/home.js
View File

@ -22,16 +22,18 @@ module.exports = function(state, emit) {
? intro(state)
: list(
archives,
'list-reset h-full overflow-y-auto w-full',
'mb-3 w-full'
'list-reset p-2 h-full overflow-y-auto w-full',
'mb-4 w-full'
);
return html`
<main class="main relative">
${state.modal && modal(state, emit)}
<section class="h-full w-full p-6 md:flex md:flex-row z-10">
<div class="md:mr-6 md:w-1/2 w-full">${left}</div>
<div class="md:w-1/2 mt-6 md:mt-0 w-full">${right}</div>
<section
class="h-full w-full p-6 z-10 md:flex md:flex-row md:rounded-lg md:shadow-big"
>
<div class="px-2 w-full md:px-0 md:mr-6 md:w-1/2">${left}</div>
<div class="mt-6 w-full md:w-1/2 md:-m-2">${right}</div>
</section>
</main>
`;

2
app/ui/okDialog.js
View File

@ -5,7 +5,7 @@ module.exports = function(message) {
return html`
<send-ok-dialog class="flex flex-col max-w-xs p-4">
<div class="text-center m-8 leading-normal">${message}</div>
<button class="btn rounded w-full flex-no-shrink" onclick="${close}">
<button class="btn rounded-lg w-full flex-no-shrink" onclick="${close}">
${state.translate('okButton')}
</button>
</send-ok-dialog>

2
app/ui/selectbox.js
View File

@ -6,7 +6,7 @@ module.exports = function(selected, options, translate, changed, htmlId) {
return html`
<select
id="${htmlId}"
class="appearance-none cursor-pointer border rounded-sm bg-blue-lightest hover:border-blue focus:border-blue px-2 py-1 my-2 h-8"
class="appearance-none cursor-pointer border rounded-sm bg-grey-lightest hover:border-blue-dark focus:border-blue-dark px-2 py-1 my-2 h-8"
onchange="${choose}"
>
${options.map(

2
app/ui/signupDialog.js
View File

@ -32,7 +32,7 @@ module.exports = function(trigger) {
id="email-submit"
type="submit" />
</form>
<label class="btn rounded w-full flex flex-no-shrink items-center justify-center" for="email-submit">
<label class="btn rounded-lg w-full flex flex-no-shrink items-center justify-center" for="email-submit">
${state.translate('signInMenuOption')}
</label>
<button

4
assets/addfiles.svg
View File

@ -3,7 +3,7 @@
<polygon id="addfiles-a" points="11.143 6 11.143 11.143 6 11.143 6 12.857 11.143 12.857 11.143 18 12.857 18 12.857 12.857 18 12.857 18 11.143 12.857 11.143 12.857 6"/>
</defs>
<g fill="none" fill-rule="evenodd">
<path fill="#4285F4" fill-rule="nonzero" d="M12,22.6666667 C17.8910373,22.6666667 22.6666667,17.8910373 22.6666667,12 C22.6666667,6.10896267 17.8910373,1.33333333 12,1.33333333 C6.10896267,1.33333333 1.33333333,6.10896267 1.33333333,12 C1.33333333,17.8910373 6.10896267,22.6666667 12,22.6666667 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z"/>
<use fill="#4285F4" xlink:href="#addfiles-a"/>
<path fill="#0060df" fill-rule="nonzero" d="M12,22.6666667 C17.8910373,22.6666667 22.6666667,17.8910373 22.6666667,12 C22.6666667,6.10896267 17.8910373,1.33333333 12,1.33333333 C6.10896267,1.33333333 1.33333333,6.10896267 1.33333333,12 C1.33333333,17.8910373 6.10896267,22.6666667 12,22.6666667 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z"/>
<use fill="#0060df" xlink:href="#addfiles-a"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 856 B

After

Width:  |  Height:  |  Size: 856 B

21
assets/arrow-r.svg Normal file
View File

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="7px" height="12px" viewBox="0 0 7 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 53 (72520) - https://sketchapp.com -->
<title>D8471D57-B56D-4AA0-B2BD-A1A6D29ABA2C</title>
<desc>Created with sketchtool.</desc>
<defs>
<path d="M11.983616,7.98361603 C11.9835405,7.63002294 11.8430152,7.29093967 11.5929494,7.04094936 L7.59294936,3.04094936 C7.06977751,2.53565308 6.23816966,2.54287953 5.72385793,3.05719126 C5.2095462,3.57150299 5.20231975,4.40311085 5.70761603,4.92628269 L8.76494936,7.98361603 L5.70761603,11.0409494 C5.20231975,11.5641212 5.2095462,12.3957291 5.72385793,12.9100408 C6.23816966,13.4243525 7.06977751,13.431579 7.59294936,12.9262827 L11.5929494,8.92628269 C11.8430152,8.67629239 11.9835405,8.33720911 11.983616,7.98361603 Z" id="path-1"></path>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Send_Home-With-Files" transform="translate(-773.000000, -257.000000)">
<g id="List-Item-1" transform="translate(744.000000, 168.000000)">
<g id="Expand-Icon" transform="translate(24.000000, 87.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Shape" fill="#0060DF" fill-rule="nonzero" xlink:href="#path-1"></use>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

31
assets/bg.svg Normal file
View File

@ -0,0 +1,31 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1440px" height="909px" viewBox="0 0 1440 909" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 53 (72520) - https://sketchapp.com -->
<title>71CDA8D6-6870-4A28-B45F-707A97F95302</title>
<desc>Created with sketchtool.</desc>
<defs>
<rect id="path-1" x="0" y="0.791595976" width="1440" height="938.017204"></rect>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Send_Home-Spec">
<g id="Pattern-3">
<g id="bg-shapes-01" transform="translate(0.000000, -0.791596)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill-opacity="0" fill="#FFFFFF" xlink:href="#path-1"></use>
<g mask="url(#mask-2)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(-41.000000, -205.881720)">
<ellipse id="Oval" cx="43.4808403" cy="716.468133" rx="43.4511199" ry="43.6380065"></ellipse>
<path d="M398.104382,765.687158 C432.728564,765.687158 460.784554,737.505523 460.784554,702.737394 C460.784554,667.96429 432.723611,639.787629 398.104382,639.787629 C284.468706,639.787629 192.023625,546.944935 192.023625,432.820504 C192.023625,318.696074 284.468706,225.853379 398.104382,225.853379 C432.728564,225.853379 460.784554,197.671744 460.784554,162.903615 C460.784554,128.135486 432.723611,99.9538503 398.104382,99.9538503 C215.34913,99.9538503 66.6583273,249.284183 66.6583273,432.825479 C66.6583273,616.366775 215.34913,765.687158 398.104382,765.687158 Z" id="Path"></path>
<path d="M107.784833,1107.52553 L220.731988,994.092583 C225.670516,989.132814 228.444413,982.402054 228.444413,975.387737 C228.444413,968.37342 225.670516,961.642661 220.731988,956.682892 L107.784833,843.254918 C97.4966464,832.922481 80.8185889,832.922481 70.5304019,843.254918 C60.2422149,853.587355 60.2422149,870.337147 70.5304019,880.669584 L164.852817,975.392712 L70.5304019,1070.11087 C60.2422149,1080.4433 60.2422149,1097.19309 70.5304019,1107.52553 C75.6769721,1112.69424 82.4135798,1115.2761 89.1600944,1115.2761 C95.8967021,1115.27113 102.643217,1112.68926 107.784833,1107.52553 Z" id="Path"></path>
<path d="M1243.53296,742.3701 L1551.67595,432.907005 C1565.14873,419.376274 1572.71935,401.017629 1572.71935,381.87353 C1572.71935,362.729432 1565.14873,344.370786 1551.67595,330.840055 L1243.53296,21.3769605 C1215.46119,-6.80507938 1169.96447,-6.80507938 1141.8927,21.3769605 C1113.83136,49.5590004 1113.83136,95.2618701 1141.8927,123.44391 L1399.22598,381.87353 L1141.8927,640.30315 C1113.83136,668.48519 1113.83136,714.18806 1141.8927,742.3701 C1155.92859,756.466356 1174.3181,763.509248 1192.71283,763.509248 C1211.09713,763.509248 1229.49707,756.46112 1243.53296,742.3701 Z" id="Path"></path>
<ellipse id="Oval" cx="1417.39037" cy="673.515125" rx="30" ry="30.1290323"></ellipse>
<path d="M1068.44288,969.593673 C1068.44288,985.323653 1081.13346,998.068816 1096.79607,998.068816 C1112.45869,998.068816 1125.14927,985.323653 1125.14927,969.593673 C1125.14927,917.971285 1166.96577,875.969952 1218.37203,875.969952 C1269.77829,875.969952 1311.59479,917.96631 1311.59479,969.593673 C1311.59479,985.323653 1324.28537,998.068816 1339.94799,998.068816 C1355.6106,998.068816 1368.30118,985.323653 1368.30118,969.593673 C1368.30118,886.571023 1301.04408,819.019668 1218.37203,819.019668 C1135.69998,819.019668 1068.44288,886.566048 1068.44288,969.593673 Z" id="Path"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

2
assets/copy-16.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#0A8DFF" d="M14.707 8.293l-3-3A1 1 0 0 0 11 5h-1V4a1 1 0 0 0-.293-.707l-3-3A1 1 0 0 0 6 0H3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3v3a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V9a1 1 0 0 0-.293-.707zM12.586 9H11V7.414zm-5-5H6V2.414zM6 7v2H3V2h2v2.5a.5.5 0 0 0 .5.5H8a2 2 0 0 0-2 2zm2 7V7h2v2.5a.5.5 0 0 0 .5.5H13v4z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#0060df" d="M14.707 8.293l-3-3A1 1 0 0 0 11 5h-1V4a1 1 0 0 0-.293-.707l-3-3A1 1 0 0 0 6 0H3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3v3a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V9a1 1 0 0 0-.293-.707zM12.586 9H11V7.414zm-5-5H6V2.414zM6 7v2H3V2h2v2.5a.5.5 0 0 0 .5.5H8a2 2 0 0 0-2 2zm2 7V7h2v2.5a.5.5 0 0 0 .5.5H13v4z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 398 B

After

Width:  |  Height:  |  Size: 398 B

15
assets/dl.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 53 (72520) - https://sketchapp.com -->
<title>728D143F-562C-4AE5-80DA-9DBBD9D647D8</title>
<desc>Created with sketchtool.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Send_Sending" transform="translate(-770.000000, -481.000000)" fill="#0060DF">
<g id="List-Item-3" transform="translate(744.000000, 350.000000)">
<g id="Download-Icon" transform="translate(26.000000, 131.000000)">
<path d="M5.293,12.707 C5.6835,13.097382 6.316501,13.097383 6.707001,12.707 L11.707,7.707 C12.08597,7.31462 12.08054,6.69092 11.69481,6.305189 C11.30908,5.91946 10.68538,5.91403 10.293,6.293 L7,9.586 L7,1 C7,0.44772 6.552285,0 6,0 C5.447715,0 5,0.44772 5,1 L5,9.586 L1.707,6.293 C1.314621,5.91403 0.690915,5.91945 0.305181,6.305182 C-0.080553,6.690915 -0.085973,7.314622 0.293,7.707001 L5.293,12.707 Z M11,14 L1,14 C0.447715,14 0,14.447715 0,15 C0,15.5522852 0.447715,16 1,16 L11,16 C11.55228,16 12,15.5522852 12,15 C12,14.447715 11.55229,14 11,14 Z" id="Fill-1"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

2
assets/lock.svg
View File

@ -1,4 +1,4 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 7a3 3 0 1 1 6 0v3H9V7zm-2 3V7a5 5 0 1 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1z" fill="#0A84FF" fill-opacity="1"></path></svg>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 7a3 3 0 1 1 6 0v3H9V7zm-2 3V7a5 5 0 1 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1z" fill="#FFFFFF" fill-opacity="1"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 520 B

After

Width:  |  Height:  |  Size: 520 B

59
assets/logo.svg Normal file
View File

@ -0,0 +1,59 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="36px" viewBox="0 0 40 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 53 (72520) - https://sketchapp.com -->
<title>6EF867FA-4ABB-444A-A5BB-8FA5D52E0EEB</title>
<desc>Created with sketchtool.</desc>
<defs>
<linearGradient x1="71.1627137%" y1="8.3795633%" x2="23.6307692%" y2="89.0750207%" id="linearGradient-1">
<stop stop-color="#FF980E" offset="0%"></stop>
<stop stop-color="#FF7139" offset="20.75%"></stop>
<stop stop-color="#FF5854" offset="36.33%"></stop>
<stop stop-color="#FF4F5E" offset="45.63%"></stop>
<stop stop-color="#FF3750" offset="69.29%"></stop>
<stop stop-color="#F92261" offset="85.75%"></stop>
<stop stop-color="#F5156C" offset="100%"></stop>
</linearGradient>
<linearGradient x1="71.1627137%" y1="8.3795633%" x2="23.6307692%" y2="89.0750207%" id="linearGradient-2">
<stop stop-color="#FFF44F" stop-opacity="0.8" offset="0%"></stop>
<stop stop-color="#FFF44F" stop-opacity="0" offset="75%"></stop>
</linearGradient>
<linearGradient x1="14.3945107%" y1="105.534329%" x2="62.8615752%" y2="24.3294529%" id="linearGradient-3">
<stop stop-color="#3A8EE6" offset="0%"></stop>
<stop stop-color="#5C79F0" offset="23.59%"></stop>
<stop stop-color="#9059FF" offset="62.93%"></stop>
<stop stop-color="#C139E6" offset="100%"></stop>
</linearGradient>
<linearGradient x1="62.8713604%" y1="29.0228725%" x2="42.5369928%" y2="60.7429512%" id="linearGradient-4">
<stop stop-color="#6E008B" stop-opacity="0.5" offset="0%"></stop>
<stop stop-color="#C846CB" stop-opacity="0" offset="50%"></stop>
</linearGradient>
<linearGradient x1="73.7626536%" y1="58.1514822%" x2="20.9130221%" y2="45.4476366%" id="linearGradient-5">
<stop stop-color="#6A2BEA" stop-opacity="0" offset="13.6%"></stop>
<stop stop-color="#662CE6" stop-opacity="0.09459748" offset="29.95%"></stop>
<stop stop-color="#592FDB" stop-opacity="0.1926" offset="46.89%"></stop>
<stop stop-color="#4534C9" stop-opacity="0.2923" offset="64.1%"></stop>
<stop stop-color="#283BAF" stop-opacity="0.393" offset="81.5%"></stop>
<stop stop-color="#03448D" stop-opacity="0.4936" offset="98.9%"></stop>
<stop stop-color="#00458B" stop-opacity="0.5" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Send_Home-Spec" transform="translate(-24.000000, -31.000000)">
<g id="Header" transform="translate(24.000000, 24.000000)">
<g id="Send" transform="translate(0.000000, 7.000000)">
<g id="FF_Send_Logo">
<g id="Group">
<g>
<path d="M18.4801773,0.309677419 C8.4846097,0.309677419 0.34868259,8.28387097 0.34868259,18.0774194 C0.34868259,19.1225806 1.20101781,19.9741935 2.24706558,19.9741935 L16.5817943,19.9741935 L16.5817943,25.1612903 L16.5817943,25.1612903 L16.5817943,29.4193548 L12.1264056,25.0064516 C11.390298,24.2709677 10.1892801,24.2709677 9.41442994,25.0064516 C8.67832225,25.7419355 8.67832225,26.9419355 9.41442994,27.716129 L17.1241894,35.4193548 C17.162932,35.4580645 17.2016745,35.4967742 17.2791595,35.5354839 C17.2791595,35.5354839 17.2791595,35.5354839 17.317902,35.5354839 C17.3566445,35.5741935 17.395387,35.6129032 17.4341295,35.6129032 C17.4341295,35.6129032 17.4341295,35.6129032 17.472872,35.6129032 C17.5116145,35.6516129 17.5503571,35.6516129 17.5890996,35.6903226 C17.5890996,35.6903226 17.5890996,35.6903226 17.6278421,35.6903226 C17.6665846,35.7290323 17.7440696,35.7290323 17.7828121,35.7677419 C17.7828121,35.7677419 17.7828121,35.7677419 17.7828121,35.7677419 C17.8215546,35.8064516 17.8990396,35.8064516 17.9377822,35.8064516 C17.9377822,35.8064516 17.9377822,35.8064516 17.9377822,35.8064516 C17.9765247,35.8064516 18.0540097,35.8451613 18.0927522,35.8451613 C18.0927522,35.8451613 18.1314947,35.8451613 18.1314947,35.8451613 C18.1702372,35.8451613 18.2089797,35.8451613 18.2864647,35.883871 C18.3639498,35.883871 18.4026923,35.883871 18.4801773,35.883871 C18.5576623,35.883871 18.5964048,35.883871 18.6738898,35.883871 C18.7126324,35.883871 18.7513749,35.883871 18.8288599,35.8451613 C18.8288599,35.8451613 18.8676024,35.8451613 18.8676024,35.8451613 C18.9063449,35.8451613 18.9838299,35.8064516 19.0225724,35.8064516 C19.0225724,35.8064516 19.0225724,35.8064516 19.0225724,35.8064516 C19.0613149,35.8064516 19.1388,35.7677419 19.1775425,35.7290323 C19.1775425,35.7290323 19.1775425,35.7290323 19.1775425,35.7290323 C19.216285,35.6903226 19.29377,35.6903226 19.3325125,35.6516129 C19.3325125,35.6516129 19.3325125,35.6516129 19.3325125,35.6516129 C19.371255,35.6129032 19.4099975,35.6129032 19.44874,35.5741935 C19.44874,35.5741935 19.44874,35.5741935 19.4874826,35.5741935 C19.5262251,35.5354839 19.5649676,35.4967742 19.6037101,35.4967742 C19.6037101,35.4967742 19.6037101,35.4967742 19.6424526,35.4967742 C19.6811951,35.4580645 19.7199376,35.4193548 19.7974226,35.3806452 L27.5071821,27.6774194 C28.2432898,26.9419355 28.2432898,25.7419355 27.5071821,24.9677419 C26.7710744,24.2322581 25.5700566,24.2322581 24.7952064,24.9677419 L20.3785603,29.4193548 L20.3785603,20.0129032 L34.713289,20.0129032 C35.7593368,20.0129032 36.611672,19.1612903 36.611672,18.116129 C36.611672,8.28387097 28.4757449,0.309677419 18.4801773,0.309677419 Z M4.26167611,16.1806452 C5.23023886,9.40645161 11.2353279,4.14193548 18.4801773,4.14193548 C25.7250267,4.14193548 31.6913732,9.40645161 32.659936,16.1806452 L4.26167611,16.1806452 Z" id="Shape" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
<path d="M18.4801773,0.309677419 C8.4846097,0.309677419 0.34868259,8.28387097 0.34868259,18.0774194 C0.34868259,19.1225806 1.20101781,19.9741935 2.24706558,19.9741935 L16.5817943,19.9741935 L16.5817943,25.1612903 L16.5817943,25.1612903 L16.5817943,29.4193548 L12.1264056,25.0064516 C11.390298,24.2709677 10.1892801,24.2709677 9.41442994,25.0064516 C8.67832225,25.7419355 8.67832225,26.9419355 9.41442994,27.716129 L17.1241894,35.4193548 C17.162932,35.4580645 17.2016745,35.4967742 17.2791595,35.5354839 C17.2791595,35.5354839 17.2791595,35.5354839 17.317902,35.5354839 C17.3566445,35.5741935 17.395387,35.6129032 17.4341295,35.6129032 C17.4341295,35.6129032 17.4341295,35.6129032 17.472872,35.6129032 C17.5116145,35.6516129 17.5503571,35.6516129 17.5890996,35.6903226 C17.5890996,35.6903226 17.5890996,35.6903226 17.6278421,35.6903226 C17.6665846,35.7290323 17.7440696,35.7290323 17.7828121,35.7677419 C17.7828121,35.7677419 17.7828121,35.7677419 17.7828121,35.7677419 C17.8215546,35.8064516 17.8990396,35.8064516 17.9377822,35.8064516 C17.9377822,35.8064516 17.9377822,35.8064516 17.9377822,35.8064516 C17.9765247,35.8064516 18.0540097,35.8451613 18.0927522,35.8451613 C18.0927522,35.8451613 18.1314947,35.8451613 18.1314947,35.8451613 C18.1702372,35.8451613 18.2089797,35.8451613 18.2864647,35.883871 C18.3639498,35.883871 18.4026923,35.883871 18.4801773,35.883871 C18.5576623,35.883871 18.5964048,35.883871 18.6738898,35.883871 C18.7126324,35.883871 18.7513749,35.883871 18.8288599,35.8451613 C18.8288599,35.8451613 18.8676024,35.8451613 18.8676024,35.8451613 C18.9063449,35.8451613 18.9838299,35.8064516 19.0225724,35.8064516 C19.0225724,35.8064516 19.0225724,35.8064516 19.0225724,35.8064516 C19.0613149,35.8064516 19.1388,35.7677419 19.1775425,35.7290323 C19.1775425,35.7290323 19.1775425,35.7290323 19.1775425,35.7290323 C19.216285,35.6903226 19.29377,35.6903226 19.3325125,35.6516129 C19.3325125,35.6516129 19.3325125,35.6516129 19.3325125,35.6516129 C19.371255,35.6129032 19.4099975,35.6129032 19.44874,35.5741935 C19.44874,35.5741935 19.44874,35.5741935 19.4874826,35.5741935 C19.5262251,35.5354839 19.5649676,35.4967742 19.6037101,35.4967742 C19.6037101,35.4967742 19.6037101,35.4967742 19.6424526,35.4967742 C19.6811951,35.4580645 19.7199376,35.4193548 19.7974226,35.3806452 L27.5071821,27.6774194 C28.2432898,26.9419355 28.2432898,25.7419355 27.5071821,24.9677419 C26.7710744,24.2322581 25.5700566,24.2322581 24.7952064,24.9677419 L20.3785603,29.4193548 L20.3785603,20.0129032 L34.713289,20.0129032 C35.7593368,20.0129032 36.611672,19.1612903 36.611672,18.116129 C36.611672,8.28387097 28.4757449,0.309677419 18.4801773,0.309677419 Z M4.26167611,16.1806452 C5.23023886,9.40645161 11.2353279,4.14193548 18.4801773,4.14193548 C25.7250267,4.14193548 31.6913732,9.40645161 32.659936,16.1806452 L4.26167611,16.1806452 Z" id="Shape" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
<path d="M20.3785603,4.25806452 C26.7323319,5.10967742 31.7688582,9.98709677 32.659936,16.1806452 L24.2140688,16.1806452 C22.1219732,16.1806452 20.4173028,17.883871 20.4173028,19.9741935 L20.4173028,19.9741935 L34.713289,19.9741935 C35.7593368,19.9741935 36.611672,19.1225806 36.611672,18.0774194 C36.611672,11.3032258 31.8076008,7.97419355 27.7396372,6.07741935 C23.9816137,4.33548387 20.3785603,4.25806452 20.3785603,4.25806452 Z" id="Path" fill="url(#linearGradient-3)"></path>
<path d="M32.582451,15.7548387 C33.8609538,16.8 35.1781991,17.8064516 36.4179595,18.8903226 C36.534187,18.6580645 36.611672,18.3870968 36.611672,18.0774194 C36.611672,11.3032258 31.8076008,7.97419355 27.7396372,6.07741935 C23.9816137,4.33548387 20.3785603,4.25806452 20.3785603,4.25806452 C26.5773619,5.07096774 31.5364032,9.79354839 32.582451,15.7548387 Z" id="Path" fill="url(#linearGradient-4)"></path>
</g>
<path d="M32.3499959,16.1806452 L24.2140688,16.1806452 C22.1219732,16.1806452 20.4173028,17.883871 20.4173028,19.9741935 L34.713289,19.9741935 C35.2944267,19.9741935 35.8368218,19.7032258 36.1855044,19.2774194 C34.9070016,18.2322581 33.6284987,17.2258065 32.3499959,16.1806452 Z" id="Path" fill="url(#linearGradient-5)" opacity="0.9"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

4
tailwind.js
View File

@ -49,10 +49,10 @@ const colors = {
'grey-darkest': '#3d4852',
'grey-darker': '#606f7b',
'grey-dark': '#8795a1',
grey: '#b8c2cc',
grey: '#B1B1B3',
'grey-light': '#dae1e7',
'grey-lighter': '#f1f5f8',
'grey-lightest': '#f8fafc',
'grey-lightest': '#F9F9FA',
white: '#ffffff',
'red-darkest': '#3b0d0c',