Update src/App.js

src/App.js

@@ -13,6 +13,7 @@ const HoroscopeApp = () => {
       name: "Taurus",
       dates: "April 20 - May 20",
       emoji: "🐂",
+      symbol: "♉",
       imageFile: "TAURUS.png",
     },
     {
@@ -20,6 +21,7 @@ const HoroscopeApp = () => {
       name: "Sagittarius",
       dates: "Nov 22 - Dec 21",
       emoji: "🏹",
+      symbol: "♐",
       imageFile: "SAGITTARIUS.png",
     },
     {
@@ -27,6 +29,7 @@ const HoroscopeApp = () => {
       name: "Pisces",
       dates: "Feb 19 - Mar 20",
       emoji: "🐠",
+      symbol: "♓",
       imageFile: "PISCES.png",
     },
     {
@@ -34,6 +37,7 @@ const HoroscopeApp = () => {
       name: "Libra",
       dates: "Sep 23 - Oct 22",
       emoji: "⚖️",
+      symbol: "♎",
       imageFile: "LIBRA.png",
     },
     {
@@ -41,6 +45,7 @@ const HoroscopeApp = () => {
       name: "Gemini",
       dates: "May 21 - Jun 20",
       emoji: "👯",
+      symbol: "♊",
       imageFile: "GEMINI.png",
     },
     {
@@ -48,6 +53,7 @@ const HoroscopeApp = () => {
       name: "Leo",
       dates: "Jul 23 - Aug 22",
       emoji: "🦁",
+      symbol: "♌",
       imageFile: "LEO.png",
     },
     {
@@ -55,6 +61,7 @@ const HoroscopeApp = () => {
       name: "Virgo",
       dates: "Aug 23 - Sep 22",
       emoji: "👸",
+      symbol: "♍",
       imageFile: "VIRGO.png",
     },
     {
@@ -62,6 +69,7 @@ const HoroscopeApp = () => {
       name: "Aquarius",
       dates: "Jan 20 - Feb 18",
       emoji: "🏺",
+      symbol: "♒",
       imageFile: "AQUARIUS.png",
     },
     {
@@ -69,6 +77,7 @@ const HoroscopeApp = () => {
       name: "Aries",
       dates: "Mar 21 - Apr 19",
       emoji: "🐏",
+      symbol: "♈",
       imageFile: "ARIES.png",
     },
     {
@@ -76,6 +85,7 @@ const HoroscopeApp = () => {
       name: "Cancer",
       dates: "Jun 21 - Jul 22",
       emoji: "🦀",
+      symbol: "♋",
       imageFile: "CANCER.png",
     },
     {
@@ -83,6 +93,7 @@ const HoroscopeApp = () => {
       name: "Scorpio",
       dates: "Oct 23 - Nov 21",
       emoji: "🦂",
+      symbol: "♏",
       imageFile: "SCORPIO.png",
     },
     {
@@ -90,6 +101,7 @@ const HoroscopeApp = () => {
       name: "Capricorn",
       dates: "Dec 22 - Jan 19",
       emoji: "🐐",
+      symbol: "♑",
       imageFile: "CAPRICORN.png",
     },
   ];
@@ -189,6 +201,7 @@ const HoroscopeApp = () => {
     ],
   };
 
+  // Function to get image path based on gender
   const getImagePath = (sign) => {
     if (!sign.imageFile) return null;
     return `/img/${selectedGender}/${sign.imageFile}`;
@@ -317,30 +330,40 @@ const HoroscopeApp = () => {
                         : "linear-gradient(135deg, #07090A 0%, #979999 100%)",
                   }}
                 >
+                  {/* Background layer for separation */}
                   <div
-                    className={`w-full h-full rounded-full flex items-center justify-center text-xl overflow-hidden ${
-                      isDarkMode ? "bg-gray-800" : "bg-gray-100"
+                    className={`w-full h-full rounded-full p-0.5 ${
+                      isDarkMode ? "bg-gray-900" : "bg-gray-50"
                     }`}
                   >
-                    {getImagePath(sign) ? (
-                      <img
-                        src={getImagePath(sign)}
-                        alt={sign.name}
-                        className="w-full h-full object-cover rounded-full"
-                        onError={(e) => {
-                          e.target.style.display = "none";
-                          e.target.nextSibling.style.display = "block";
-                        }}
-                      />
-                    ) : null}
-                    <span
-                      style={{ display: getImagePath(sign) ? "none" : "block" }}
+                    <div
+                      className={`w-full h-full rounded-full flex items-center justify-center text-xl overflow-hidden ${
+                        isDarkMode ? "bg-gray-800" : "bg-gray-100"
+                      }`}
                     >
-                      {sign.emoji}
-                    </span>
+                      {getImagePath(sign) ? (
+                        <img
+                          src={getImagePath(sign)}
+                          alt={sign.name}
+                          className="w-full h-full object-cover rounded-full"
+                          onError={(e) => {
+                            e.target.style.display = "none";
+                            e.target.nextSibling.style.display = "block";
+                          }}
+                        />
+                      ) : null}
+                      <span
+                        style={{
+                          display: getImagePath(sign) ? "none" : "block",
+                        }}
+                      >
+                        {sign.emoji}
+                      </span>
+                    </div>
                   </div>
                 </div>
-                <p className="text-xs font-medium mt-3 text-center">
+                <p className="text-xs font-medium mt-3 text-center flex items-center justify-center gap-1">
+                  <span className="text-sm">{sign.symbol}</span>
                   {sign.name}
                 </p>
               </div>
@@ -408,29 +431,38 @@ const HoroscopeApp = () => {
                 background: "linear-gradient(135deg, #1D3249 0%, #96D1E2 100%)",
               }}
             >
+              {/* Background layer for separation */}
               <div
-                className={`w-full h-full rounded-full flex items-center justify-center text-2xl overflow-hidden ${
-                  isDarkMode ? "bg-gray-800" : "bg-gray-100"
+                className={`w-full h-full rounded-full p-0.5 ${
+                  isDarkMode ? "bg-gray-900" : "bg-gray-50"
                 }`}
               >
-                {getImagePath(getCurrentSign()) ? (
-                  <img
-                    src={getImagePath(getCurrentSign())}
-                    alt={getCurrentSign()?.name}
-                    className="w-full h-full object-cover rounded-full"
-                    onError={(e) => {
-                      e.target.style.display = "none";
-                      e.target.nextSibling.style.display = "block";
-                    }}
-                  />
-                ) : null}
-                <span
-                  style={{
-                    display: getImagePath(getCurrentSign()) ? "none" : "block",
-                  }}
+                <div
+                  className={`w-full h-full rounded-full flex items-center justify-center text-2xl overflow-hidden ${
+                    isDarkMode ? "bg-gray-800" : "bg-gray-100"
+                  }`}
                 >
-                  {getCurrentSign()?.emoji}
-                </span>
+                  {getImagePath(getCurrentSign()) ? (
+                    <img
+                      src={getImagePath(getCurrentSign())}
+                      alt={getCurrentSign()?.name}
+                      className="w-full h-full object-cover rounded-full"
+                      onError={(e) => {
+                        e.target.style.display = "none";
+                        e.target.nextSibling.style.display = "block";
+                      }}
+                    />
+                  ) : null}
+                  <span
+                    style={{
+                      display: getImagePath(getCurrentSign())
+                        ? "none"
+                        : "block",
+                    }}
+                  >
+                    {getCurrentSign()?.emoji}
+                  </span>
+                </div>
               </div>
             </div>
             <div className="flex-1">
@@ -439,7 +471,7 @@ const HoroscopeApp = () => {
                 <span className="text-xl">📈</span>
               </h2>
               <div className="flex items-center gap-2">
-                <span className="text-xl">{getCurrentSign()?.emoji}</span>
+                <span className="text-xl">{getCurrentSign()?.symbol}</span>
                 <span className="font-semibold">{getCurrentSign()?.name}</span>
               </div>
             </div>