Merge pull request #236 from open-sauced/changelog-styles

Changelog styles
open-sauced · Apr 10, 2024 · 3c03bfe · 3c03bfe
2 parents cfe1887 + 981a5e9
commit 3c03bfe
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 10 deletions.
diff --git a/components/sections/changelog/Changelog.tsx b/components/sections/changelog/Changelog.tsx
@@ -36,7 +36,7 @@ const Changelog: FC<ChangelogProps> = ({
   const containerHeightStyle = {
     overflow: "hidden",
     transition: "height 0.5s ease-in-out",
-    height: isExpanded ? `${contentRef.current?.clientHeight}px` : "120px",
+    height: isExpanded ? `${contentRef.current?.clientHeight}px` : "360px",
   }
 
   // check if the changelog content has an image
@@ -46,11 +46,11 @@ const Changelog: FC<ChangelogProps> = ({
   const lineCount = changelogContent.split("\n").length
 
   return (
-    <article className="flex gap-x-10 h-full relative">
-      <div className={`relative pb-28 border-textPrimary border-opacity-50 ${index+1 === count ? "" : "border-l-2"}`}>
-        <section className={`hidden self-start sticky top-8 tablet:flex flex-1 pl-10 max-w-md flex-col`}>
+    <article className={`flex pb-24 gap-x-10 h-full relative border-textPrimary border-opacity-50 ${index+1 === count ? "" : "border-l-2"}`}>
+      <div className="relative pb-28">
+        <section className={`hidden self-start sticky top-8 tablet:flex flex-1 pl-10 max-w-md flex-col `}>
           <span>
-            <IoMdGitCommit className="absolute -left-5 bg-darkBG text-4xl" />
+            <IoMdGitCommit className="absolute -left-3 rounded-3xl text-2xl p-1  text-white bg-gradient-to-tr from-[#ED5432] to-[#EDA232] drop-shadow-[0_0_4px_#ED5432]" />
           </span>
           <Typography alignLarge="left" variant="title3">
             <a href={`/changelog/${slug?.current}`} className="hover:text-brandOrange hover:underline hover:decoration-brandOrange">
@@ -99,7 +99,7 @@ const Changelog: FC<ChangelogProps> = ({
         <div style={containerHeightStyle}>
           <div className="relative" ref={contentRef}>
             <ReactMarkdown
-              className="prose prose-sm prose-headings:text-textPrimary prose-p:text-textPrimary prose-p:text-base">
+              className="prose prose-headings:text-textPrimary prose-li:text-textPrimary prose-p:text-textPrimary prose-ul:text-textPrimary prose-p:text-base prose-strong:text-textPrimary prose-img:rounded-md">
               {changelogContent}
             </ReactMarkdown>
           </div>

diff --git a/components/sections/changelog/Hero.tsx b/components/sections/changelog/Hero.tsx
@@ -3,7 +3,7 @@ import { Heading, Typography } from '../../common/text'
 
 const Hero = () => {
   return (
-    <section className="z-40 py-24 tablet:py-56 border-slate-800 relative flex flex-col gap-y-5 from-transparent via-red-800 to-transparent">
+    <section className="z-40 py-24 tablet:py-36 border-slate-800 relative flex flex-col gap-y-5 from-transparent via-red-800 to-transparent">
       <Heading alignSmall="center" >
         $yellow-to-orangeChangelog$yellow-to-orange
       </Heading>

diff --git a/components/sections/changelog/IndividualHero.tsx b/components/sections/changelog/IndividualHero.tsx
@@ -2,11 +2,14 @@ import React from 'react'
 import { Heading, Typography } from '../../common/text'
 import GradientBorderWrapper from '../../common/GradientBorderWrapper'
 import SocialShare from '../../common/SocialShare'
+import moment from 'moment';
 
 const Hero = ({ title, topics, date, url } : { title: string, topics: string[], date: string, url: string }) => {
   return (
     <section className="items-center z-50 py-16 max-w-3xl mx-auto tablet:py-24 border-slate-800 relative flex flex-col gap-y-8 from-transparent via-red-800 to-transparent">
-      <Typography alignSmall='center'>{ date }</Typography>
+      <Typography alignSmall='center' variant="subheading">
+        {moment(date).format("DD MMM YYYY")}
+      </Typography>
       <Heading alignSmall="center">
         { title }
       </Heading>

diff --git a/pages/changelog/[slug].tsx b/pages/changelog/[slug].tsx
@@ -51,8 +51,7 @@ export default function ChangelogPage({ changelog, commonData, latestChanges } :
         url={`https://opensauced.pizza/changelog/${changelog.slug?.current}`}
       /> 
       <ReactMarkdown
-        className="mx-auto mb-24 leading-loose prose prose-xl prose-headings:text-textPrimary prose-p:text-textPrimary prose-img:mx-auto prose-img:rounded-md 
-        prose-img:border-4 prose-img:border-brandOrange prose-img:bg-gradient-to-tr prose-img:from-[#ED5432] prose-img:via-[#EDA232] prose-img:to-[#ED5432] prose-img:drop-shadow-[0_0_4px_#ED5432]"
+        className="mx-auto mb-24 leading-loose prose prose-md prose-headings:text-textPrimary prose-p:text-textPrimary prose-img:mx-auto prose-img:rounded-md prose-li:text-textPrimary prose-ul:text-textPrimary prose-p:text-base prose-strong:text-textPrimary"
       >
         {changelog.changelogContent}
       </ReactMarkdown>