Small fixes to light mode

src/app/ui.ts

@@ -140,13 +140,11 @@ const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
 
 export const theme = synced("ui/theme", prefersDark ? "dark" : "light")
 
-export const getThemeVariables = $theme => {
-  const colors = switcher($theme, {
-    light: THEME_LIGHT,
-    dark: THEME_DARK,
-  })
+export const getThemeColors = $theme => switcher($theme, {light: THEME_LIGHT, dark: THEME_DARK})
 
-  return Object.entries(colors)
+export const getThemeColor = ($theme, k) => prop(k, getThemeColors($theme))
+
+export const getThemeVariables = $theme =>
+  Object.entries(getThemeColors($theme))
     .map(([k, v]) => `--${k}: ${v};`)
     .join("\n")
-}

src/partials/Anchor.svelte

@@ -15,10 +15,11 @@
     {"opacity-50": loading},
     switcher(type, {
       anchor: "underline",
-      button: "py-2 px-4 rounded bg-gray-3 text-accent whitespace-nowrap",
+      button: "py-2 px-4 rounded bg-input text-accent whitespace-nowrap",
       "button-circle":
-        "w-10 h-10 flex justify-center items-center rounded-full bg-gray-3 text-accent whitespace-nowrap",
-      "button-accent": "py-2 px-4 rounded bg-accent text-white whitespace-nowrap",
+        "w-10 h-10 flex justify-center items-center rounded-full bg-input text-accent whitespace-nowrap border border-solid border-gray-5",
+      "button-accent":
+        "py-2 px-4 rounded bg-accent text-white whitespace-nowrap border border-solid border-gray-5",
     })
   )
 </script>

src/routes/PersonDetail.svelte

@@ -5,7 +5,7 @@
   import {fly, fade} from "svelte/transition"
   import {navigate} from "svelte-routing"
   import {log} from "src/util/logger"
-  import {renderContent} from "src/util/html"
+  import {renderContent, parseHex} from "src/util/html"
   import {displayPerson, Tags, toHex} from "src/util/nostr"
   import Tabs from "src/partials/Tabs.svelte"
   import Content from "src/partials/Content.svelte"
@@ -19,7 +19,7 @@
   import {sampleRelays, getPubkeyWriteRelays} from "src/agent/relays"
   import network from "src/agent/network"
   import {getPersonWithFallback, people} from "src/agent/tables"
-  import {routes, modal} from "src/app/ui"
+  import {routes, modal, theme, getThemeColor} from "src/app/ui"
   import PersonCircle from "src/partials/PersonCircle.svelte"
 
   export let npub
@@ -39,6 +39,14 @@
   let loading = true
   let showActions = false
   let actions = []
+  let rgb, rgba
+
+  $: {
+    const color = parseHex(getThemeColor($theme, "gray-8"))
+
+    rgba = `rgba(${color.join(", ")}, 0.4)`
+    rgb = `rgba(${color.join(", ")})`
+  }
 
   $: following = $petnamePubkeys.includes(pubkey)
   $: muted = find(m => m[1] === pubkey, $mutes)
@@ -168,11 +176,11 @@
   style="z-index: -1;
          background-size: cover;
          background-image:
-          linear-gradient(to bottom, rgba(0, 0, 0, 0.3), #0f0f0e),
+          linear-gradient(to bottom, {rgba}, {rgb}),
           url('{person.kind0?.banner}')" />
 
 <Content>
-  <div class="flex gap-4">
+  <div class="flex gap-4 text-gray-1">
     <PersonCircle {person} size={16} class="sm:h-32 sm:w-32" />
     <div class="flex flex-grow flex-col gap-4">
       <div class="flex items-start justify-between gap-4">

src/util/html.ts

@@ -1,5 +1,5 @@
-import {uniq} from 'ramda'
-import {ellipsize, bytes} from 'hurdak/lib/hurdak'
+import {uniq} from "ramda"
+import {ellipsize, bytes} from "hurdak/lib/hurdak"
 
 export const copyToClipboard = text => {
   const {activeElement} = document
@@ -34,7 +34,7 @@ export const stripExifData = async (file, opts = {}) => {
     new Compressor(file, {
       maxWidth: 1024,
       maxHeight: 1024,
-      convertSize: bytes(1, 'mb'),
+      convertSize: bytes(1, "mb"),
       ...opts,
       success: resolve,
       error: e => {
@@ -50,7 +50,7 @@ export const stripExifData = async (file, opts = {}) => {
 }
 
 export const listenForFile = (input, onChange) => {
-  input.addEventListener('change', async e => {
+  input.addEventListener("change", async e => {
     const target = e.target as HTMLInputElement
     const [file] = target.files
 
@@ -71,8 +71,7 @@ export const blobToString = async blob =>
     reader.readAsDataURL(blob)
   })
 
-export const blobToFile = blob =>
-    new File([blob], blob.name, {type: blob.type})
+export const blobToFile = blob => new File([blob], blob.name, {type: blob.type})
 
 export const escapeHtml = html => {
   const div = document.createElement("div")
@@ -112,9 +111,11 @@ export const extractUrls = content => {
   const regex = /(https?:\/\/)?[-a-z0-9@:%._\+~#=\.]+\.[a-z]{1,6}[-a-z0-9@:%_\+.~#?!&//=;]*/gi
   const urls = content.match(regex)
 
-  return (urls || [])
-    // Skip decimals like 3.5 and ellipses which have more than one dot in a row
-    .filter(url => !url.match(/^[\d\.]+$/) && !url.match(/\.{2}/))
+  return (
+    (urls || [])
+      // Skip decimals like 3.5 and ellipses which have more than one dot in a row
+      .filter(url => !url.match(/^[\d\.]+$/) && !url.match(/\.{2}/))
+  )
 }
 
 export const renderContent = content => {
@@ -126,16 +127,16 @@ export const renderContent = content => {
   // Extract urls
   for (let url of uniq(extractUrls(content))) {
     // It's common for a period to end a url, trim it off
-    if (url.endsWith('.')) {
+    if (url.endsWith(".")) {
       url = url.slice(0, -1)
     }
 
-    const href = url.includes('://') ? url : 'https://' + url
-    const display = url.replace(/https?:\/\/(www\.)?/, '')
-    const escaped = url.replace(/([.*+?^${}()|[\]\\])/g, '\\$1')
-    const regex = new RegExp(`([^"]*)(${escaped})([^"]*)`, 'g')
+    const href = url.includes("://") ? url : "https://" + url
+    const display = url.replace(/https?:\/\/(www\.)?/, "")
+    const escaped = url.replace(/([.*+?^${}()|[\]\\])/g, "\\$1")
+    const regex = new RegExp(`([^"]*)(${escaped})([^"]*)`, "g")
 
-    const $a = document.createElement('a')
+    const $a = document.createElement("a")
 
     $a.href = href
     $a.target = "_blank"
@@ -149,3 +150,9 @@ export const renderContent = content => {
 }
 
 export const isMobile = localStorage.mobile || window.navigator.maxTouchPoints > 1
+
+export const parseHex = hex => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+
+  return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]
+}

src/views/notifications/Notification.svelte

@@ -69,7 +69,7 @@
       {/if}
       <p class="text-sm text-gray-1">{formatTimestamp(timestamp)}</p>
     </div>
-    <div class="ml-6 break-all text-gray-1">
+    <div class="break-word ml-6 overflow-hidden text-gray-1">
       {ellipsize(note.content, 120)}
     </div>
   </Card>