Merge pull request #399 from SerhiiCho/style-changes-read-more-button

Change styles on "Read more" button on RFC card
brendt · Nov 17, 2023 · 042a973 · 042a973
2 parents 382160d + f52ae1e
commit 042a973
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/resources/views/components/card-link.blade.php b/resources/views/components/card-link.blade.php
@@ -10,15 +10,15 @@
 <div {{dusk('card-link')}} class="{{ $flexDirection }} bg-rfc-card transition-all opacity-90 rounded-lg border border-divider flex justify-between gap-2 p-3 md:p-7 flex-1">
     {{ $slot }}
 
-    <div class="flex items-center justify-between mt-2">
+    <div class="flex items-center justify-between mt-5">
         <small>
             @isset($userVote)
                 <x-tag @class([
                     'bg-none pl-1 pr-0',
                     'text-agree' => $userVote->isYes(),
                     'text-disagree' => $userVote->isNo(),
                 ])>
-                    {{ __('You voted') }} {{ $userVote->value }}
+                    You voted {{ $userVote->value }}
                 </x-tag>
             @endisset
         </small>
@@ -27,9 +27,18 @@
             {{dusk('card-link-more')}}
             href="{{ $to }}"
             title="Navigate to the RFC"
-            class="text-main hover:text-main-dark dark:text-font dark:hover:text-font-second transition-colors"
+            @class([
+                'flex text-font items-center gap-2 bg-slate-100 border border-slate-200 px-4 pr-2 py-1.5 rounded-full',
+                'dark:bg-gray-800 dark:border-slate-600 dark:hover:border-slate-400',
+                'group transition-colors hover:border-slate-400 dark:hover:bg-background',
+            ])
         >
             Read more
+
+            <x-icons.arrow-up-empty @class([
+                'w-6 h-6 inline-block rotate-90 text-slate-700 dark:text-slate-300 transition-transform',
+                'group-hover:dark:text-slate-200 group-hover:text-slate-900 group-hover:scale-110',
+            ]) />
         </a>
     </div>
 </div>