diff --git a/packages/console/src/components/ActionMenu/index.module.scss b/packages/console/src/components/ActionMenu/index.module.scss index c15fc239c..f00ee8290 100644 --- a/packages/console/src/components/ActionMenu/index.module.scss +++ b/packages/console/src/components/ActionMenu/index.module.scss @@ -1,30 +1,3 @@ -@use '@/scss/underscore' as _; - -.actionMenu { - display: inline-block; -} - .content { - background: var(--color-on-primary); - box-shadow: var(--shadow-light-s2); - border-radius: _.unit(2); - position: absolute; - min-width: 180px; - - .title { - padding: _.unit(5) _.unit(4) _.unit(2) _.unit(4); - font: var(--font-body-medium); - border-bottom: 1px solid var(--color-border); - } -} - -.overlay { - background: transparent; - position: fixed; - inset: 0; -} - -ul.actionList { - margin: 0; - padding: _.unit(2) 0; + min-width: 200px; } diff --git a/packages/console/src/components/ActionMenu/index.tsx b/packages/console/src/components/ActionMenu/index.tsx index 02bc734be..5978be90f 100644 --- a/packages/console/src/components/ActionMenu/index.tsx +++ b/packages/console/src/components/ActionMenu/index.tsx @@ -18,7 +18,7 @@ const ActionMenu = ({ children, buttonProps, title }: Props) => { const anchorReference = useRef(null); return ( -
+
{ title={title} anchorRef={anchorReference} isOpen={isOpen} + className={styles.content} onClose={() => { setIsOpen(false); }} diff --git a/packages/console/src/components/ActionMenu/use-position.ts b/packages/console/src/components/ActionMenu/use-position.ts deleted file mode 100644 index 462f010a8..000000000 --- a/packages/console/src/components/ActionMenu/use-position.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { RefObject, useCallback, useLayoutEffect, useState } from 'react'; - -type Position = { - left: number; - top: number; -}; - -const safePadding = 20; -const overlayPadding = 4; - -export default function usePosition( - anchorReference: RefObject, - overlayReference: RefObject -) { - const [position, setPosition] = useState({ left: 0, top: 0 }); - - const updatePosition = useCallback(() => { - if (anchorReference.current && overlayReference.current) { - const anchor = anchorReference.current.getBoundingClientRect(); - const overlay = overlayReference.current.getBoundingClientRect(); - const isTopSide = - anchor.y + anchor.height + overlay.height > window.innerHeight - safePadding; - const isLeftSide = anchor.x + overlay.width > window.innerWidth - safePadding; - const left = isLeftSide ? anchor.x + anchor.width - overlay.width : anchor.x; - const top = isTopSide - ? anchor.y - overlay.height - overlayPadding - : anchor.y + anchor.height + overlayPadding; - setPosition({ left, top }); - } - }, [anchorReference, overlayReference]); - - useLayoutEffect(() => { - updatePosition(); - window.addEventListener('resize', updatePosition); - - return () => { - window.removeEventListener('resize', updatePosition); - }; - }, [updatePosition]); - - return { position, mutate: updatePosition }; -} diff --git a/packages/console/src/components/CopyToClipboard/index.module.scss b/packages/console/src/components/CopyToClipboard/index.module.scss index 9ceb14e67..3961f5ee3 100644 --- a/packages/console/src/components/CopyToClipboard/index.module.scss +++ b/packages/console/src/components/CopyToClipboard/index.module.scss @@ -7,11 +7,16 @@ font: var(--font-body-medium); cursor: default; - &.contained { + &.contained, + &.border { padding: _.unit(2) _.unit(3); background: var(--color-inverse-on-surface); } + &.border { + border: 1px solid var(--color-border); + } + .row { display: flex; align-items: center; diff --git a/packages/console/src/components/CopyToClipboard/index.tsx b/packages/console/src/components/CopyToClipboard/index.tsx index ecf5edff9..5ec8f4a36 100644 --- a/packages/console/src/components/CopyToClipboard/index.tsx +++ b/packages/console/src/components/CopyToClipboard/index.tsx @@ -8,7 +8,7 @@ import * as styles from './index.module.scss'; type Props = { value: string; className?: string; - variant?: 'text' | 'contained'; + variant?: 'text' | 'contained' | 'border'; }; const CopyIcon = forwardRef>( diff --git a/packages/console/src/components/Dropdown/DropdownItem.module.scss b/packages/console/src/components/Dropdown/DropdownItem.module.scss index 1655d0616..49f81863c 100644 --- a/packages/console/src/components/Dropdown/DropdownItem.module.scss +++ b/packages/console/src/components/Dropdown/DropdownItem.module.scss @@ -21,6 +21,6 @@ .icon { display: flex; align-items: center; - margin-right: _.unit(5); + margin-right: _.unit(4); } } diff --git a/packages/console/src/components/Dropdown/index.module.scss b/packages/console/src/components/Dropdown/index.module.scss index 6976bb02e..71ab437df 100644 --- a/packages/console/src/components/Dropdown/index.module.scss +++ b/packages/console/src/components/Dropdown/index.module.scss @@ -15,8 +15,8 @@ } .title { - padding: _.unit(4) _.unit(4) 0 _.unit(4); - font: var(--font-body-medium); + padding: _.unit(4) _.unit(3) 0 _.unit(3); + font: var(--font-subhead-cap-small); color: var(--color-caption); } } diff --git a/packages/console/src/components/Dropdown/index.tsx b/packages/console/src/components/Dropdown/index.tsx index ec0e7466f..5654e927f 100644 --- a/packages/console/src/components/Dropdown/index.tsx +++ b/packages/console/src/components/Dropdown/index.tsx @@ -14,9 +14,18 @@ type Props = { onClose?: () => void; anchorRef: RefObject; isFullWidth?: boolean; + className?: string; }; -const Dropdown = ({ children, title, isOpen, onClose, anchorRef, isFullWidth }: Props) => { +const Dropdown = ({ + children, + title, + isOpen, + onClose, + anchorRef, + isFullWidth, + className, +}: Props) => { const overlayRef = useRef(null); const { position, mutate } = usePosition(anchorRef, overlayRef); @@ -34,7 +43,7 @@ const Dropdown = ({ children, title, isOpen, onClose, anchorRef, isFullWidth }: } : { visibility: 'hidden' }, }} - className={classNames(styles.content, position?.isOnTop && styles.onTop)} + className={classNames(styles.content, className, position?.isOnTop && styles.onTop)} overlayClassName={styles.overlay} onRequestClose={onClose} onAfterOpen={mutate} diff --git a/packages/console/src/components/TabNav/TabNavLink.module.scss b/packages/console/src/components/TabNav/TabNavLink.module.scss index 4f9acd3c3..daf9022e1 100644 --- a/packages/console/src/components/TabNav/TabNavLink.module.scss +++ b/packages/console/src/components/TabNav/TabNavLink.module.scss @@ -13,7 +13,7 @@ .selected { color: var(--color-primary); - border-bottom: 1px solid var(--color-primary); + border-bottom: 2px solid var(--color-primary); margin-bottom: -1px; a { diff --git a/packages/console/src/components/TabNav/index.module.scss b/packages/console/src/components/TabNav/index.module.scss index 498b30f52..26c99e0a4 100644 --- a/packages/console/src/components/TabNav/index.module.scss +++ b/packages/console/src/components/TabNav/index.module.scss @@ -1,7 +1,7 @@ @use '@/scss/underscore' as _; .nav { - border-bottom: 1px solid var(--color-border); + border-bottom: 1px solid var(--color-divider); display: flex; margin: _.unit(1) 0; } diff --git a/packages/console/src/icons/Delete.tsx b/packages/console/src/icons/Delete.tsx index 1635a014a..b2e2167f4 100644 --- a/packages/console/src/icons/Delete.tsx +++ b/packages/console/src/icons/Delete.tsx @@ -1,16 +1,9 @@ -import React, { SVGProps } from 'react'; +import React from 'react'; -const Delete = (props: SVGProps) => ( - +const Delete = () => ( + diff --git a/packages/console/src/icons/Reset.tsx b/packages/console/src/icons/Reset.tsx index def60a3bf..0bb6cb17c 100644 --- a/packages/console/src/icons/Reset.tsx +++ b/packages/console/src/icons/Reset.tsx @@ -1,16 +1,9 @@ -import React, { SVGProps } from 'react'; +import React from 'react'; -const Reset = (props: SVGProps) => ( - +const Reset = () => ( + diff --git a/packages/console/src/pages/ApplicationDetails/index.tsx b/packages/console/src/pages/ApplicationDetails/index.tsx index a6b590391..625b14d0a 100644 --- a/packages/console/src/pages/ApplicationDetails/index.tsx +++ b/packages/console/src/pages/ApplicationDetails/index.tsx @@ -108,7 +108,11 @@ const ApplicationDetails = () => { title="admin_console.application_details.authorization_endpoint" className={styles.textField} > - + { const AdvancedSettingsPage = oidcConfig && ( <> - + - + ); diff --git a/packages/phrases/src/locales/en.ts b/packages/phrases/src/locales/en.ts index bc63f7a01..c8dec5cb0 100644 --- a/packages/phrases/src/locales/en.ts +++ b/packages/phrases/src/locales/en.ts @@ -167,7 +167,7 @@ const translation = { token_endpoint: 'Token Endpoint', user_info_endpoint: 'User Info Endpoint', save_changes: 'Save Changes', - more_options: 'More Options', + more_options: 'MORE OPTIONS', options_delete: 'Delete', reminder: 'Reminder', delete_description: @@ -190,7 +190,7 @@ const translation = { api_resource_details: { back_to_api_resources: 'Back to my API resources', check_help_guide: 'Check Help Guide', - more_options: 'More Options', + more_options: 'MORE OPTIONS', options_delete: 'Delete', settings: 'Settings', save_changes: 'Save Changes', diff --git a/packages/phrases/src/locales/zh-cn.ts b/packages/phrases/src/locales/zh-cn.ts index 04d4dd1b3..3e9d0b6f6 100644 --- a/packages/phrases/src/locales/zh-cn.ts +++ b/packages/phrases/src/locales/zh-cn.ts @@ -165,7 +165,7 @@ const translation = { token_endpoint: 'Token Endpoint', user_info_endpoint: 'User Info Endpoint', save_changes: 'Save Changes', - more_options: 'More Options', + more_options: 'MORE OPTIONS', options_delete: 'Delete', reminder: 'Reminder', delete_description: @@ -188,7 +188,7 @@ const translation = { api_resource_details: { back_to_api_resources: 'Back to my API resources', check_help_guide: 'Check Help Guide', - more_options: 'More Options', + more_options: 'MORE OPTIONS', options_delete: 'Delete', settings: 'Settings', save_changes: 'Save Changes',