feat: color overhaul

package.json

@@ -1,6 +1,6 @@
 {
   "name": "photon-lemmy",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "private": true,
   "scripts": {
     "dev": "vite dev",
@@ -42,7 +42,7 @@
     "@dicebear/initials": "^6.0.4",
     "lemmy-js-client": "^0.18.0-rc.2",
     "markdown-it": "^13.0.1",
-    "mono-svelte": "^0.2.20"
+    "mono-svelte": "^0.3.2"
   },
   "type": "module"
 }

src/lib/auth.ts

@@ -92,11 +92,6 @@ profile.subscribe(async (p) => {
     username: user?.user.local_user_view.person.name,
     avatar: user?.user.local_user_view.person.avatar,
   }))
-
-  profile.update((pro) => {
-    console.log(pro)
-    return pro
-  })
 })
 
 export async function setUser(jwt: string, inst: string, username: string) {

src/lib/components/lemmy/Sort.svelte

@@ -23,7 +23,7 @@
         }}
       >
         <span slot="label" class="flex items-center gap-1">
-          <Icon src={Clock} size="16" mini />
+          <Icon src={Clock} size="15" mini />
           Time
         </span>
         <option value="TopAll">All</option>
@@ -47,7 +47,7 @@
     }}
   >
     <span slot="label" class="flex items-center gap-1">
-      <Icon src={ChartBar} size="14" mini />
+      <Icon src={ChartBar} size="13" mini />
       Sort
     </span>
     <option value="Active">Active</option>

src/lib/components/lemmy/community/CommunityItem.svelte

@@ -4,20 +4,23 @@
   import Subscribe from '../../../../routes/communities/Subscribe.svelte'
   import {
     ChatBubbleOvalLeftEllipsis,
+    Check,
     Icon,
     PencilSquare,
+    Plus,
     UserGroup,
   } from 'svelte-hero-icons'
   import FormattedNumber from '$lib/components/util/FormattedNumber.svelte'
   import { Button } from 'mono-svelte'
+  import { isSubscribed } from '$lib/util.js'
 
   export let community: CommunityView
 </script>
 
 <div class="py-4 flex flex-col gap-1 text-sm max-w-full">
   <div class="flex flex-row items-center">
     <span
-      class="break-words max-w-full w-max text-base font-bold text-sky-400 hover:underline"
+      class="break-words max-w-full w-max text-base font-bold hover:underline"
     >
       <CommunityLink
         showInstance={false}
@@ -40,9 +43,22 @@
                   : 'NotSubscribed'
             }
           }}
-          color={community.subscribed == 'Subscribed' ? 'primary' : 'ghost'}
+          color={isSubscribed(community.subscribed) ? 'elevatedLow' : 'primary'}
+          class={isSubscribed(community.subscribed)
+            ? 'text-slate-600 dark:text-zinc-400'
+            : ''}
         >
-          {community.subscribed == 'Subscribed' ? 'Subscribed' : 'Subscribe'}
+          <Icon
+            src={isSubscribed(community.subscribed) ? Check : Plus}
+            size="16"
+            mini
+            slot="prefix"
+          />
+          {#if isSubscribed(community.subscribed)}
+            Subscribed
+          {:else}
+            Subscribe
+          {/if}
         </Button>
       </Subscribe>
     </div>

src/lib/components/lemmy/post/Post.svelte

@@ -49,10 +49,10 @@
     {#if view == 'list' || view == 'compact'}
       <div
         class="absolute -inset-0.5 group-hover:-inset-2 group-hover:-inset-y-3 group-hover:md:-inset-4
-      transition-all -z-[5] rounded-xl group-hover:bg-slate-100 group-hover:dark:bg-zinc-900"
+      transition-all rounded-xl group-hover:bg-slate-50 group-hover:dark:bg-zinc-900"
       />
     {/if}
-    <div class="flex flex-row gap-2 max-w-full w-full">
+    <div class="flex flex-row gap-2 max-w-full w-full z-10">
       <div class="flex flex-col w-full gap-2">
         <div class="flex flex-col w-full gap-2">
           <PostMeta

src/lib/components/lemmy/post/PostActions.svelte

@@ -75,7 +75,7 @@
   </Modal>
 {/if}
 
-<div class="flex flex-row gap-2 items-center h-8">
+<div class="flex flex-row gap-2 items-center h-8 [&>*]:z-10">
   <PostVote
     post={post.post}
     bind:vote={post.my_vote}

src/lib/components/markdown/Markdown.svelte

@@ -22,7 +22,7 @@
 
 <div
   bind:this={div}
-  class="break-words flex flex-col markdown gap-2 leading-[1.5]"
+  class="break-words flex flex-col markdown gap-2 leading-[1.5] font-sans"
 >
   {#if inline}
     {@html mdInline.render(source)}

src/lib/components/ui/Navbar.svelte

@@ -41,7 +41,7 @@
 </script>
 
 <nav
-  class="flex flex-row gap-2 items-center sticky top-0 bg-slate-100/80
+  class="flex flex-row gap-2 items-center sticky top-0 bg-slate-50/80
   dark:bg-black/80 backdrop-blur-3xl w-full mx-auto px-4 py-2 z-50 box-border h-16"
 >
   <div class="flex flex-row gap-2 items-center mr-auto">
@@ -92,9 +92,7 @@
       <Button
         href="/admin"
         aria-label="Admin"
-        class="max-md:w-9 max-md:h-8 max-md:!p-0
-        dark:text-zinc-300 text-slate-700 hover:text-inherit hover:dark:text-inherit
-      hover:bg-slate-200 relative hover:border-slate-300"
+        class="max-md:w-9 max-md:h-8 max-md:!p-0 relative"
       >
         <Icon src={CommandLine} mini size="16" slot="prefix" />
         <span class="hidden md:inline">Admin</span>
@@ -104,8 +102,7 @@
       <Button
         href="/moderation"
         aria-label="Moderation"
-        class="max-md:w-9 max-md:h-8 max-md:!p-0 dark:text-zinc-300 text-slate-700
-        hover:text-inherit hover:bg-slate-200 hover:dark:text-inherit relative hover:border-slate-300"
+        class="max-md:w-9 max-md:h-8 max-md:!p-0 dark:text-zinc-300 text-slate-700 relative"
       >
         {#if $profile?.user?.reports ?? 0 > 0}
           <div
@@ -119,18 +116,15 @@
     <Button
       href="/search"
       aria-label="Search"
-      class="max-md:w-9 max-md:h-8 max-md:!p-0
-      dark:text-zinc-300 text-slate-700 hover:text-inherit hover:dark:text-inherit hover:bg-slate-200 hover:border-slate-300"
+      class="max-md:w-9 max-md:h-8 max-md:!p-0"
     >
       <Icon mini src={MagnifyingGlass} width={16} slot="prefix" />
       <span class="hidden md:inline">Search</span>
     </Button>
     <Button
       href="/communities"
       aria-label="Communities"
-      class="max-md:w-9 max-md:h-8 max-md:!p-0
-      dark:text-zinc-300 text-slate-700 hover:text-inherit
-      hover:dark:text-inherit hover:bg-slate-200 hover:border-slate-300"
+      class="max-md:w-9 max-md:h-8 max-md:!p-0"
     >
       <Icon mini src={GlobeAlt} size="16" slot="prefix" />
       <span class="hidden md:inline">Explore</span>

src/lib/components/ui/sidebar/CommunityList.svelte

@@ -16,7 +16,7 @@
     animate:flip={{ duration: 500, easing: expoOut }}
   >
     <Button
-      class="hover:bg-slate-200 w-full h-max {expanded ? '' : '!p-1.5'}"
+      class="font-normal w-full h-max {expanded ? '' : '!p-1.5'}"
       color="tertiary"
       alignment="left"
       href="/c/{follow.name}@{new URL(follow.actor_id).hostname}"

src/lib/components/ui/sidebar/ProfileButton.svelte

@@ -32,7 +32,7 @@
 
     switching = false
   }}
-  class="w-full hover:bg-slate-200 {expanded ? '' : '!p-1.5'}"
+  class="w-full {expanded ? '' : '!p-1.5'}"
 >
   <ProfileAvatar
     profile={prof}

src/lib/components/ui/sidebar/Sidebar.svelte

@@ -20,15 +20,15 @@
 
 <nav
   class="hidden sm:flex flex-col pl-4 pr-4 py-4 overflow-auto sticky top-16 bottom-0
-  gap-1 max-h-[calc(100svh-4rem)] w-full bg-slate-100 dark:bg-black
+  gap-1 max-h-[calc(100svh-4rem)] w-full bg-slate-50 dark:bg-black
   {$userSettings.expandSidebar
     ? 'max-w-[25%] resize-x min-w-[12rem]'
     : 'w-max max-w-max min-w-max'}"
 >
   <Button
     on:click={() =>
       ($userSettings.expandSidebar = !$userSettings.expandSidebar)}
-    class="w-max !p-2 hover:bg-slate-200"
+    class="w-max !p-2"
     aria-label="Collapse sidebar"
   >
     <Icon

src/lib/components/ui/sidebar/SidebarButton.svelte

@@ -9,7 +9,9 @@
   color="tertiary"
   alignment="left"
   on:click
-  class="hover:bg-slate-200 {expanded ? '' : '!p-1.5'} {$$props.class}"
+  class="hover:bg-slate-100 font-normal {expanded
+    ? ''
+    : '!p-1.5'} {$$props.class}"
 >
   <slot />
 </Button>

src/lib/settings.ts

@@ -56,8 +56,9 @@ interface Settings {
   randomPlaceholders: boolean
   modlogCardView: boolean | undefined
   debugInfo: boolean
-  systemUI: boolean
   expandImages: boolean
+
+  font: 'inter' | 'system' | 'browser'
 }
 
 export const defaultSettings: Settings = {
@@ -93,9 +94,9 @@ export const defaultSettings: Settings = {
   randomPlaceholders: toBool(env.PUBLIC_RANDOM_PLACEHOLDERS) ?? true,
   modlogCardView: toBool(env.PUBLIC_MODLOG_CARD_VIEW) ?? undefined,
   debugInfo: false,
-  systemUI: true,
   expandImages: true,
   view: 'list',
+  font: 'system',
 }
 
 export const userSettings = writable(defaultSettings)

src/lib/util.ts

@@ -2,6 +2,7 @@ import { goto } from '$app/navigation'
 import { toast } from 'mono-svelte'
 import { userSettings } from '$lib/settings.js'
 import { get } from 'svelte/store'
+import type { SubscribedType } from 'lemmy-js-client'
 
 export const findClosestNumber = (numbers: number[], target: number): number =>
   numbers.reduce((prev, curr) =>
@@ -98,3 +99,9 @@ export const trycatch = <T>(func: () => T): Maybe<T> => {
 export const removeItem = <T>(array: T[], predicate: (item: T) => boolean) => {
   array.splice(array.findIndex(predicate), 1)
 }
+
+export const DOMAIN_REGEX = /^((?!-)[A-Za-z0-9-]{1,63}\.)+[A-Za-z]{2,63}/gi
+export const DOMAIN_REGEX_FORMS = '^((?!-)[A-Za-z0-9-]{1,63}.)+[A-Za-z]{2,63}'
+
+export const isSubscribed = (subscribed: SubscribedType) =>
+  subscribed == 'Pending' || subscribed == 'Subscribed'

src/routes/+layout.svelte

@@ -42,9 +42,14 @@
 </svelte:head>
 
 <div
-  class="flex flex-col min-h-screen {$userSettings.systemUI
+  class="flex flex-col min-h-screen
+  font-inter
+  {$userSettings.font == 'inter'
+    ? 'font-inter'
+    : $userSettings.font == 'system'
     ? 'font-system'
-    : 'font-sans'}"
+    : 'font-sans'}
+  "
 >
   <Navbar />
   <ToastContainer />
@@ -53,7 +58,7 @@
     <Sidebar />
     <main
       class="p-3 sm:p-6 min-w-0 w-full flex-[3] sm:rounded-tl-lg
-      border-slate-200 dark:border-zinc-900 sm:border-l border-t"
+      border-slate-200 dark:border-zinc-900 sm:border-l border-t bg-slate-25 dark:bg-zinc-950"
     >
       <slot />
     </main>