Fix style problems

2022-08-09 09:00:43 +00:00 · 2022-08-09 09:00:43 +00:00 · 16e78847a2
parent 55344f8a9d
commit 16e78847a2
9 changed files with 17 additions and 19 deletions
--- a/app/main.css
+++ b/app/main.css
@ -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;
    }
  }
--- a/app/ui/account.js
+++ b/app/ui/account.js
@ -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)}"
        />
--- a/app/ui/archiveTile.js
+++ b/app/ui/archiveTile.js
@ -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">
--- a/app/ui/copyDialog.js
+++ b/app/ui/copyDialog.js
@ -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"
          />
--- a/app/ui/noStreams.js
+++ b/app/ui/noStreams.js
@ -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"/>
--- a/app/ui/selectbox.js
+++ b/app/ui/selectbox.js
@ -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}"
    >
--- a/app/ui/shareDialog.js
+++ b/app/ui/shareDialog.js
@ -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"
        />
--- a/app/ui/signupDialog.js
+++ b/app/ui/signupDialog.js
@ -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
--- a/app/ui/unsupported.js
+++ b/app/ui/unsupported.js
@ -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>