From fc48f8b90c4c442d2ecd2ed9c798026791ebe6b9 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Thu, 5 Jan 2023 00:17:30 +0100
Subject: [PATCH] feat: style experiments

---
 components/nav/NavSideItem.vue        | 6 +++---
 components/nav/NavTitle.vue           | 4 +---
 components/publish/PublishButton.vue  | 6 +++---
 components/publish/PublishWidget.vue  | 2 +-
 components/search/SearchWidget.vue    | 6 +++---
 components/status/StatusCard.vue      | 5 +++--
 error.vue                             | 2 +-
 layouts/default.vue                   | 8 ++++----
 pages/[[server]]/@[account]/index.vue | 2 +-
 pages/[[server]]/explore.vue          | 2 +-
 pages/[[server]]/public/index.vue     | 2 +-
 pages/[[server]]/public/local.vue     | 2 +-
 pages/blocks.vue                      | 2 +-
 pages/bookmarks.vue                   | 2 +-
 pages/conversations.vue               | 2 +-
 pages/domain_blocks.vue               | 2 +-
 pages/favourites.vue                  | 2 +-
 pages/home.vue                        | 2 +-
 pages/mutes.vue                       | 2 +-
 pages/notifications.vue               | 2 +-
 pages/pinned.vue                      | 2 +-
 pages/search.vue                      | 2 +-
 pages/settings.vue                    | 2 +-
 unocss.config.ts                      | 3 +++
 24 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/components/nav/NavSideItem.vue b/components/nav/NavSideItem.vue
index 485234d8..82cf59c3 100644
--- a/components/nav/NavSideItem.vue
+++ b/components/nav/NavSideItem.vue
@@ -58,11 +58,11 @@ const noUserVisual = computed(() => isMastoInitialised.value && props.userOnly &
     <CommonTooltip :disabled="!isMediumScreen" :content="text" placement="right">
       <div
         flex items-center gap4
-        w-fit rounded-full
+        w-fit rounded-3
         px2 py2 mx3 sm:mxa
-        xl="mx0 px5"
+        xl="ml0 mr5 px5 w-auto"
         transition-100
-        group-hover:bg-active group-focus-visible:ring="2 current"
+        group-hover="bg-active" group-focus-visible:ring="2 current"
       >
         <slot name="icon">
           <div :class="icon" text-xl />
diff --git a/components/nav/NavTitle.vue b/components/nav/NavTitle.vue
index f4f9524c..bf2172fa 100644
--- a/components/nav/NavTitle.vue
+++ b/components/nav/NavTitle.vue
@@ -8,11 +8,9 @@ const { env } = buildInfo
   <!-- Use external to force refresh page and jump to top of timeline -->
   <NuxtLink
     flex items-end gap-2
-    w-fit
     py2 px-2 xl:px-3
-    text-2xl hover:bg-active
+    text-2xl
     focus-visible:ring="2 current"
-    rounded-full
     to="/"
     external
   >
diff --git a/components/publish/PublishButton.vue b/components/publish/PublishButton.vue
index 44d3748d..ede9feff 100644
--- a/components/publish/PublishButton.vue
+++ b/components/publish/PublishButton.vue
@@ -7,11 +7,11 @@ const disabledVisual = computed(() => isMastoInitialised.value && !currentUser.v
   <button
     flex="~ gap2 center"
     w-9 h-9 py2
-    xl="w-auto h-auto py-4"
-    rounded-full
+    xl="w-auto h-auto"
+    rounded-3
     cursor-pointer disabled:pointer-events-none
     text-primary font-bold
-    border-1 border-primary
+    border-1 border-primary-light
     :class="disabledVisual ? 'op25' : 'hover:bg-primary hover:text-inverted'"
     :disabled="disabled"
     @click="openPublishDialog()"
diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index 19c47811..31a40c9d 100644
--- a/components/publish/PublishWidget.vue
+++ b/components/publish/PublishWidget.vue
@@ -343,7 +343,7 @@ defineExpose({
         </PublishVisibilityPicker>
 
         <button
-          btn-solid rounded-full text-sm w-full md:w-fit
+          btn-solid rounded-3 text-sm w-full md:w-fit
           :disabled="isEmpty || isUploading || (draft.attachments.length === 0 && !draft.params.status)"
           @click="publish"
         >
diff --git a/components/search/SearchWidget.vue b/components/search/SearchWidget.vue
index 7d46e2ef..0c69a0ca 100644
--- a/components/search/SearchWidget.vue
+++ b/components/search/SearchWidget.vue
@@ -53,14 +53,14 @@ const activate = () => {
 
 <template>
   <div ref="el" relative px4 py2 group>
-    <div bg-base border="~ base" h10 rounded-full flex="~ row" items-center relative focus-within:box-shadow-outline>
+    <div bg-base border="~ base" h10 rounded-3 flex="~ row" items-center relative focus-within:box-shadow-outline>
       <div i-ri:search-2-line mx4 absolute pointer-events-none text-secondary mt="1px" class="rtl-flip" />
       <input
         ref="input"
         v-model="query"
         h-full
         ps-10
-        rounded-full
+        rounded-3
         w-full
         bg-transparent
         outline="focus:none"
@@ -75,7 +75,7 @@ const activate = () => {
     </div>
     <!-- Results -->
     <div p4 left-0 top-10 absolute w-full z10 group-focus-within="pointer-events-auto visible" invisible pointer-events-none>
-      <div w-full bg-base border="~ base" rounded max-h-100 overflow-auto py2>
+      <div w-full bg-base border="~ base" rounded-3 max-h-100 overflow-auto py2>
         <span v-if="query.length === 0" block text-center text-sm text-secondary>
           {{ t('search.search_desc') }}
         </span>
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 694145f9..0187da6b 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -90,13 +90,14 @@ const isDM = $computed(() => status.visibility === 'direct')
     ref="el"
     relative flex flex-col gap-1 pl-3 pr-4 pt-1
     class="pb-1.5"
-    :class="{ 'hover:bg-active': hover, 'border-t border-base': newer && !directReply }"
+    :class="{ 'hover:bg-active': hover }"
     tabindex="0"
     focus:outline-none focus-visible:ring="2 primary"
     :lang="status.language ?? undefined"
     @click="onclick"
     @keydown.enter="onclick"
   >
+    <div v-if="newer && !directReply" w-auto h-1px bg-border />
     <div flex justify-between>
       <slot name="meta">
         <div v-if="rebloggedBy && !collapseRebloggedBy" relative text-secondary ws-nowrap flex="~" items-center pt1 pb0.5 px-1px bg-base>
@@ -125,7 +126,7 @@ const isDM = $computed(() => status.visibility === 'direct')
           </NuxtLink>
         </AccountHoverWrapper>
         <div v-if="connectReply" w-full h-full flex justify-center>
-          <div h-full class="w-2.5px" bg-border />
+          <div class="w-2.5px" bg-primary-light />
         </div>
       </div>
       <div flex="~ col 1" min-w-0>
diff --git a/error.vue b/error.vue
index a7e3d23c..79c582e9 100644
--- a/error.vue
+++ b/error.vue
@@ -35,7 +35,7 @@ const reload = async () => {
   <NuxtLayout>
     <MainContent>
       <template #title>
-        <span text-lg font-bold>Error</span>
+        <span timeline-title-style>Error</span>
       </template>
       <slot>
         <form p5 grid gap-y-4 @submit="reload">
diff --git a/layouts/default.vue b/layouts/default.vue
index 132a6904..457a8a41 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -14,7 +14,7 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
             <div flex="~ col" overflow-y-auto justify-between h-full max-w-full>
               <div flex flex-col>
                 <NavSide command />
-                <PublishButton m="y5 xa" xl:m="r5 l3" xl:rtl-m="l5 r3" />
+                <PublishButton ms5.5 mt4 xl:me8 xl:ms4 />
               </div>
               <div v-if="isMastoInitialised" flex flex-col>
                 <UserSignInEntry v-if="!currentUser" sm:hidden />
@@ -24,7 +24,7 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
                     <div v-else flex="~" items-center justify-between>
                       <NuxtLink
                         hidden xl:block
-                        rounded-full text-start w-full
+                        rounded-3 text-primary text-start w-full
                         hover:bg-active cursor-pointer transition-100
                         :to="getAccountRoute(currentUser.account)"
                       >
@@ -40,7 +40,7 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
           </slot>
         </div>
       </aside>
-      <div w-full min-h-screen :class="wideLayout ? 'xl:w-full sm:w-600px' : 'sm:w-600px md:shrink-0'" sm:border-l sm:border-r border-base>
+      <div w-full min-h-screen :class="wideLayout ? 'xl:w-full sm:w-600px' : 'sm:w-600px md:shrink-0'" border-base>
         <div min-h="[calc(100vh-3.5rem)]" sm:min-h-screen>
           <slot />
         </div>
@@ -50,7 +50,7 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
         </div>
       </div>
       <aside v-if="!wideLayout" class="hidden sm:none lg:block w-1/4 zen-hide">
-        <div sticky top-0 h-screen flex="~ col" py3>
+        <div sticky top-0 h-screen flex="~ col" gap-2 py3 ms-2>
           <slot name="right">
             <SearchWidget />
             <div flex-auto />
diff --git a/pages/[[server]]/@[account]/index.vue b/pages/[[server]]/@[account]/index.vue
index 7bb298b2..94aaa333 100644
--- a/pages/[[server]]/@[account]/index.vue
+++ b/pages/[[server]]/@[account]/index.vue
@@ -21,7 +21,7 @@ onReactivated(() => {
 <template>
   <MainContent back>
     <template #title>
-      <ContentRich text-lg font-bold :content="account ? getDisplayName(account) : t('nav.profile')" />
+      <ContentRich timeline-title-style :content="account ? getDisplayName(account) : t('nav.profile')" />
     </template>
 
     <template v-if="pending" />
diff --git a/pages/[[server]]/explore.vue b/pages/[[server]]/explore.vue
index 894a4304..0f683888 100644
--- a/pages/[[server]]/explore.vue
+++ b/pages/[[server]]/explore.vue
@@ -28,7 +28,7 @@ const tabs = $computed(() => [
 <template>
   <MainContent>
     <template #title>
-      <span text-lg font-bold flex items-center gap-2 cursor-pointer @click="$scrollToTop">
+      <span timeline-title-style flex items-center gap-2 cursor-pointer @click="$scrollToTop">
         <div i-ri:hashtag />
         <span>{{ t('nav.explore') }}</span>
       </span>
diff --git a/pages/[[server]]/public/index.vue b/pages/[[server]]/public/index.vue
index c72c18d5..2eaba3a3 100644
--- a/pages/[[server]]/public/index.vue
+++ b/pages/[[server]]/public/index.vue
@@ -11,7 +11,7 @@ useHeadFixed({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/public" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+      <NuxtLink to="/public" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:group-2-line />
         <span>{{ t('title.federated_timeline') }}</span>
       </NuxtLink>
diff --git a/pages/[[server]]/public/local.vue b/pages/[[server]]/public/local.vue
index 303a4796..a25df103 100644
--- a/pages/[[server]]/public/local.vue
+++ b/pages/[[server]]/public/local.vue
@@ -10,7 +10,7 @@ useHeadFixed({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/public/local" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+      <NuxtLink to="/public/local" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:group-2-line />
         <span>{{ t('title.local_timeline') }}</span>
       </NuxtLink>
diff --git a/pages/blocks.vue b/pages/blocks.vue
index ce29fdfd..53a5f749 100644
--- a/pages/blocks.vue
+++ b/pages/blocks.vue
@@ -13,7 +13,7 @@ useHeadFixed({
 <template>
   <MainContent back>
     <template #title>
-      <span text-lg font-bold>{{ $t('nav.blocked_users') }}</span>
+      <span timeline-title-style>{{ $t('nav.blocked_users') }}</span>
     </template>
 
     <TimelineBlocks v-if="isMastoInitialised" />
diff --git a/pages/bookmarks.vue b/pages/bookmarks.vue
index 8f0b7143..6efac901 100644
--- a/pages/bookmarks.vue
+++ b/pages/bookmarks.vue
@@ -13,7 +13,7 @@ useHeadFixed({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/bookmarks" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+      <NuxtLink to="/bookmarks" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:bookmark-line />
         <span>{{ t('nav.bookmarks') }}</span>
       </NuxtLink>
diff --git a/pages/conversations.vue b/pages/conversations.vue
index 0ae51fbe..aed667cc 100644
--- a/pages/conversations.vue
+++ b/pages/conversations.vue
@@ -13,7 +13,7 @@ useHeadFixed({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/conversations" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+      <NuxtLink to="/conversations" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:at-line />
         <span>{{ t('nav.conversations') }}</span>
       </NuxtLink>
diff --git a/pages/domain_blocks.vue b/pages/domain_blocks.vue
index b10a57a6..0afa524c 100644
--- a/pages/domain_blocks.vue
+++ b/pages/domain_blocks.vue
@@ -13,7 +13,7 @@ useHeadFixed({
 <template>
   <MainContent back>
     <template #title>
-      <span text-lg font-bold>{{ $t('nav.blocked_domains') }}</span>
+      <span timeline-title-style>{{ $t('nav.blocked_domains') }}</span>
     </template>
 
     <TimelineDomainBlocks v-if="isMastoInitialised" />
diff --git a/pages/favourites.vue b/pages/favourites.vue
index 1dc5c77e..3b17b25a 100644
--- a/pages/favourites.vue
+++ b/pages/favourites.vue
@@ -13,7 +13,7 @@ useHeadFixed({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/favourites" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+      <NuxtLink to="/favourites" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:heart-3-line />
         <span>{{ t('nav.favourites') }}</span>
       </NuxtLink>
diff --git a/pages/home.vue b/pages/home.vue
index d9318643..cd0f2860 100644
--- a/pages/home.vue
+++ b/pages/home.vue
@@ -15,7 +15,7 @@ useHeadFixed({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/home" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+      <NuxtLink to="/home" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:home-5-line />
         <span>{{ $t('nav.home') }}</span>
       </NuxtLink>
diff --git a/pages/mutes.vue b/pages/mutes.vue
index 3e584e75..4dd5d306 100644
--- a/pages/mutes.vue
+++ b/pages/mutes.vue
@@ -13,7 +13,7 @@ useHeadFixed({
 <template>
   <MainContent back>
     <template #title>
-      <span text-lg font-bold>{{ $t('nav.muted_users') }}</span>
+      <span timeline-title-style>{{ $t('nav.muted_users') }}</span>
     </template>
 
     <TimelineMutes v-if="isMastoInitialised" />
diff --git a/pages/notifications.vue b/pages/notifications.vue
index 9fe97e19..30e367f7 100644
--- a/pages/notifications.vue
+++ b/pages/notifications.vue
@@ -28,7 +28,7 @@ onActivated(() => {
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/notifications" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+      <NuxtLink to="/notifications" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:notification-4-line />
         <span>{{ t('nav.notifications') }}</span>
       </NuxtLink>
diff --git a/pages/pinned.vue b/pages/pinned.vue
index 0027746c..c4abf496 100644
--- a/pages/pinned.vue
+++ b/pages/pinned.vue
@@ -13,7 +13,7 @@ useHeadFixed({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/public/pinned" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+      <NuxtLink to="/public/pinned" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:pushpin-line />
         <span>{{ t('account.pinned') }}</span>
       </NuxtLink>
diff --git a/pages/search.vue b/pages/search.vue
index 36aa3476..7d9f4ecf 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -10,7 +10,7 @@ useHeadFixed({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/search" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+      <NuxtLink to="/search" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
         <div i-ri:search-line class="rtl-flip" />
         <span>{{ $t('nav.search') }}</span>
       </NuxtLink>
diff --git a/pages/settings.vue b/pages/settings.vue
index 533369dd..a89ada64 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -20,7 +20,7 @@ const isRootPath = computedEager(() => route.name === 'settings')
       <div border="e base" :class="isRootPath ? 'block lg:flex-none flex-1' : 'hidden lg:block'">
         <MainContent>
           <template #title>
-            <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+            <div timeline-title-style flex items-center gap-2 @click="$scrollToTop">
               <div i-ri:settings-3-line />
               <span>{{ $t('nav.settings') }}</span>
             </div>
diff --git a/unocss.config.ts b/unocss.config.ts
index 615bb193..e76d4302 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -22,6 +22,7 @@ export default defineConfig({
       'bg-base': 'bg-$c-bg-base',
       'bg-border': 'bg-$c-border',
       'bg-active': 'bg-$c-bg-active',
+      'bg-primary-light': 'bg-$c-primary-light',
       'bg-code': 'bg-$c-bg-code',
       'bg-fade': 'bg-$c-bg-fade',
 
@@ -55,6 +56,8 @@ export default defineConfig({
       'flex-v-center': 'items-center',
       'flex-h-center': 'justify-center',
       'bg-hover-overflow': 'relative z-0 transition-colors duration-250 after-content-empty after:(absolute inset--2px bg-transparent rounded-lg z--1 transition-colors duration-250) hover:after:(bg-active)',
+
+      'timeline-title-style': 'text-primary text-lg font-bold',
     },
   ],
   presets: [