Merge pull request #6860 from Achintha444/chip-update

Changed icons in the "Applications" sections to oxygen-ui
wso2 · Sep 3, 2024 · 4b7ce35 · 4b7ce35
2 parents d464e7b + 0e14564
commit 4b7ce35
Show file tree

Hide file tree

Showing 7 changed files with 152 additions and 47 deletions.
diff --git a/.changeset/loud-ravens-boil.md b/.changeset/loud-ravens-boil.md
@@ -0,0 +1,7 @@
+---
+"@wso2is/console": patch
+"@wso2is/react-components": patch
+"@wso2is/admin.applications.v1": patch
+---
+
+Changed icons in the "Applications" sections to oxygen-ui
diff --git a/features/admin.applications.v1/pages/applications.scss b/features/admin.applications.v1/pages/applications.scss
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.my-account-settings-button {
+    padding: 11px !important;
+}
+
+.my-account-title {
+    margin-bottom: 0.25rem !important;
+    display: flex !important;
+}
diff --git a/features/admin.applications.v1/pages/applications.tsx b/features/admin.applications.v1/pages/applications.tsx
@@ -16,6 +16,7 @@
  * under the License.
  */
 
+import { GearIcon } from "@oxygen-ui/react-icons";
 import { Show } from "@wso2is/access-control";
 import {
     AdvancedSearchWithBasicFilters,
@@ -73,6 +74,7 @@ import { useGetApplication } from "../api/use-get-application";
 import { ApplicationList } from "../components/application-list";
 import { ApplicationManagementConstants } from "../constants";
 import { ApplicationAccessTypes, ApplicationListInterface, ApplicationListItemInterface } from "../models";
+import "./applications.scss";
 
 const APPLICATIONS_LIST_SORTING_OPTIONS: DropdownItemProps[] = [
     {
@@ -443,43 +445,45 @@ const ApplicationsPage: FunctionComponent<ApplicationsPageInterface> = (
                                 floated="left"
                                 mobile={ 16 }
                                 computer={ 9 }
+                                verticalAlign="middle"
                             >
                                 <GenericIcon
                                     icon={ getGeneralIcons().myAccountSolidIcon }
-                                    className="mt-1"
                                     floated="left"
-                                    size="tiny"
+                                    size="mini"
                                     spaced="right"
                                     verticalAlign="middle"
                                     inline
                                     square
                                     transparent
                                 />
-                                <List.Header
-                                    data-componentid="application-consumer-account-link-title"
-                                    className="my-account-title mb-1"
-                                >
-                                    { t("applications:myaccount.title") }
-                                    {
-                                        applicationConfig?.advancedConfigurations?.showMyAccountStatus && (
-                                            <Icon
-                                                color={ isMyAccountEnabled ? "green":"grey" }
-                                                name={ isMyAccountEnabled ? "check circle" : "minus circle" }
-                                                className="middle aligned ml-1"
-                                            />
-                                        )
-                                    }
-                                </List.Header>
-                                <List.Description
-                                    data-componentid="application-consumer-account-link-description"
-                                >
-                                    { t("applications:myaccount.description") }
-                                    <DocumentationLink
-                                        link={ getLink("develop.applications.myaccount.learnMore") }
+                                <List.Content verticalAlign="middle">
+                                    <List.Header
+                                        data-componentid="application-consumer-account-link-title"
+                                        className="my-account-title"
+                                    >
+                                        { t("applications:myaccount.title") }
+                                        {
+                                            applicationConfig?.advancedConfigurations?.showMyAccountStatus && (
+                                                <Icon
+                                                    color={ isMyAccountEnabled ? "green" : "grey" }
+                                                    name={ isMyAccountEnabled ? "check circle" : "minus circle" }
+                                                    className="middle aligned ml-1"
+                                                />
+                                            )
+                                        }
+                                    </List.Header>
+                                    <List.Description
+                                        data-componentid="application-consumer-account-link-description"
                                     >
-                                        { t("common:learnMore") }
-                                    </DocumentationLink>
-                                </List.Description>
+                                        { t("applications:myaccount.description") }
+                                        <DocumentationLink
+                                            link={ getLink("develop.applications.myaccount.learnMore") }
+                                        >
+                                            { t("common:learnMore") }
+                                        </DocumentationLink>
+                                    </List.Description>
+                                </List.Content>
                             </Grid.Column>
                             { isMyAccountEnabled ? (
                                 <Popup
@@ -511,10 +515,12 @@ const ApplicationsPage: FunctionComponent<ApplicationsPageInterface> = (
                                     <Popup
                                         trigger={ (
                                             <Button
+                                                className="my-account-settings-button"
                                                 data-componentid="navigate-to-my-account-settings-button"
-                                                icon="setting"
                                                 onClick={ (): void => navigateToMyAccountSettings() }
-                                            />
+                                            >
+                                                <GearIcon />
+                                            </Button>
                                         ) }
                                         content={ t("common:settings") }
                                         position="top center"
@@ -546,12 +552,13 @@ const ApplicationsPage: FunctionComponent<ApplicationsPageInterface> = (
                                 !applicationDisabledFeatures?.includes(
                                     ApplicationManagementConstants.FEATURE_DICTIONARY.get("APPLICATIONS_SETTINGS")
                                 ) &&
-                                (<Button
-                                    data-componentid={ "applications-settings-button" }
-                                    icon="setting"
-                                    onClick={ handleSettingsButton }
-                                >
-                                </Button>)
+                                (
+                                    <Button
+                                        data-componentid={ "applications-settings-button" }
+                                        icon={ <GearIcon /> }
+                                        onClick={ handleSettingsButton }
+                                    />
+                                )
                             }
                         </Show>
                         <Show
@@ -575,12 +582,13 @@ const ApplicationsPage: FunctionComponent<ApplicationsPageInterface> = (
                             !applicationDisabledFeatures?.includes(
                                 ApplicationManagementConstants.FEATURE_DICTIONARY.get("APPLICATIONS_SETTINGS")
                             ) &&
-                            (<Button
-                                data-componentid={ "applications-settings-button" }
-                                icon="setting"
-                                onClick={ handleSettingsButton }
-                            >
-                            </Button>)
+                            (
+                                <Button
+                                    data-componentid={ "applications-settings-button" }
+                                    icon={ <GearIcon /> }
+                                    onClick={ handleSettingsButton }
+                                />
+                            )
                         }
                     </Show>
 

diff --git a/modules/react-components/src/components/input/copy-input-field.scss b/modules/react-components/src/components/input/copy-input-field.scss
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.copy-input-action {
+    box-shadow: none !important;
+}
diff --git a/modules/react-components/src/components/input/copy-input-field.tsx b/modules/react-components/src/components/input/copy-input-field.tsx
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ * Copyright (c) 2020-2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -16,12 +16,14 @@
  * under the License.
  */
 
+import { CopyIcon } from "@oxygen-ui/react-icons";
 import { IdentifiableComponentInterface, TestableComponentInterface } from "@wso2is/core/models";
 import { CommonUtils } from "@wso2is/core/utils";
 import classNames from "classnames";
 import React, { FunctionComponent, MouseEvent, ReactElement, useEffect, useRef, useState } from "react";
 import { Button, Icon, Input } from "semantic-ui-react";
 import { Popup } from "../popup";
+import "./copy-input-field.scss";
 
 /**
  * Copy to clipboard input field props.
@@ -117,7 +119,7 @@ export const CopyInputField: FunctionComponent<CopyInputFieldPropsInterface> = (
                     data-tooltip={ copied ? "Copied!" : "Copy to clipboard" }
                     data-inverted=""
                     className="copy-input-action"
-                    icon="copy"
+                    icon={ CopyIcon }
                     type="button"
                     onMouseEnter={ () => {
                         setCopied(false);

diff --git a/modules/react-components/src/components/input/url-input.scss b/modules/react-components/src/components/input/url-input.scss
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.remove-url-button {
+    padding: 0;
+    margin-left: 5.6px;
+    margin-top: 1px;
+}
+
+.url-label-chip {
+    display: inline-flex !important;
+    align-items: center;
+}
+
+.add-button {
+    box-shadow: none !important;
+}
diff --git a/modules/react-components/src/components/input/url-input.tsx b/modules/react-components/src/components/input/url-input.tsx
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) 2020-2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -16,6 +16,8 @@
  * under the License.
  */
 
+import IconButton from "@oxygen-ui/react/IconButton";
+import { PlusIcon, XMarkIcon } from "@oxygen-ui/react-icons";
 import { IdentifiableComponentInterface, TestableComponentInterface } from "@wso2is/core/models";
 import { URLUtils } from "@wso2is/core/utils";
 import classNames from "classnames";
@@ -26,6 +28,7 @@ import { LinkButton } from "../button";
 import { LabelWithPopup } from "../label";
 import { Popup } from "../popup";
 import { Hint } from "../typography";
+import "./url-input.scss";
 
 export interface URLInputPropsInterface extends IdentifiableComponentInterface, TestableComponentInterface {
     addURLTooltip?: string;
@@ -753,12 +756,15 @@ export const URLInput: FunctionComponent<URLInputPropsInterface> = (
      */
     const urlRemoveButtonWidget = (url: string): ReactElement => {
         return (
-            <Icon
-                name="delete"
+            <IconButton
+                size="small"
+                className="remove-url-button"
                 onClick={ () => removeValue(url) }
                 data-componentid={ `${ componentId }-${ url }-delete-button` }
                 data-testid={ `${ testId }-${ url }-delete-button` }
-            />
+            >
+                <XMarkIcon />
+            </IconButton>
         );
     };
 
@@ -772,6 +778,7 @@ export const URLInput: FunctionComponent<URLInputPropsInterface> = (
                         { /*Section that contains | https://origin X |*/ }
                         { /*Chip widget with protocol highlights*/ }
                         <Label
+                            className="url-label-chip"
                             data-componentid={ `${ componentId }-${ url }` }
                             data-testid={ `${ testId }-${ url }` }
                         >
@@ -853,8 +860,9 @@ export const URLInput: FunctionComponent<URLInputPropsInterface> = (
                                     (
                                         <Button
                                             onClick={ (e) => addFormButton(e) }
-                                            icon="add"
+                                            icon={ PlusIcon }
                                             type="button"
+                                            className="add-button"
                                             disabled={ readOnly || disabled || (!allowEmptyValues && !changeUrl) }
                                             data-componentid={ `${ componentId }-add-button` }
                                             data-testid={ `${ testId }-add-button` }
@@ -900,6 +908,7 @@ export const URLInput: FunctionComponent<URLInputPropsInterface> = (
                                     <Grid.Column mobile={ 16 } tablet={ 16 } computer={ computerSize }>
                                         <p>
                                             <Label
+                                                className="url-label-chip"
                                                 data-componentid={ `${ componentId }-${ url }` }
                                                 data-testid={ `${ testId }-${ url }` }
                                             >