wip

package.json

@@ -46,7 +46,7 @@
   "dependencies": {
     "@apollo/client": "^3.8.1",
     "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
-    "@bosonprotocol/react-kit": "^0.36.0-alpha.6",
+    "@bosonprotocol/react-kit": "^0.36.0-alpha.9",
     "@bosonprotocol/roblox-sdk": "^1.0.0-alpha.14",
     "@davatar/react": "^1.10.4",
     "@ethersproject/address": "^5.6.1",

src/components/currencyInputPanel/SwapCurrencyInputPanel.tsx

@@ -167,7 +167,7 @@ const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
   }
 
   path {
-    stroke: ${({ selected }) => (selected ? colors.primary : colors.white)};
+    stroke: ${({ selected }) => (selected ? colors.green : colors.white)};
     stroke-width: 2px;
   }
 `;

src/components/detail/Detail.style.tsx

@@ -489,7 +489,7 @@ export const RaiseProblemButton = styled(Button)`
     padding: 0.75rem 1rem;
 
     font-weight: 600;
-    color: ${colors.accent};
+    color: ${colors.violet};
     cursor: pointer;
     transition: all 150ms ease-in-out;
     &:hover:not(:disabled) {

src/components/detail/DetailWidget/ExchangeDetailWidget.tsx

@@ -327,7 +327,6 @@ export const ExchangeDetailWidget: React.FC<ExchangeDetailWidgetProps> = ({
                 data-config-id={config.envConfig.configId}
                 data-account={address}
                 data-with-external-signer="true"
-                withBosonStyle
                 style={{ width: "100%" }}
               >
                 <span>Redeem</span>

src/components/disputeResolver/ManageDisputes/DisputesTable.tsx

@@ -173,7 +173,7 @@ export default function DisputesTable({ disputes }: Props) {
               {emailAddress && (
                 <BosonButton
                   type="button"
-                  variant="accentInvertedNoBorder"
+                  variant="accentInverted"
                   size="small"
                   style={{
                     whiteSpace: "pre"

src/components/error/SimpleError.tsx

@@ -28,7 +28,7 @@ export default function SimpleError({
       padding="1.5rem"
       {...rest}
     >
-      <Warning color={colors.darkOrange} size={16} />
+      <Warning color={colors.orangeDark} size={16} />
       {children ? (
         children
       ) : (

src/components/exchange/Exchange.tsx

@@ -242,6 +242,7 @@ export default function Exchange({
     <ExchangeCardWrapper $isCustomStoreFront={!!isCustomStoreFront}>
       <ExchangeCard
         onCardClick={handleOnCardClick}
+        isConnected={!!address}
         dataCard="exchange-card"
         id={offer.id}
         title={offer.metadata?.name || ""}

src/components/footer/Footer.tsx

@@ -108,7 +108,7 @@ const NavigationLinks = styled.nav<INavigationLinks>`
     color: var(--footerTextColor);
   }
   a:hover {
-    color: ${colors.accent};
+    color: ${colors.violet};
   }
 
   ${breakpoint.xs} {

src/components/modal/components/DisputeTable/DisputeTable.tsx

@@ -31,7 +31,7 @@ const TableElementContainer = styled.tr`
   position: relative;
   &:after {
     position: absolute;
-    background: ${colors.darkGreyTimeStamp};
+    background: ${colors.greyLight};
     content: "";
     left: 0;
     bottom: 0;

src/components/modal/components/Explore/Collections/CollectionsCard.tsx

@@ -18,7 +18,7 @@ const CardContainer = styled.div<{
   $isUpperCardBgColorDefined: boolean;
 }>`
   position: relative;
-  background: ${colors.lightGrey2};
+  background: ${colors.greyLight};
   display: flex;
   cursor: pointer;
   flex-direction: column;
@@ -40,7 +40,7 @@ const ImagesContainer = styled.div`
   display: flex;
   padding: 1rem;
   gap: 1rem;
-  background: ${colors.lightGrey2};
+  background: ${colors.greyLight};
   height: 13rem;
   max-height: 13rem;
 `;

src/components/modal/components/Transactions/TransactionSubmittedModal/TransactionSubmittedModal.tsx

@@ -68,9 +68,7 @@ export default function TransactionSubmittedModal({
         </Typography>
       </a>
 
-      <StyledButton onClick={hideModal} withBosonStyle>
-        Close
-      </StyledButton>
+      <StyledButton onClick={hideModal}>Close</StyledButton>
     </Grid>
   );
 }

src/components/offer/ExchangeStatuses.tsx

@@ -209,7 +209,7 @@ const StatusToComponent = (
       [exchanges.ExtendedExchangeState.NotRedeemableYet]: (
         <Status
           $color={colors.greyDark}
-          $background={colors.darkOrange}
+          $background={colors.orangeDark}
           $size={size}
           style={style}
           className="status"

src/components/seller/exchanges/SellerAction.tsx

@@ -55,7 +55,7 @@ export const SellerResolveDisputeButton = ({
   if (!exchange || status !== "Resolving") {
     return (
       <BosonButton
-        variant="accentInvertedNoBorder"
+        variant="accentInverted"
         size="small"
         onClick={() => {
           if (exchange?.id) {
@@ -107,7 +107,7 @@ export const SellerActionButton = ({
   return (
     <>
       <BosonButton
-        variant="accentInvertedNoBorder"
+        variant="accentInverted"
         size="small"
         onClick={() => {
           if (exchange?.id) {
@@ -119,7 +119,7 @@ export const SellerActionButton = ({
       </BosonButton>
       {status === subgraph.ExchangeState.COMMITTED && (
         <StyledBosonButton
-          variant="accentInvertedNoBorder"
+          variant="accentInverted"
           size="small"
           disabled={!sellerRoles?.isAssistant}
           tooltip="This action is restricted to only the assistant wallet"

src/components/step/MultiSteps.tsx

@@ -44,7 +44,7 @@ export default function MultiSteps({
           <ArrowLeft
             size={32}
             style={{ cursor: active && callback ? "pointer" : "not-allowed" }}
-            color={active === 0 ? colors.lightArrowColor : colors.greyDark}
+            color={active === 0 ? colors.greyLight2 : colors.greyDark}
             onClick={() => {
               if (active && callback) {
                 callback(active - 1);
@@ -110,9 +110,7 @@ export default function MultiSteps({
         <Grid alignItems="flex-end" width="auto">
           <ArrowRight
             size={32}
-            color={
-              isRightArrowEnabled ? colors.greyDark : colors.lightArrowColor
-            }
+            color={isRightArrowEnabled ? colors.greyDark : colors.greyLight2}
             style={{ cursor: isRightArrowEnabled ? "pointer" : "not-allowed" }}
             onClick={() => {
               if (

src/components/ui/BosonButton.tsx

@@ -67,7 +67,7 @@ function BosonButton(props: IBosonButton) {
       {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
       {/* @ts-ignore */}
       <Wrapper {...wrapperParams}>
-        <StyledBosonButton {...restProps} disabled={disabled} withBosonStyle>
+        <StyledBosonButton {...restProps} disabled={disabled}>
           <ChildWrapperButton data-child-wrapper-button>
             {props.children}
           </ChildWrapperButton>

src/pages/chat/components/ExchangeSidePreview.tsx

@@ -272,7 +272,7 @@ const getOfferDetailData = (
         ) : (
           <Typography
             tag="p"
-            color={colors.accent}
+            color={colors.violet}
             fontSize={fontSizeExchangePolicy}
             alignItems="center"
           >

src/pages/chat/components/MessageSeparator.tsx

@@ -14,7 +14,7 @@ const Separator = styled.div`
   z-index: ${zIndex.Default};
   div:nth-of-type(1) {
     width: max-content;
-    background-color: ${colors.darkGreyTimeStamp};
+    background-color: ${colors.greyLight};
     padding: 0.25rem 1rem 0.25rem 1rem;
     display: block;
     margin: 0 auto;
@@ -42,7 +42,7 @@ const Separator = styled.div`
   div:nth-of-type(2) {
     width: calc(100% - 2.5rem);
     height: 0.125rem;
-    background-color: ${colors.darkGreyTimeStamp};
+    background-color: ${colors.greyLight};
     z-index: ${zIndex.Default};
     position: relative;
     margin-left: auto;

src/pages/common/OfferFullDescription.tsx

@@ -77,7 +77,7 @@ export const OfferFullDescription: React.FC<OfferFullDescriptionProps> = (
         defaultCurrencyTicker: CONFIG.defaultCurrency.ticker,
         licenseTemplate: CONFIG.rNFTLicenseTemplate,
         minimumDisputeResolutionPeriodDays: CONFIG.minimumDisputePeriodInDays,
-        walletConnectProjectId: CONFIG.walletConnect.projectId,
+        // walletConnectProjectId: CONFIG.walletConnect.projectId,
         ipfsProjectId: CONFIG.infuraProjectId,
         ipfsProjectSecret: CONFIG.infuraProjectSecret,
         contactSellerForExchangeUrl: "",

src/pages/create-product/congratulations/Congratulations.tsx

@@ -267,7 +267,7 @@ export const Congratulations: React.FC<CongratulationsProps> = ({
               text="Provide funds  in the seller pool for your offer to go live. Funds in the pool will apply to all your products."
               cta={
                 <Button
-                  themeVal="bosonPrimary"
+                  themeVal="primary"
                   onClick={() => {
                     navigateTo({
                       pathname: getSellerCenterPath("Finances")

src/pages/create-product/congratulations/CreateProductCongratulations.tsx

@@ -225,7 +225,7 @@ export const CreateProductCongratulations: React.FC<
               text="You must provide funds to cover your seller deposit. For multiple products you can do all at once."
               cta={
                 <Button
-                  themeVal="bosonPrimary"
+                  themeVal="primary"
                   onClick={() => {
                     navigateTo({
                       pathname: getSellerCenterPath("Finances")

src/pages/custom-store/styles.tsx

@@ -9,7 +9,7 @@ export const Section = styled.div`
   line-height: 0.945rem;
   text-transform: uppercase;
   padding: 0.8125rem 0;
-  color: ${colors.grey3};
+  color: ${colors.greyLight4};
 `;
 
 export const FieldTitle = styled.div`

src/pages/dispute-centre/RaiseDisputePage.tsx

@@ -213,9 +213,7 @@ function RaiseDisputePage() {
           <Grid alignItems="center" style={{ flex: "1 1 0" }}>
             <ArrowLeft
               size={32}
-              color={
-                currentStep === 0 ? colors.lightArrowColor : colors.greyDark
-              }
+              color={currentStep === 0 ? colors.greyLight2 : colors.greyDark}
               onClick={() => {
                 goToViewMode(
                   ViewMode.DAPP,

src/pages/sell/landing/Card.tsx

@@ -6,7 +6,7 @@ import { Typography } from "../../../components/ui/Typography";
 import { colors } from "../../../lib/styles/colors";
 
 const StyledGrid = styled(Grid)`
-  background: ${colors.lightGrey2};
+  background: ${colors.greyLight};
   padding: 1.5rem;
   color: initial;
   &:hover {