fix(sdk): update apsara v1 button props (#869)

* feat: update v1 button props

* refactor: change css vars according to new version

---------

Co-authored-by: paanSinghCoder <gaurav3017@gmail.com>

Author: rsbh

sdks/js/packages/core/package.json

@@ -61,7 +61,7 @@
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@radix-ui/react-icons": "^1.3.0",
-    "@raystack/apsara": "^0.25.0",
+    "@raystack/apsara": "^0.30.1",
     "@raystack/eslint-config": "workspace:^",
     "@raystack/frontier-tsconfig": "workspace:^",
     "@size-limit/preset-small-lib": "^8.2.6",
@@ -104,7 +104,7 @@
     "yup": "^1.2.0"
   },
   "peerDependencies": {
-    "@raystack/apsara": ">=0.23.0",
+    "@raystack/apsara": ">=0.30.0",
     "react": "^18.2.0"
   },
   "peerDependenciesMeta": {

sdks/js/packages/core/react/components/organization/api-keys/add.tsx

@@ -220,7 +220,8 @@ export const AddServiceAccount = () => {
           <Separator />
           <Flex justify="end" className={styles.addDialogFormBtnWrapper}>
             <Button
-              variant="primary"
+              variant="solid"
+              color="accent"
               size="normal"
               type="submit"
               data-test-id="frontier-sdk-add-service-account-btn"

sdks/js/packages/core/react/components/organization/api-keys/columns.tsx

@@ -23,7 +23,7 @@ export const getColumns = ({
             }}
             style={{
               textDecoration: 'none',
-              color: 'var(--rs-color-text-base-primary)'
+              color: 'var(--rs-color-foreground-base-primary)'
             }}
           >
             {getValue()}

sdks/js/packages/core/react/components/organization/api-keys/delete.tsx

@@ -79,15 +79,17 @@ export const DeleteServiceAccount = () => {
           gap={'medium'}
         >
           <Button
-            variant="secondary"
+            variant="outline"
+            color="neutral"
             size="normal"
             data-test-id="frontier-sdk-delete-service-account-cancel-btn"
             onClick={onCancel}
           >
             Cancel
           </Button>
           <Button
-            variant="danger"
+            variant="solid"
+            color="danger"
             size="normal"
             data-test-id="frontier-sdk-delete-service-account-confirm-btn"
             loading={isLoading}

sdks/js/packages/core/react/components/organization/api-keys/index.tsx

@@ -40,7 +40,8 @@ const NoServiceAccounts = ({
         primaryAction={
           <Button
             data-test-id="frontier-sdk-new-service-account-btn"
-            variant="secondary"
+            variant="outline"
+            color="neutral"
             onClick={() => navigate({ to: '/api-keys/add' })}
           >
             Create new service account
@@ -152,7 +153,8 @@ const ServiceAccountsTable = ({
             <Skeleton height={'32px'} width={'64px'} />
           ) : (
             <Button
-              variant="primary"
+              variant="solid"
+              color="accent"
               data-test-id="frontier-sdk-add-service-account-btn"
               onClick={() => navigate({ to: '/api-keys/add' })}
             >

sdks/js/packages/core/react/components/organization/api-keys/service-user/delete.tsx

@@ -91,15 +91,17 @@ export const DeleteServiceAccountKey = () => {
           gap={'medium'}
         >
           <Button
-            variant="secondary"
+            variant="outline"
+            color="neutral"
             size="normal"
             data-test-id="frontier-sdk-revoke-service-account-key-cancel-btn"
             onClick={onCancel}
           >
             Cancel
           </Button>
           <Button
-            variant="danger"
+            variant="solid"
+            color="danger"
             size="normal"
             data-test-id="frontier-sdk-revoke-service-account-key-confirm-btn"
             loading={isLoading}

sdks/js/packages/core/react/components/organization/api-keys/service-user/index.tsx

@@ -50,7 +50,8 @@ const Headings = ({
         <Flex justify={'between'}>
           <Text size={6}>{name}</Text>
           <Button
-            variant={'secondary'}
+            variant="outline"
+            color="neutral"
             onClick={openProjectsPage}
             data-test-id="frontier-sdk-service-account-manage-access-open-btn"
           >
@@ -118,7 +119,8 @@ const ServiceUserTokenItem = ({
               {token?.title}
             </Text>
             <Button
-              variant="secondary"
+              variant="outline"
+              color="neutral"
               size={'small'}
               data-test-id={`frontier-sdk-service-account-token-revoke-btn`}
               onClick={onRevokeClick}
@@ -139,7 +141,7 @@ const ServiceUserTokenItem = ({
               {encodedToken}
             </Text>
             {isCopied ? (
-              <CheckCircledIcon color="var(--rs-color-text-success-primary)" />
+              <CheckCircledIcon color="var(--rs-color-foreground-success-primary)" />
             ) : (
               <CopyIcon
                 onClick={onCopy}

sdks/js/packages/core/react/components/organization/project/members/remove.tsx

@@ -84,7 +84,8 @@ export const RemoveProjectMember = () => {
         <Flex justify="end" style={{ padding: 'var(--pd-16)' }} gap="medium">
           <Button
             size="normal"
-            variant="secondary"
+            color="neutral"
+            variant="outline"
             onClick={() => navigate({ to: '/members' })}
             data-test-id="frontier-sdk-remove-project-member-cancel-btn"
             disabled={isLoading}
@@ -93,7 +94,8 @@ export const RemoveProjectMember = () => {
           </Button>
           <Button
             size="normal"
-            variant="danger"
+            color="danger"
+            variant="solid"
             onClick={onConfirm}
             data-test-id="frontier-sdk-remove-project-member-confirm-btn"
             disabled={isLoading}