Merge pull request #53 from sean1832/dev

Apply rounded image corners for mobile
sean1832 · Jul 4, 2024 · 246fbef · 246fbef
2 parents 98102cc + ac49a90
commit 246fbef
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git a/src/components/layout/aboutSection.jsx b/src/components/layout/aboutSection.jsx
@@ -23,6 +23,7 @@ const AboutSection = () => {
           <Image
             src={profile.image.src}
             alt={profile.image.alt}
+            className="rounded-md md:rounded-none"
             style={{ width: "auto", objectFit: "cover", objectPosition: "bottom" }}
             width={400}
             height={350}

diff --git a/src/components/layout/projectsGallerySection.jsx b/src/components/layout/projectsGallerySection.jsx
@@ -61,7 +61,7 @@ const ImageHeader = ({ src, alt, href, blurDataURL }) => (
       alt={alt}
       fill
       style={{ objectFit: "cover", objectPosition: "bottom" }}
-      className="transition duration-500"
+      className="transition duration-500 rounded-md md:rounded-none"
       blurDataURL={blurDataURL}
     />
   </Link>

diff --git a/src/components/ui/media/customImage.jsx b/src/components/ui/media/customImage.jsx
@@ -7,11 +7,15 @@ const CustomImage = ({ image }) => {
   let inverted = image.isInverted ? "dark:invert" : "";
   if (image.isAdaptive) {
     return (
-      <div className={cn("relative w-full col-span-2", image.className, inverted)}>
+      <div className={cn("relative w-full col-span-2 ", image.className)}>
         <BlurImage
           src={image.src}
           alt={image.alt || ConstructImageAltText(image.src)}
-          style={{ objectFit: "cover", width: "100%", height: "auto" }}
+          className={cn(
+            "object-cover w-full h-auto md:rounded-none rounded-md",
+            image.className,
+            inverted
+          )}
           width={image.width || 1920}
           height={image.height || 1080}
           isExternal={image.isExternal}
@@ -26,7 +30,11 @@ const CustomImage = ({ image }) => {
         <BlurImage
           src={image.src}
           alt={image.alt || ConstructImageAltText(image.src)}
-          className={cn("object-cover object-center w-full h-full", image.className, inverted)}
+          className={cn(
+            "object-cover object-center w-full h-full md:rounded-none rounded-md",
+            image.className,
+            inverted
+          )}
           fill
           isExternal={image.isExternal}
           blurDataURL={image.blurDataURL}

diff --git a/src/components/ui/media/lightbox.jsx b/src/components/ui/media/lightbox.jsx
@@ -191,7 +191,7 @@ const Lightbox = ({ images, index, children }) => {
                             alt={image.alt}
                             width={image.width || 1920}
                             height={image.height || 1080}
-                            className={clsx("max-w-full max-h-[80vh] object-contain", {
+                            className={clsx("max-w-full max-h-[80vh] object-contain rounded-md", {
                               "dark:invert": image.isInverted,
                             })}
                             sizes="100vw"
@@ -203,7 +203,7 @@ const Lightbox = ({ images, index, children }) => {
                             alt={image.alt}
                             width={image.width || 1920}
                             height={image.height || 1080}
-                            className={clsx("max-w-full max-h-[80vh] object-contain", {
+                            className={clsx("max-w-full max-h-[80vh] object-contain rounded-md", {
                               "dark:invert": image.isInverted,
                             })}
                             blurDataURL={image.blurDataURL}