fix layout

assets/css/app.scss

@@ -10,6 +10,30 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
 
 @import "components";
 
+/* fix firefox scrollbars */
+* {
+  scrollbar-width: auto;
+  scrollbar-color: rgba(161, 161, 170, var(--tw-bg-opacity)) white;
+}
+
+.fa-fade {
+  animation: pulse 1s ease-in-out 0s infinite alternate;
+}
+
+@keyframes pulse {
+  0% { scale: 0.95; opacity: 0.5; }
+  100% { scale: 1.0; opacity: 1; }
+}
+
+.phx-connected > #disconnect, #loading {
+  opacity: 0 !important;
+  pointer-events: none;
+}
+
+.phx-loading:not(.phx-error) > #loading, .phx-error > #disconnect {
+  opacity: 0.95 !important;
+}
+
 /* Alerts and form errors used by phx.new */
 .alert {
   padding: 15px;

assets/css/components.scss

@@ -1,15 +1,15 @@
 @layer components {
   .input {
-    @apply rounded-lg px-4 py-2 border;
+    @apply rounded-lg px-4 py-2 border focus:outline-none;
     @apply shadow-sm focus:shadow-lg;
     @apply transition-all duration-300 ease-in-out;
   }
-  
+
   .input-primary {
     @apply border-primary-500 hover:border-primary-600 active:border-primary-600;
     @apply text-black;
   }
-  
+
   .checkbox {
     -ms-transform: scale(1.5);
     -moz-transform: scale(1.5);
@@ -17,25 +17,41 @@
     -o-transform: scale(1.5);
     transform: scale(1.5);
     padding: 10px;
+    margin: 1em auto;
   }
-  
+
   .title {
     @apply leading-5 tracking-wide;
   }
-  
+
   .btn {
     @apply focus:outline-none px-4 py-2 rounded-lg;
     @apply shadow-sm focus:shadow-lg;
     @apply transition-all duration-300 ease-in-out;
   }
-  
+
   .btn-primary {
     @apply bg-primary-500 focus:bg-primary-600 active:bg-primary-600;
-    @apply bg-primary-500 focus:bg-primary-600 active:bg-primary-600;
+    @apply border-primary-500 focus:border-primary-600 active:border-primary-600;
     @apply text-white;
   }
-  
-  .hr {
-    @apply border border-primary-500 w-full max-w-2xl;
+
+  .btn-alert {
+    @apply bg-red-600 focus:bg-red-700 active:bg-red-800;
+    @apply border-red-600 focus:border-red-700 active:border-red-800;
+    @apply text-white;
   }
-}
+
+  .hr {
+    @apply border border-primary-300 w-full max-w-2xl;
+  }
+
+  .hr-light {
+    @apply border border-white w-full max-w-2xl;
+  }
+
+  .link {
+    @apply hover:underline;
+    @apply transition-colors duration-500 ease-in-out;
+  }
+}