From 499e7ea67401e5b333e54e74e72d623e1bc602cd Mon Sep 17 00:00:00 2001
From: Hunter Miller <hunter@thisdot.co>
Date: Sat, 24 Apr 2021 14:27:51 -0500
Subject: [PATCH] fixing scrollbar colors and ship list height + order

---
 src/background/services/pier-service.ts   |  3 ++-
 src/renderer/shared/MessageLogger.tsx     |  6 +++---
 src/renderer/ship/components/ShipList.tsx |  2 +-
 src/renderer/styles/base.css              | 24 +++++++++++++++++++++++
 src/renderer/styles/index.css             |  5 +----
 tailwind.config.js                        |  1 +
 6 files changed, 32 insertions(+), 9 deletions(-)
 create mode 100644 src/renderer/styles/base.css

diff --git a/src/background/services/pier-service.ts b/src/background/services/pier-service.ts
index 4fbd76d..1237e94 100644
--- a/src/background/services/pier-service.ts
+++ b/src/background/services/pier-service.ts
@@ -214,11 +214,12 @@ export class PierService {
     async resumePier(pier: Pier): Promise<Pier | null> {
         const accuratePier = await this.checkPier(pier)
         if (accuratePier.running)
-            return accuratePier
+            return await this.updatePier({ ...accuratePier, lastUsed: (new Date()).toISOString() });
 
         const ports = await this.spawnUrbit(this.getSpawnArgs(accuratePier), accuratePier.slug)
         const updatedPier: Pier = {
             ...accuratePier,
+            lastUsed: (new Date()).toISOString(),
             webPort: ports.web,
             loopbackPort: ports.loopback,
             running: true
diff --git a/src/renderer/shared/MessageLogger.tsx b/src/renderer/shared/MessageLogger.tsx
index 507de46..4f930c9 100644
--- a/src/renderer/shared/MessageLogger.tsx
+++ b/src/renderer/shared/MessageLogger.tsx
@@ -16,9 +16,9 @@ export const MessageLogger: React.FC<{ slug: string }> = ({ slug }) => {
     }, [])
     
     return (
-        <div className="relative">
-            <div className="absolute top-0 left-0 right-0 bottom-0 z-20 bg-gradient-to-b from-black to-transparent" />
-            <pre className="flex flex-col-reverse h-56 space-y-0 pt-10 pl-10 font-mono text-xs text-gray-500 overflow-y-auto">
+        <div className="relative min-w-xl">
+            <div className="absolute top-0 left-0 right-0 bottom-0 z-20 bg-gradient-to-b from-black to-transparent pointer-events-none" />
+            <pre className="flex flex-col-reverse h-56 space-y-0 pt-10 pl-10 font-mono text-xs text-gray-500 overflow-auto">
                 {messages.map((msg, index) => (
                     <div key={index + msg.text}>{msg.text}</div>
                 ))}
diff --git a/src/renderer/ship/components/ShipList.tsx b/src/renderer/ship/components/ShipList.tsx
index de109e0..9e3f22e 100644
--- a/src/renderer/ship/components/ShipList.tsx
+++ b/src/renderer/ship/components/ShipList.tsx
@@ -14,7 +14,7 @@ export const ShipList = ({ piers }: { piers: Pier[]}) => {
     }
 
     return (
-        <ul className="space-y-4">
+        <ul className="space-y-4 overflow-y-auto max-h-96 pr-1">
             {piers.sort((a,b) => b.lastUsed.localeCompare(a.lastUsed)).map(pier => (
                 <li key={pier.slug} className="flex items-center p-2 bg-gray-900 rounded">
                     <div>
diff --git a/src/renderer/styles/base.css b/src/renderer/styles/base.css
new file mode 100644
index 0000000..3671552
--- /dev/null
+++ b/src/renderer/styles/base.css
@@ -0,0 +1,24 @@
+a {
+  @apply inline-block focus:outline-none focus:ring focus:ring-gray-600 focus:ring-opacity-50;
+}
+
+* {
+    scrollbar-width: thin;
+}
+
+*::-webkit-scrollbar {
+    @apply w-1.5 h-1.5 bg-transparent;
+}
+ 
+*::-webkit-scrollbar-track {
+    @apply bg-transparent;
+}
+ 
+*::-webkit-scrollbar-thumb {
+    @apply bg-gray-700 rounded-full;
+}
+
+*::-webkit-scrollbar-corner,
+*::-webkit-resizer {
+    @apply hidden;
+}
\ No newline at end of file
diff --git a/src/renderer/styles/index.css b/src/renderer/styles/index.css
index 417095e..261f3e3 100644
--- a/src/renderer/styles/index.css
+++ b/src/renderer/styles/index.css
@@ -1,14 +1,11 @@
 @import "tailwindcss/base";
+@import "./base";
 
 @import "tailwindcss/components";
 @import "./components";
 
 @import "tailwindcss/utilities";
 
-a {
-  @apply inline-block focus:outline-none focus:ring focus:ring-gray-600 focus:ring-opacity-50;
-}
-
 .border-t-gray-300 {
   border-top-color: rgba(209,213,219,var(--tw-border-opacity));
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 20a9ac8..52aea8e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,6 +15,7 @@ module.exports = {
       },
       minWidth: {
         ...theme.spacing,
+        ...theme.maxWidth,
         '22': '5.5rem'
       },
       height: {