fix: show layout

getAlby · Oct 31, 2023 · 4136bab · 4136bab
1 parent b3420b7
commit 4136bab
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 18 deletions.
diff --git a/public/css/application.css b/public/css/application.css
@@ -853,6 +853,10 @@ select {
   margin-left: 1rem;
 }
 
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
 .block {
   display: block;
 }
@@ -1061,6 +1065,11 @@ select {
   border-color: rgb(229 231 235 / var(--tw-divide-opacity));
 }
 
+.divide-gray-600 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-divide-opacity));
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1321,6 +1330,10 @@ select {
   padding-top: 1rem;
 }
 
+.pr-3 {
+  padding-right: 0.75rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -1455,6 +1468,16 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
+.text-purple-500 {
+  --tw-text-opacity: 1;
+  color: rgb(168 85 247 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -1568,6 +1591,11 @@ select {
     border-color: rgb(255 255 255 / 0.1);
   }
 
+  .dark\:divide-white > :not([hidden]) ~ :not([hidden]) {
+    --tw-divide-opacity: 1;
+    border-color: rgb(255 255 255 / var(--tw-divide-opacity));
+  }
+
   .dark\:border-gray-500 {
     --tw-border-opacity: 1;
     border-color: rgb(107 114 128 / var(--tw-border-opacity));
@@ -1854,6 +1882,10 @@ select {
     padding: 1.5rem;
   }
 
+  .lg\:p-8 {
+    padding: 2rem;
+  }
+
   .lg\:px-12 {
     padding-left: 3rem;
     padding-right: 3rem;

diff --git a/views/apps/index.html b/views/apps/index.html
@@ -19,18 +19,18 @@ <h2 class="font-bold text-2xl font-headline dark:text-white">Connected apps</h2>
 
   <div class="rounded-lg border border-gray-200 dark:border-white/10 overflow-hidden">
     <table
-      class="table-fixed w-full text-sm text-left divide-y dark:divide-white/10"
+      class="table-fixed w-full text-sm text-left"
     >
       <thead
         class="text-xs text-gray-900 uppercase bg-gray-50 dark:bg-surface-08dp dark:text-white rounded-t-lg"
       >
         <tr>
           <th scope="col" class="px-6 py-3 w-full">Name</th>
-          <th scope="col" class="px-6 py-3 w-40 hidden md:table-cell">Last Accessed</th>
+          <th scope="col" class="px-6 py-3 w-40 hidden md:table-cell">Last used</th>
           <th scope="col" class="px-6 py-3 w-24"></th>
         </tr>
       </thead>
-      <tbody>
+      <tbody class="divide-y dark:divide-white/10">
         {{if not .Apps}}
           <tr class="bg-white dark:bg-surface-02dp">
             <td colspan="3" class="px-6 py-16 text-center text-gray-500 dark:text-neutral-400">

diff --git a/views/apps/show.html b/views/apps/show.html
@@ -1,28 +1,35 @@
 {{define "body"}}
 
-<div class="bg-white rounded-md shadow p-4 lg:p-12 mb-10 dark:bg-surface-02dp">
-
+
+<h2 class="font-bold text-2xl font-headline dark:text-white">{{.App.Name}}</h2>
+<a class="ml-1 mt-1 mb-4 block dark:text-white text-xs" href="/apps">
+  &slarr;
+  Back to overview
+</a>
+
+<div class="bg-white rounded-md shadow p-4 lg:p-8 dark:bg-surface-02dp">
   <div class="divide-y divide-gray-200 dark:divide-white/10 dark:bg-surface-02dp">
     <div class="pb-4">
-      <h2 class="font-bold text-2xl font-headline mb-2 dark:text-white">{{.App.Name}}</h2>
-      <p class="text-gray-400">
-        <span class="font-medium dark:text-white">Public Key:</span> 
-        {{.App.NostrPubkey}}
-      </p>
-      <p class="text-gray-400">
-        <span class="font-medium dark:text-white">Last accessed:</span> 
-        {{if gt .EventsCount 0 }}
+      <table class="">
+        <tr>
+          <td class="font-medium dark:text-white">Public Key:</td>
+          <td class="text-gray-600 dark:text-neutral-400">{{.App.NostrPubkey}}</td>
+        </tr>
+        <tr>
+          <td class="pr-3 font-medium dark:text-white">Last used:</td>
+          <td class="text-gray-600 dark:text-neutral-400">        {{if gt .EventsCount 0 }}
           {{.LastEvent.CreatedAt.Format "02 Jan 06 15:04 MST" }}
         {{else}}
           never
-        {{end}}
-      </p>
-      <p class="text-sm">{{.App.Description}}</p>
+        {{end}}</td>
+        </tr>
+      </table>
+      <p class="text-sm mt-2">{{.App.Description}}</p>
     </div>
 
     <div class="py-4">
       <h3 class="text-xl font-headline dark:text-white">Permissions</h3>
-      <ul class="mt-2 text-gray-500 dark:text-gray-400">
+      <ul class="mt-2 text-gray-600 dark:text-neutral-400">
           {{range .RequestMethods}}
             <li class="mb-2 relative pl-6">
               <span class="absolute left-0 text-green-500">✓</span>
@@ -59,7 +66,7 @@ <h3 class="text-xl font-headline dark:text-white">Permissions</h3>
     </div>
 
     <div class="pt-4">
-      <h3 class="text-xl font-headline mb-2 dark:text-white">Danger zone</h3>
+      <h3 class="text-xl font-headline mb-2 dark:text-white">⚠️ Danger zone</h3>
       <p class="text-gray-500 dark:text-gray-400 mb-4">
         This will revoke the permission and will no longer allow calls from this pubkey.
       </p>
@@ -72,4 +79,5 @@ <h3 class="text-xl font-headline mb-2 dark:text-white">Danger zone</h3>
       class="inline-flex bg-white border border-red-400 cursor-pointer dark:bg-surface-02dp dark:hover:bg-surface-16dp duration-150 focus-visible:ring-2 focus-visible:ring-offset-2 focus:outline-none font-medium hover:bg-gray-50 items-center justify-center px-5 py-3 rounded-md shadow text-gray-700 dark:text-neutral-300 transition w-full sm:w-[250px] sm:mr-8 mt-8 sm:mt-0 order-last sm:order-first">Disconnect</button>
   </form>
 </div>
+
 {{end}}