Update templates - icons, fonts

Author: RobiNN1

assets/css/src.css

@@ -1,12 +1,4 @@
 @tailwind base;
-
-@layer base {
-    svg {
-        display: inline-block;
-        vertical-align: -.125rem;
-    }
-}
-
 @tailwind components;
 @tailwind utilities;
 

assets/css/styles.css

@@ -417,11 +417,6 @@ video {
   height: auto;
 }
 
-svg {
-  display: inline-block;
-  vertical-align: -.125rem;
-}
-
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -667,38 +662,10 @@ svg {
   margin-bottom: 1rem;
 }
 
-.-mx-1\.5 {
-  margin-left: -0.375rem;
-  margin-right: -0.375rem;
-}
-
-.-my-1\.5 {
-  margin-top: -0.375rem;
-  margin-bottom: -0.375rem;
-}
-
-.-mx-1 {
-  margin-left: -0.25rem;
-  margin-right: -0.25rem;
-}
-
-.-my-1 {
-  margin-top: -0.25rem;
-  margin-bottom: -0.25rem;
-}
-
 .mr-1 {
   margin-right: 0.25rem;
 }
 
-.ml-auto {
-  margin-left: auto;
-}
-
-.ml-3 {
-  margin-left: 0.75rem;
-}
-
 .mr-3 {
   margin-right: 0.75rem;
 }
@@ -880,10 +847,6 @@ svg {
   justify-items: stretch;
 }
 
-.gap-1 {
-  gap: 0.25rem;
-}
-
 .gap-2 {
   gap: 0.5rem;
 }
@@ -953,6 +916,10 @@ svg {
   border-top-width: 1px;
 }
 
+.border-transparent {
+  border-color: transparent;
+}
+
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -1122,14 +1089,6 @@ svg {
   padding: 0.75rem;
 }
 
-.p-1\.5 {
-  padding: 0.375rem;
-}
-
-.p-1 {
-  padding: 0.25rem;
-}
-
 .p-5 {
   padding: 1.25rem;
 }
@@ -1217,16 +1176,21 @@ svg {
   line-height: 1.75rem;
 }
 
-.text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
 }
 
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -1239,10 +1203,6 @@ svg {
   font-weight: 600;
 }
 
-.font-medium {
-  font-weight: 500;
-}
-
 .uppercase {
   text-transform: uppercase;
 }
@@ -1537,12 +1497,12 @@ svg {
   border: 0;
 }
 
-.file\:mr-4::-webkit-file-upload-button {
-  margin-right: 1rem;
+.file\:mr-3::-webkit-file-upload-button {
+  margin-right: 0.75rem;
 }
 
-.file\:mr-4::file-selector-button {
-  margin-right: 1rem;
+.file\:mr-3::file-selector-button {
+  margin-right: 0.75rem;
 }
 
 .file\:rounded::-webkit-file-upload-button {
@@ -1553,12 +1513,20 @@ svg {
   border-radius: 0.25rem;
 }
 
-.file\:border-0::-webkit-file-upload-button {
-  border-width: 0px;
+.file\:border::-webkit-file-upload-button {
+  border-width: 1px;
 }
 
-.file\:border-0::file-selector-button {
-  border-width: 0px;
+.file\:border::file-selector-button {
+  border-width: 1px;
+}
+
+.file\:border-transparent::-webkit-file-upload-button {
+  border-color: transparent;
+}
+
+.file\:border-transparent::file-selector-button {
+  border-color: transparent;
 }
 
 .file\:bg-sky-500::-webkit-file-upload-button {
@@ -1581,14 +1549,14 @@ svg {
   padding-bottom: 0.375rem;
 }
 
-.file\:px-3::-webkit-file-upload-button {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+.file\:px-2::-webkit-file-upload-button {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
 }
 
-.file\:px-3::file-selector-button {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+.file\:px-2::file-selector-button {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
 }
 
 .file\:py-1::-webkit-file-upload-button {
@@ -1601,14 +1569,14 @@ svg {
   padding-bottom: 0.25rem;
 }
 
-.file\:text-sm::-webkit-file-upload-button {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+.file\:text-base::-webkit-file-upload-button {
+  font-size: 1rem;
+  line-height: 1.5rem;
 }
 
-.file\:text-sm::file-selector-button {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+.file\:text-base::file-selector-button {
+  font-size: 1rem;
+  line-height: 1.5rem;
 }
 
 .file\:font-semibold::-webkit-file-upload-button {
@@ -1693,12 +1661,12 @@ svg {
   opacity: 0.75;
 }
 
-.hover\:file\:bg-sky-600::-webkit-file-upload-button:hover {
+.file\:hover\:bg-sky-600:hover::-webkit-file-upload-button {
   --tw-bg-opacity: 1;
   background-color: rgb(2 132 199 / var(--tw-bg-opacity));
 }
 
-.hover\:file\:bg-sky-600::file-selector-button:hover {
+.file\:hover\:bg-sky-600:hover::file-selector-button {
   --tw-bg-opacity: 1;
   background-color: rgb(2 132 199 / var(--tw-bg-opacity));
 }
@@ -1832,10 +1800,6 @@ svg {
     display: inline-block;
   }
 
-  .md\:flex {
-    display: flex;
-  }
-
   .md\:table-cell {
     display: table-cell;
   }
@@ -1907,6 +1871,10 @@ svg {
     display: inline-block;
   }
 
+  .lg\:flex {
+    display: flex;
+  }
+
   .lg\:grid {
     display: grid;
   }
@@ -1932,14 +1900,6 @@ svg {
   }
 }
 
-.\[\&\>svg\]\:align-middle>svg {
-  vertical-align: middle;
-}
-
-.\[\&\>svg\]\:align-\[-0\.05rem\]>svg {
-  vertical-align: -0.05rem;
-}
-
 .\[\&\:nth-last-child\(2\)\>\*\]\:border-b-0:nth-last-child(2)>* {
   border-bottom-width: 0px;
 }

index.php

@@ -12,6 +12,7 @@
 
 use RobiNN\Pca\Admin;
 use RobiNN\Pca\Config;
+use RobiNN\Pca\Helpers;
 use RobiNN\Pca\Http;
 use RobiNN\Pca\Template;
 

templates/components/alert.twig

@@ -1,6 +1,6 @@
-<div class="ml-auto py-3 px-4 flex items-center rounded {{ alert_color ? alert_color : 'bg-blue-500' }} shadow-lg fixed top-5 right-5 z-50 w-auto">
-    <div class="ml-3 mr-3 flex items-center gap-1 text-sm font-medium text-white">{{ message|raw }}</div>
-    <button type="button" class="close -mx-1.5 -my-1.5 ml-auto p-1.5 inline-flex text-white hover:opacity-75" onclick="this.parentElement.remove();">
-        {{ svg('x') }}
+<div class="py-3 px-4 flex items-center rounded {{ alert_color ? alert_color : 'bg-blue-500' }} shadow-lg fixed top-5 right-5 z-50 w-auto">
+    <div class="mr-3 text-white">{{ message|raw }}</div>
+    <button type="button" class="close text-white hover:opacity-75" onclick="this.parentElement.remove();">
+        {{ svg('x', 13) }}
     </button>
 </div>

templates/components/button.twig

@@ -1,7 +1,3 @@
-{% if icon %}
-    {% set icon_css = ' inline-flex items-center gap-1 [&>svg]:align-middle' %}
-{% endif %}
-
 {% if btn_green %}
     {% set btn_color = 'bg-green-500 hover:bg-green-600 focus:ring-green-300' %}
 {% elseif btn_red %}
@@ -11,17 +7,18 @@
 {% endif %}
 
 {% if link %}
-    <a href="{{ link }}" class="rounded py-1.5 px-3 text-sm font-semibold text-white shadow focus:ring-4 {{ btn_color }}{{ icon_css }}{{ class|space }}">
+    <a href="{{ link }}"
+       class="inline-flex items-center border border-transparent rounded py-1.5 px-3 text-base font-semibold text-white align-middle shadow focus:ring-4 {{ btn_color }}{{ class|space }}">
         {% if icon %}
-            {{ svg(icon) }}
+            {{ svg(icon, 16, (text ? 'mr-1' : '')) }}
         {% endif %}
         {{ text }}
     </a>
 {% else %}
     <button type="{{ submit ? 'submit' : 'button' }}" id="{{ id }}" name="{{ id }}"
-            class="rounded py-1.5 px-3 text-sm font-semibold text-white shadow focus:ring-4 {{ btn_color }}{{ icon_css }}{{ class|space }}">
+            class="inline-flex items-center border border-transparent rounded py-1.5 px-3 text-base font-semibold text-white align-middle shadow focus:ring-4 {{ btn_color }}{{ class|space }}">
         {% if icon %}
-            {{ svg(icon) }}
+            {{ svg(icon, 16, (text ? 'mr-1' : '')) }}
         {% endif %}
         {{ text }}
     </button>

templates/components/input.twig

@@ -1,7 +1,7 @@
 <div class="mb-3"{{ extra_attr|raw }}>
     <label for="{{ id }}" class="mb-2 block text-sm font-semibold">{{ label }}</label>
     <input id="{{ id }}" name="{{ id }}" type="{{ type ? type : 'text' }}" value="{{ value }}"
-           class="w-full rounded border border-gray-300 bg-white py-1.5 px-3 text-sm leading-normal text-gray-600 placeholder-gray-400
+           class="w-full rounded border border-gray-300 bg-white py-1.5 px-3 text-base text-gray-600 placeholder-gray-400
            focus:outline-none focus:ring focus:ring-{{ color }}-100 focus:border-{{ color }}-300"{{ required ? ' required' : '' }}{{ attr|raw }}>
     {% if help %}
         <small class="text-xs text-gray-500">{{ help }}</small>

templates/components/select.twig

@@ -1,5 +1,5 @@
 <select id="{{ id }}" name="{{ id }}"
-        class="select w-full appearance-none rounded border border-gray-300 bg-white py-1.5 px-3 text-sm leading-normal text-gray-600 placeholder-gray-400
+        class="select w-full appearance-none rounded border border-gray-300 bg-white py-1.5 px-3 text-base text-gray-600 placeholder-gray-400
         focus:outline-none focus:ring focus:ring-{{ color }}-100 focus:border-{{ color }}-300{{ class|space }}" aria-label="">
     {% for value, name in options %}
         <option value="{{ value }}"{{ value == selected ? ' selected' : '' }}>{{ name }}</option>

templates/dashboards/memcached/form.twig

@@ -32,7 +32,7 @@
     <div class="mb-3">
         <label for="value" class="mb-2 block text-sm font-semibold">Value</label>
         <textarea id="value" name="value"
-                  class="w-full rounded border border-gray-300 bg-white py-1.5 px-3 text-sm leading-normal text-gray-600 placeholder-gray-400
+                  class="w-full rounded border border-gray-300 bg-white py-1.5 px-3 text-base text-gray-600 placeholder-gray-400
                   focus:outline-none focus:ring focus:ring-{{ color }}-100 focus:border-{{ color }}-300" rows="10" required>{{ value }}</textarea>
     </div>
 

templates/dashboards/memcached/memcached.twig

@@ -1,4 +1,4 @@
-<div class="mb-5 flex gap-1 md:justify-end">
+<div class="mb-5 lg:flex lg:justify-end">
     {{ include('partials/keys_buttons.twig') }}
 </div>
 

templates/dashboards/opcache.twig

@@ -1,14 +1,17 @@
-<div class="mb-5 flex gap-1 md:justify-end">
-    {{ include('components/button.twig', {
-        text: (is_ignored ? 'Show' : 'Ignore') ~ ' scripts from this tool',
-        link: ignore_url,
-    }) }}
+<div class="mb-5 lg:flex lg:justify-end">
+    <div>
+        {{ include('components/button.twig', {
+            text: (is_ignored ? 'Show' : 'Ignore') ~ ' scripts from this tool',
+            link: ignore_url,
+            class: 'mr-1',
+        }) }}
 
-    {{ include('components/button.twig', {
-        text: 'Reset cache',
-        icon: 'reset',
-        id: 'delete_all',
-    }) }}
+        {{ include('components/button.twig', {
+            text: 'Reset cache',
+            icon: 'reset',
+            id: 'delete_all',
+        }) }}
+    </div>
 </div>
 
 <div class="mb-5 rounded bg-white shadow-sm shadow-gray-300">