Make roundedness more consistent

Author: Rikthepixel

Diff for: src/components/content/CodeBlock/index.tsx

@@ -84,7 +84,7 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ lang, children, className, marked
   }, [codeLines, showLines, linesToMark]);
 
   const computedClassName = useMemo(() => {
-    return twMerge("bg-neutral-800 rounded-lg p-4 text-base relative group/cb", className);
+    return twMerge("bg-neutral-800 rounded-2xl p-4 text-base relative group/cb", className);
   }, [className]);
 
   return (
@@ -133,7 +133,7 @@ const CopyCode = ({ codeLines }: CopyCodeProps) => {
   }, [codeLines]);
 
   const copyButtonClassName = useMemo(() => {
-    return twMerge("relative text-white opacity-30 bg-neutral-600 p-2 rounded-lg absolute top-2 right-2 group-hover/cb:opacity-100 hover:bg-neutral-500", codeLines.length === 1 ? "top-1/2 -translate-y-1/2" : "");
+    return twMerge("relative text-white opacity-30 bg-neutral-600 p-2 rounded-2xl absolute top-2 right-2 group-hover/cb:opacity-100 hover:bg-neutral-500", codeLines.length === 1 ? "top-1/2 -translate-y-1/2" : "");
   }, []);
 
   return (

Diff for: src/components/controls/Button.tsx

@@ -7,7 +7,7 @@ import { RequiredKeys } from "@/types/utility";
 import ArrowPathIcon from "@heroicons/react/24/solid/ArrowPathIcon";
 import fadeAnim from "@/animations/fade";
 
-export const style = cva("relative flex items-center justify-center transition-colors shadow-sm px-3 py-2 gap-2 rounded-full border-2", {
+export const style = cva("relative flex items-center justify-center transition-colors shadow-sm px-3 py-2 gap-2 rounded-2xl border-2", {
   variants: {
     color: {
       white: "bg-neutral-200 hover:bg-neutral-50 border-neutral-400 text-neutral-900",

Diff for: src/components/controls/Form.tsx

@@ -15,7 +15,7 @@ const Form = ({
   children,
   successChildren,
   success,
-  successClassName = "p-8 my-8 text-xl font-semibold rounded-md border-2 border-green-600 w-fit mx-auto image-dots bg-green-400 from-green-600",
+  successClassName = "p-8 my-8 text-xl font-semibold rounded-2xl border-2 border-green-600 w-fit mx-auto image-dots bg-green-400 from-green-600",
   successProps,
   oneTime,
   ...props

Diff for: src/components/controls/Input.tsx

@@ -4,7 +4,7 @@ import { twMerge } from "tailwind-merge";
 
 import { RequiredKeys } from "@/types/utility";
 
-export const style = cva("w-full rounded-full py-2 px-3 border-2", {
+export const style = cva("w-full rounded-2xl py-2 px-3 border-2", {
   variants: {
     color: {
       primary: "border-primary bg-transparent placeholder:text-fill-contrast/75",

Diff for: src/components/controls/Select.tsx

@@ -12,7 +12,7 @@ import ChevronDownIcon from "@heroicons/react/24/solid/ChevronDownIcon";
 export const style = inputStyle;
 export type VariantProps = InputVariantProps;
 
-export const containerStyle = cva("absolute border-2 left-1/2 -translate-x-1/2 top-full rounded-lg min-w-fit w-full overflow-hidden translate-y-1 z-50", {
+export const containerStyle = cva("absolute border-2 left-1/2 -translate-x-1/2 top-full rounded-2xl min-w-fit w-full overflow-hidden translate-y-1 z-50", {
   variants: {
     color: {
       primary: "border-primary bg-fill text-fill-contrast",

Diff for: src/components/layout/Footer.tsx

@@ -5,8 +5,8 @@ import Logo from "@/assets/images/brand/logo-200x200.webp";
 const Footer = () => {
   return (
     <div className="flex items-center justify-center w-[calc(100%_+_4rem)] pt-16 mt-auto text-primary-contrast">
-      <footer className="flex flex-col w-full gap-4 p-8 border-2 max-w-7xl rounded-t-md bg-primary image-dots from-primary-light border-primary-light">
-        <div className="flex flex-col items-center gap-2 p-2 rounded-md bg-white/20 sm:flex-row backdrop-blur-[1.25px]">
+      <footer className="flex flex-col w-full gap-4 p-8 border-2 border-b-0 max-w-7xl rounded-t-2xl bg-primary image-dots from-primary-light border-primary-light">
+        <div className="flex flex-col items-center gap-2 p-2 rounded-2xl bg-white/20 sm:flex-row backdrop-blur-[1.25px]">
           <div className="flex items-center gap-2">
             <img
               className="w-12 h-12"

Diff for: src/components/layout/Header.tsx

@@ -51,7 +51,7 @@ const Header = () => {
       </Button>
       <div
         ref={itemsContainerRef}
-        className="absolute flex flex-col bg-fill gap-0 p-4 top-full inset-x-4 rounded-md border-2 border-primary z-10 data-[expanded='false']:hidden md:data-[expanded='false']:flex md:flex-row md:items-center md:p-0 md:border-none md:static md:bg-transparent md:gap-12"
+        className="absolute flex flex-col bg-fill gap-0 p-4 top-full inset-x-4 rounded-2xl border-2 border-primary z-10 data-[expanded='false']:hidden md:data-[expanded='false']:flex md:flex-row md:items-center md:p-0 md:border-none md:static md:bg-transparent md:gap-12"
         id="header-items"
         data-expanded={open}
       >

Diff for: src/components/layout/NavDropdown.tsx

@@ -56,7 +56,7 @@ const NavDropdown = ({ summary, children }: NavDropdownProps) => {
           height="1em"
         />
       </summary>
-      <div ref={containerRef} className="absolute inset-x-0 flex flex-col gap-2 px-4 py-2 border-2 rounded-lg bg-fill text-fill-contrast group/dropdown border-primary md:w-fit" data-in-group>
+      <div ref={containerRef} className="absolute inset-x-0 flex flex-col gap-2 px-4 py-2 border-2 rounded-2xl bg-fill text-fill-contrast group/dropdown border-primary md:w-fit" data-in-group>
         {children}
       </div>
     </details>

Diff for: src/components/pages/about/Member.tsx

@@ -3,7 +3,7 @@ import LinkButton from "@/components/controls/LinkButton";
 
 const Member = ({ image, fullName, title, links }: IMember) => (
   <li
-    className="flex flex-col items-center w-full max-w-full gap-2 p-4 border-2 rounded-md border-primary-light motion-safe:transition-all sm:p-6 md:w-fit"
+    className="flex flex-col items-center w-full max-w-full gap-2 p-4 border-2 rounded-2xl border-primary-light motion-safe:transition-all sm:p-6 md:w-fit"
     aria-label="Member"
   >
     <div className="flex flex-col items-center max-w-full gap-2 sm:flex-row md:flex-col">

Diff for: src/components/pages/about/Project.tsx

@@ -16,7 +16,7 @@ const Project = ({ title, description, thumbnail, thumbnailAlt, href, linkText,
       title: thumbnailAlt,
       html: <>
         <img
-          className="object-contain w-full h-full rounded-lg aspect-video"
+          className="object-contain w-full h-full rounded-2xl aspect-video"
           alt={thumbnailAlt}
           src={thumbnail.src}
           width={thumbnail.width}
@@ -37,7 +37,7 @@ const Project = ({ title, description, thumbnail, thumbnailAlt, href, linkText,
       </p>
       <button onClick={onImageClick}>
         <img
-          className="border-2 rounded-lg aspect-video border-primary"
+          className="border-2 rounded-2xl aspect-video border-primary"
           alt={thumbnailAlt}
           src={thumbnail.src}
           width={thumbnail.width}

Diff for: src/components/pages/blog/ArticleBrief.tsx

@@ -50,7 +50,7 @@ const ArticleBrief = ({ title, thumbnail, thumbnailAlt, imgLoading, readtime, te
 
   return (
     <motion.li
-      className="origin-center flex flex-col flex-1 gap-4 mx-0 rounded-lg motion-safe:transition-[margin-inline] motion-safe:duration-500 sm:mx-16 md:mx-0 image-dots from-fill-light border-2 border-primary overflow-hidden"
+      className="origin-center flex flex-col flex-1 gap-4 mx-0 rounded-2xl motion-safe:transition-[margin-inline] motion-safe:duration-500 sm:mx-16 md:mx-0 image-dots from-fill-light border-2 border-primary overflow-hidden"
       variants={LIST_ANIM}
       initial="in"
       animate="anim"

Diff for: src/components/pages/blog/post/ArticleComponents.tsx

@@ -33,7 +33,7 @@ const A = {
 
   Img: ({ className, loading = "lazy", ...props }: React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>) => {
     const computedClassName = useMemo(
-      () => twMerge("rounded-lg", className),
+      () => twMerge("rounded-2xl", className),
       [className]
     );
 

Diff for: src/components/pages/front/Mission.tsx

@@ -7,7 +7,7 @@ export interface MissionProps extends IMission {
 
 const Mission = ({ title, image, imageAlt, text }: MissionProps) => {
   return (
-    <li className="flex flex-col items-center flex-1 gap-4 p-0 -mx-4 rounded-lg border-primary motion-safe:transition-[margin_padding_border] sm:mx-0 lg:p-4 border-2 xl:p-8">
+    <li className="flex flex-col items-center flex-1 gap-4 p-0 -mx-4 rounded-2xl border-primary motion-safe:transition-[margin_padding_border] sm:mx-0 lg:p-4 border-2 xl:p-8">
       <Heading.H3 className="lg:h-[5ex] motion-safe:transition-all">
         {title}
       </Heading.H3>

Diff for: src/pages/404.tsx

@@ -26,7 +26,7 @@ const NotFound: Page = ({ pathname }) => {
         ]} />
       </Head>
       <main className="flex items-center justify-center flex-1 w-full pb-8" aria-labelledby="not-found">
-        <div className="flex flex-col gap-2 p-8 text-center border-2 rounded-md border-primary">
+        <div className="flex flex-col gap-2 p-8 text-center border-2 rounded-2xl from-fill-light image-dots border-primary">
           <Heading.H1 id="not-found">
             Not Found.
           </Heading.H1>

Diff for: src/pages/blog/[pid]/[slug].tsx

@@ -70,7 +70,7 @@ const BlogPostPage: Page<BlogPostPageProps> = ({ article: { author, tags, thumbn
           <section aria-label="Main article content" className="flex flex-col gap-8 w-full items-center">
             <img
               aria-label="Article Thumbnail"
-              className="rounded-lg"
+              className="rounded-2xl"
               loading="eager"
               src={thumbnail.src}
               width={thumbnail.width}

Diff for: src/pages/index.tsx

@@ -78,8 +78,8 @@ const FrontPage: Page = ({ pathname }) => {
             />
           </div>
         </section>
-        <section aria-label="introduction" className="flex flex-col gap-12 p-8 text-lg -mx-8 md:mx-0 motion-safe:transition-[margin] text-center border-2 rounded-lg xl:flex-row text-primary-contrast image-dots from-primary-light border-primary-light bg-primary">
-          <Heading.H2 id="introduction" className="flex p-4 flex-col items-center justify-center w-full rounded-lg text-primary-contrast bg-white/20 backdrop-blur-[1.25px] xl:p-0 xl:w-1/2">
+        <section aria-label="introduction" className="flex flex-col gap-12 p-8 text-lg -mx-8 md:mx-0 motion-safe:transition-[margin] text-center border-2 rounded-2xl xl:flex-row text-primary-contrast image-dots from-primary-light border-primary-light bg-primary">
+          <Heading.H2 id="introduction" className="flex p-4 flex-col items-center justify-center w-full rounded-2xl text-primary-contrast bg-white/20 backdrop-blur-[1.25px] xl:p-0 xl:w-1/2">
             <span className="text-2xl">
               Introducing...
             </span>

Diff for: src/pages/mail/unsubscribe.tsx

@@ -54,7 +54,7 @@ const UnsubscribePage: Page = ({ pathname }) => {
       </Head>
       <main className="flex items-center justify-center flex-1 w-full pb-8" aria-labelledby="unsubscribe">
         <Form
-          className="flex flex-col gap-4 p-8 text-center border-2 rounded-md border-primary"
+          className="flex flex-col gap-4 p-8 text-center border-2 rounded-2xl from-fill-light image-dots border-primary"
           onSubmit={submit}
           success={response?.success}
           successChildren={`${response?.message} 👍`}