Fix style problems

This commit is contained in:
AaronDewes 2022-08-09 09:00:43 +00:00
parent 55344f8a9d
commit 16e78847a2
9 changed files with 17 additions and 19 deletions

View File

@ -71,8 +71,7 @@ body {
.checkbox > label::before {
/* @apply bg-grey-10; */
border-width: 1px;
@apply border-default;
@apply rounded-sm;
content: '';
@ -314,8 +313,7 @@ select {
@screen md {
.main > section {
border-width: 1px;
@apply border-default;
@apply border-grey-80;
}
}

View File

@ -83,7 +83,7 @@ class Account extends Component {
<input
type="image"
alt="${user.email}"
class="w-8 h-8 rounded-full border text-primary md:text-white focus:outline"
class="w-8 h-8 rounded-full border-default text-primary md:text-white focus:outline"
src="${user.avatar}"
onclick="${e => this.avatarClick(e)}"
/>

View File

@ -53,7 +53,7 @@ function password(state) {
id="password-input"
class="${state.archive.password
? ''
: 'invisible'} border rounded focus:border-primary leading-normal my-1 py-1 px-2 h-8 dark:bg-grey-80"
: 'invisible'} border-default rounded-default focus:border-primary leading-normal my-1 py-1 px-2 h-8 dark:bg-grey-80"
autocomplete="off"
maxlength="${MAX_LENGTH}"
type="password"
@ -261,7 +261,7 @@ module.exports = function(state, emit, archive) {
return html`
<send-archive
id="archive-${archive.id}"
class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full dark:bg-grey-90 dark:border dark:border-grey-70"
class="flex flex-col items-start rounded-default shadow-light bg-white p-4 w-full dark:bg-grey-90 dark:border-default dark:border-grey-70"
>
${archiveInfo(
archive,
@ -335,7 +335,7 @@ module.exports.wip = function(state, emit) {
fileInfo(f, remove(f, state.translate('deleteButtonHover')))
),
'flex-shrink bg-grey-10 rounded-t overflow-y-auto px-6 py-4 md:h-full md:max-h-half-screen dark:bg-black',
'bg-white px-2 my-2 shadow-light rounded dark:bg-grey-90 dark:border dark:border-grey-80'
'bg-white px-2 my-2 shadow-light rounded-default dark:bg-grey-90 dark:border-default dark:border-grey-80'
)}
<div
class="flex-shrink-0 flex-grow flex items-end p-4 bg-grey-10 rounded-b mb-1 font-medium dark:bg-grey-90"
@ -438,7 +438,7 @@ module.exports.uploading = function(state, emit) {
return html`
<send-upload-area
id="${archive.id}"
class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full dark:bg-grey-90"
class="flex flex-col items-start rounded-default shadow-light bg-white p-4 w-full dark:bg-grey-90"
>
${archiveInfo(archive)}
<div class="text-xs opacity-75 w-full mt-2 mb-2">
@ -488,7 +488,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-transparent rounded px-6 py-16 h-full w-full dark:border-grey-60"
class="flex flex-col items-center justify-center border-2 border-dashed border-grey-transparent rounded-default px-6 py-16 h-full w-full dark:border-grey-60"
onclick="${e => {
if (e.target.tagName !== 'LABEL') {
document.getElementById('file-upload').click();
@ -563,7 +563,7 @@ module.exports.preview = function(state, emit) {
<send-archive
class="flex flex-col max-h-full bg-white p-4 w-full md:w-128 dark:bg-grey-90"
>
<div class="border rounded py-3 px-6 dark:border-grey-70">
<div class="border-default rounded-default py-3 px-6 dark:border-grey-70">
${archiveInfo(archive)} ${details}
</div>
<button
@ -590,7 +590,7 @@ module.exports.downloading = function(state) {
const progressPercent = percent(progress);
return html`
<send-archive
class="flex flex-col bg-white rounded shadow-light p-4 w-full max-w-sm md:w-128 dark:bg-grey-90"
class="flex flex-col bg-white rounded-default shadow-light p-4 w-full max-w-sm md:w-128 dark:bg-grey-90"
>
${archiveInfo(archive)}
<div class="link-primary text-sm font-medium mt-2">

View File

@ -21,7 +21,7 @@ module.exports = function(name, url) {
<input
type="text"
id="share-url"
class="block w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
class="block w-full my-4 border-default rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
value="${url}"
readonly="true"
/>

View File

@ -12,12 +12,12 @@ module.exports = function(state, emit) {
'downloadTitle'
)}</h1>
<p
class="w-full p-2 border border-yellow-50 rounded md:w-4/5 text-orange-60 bg-yellow-40 text-center leading-normal"
class="w-full p-2 border-default border-yellow-50 rounded-default md:w-4/5 text-orange-60 bg-yellow-40 text-center leading-normal"
>
${state.translate('noStreamsWarning')}
</p>
<form class="md:w-128" onsubmit=${submit}>
<fieldset class="border rounded p-4 my-4" onchange=${optionChanged}>
<fieldset class="border-default rounded-default p-4 my-4" onchange=${optionChanged}>
<div class="flex items-center mb-2">
<svg class="h-8 w-6 mr-3 flex-shrink-0 text-primary">
<use xlink:href="${assets.get('blue_file.svg')}#icon"/>

View File

@ -18,7 +18,7 @@ module.exports = function(selected, options, translate, changed, htmlId) {
return html`
<select
id="${htmlId}"
class="appearance-none cursor-pointer border rounded bg-grey-10 hover:border-primary focus:border-primary pl-1 pr-8 py-1 my-1 h-8 dark:bg-grey-80"
class="appearance-none cursor-pointer border-default rounded-default bg-grey-10 hover:border-primary focus:border-primary pl-1 pr-8 py-1 my-1 h-8 dark:bg-grey-80"
data-selected="${selected}"
onchange="${choose}"
>

View File

@ -18,7 +18,7 @@ module.exports = function(name, url) {
<input
type="text"
id="share-url"
class="w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
class="w-full my-4 border-default rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
value="${url}"
readonly="true"
/>

View File

@ -35,7 +35,7 @@ module.exports = function() {
<input
id="email-input"
type="email"
class="hidden border rounded-lg w-full px-2 py-1 h-12 mb-3 text-lg text-grey-70 leading-loose dark:bg-grey-80 dark:text-white"
class="hidden border-default rounded-lg w-full px-2 py-1 h-12 mb-3 text-lg text-grey-70 leading-loose dark:bg-grey-80 dark:text-white"
placeholder=${state.translate('emailPlaceholder')}
/>
<input

View File

@ -27,7 +27,7 @@ module.exports = function(state, emit) {
<main class="main">
${state.modal && modal(state, emit)}
<section
class="flex flex-col items-center justify-center text-center bg-white m-6 px-6 py-8 border border-grey-30 md:border-none md:px-12 md:py-16 shadow w-full md:h-full dark:bg-grey-90"
class="flex flex-col items-center justify-center text-center bg-white m-6 px-6 py-8 border-default border-grey-30 md:border-none md:px-12 md:py-16 shadow-default w-full md:h-full dark:bg-grey-90"
>
<h1 class="text-3xl font-bold">${strings.header}</h1>
<p class="mt-4 mb-8 max-w-md leading-normal">${strings.description}</p>