styling color for album

src/_theme.scss

@@ -3,27 +3,31 @@
 $colors: (
   refreshing-bali-2020: (
     base: #d1e4e2, // need to be in sync with utils/const.ts
+    base2: #f4e1c1,
     button: #d2691e,
     button-hover: #8b4513
   ),
   luxury-bali-2019: (
     base: #f5f5dc, // need to be in sync with utils/const.ts
+    base2: #87ceeb,
     button: #6b8e23,
     button-hover: #556b2f
   ),
   spring-japan-2018: (
     base: #ffd7e8, // need to be in sync with utils/const.ts
+    base2: #a2c8f7,
     button: #c2185b,
     button-hover: #a3154a
   ),
   ora-beach-2018: (
-    base: #ffd1b3, // need to be in sync with utils/const.ts
-    base2: #a0d8ef,
+    base: #a0d8ef, // need to be in sync with utils/const.ts
+    base2: #ffd1b3,
     button: #4a90e2,
-    button-hover: #ff8666
+    button-hover: #3b7bbf,
   ),
   explore-singapore-2018: (
     base: #f0f0f0, // need to be in sync with utils/const.ts
+    base2: #98fb98,
     button: #32cd32,
     button-hover: #228b22
   )
@@ -32,8 +36,11 @@ $colors: (
 .Theme {
   @each $theme-name, $theme-values in $colors {
     &-#{$theme-name} {
-      background: map.get($theme-values, base);
-      background: radial-gradient(ellipse, map.get($theme-values, base), map.get($theme-values, base2));
+      background: radial-gradient(closest-side, map.get($theme-values, base2), map.get($theme-values, base));
+
+      &-preview {
+        background: map.get($theme-values, base);
+      }
 
       &-button {
         background: map.get($theme-values, button);

src/components/PreviewAlbum/index.tsx

@@ -73,7 +73,7 @@ const PreviewAlbum: React.FC<Props> = ({ collection, onOpenCollection }) => {
   }, [collection, onFrameHover, onFrameOut, openImage]);
 
   const theme = `Theme-${collection.id}`;
-  const className = cn('border border-gray-300 rounded-lg shadow-lg overflow-hidden max-w-[300px] text-center mb-[20px]', theme)
+  const className = cn('border border-gray-300 rounded-lg shadow-lg overflow-hidden max-w-[300px] text-center mb-[20px]', `${theme}-preview`)
   const btnClassName = cn('button my-[16px]', `${theme}-button`)
   return (
     <div className={className}>

src/utils/const.ts

@@ -8,7 +8,7 @@ class Constant {
     "refreshing-bali-2020": {
       id: 'refreshing-bali-2020',
       title: 'Refreshing Bali - 2020',
-      caption: 'A moment to enjoy Bali and Nusa Lembongan. Right before the pandemic!',
+      caption: 'Enjoying the beauty of Bali and Nusa Lembongan, just before the pandemic! 🏖️',
       popupColor: '#d1e4e2', // need to be in sync with _theme.scss
       previewImageIdx: [0, 1],
       images: [
@@ -164,7 +164,7 @@ class Constant {
     "luxury-bali-2019": {
       id: 'luxury-bali-2019',
       title: 'Luxury Bali - 2019',
-      caption: 'Exploring the luxuriousness of Bali. Paradise awaits!',
+      caption: 'Exploring the luxuriousness of Bali. Paradise awaits! 🌾🌿',
       popupColor: '#f5f5dc', // need to be in sync with _theme.scss
       previewImageIdx: [1, 2],
       images: [
@@ -228,7 +228,7 @@ class Constant {
     "spring-japan-2018": {
       id: 'spring-japan-2018',
       title: 'Spring Japan - 2018',
-      caption: 'Traveling with my brother has never gone this far! Sakura, we are coming!!!',
+      caption: 'Springtime adventures in Osaka, Kyoto, and Tokyo with my brother 🌸',
       popupColor: '#ffd7e8', // need to be in sync with _theme.scss
       previewImageIdx: [4, 31],
       images: [
@@ -596,7 +596,7 @@ class Constant {
     "explore-singapore-2018": {
       id: 'explore-singapore-2018',
       title: 'Explore Singapore - 2018',
-      caption: 'First time abroad with my close friends! Excited to the max!!',
+      caption: 'First time abroad with my close friends, exploring the wonders of Singapore! 🎢',
       popupColor: '#f0f0f0', // need to be in sync with _theme.scss
       previewImageIdx: [0, 2],
       images: [