styling, require a code for prompts, admin privs, ordering, filtering, jump-to-page

assets/css/app.css

@@ -1,6 +1,11 @@
-/* This file is for your main application CSS */
-@import "./phoenix.css";
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
 
+/* This file is for your main application CSS */
+.bg-gray {
+  background-color: rgb(20, 20, 20);
+}
 /* Alerts and form errors used by phx.new */
 .alert {
   padding: 15px;
@@ -46,12 +51,12 @@
   transition: opacity 1s ease-out;
 }
 
-.phx-loading{
+.phx-loading {
   cursor: wait;
 }
 
 .phx-modal {
-  opacity: 1!important;
+  opacity: 1 !important;
   position: fixed;
   z-index: 1;
   left: 0;
@@ -59,15 +64,36 @@
   width: 100%;
   height: 100%;
   overflow: auto;
-  background-color: rgba(0,0,0,0.4);
+  background-color: rgba(0, 0, 0, 0.4);
 }
 
 .phx-modal-content {
-  background-color: #fefefe;
+  background-color: #323232;
   margin: 15vh auto;
-  padding: 20px;
+  padding: 20\px;
   border: 1px solid #888;
-  width: 80%;
+  max-width: 600px;
+}
+
+.modal-label {
+  display: inline-block;
+  min-width: 140px;
+  text-align: right;
+}
+
+.pagination-link {
+  height: 45px;
+  line-height: 45px;
+  width: 175px;
+}
+
+.pagination-btns {
+  width: 420px;
+  max-width: 100%;
+}
+
+.center-placeholder::placeholder {
+  text-align: center;
 }
 
 .phx-modal-close {
@@ -99,22 +125,42 @@
   animation: 0.2s ease-out 0s normal forwards 1 fade-out-keys;
 }
 
-@keyframes fade-in-scale-keys{
-  0% { scale: 0.95; opacity: 0; }
-  100% { scale: 1.0; opacity: 1; }
+@keyframes fade-in-scale-keys {
+  0% {
+    scale: 0.95;
+    opacity: 0;
+  }
+  100% {
+    scale: 1;
+    opacity: 1;
+  }
 }
 
-@keyframes fade-out-scale-keys{
-  0% { scale: 1.0; opacity: 1; }
-  100% { scale: 0.95; opacity: 0; }
+@keyframes fade-out-scale-keys {
+  0% {
+    scale: 1;
+    opacity: 1;
+  }
+  100% {
+    scale: 0.95;
+    opacity: 0;
+  }
 }
 
-@keyframes fade-in-keys{
-  0% { opacity: 0; }
-  100% { opacity: 1; }
+@keyframes fade-in-keys {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
-@keyframes fade-out-keys{
-  0% { opacity: 1; }
-  100% { opacity: 0; }
+@keyframes fade-out-keys {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }

assets/js/app.js

@@ -1,6 +1,5 @@
 // We import the CSS which is extracted to its own file by esbuild.
 // Remove this line if you add a your own CSS build pipeline (e.g postcss).
-import "../css/app.css"
 
 // If you want to use Phoenix channels, run `mix help phx.gen.channel`
 // to get started and then uncomment the line below.

assets/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "daisyui": "^2.24.0"
+  }
+}

assets/tailwind.config.js

@@ -0,0 +1,30 @@
+// See the Tailwind configuration guide for advanced usage
+// https://tailwindcss.com/docs/configuration
+
+let plugin = require('tailwindcss/plugin')
+
+module.exports = {
+  content: [
+    './js/**/*.js',
+    '../lib/*_web.ex',
+    '../lib/*_web/**/*.*ex'
+  ],
+  theme: {
+    extend: {},
+    container: {
+      center: true,
+    },
+  },
+  daisyui: {
+    themes: ["black"],
+  },
+  plugins: [
+    require("@tailwindcss/typography"),
+    require('@tailwindcss/forms'),
+    plugin(({addVariant}) => addVariant('phx-no-feedback', ['&.phx-no-feedback', '.phx-no-feedback &'])),
+    plugin(({addVariant}) => addVariant('phx-click-loading', ['&.phx-click-loading', '.phx-click-loading &'])),
+    plugin(({addVariant}) => addVariant('phx-submit-loading', ['&.phx-submit-loading', '.phx-submit-loading &'])),
+    plugin(({addVariant}) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &'])),
+    require('daisyui')
+  ]
+}