chore: add diamond icon to the upgrade button

Achintha444 · Jul 12, 2024 · 9d31ea8 · 9d31ea8
1 parent 7d26c99
commit 9d31ea8
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 17 deletions.
diff --git a/features/admin.core.v1/assets/icons/diamond.svg b/features/admin.core.v1/assets/icons/diamond.svg
diff --git a/features/admin.core.v1/components/header.scss b/features/admin.core.v1/components/header.scss
@@ -20,22 +20,15 @@
 // TODO: These values need to be changed to get from oxygen once the new version is released.
 
 $header-upgrade-btn-background: linear-gradient(
-    88deg,
-    rgba(236, 81, 97, 0.04) -3.25%,
-    rgba(248, 118, 67, 0.04) 102.62%
+    93deg,
+    rgba(224, 184, 52, 0.04) 50%,
+    rgba(181, 138, 0, 0.04) 112.88%
 );
 $header-upgrade-btn-font-weight: 700;
 $header-upgrade-btn-line-height: 20px;
-$header-upgrade-btn-border-color: rgba(255, 169, 106, 0.9);
+$header-upgrade-btn-border-color: #e0b834;
 $header-upgrade-btn-border: 1px solid $header-upgrade-btn-border-color;
-$header-upgrade-btn-text-color: radial-gradient(
-        238.39% 44.19% at 96.59% 31.25%,
-        rgba(255, 255, 255, 0.3) 0%,
-        rgba(255, 255, 255, 0) 100%
-    ),
-    radial-gradient(182.56% 75.34% at 15.68% 100%, rgba(246, 251, 34, 0.51) 0%, rgba(255, 158, 69, 0) 100%),
-    radial-gradient(137.51% 118.3% at 32.95% 0%, rgba(255, 137, 137, 0.92) 21.25%, rgba(255, 169, 106, 0.57) 88.62%),
-    radial-gradient(178.09% 220.16% at 94.89% -132.81%, #ff7a00 67.59%, rgba(255, 199, 0, 0.38) 100%);
+$header-upgrade-btn-text-color: linear-gradient(93deg, #e0b834 50%, #b58a00 112.88%);
 $header-upgrade-btn-text-fill-color: transparent;
 
 .header-upgrade-btn {
@@ -47,10 +40,15 @@ $header-upgrade-btn-text-fill-color: transparent;
     transition-delay: 0s;
 
     .oxygen-icon {
-        fill: $header-upgrade-btn-border;
-        opacity: 0.8;
-        transition: all 0.3s ease-in-out;
-        transition-delay: 0s;
+        fill: $header-upgrade-btn-border-color;
+        height: 20px;
+        width: 20px;
+        path {
+            stroke: $header-upgrade-btn-border-color;
+            stroke-width: 0.5;
+            transition: all 0.3s ease-in-out;
+            transition-delay: 0s;
+        }
     }
 
     .header-upgrade-btn-text {
@@ -69,6 +67,10 @@ $header-upgrade-btn-text-fill-color: transparent;
 
     .oxygen-icon {
         fill: var(--oxygen-palette-primary-contrastText);
+        path {
+            stroke: var(--oxygen-palette-primary-contrastText);
+            stroke-width: 0.75;
+        }
     }
 
     .header-upgrade-btn-text {

diff --git a/features/admin.core.v1/components/header.tsx b/features/admin.core.v1/components/header.tsx
@@ -44,6 +44,7 @@ import { GenericIcon, useDocumentation } from "@wso2is/react-components";
 import React, { FunctionComponent, ReactElement, ReactNode, useContext, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
+import { ReactComponent as DiamondIcon } from "../../themes/default/assets/images/icons/diamond.svg";
 import { ReactComponent as LogoutIcon } from "../../themes/default/assets/images/icons/logout-icon.svg";
 import { ReactComponent as MyAccountIcon } from "../../themes/default/assets/images/icons/user-icon.svg";
 import { ReactComponent as AskHelpIcon } from "../../themes/wso2is/assets/images/icons/ask-help-icon.svg";
@@ -260,7 +261,12 @@ export const Header: FunctionComponent<HeaderPropsInterface> = (props: HeaderPro
             window["AppUtils"].getConfig().extensions.upgradeButtonEnabled && (
             <Show when={ [] } featureId={ FeatureGateConstants.SAAS_FEATURES_IDENTIFIER }>
                 <a href={ upgradeButtonURL } target="_blank" rel="noreferrer" data-componentid="upgrade-button-link">
-                    <Button className="header-upgrade-btn" color="secondary" variant="outlined">
+                    <Button
+                        className="header-upgrade-btn"
+                        color="secondary"
+                        variant="outlined"
+                        startIcon={<DiamondIcon />}
+                    >
                         <span className="header-upgrade-btn-text">
                             { I18n.instance.t("extensions:common.upgrade") as ReactNode }
                         </span>