style: 💅 fix button styling (#72)

## Why?

Clear and short explanation here.

## How?

- Done A (replace with a breakdown of the steps)
- Done B
- Done C

## Tickets?

- [Ticket 1](the-ticket-url-here)
- [Ticket 2](the-ticket-url-here)
- [Ticket 3](the-ticket-url-here)

## Contribution checklist?

- [ ] The commit messages are detailed
- [ ] The `build` command runs locally
- [ ] Assets or static content are linked and stored in the project
- [ ] Document filename is named after the slug
- [ ] You've reviewed spelling using a grammar checker
- [ ] For documentation, guides or references, you've tested the
commands and steps
- [ ] You've done enough research before writing

## Security checklist?

- [ ] Sensitive data has been identified and is being protected properly
- [ ] Injection has been prevented (parameterized queries, no eval or
system calls)
- [ ] The Components are escaping output (to prevent XSS)

## References?

Optionally, provide references such as links

## Preview?

Optionally, provide the preview url here

---------

Co-authored-by: nlc616 <[email protected]>

src/components/BlogPosts.astro

@@ -25,19 +25,19 @@ type AllPosts = {
   {
     allPosts.map((post: AllPosts) => (
       <a href={`/${collection}/${post.slug}`}>
-        <article class="  h-full cursor-pointer overflow-hidden rounded-8 bg-ui-fleek-black shadow transition hover:scale-105">
+        <article class="h-full cursor-pointer overflow-hidden rounded-8 border border-gray-dark-7 bg-gray-dark-2 shadow transition hover:border-gray-dark-8">
           {post.data?.image && (
             <Image
-              class="h-[180px] w-full object-cover"
+              class="h-[220px] w-full object-cover"
               src={post.data.image}
               alt=""
             />
           )}
           <div class="p-32">
-            <span class="font-plex-sans text-16 font-light text-ui-mid-grey">
+            <span class="font-plex-sans text-16 font-light text-gray-dark-12">
               {post.data.category}
             </span>
-            <h3 class="font-plex-sans text-24 font-medium leading-tight">
+            <h3 class="font-plex-sans text-24 font-medium leading-tight text-gray-dark-12">
               {post.data.title}
             </h3>
           </div>

src/components/ButtonYellowOutline.tsx

@@ -10,7 +10,7 @@ const ButtonYellowOutline: React.FC<ButtonWhiteProps> = (props) => {
     <button
       className={`inline-block rounded-12 p-1 px-15 py-7 ${props.color == 'yellow' ? 'bg-yellow-dark-4 text-yellow-dark-11 hover:bg-yellow-dark-5' : 'bg-gray-dark-4 text-gray-dark-12 hover:bg-gray-dark-5'} `}
     >
-      <p className="font-plex-sans text-8 capitalize leading-[150%] tracking-[0.064rem] lg:text-16">
+      <p className="font-plex-sans text-8 leading-[150%] tracking-[0.00rem] lg:text-16">
         {props.children}
       </p>
     </button>

src/components/Pricing/Table/TableHeader.tsx

@@ -27,7 +27,7 @@ const TableHeader = ({
       className="w-full"
     >
       <PricingButton bg={btnBg} fontColor={fontColor} hoverBtnBg={hoverBtnBg}>
-        <p className="typo-s capitalize">{cta.text}</p>
+        <p>{cta.text}</p>
       </PricingButton>
     </a>
   </div>

src/components/Text.tsx

@@ -66,7 +66,7 @@ const textStyles: Record<TextStyle, string> = {
   'btn-s':
     'font-plex-sans text-13 font-normal leading-[150%] tracking-[0.096rem] uppercase',
   'btn-l':
-    'font-plex-sans lg:text-16 font-medium leading-[150%] tracking-[0.192rem] capitalize',
+    'font-plex-sans lg:text-16 font-normal leading-[150%] tracking-[0.0rem]',
 
   'btn-l-mid':
     'font-plex-sans lg:text-14 font-normal leading-[150%] tracking-[0.0rem]',

src/pages/blog/[...slug].astro

@@ -35,7 +35,7 @@ const githubEditUrlPathname = generateGitHubEditLink({
   <article class="blog">
     <div class="mb-10 w-fit" onclick="history.back()">
       <ButtonGray className="flex items-center justify-center gap-12 px-5">
-        <div class="typo-s">Back</div>
+        <div>Go Back</div>
       </ButtonGray>
     </div>
     <h1>{entry.data.title}</h1>

src/styles/docPage.css

@@ -109,7 +109,7 @@
   .docs-search-container {
     @apply pb-20 pr-8;
     .search-input {
-      @apply w-full border-gray-dark-7 bg-gray-dark-1 focus:border focus:border-gray-dark-7;
+      @apply w-full border-gray-dark-7 bg-gray-dark-2 hover:border-gray-dark-8 focus:border;
     }
   }
 

src/styles/search.css

@@ -38,10 +38,10 @@
   }
 
   .input-container {
-    @apply flex h-40 rounded-12 bg-gray-dark-4;
+    @apply flex h-40 rounded-12;
 
     input {
-      @apply h-full rounded-12 border-1 border-gray-dark-7 bg-gray-dark-2 pl-40 pt-2 font-sans text-14 font-light leading-18 outline-0 focus:border-yellow;
+      @apply h-full rounded-12 border-1 border-gray-dark-7 bg-gray-dark-2 pl-40 pt-2 font-sans text-14 font-light leading-18 outline-0 hover:border-gray-dark-8;
     }
 
     .icon-container {