From dae72e7009014ae11761dce2a5f2fc26d1a7b8aa Mon Sep 17 00:00:00 2001 From: Red J Adaya Date: Wed, 18 Sep 2024 13:38:17 +0800 Subject: [PATCH] more on button refactor (#388) - Removed opacity for hover effect. Now uses a brighter variant of color - Updated other Button usages --- frontend/app/block/blockframe.tsx | 3 - frontend/app/element/button.less | 108 +++++++++++++++---------- frontend/app/element/button.tsx | 68 +++++++++------- frontend/app/modals/modal.tsx | 16 +--- frontend/app/modals/tos.tsx | 4 +- frontend/app/modals/typeaheadmodal.tsx | 2 +- frontend/app/tab/tab.less | 7 +- frontend/app/tab/tab.tsx | 2 +- frontend/app/tab/tabbar.tsx | 2 +- frontend/app/view/waveai/waveai.less | 7 -- 10 files changed, 111 insertions(+), 108 deletions(-) diff --git a/frontend/app/block/blockframe.tsx b/frontend/app/block/blockframe.tsx index 1ee2c8ed4..664ad2859 100644 --- a/frontend/app/block/blockframe.tsx +++ b/frontend/app/block/blockframe.tsx @@ -348,9 +348,6 @@ const ConnStatusOverlay = React.memo( - {/* */} ) : null} diff --git a/frontend/app/element/button.less b/frontend/app/element/button.less index 3e1772365..8d74b84b9 100644 --- a/frontend/app/element/button.less +++ b/frontend/app/element/button.less @@ -22,46 +22,45 @@ user-select: none; font-size: 14px; font-weight: normal; - opacity: 0.8; - - &:hover { - opacity: 1; - } + transition: all 0.3s ease; &.solid { &.green { - color: var(--button-green-text-color); - background-color: var(--button-green-bg); - border: 1px solid var(--button-green-border-color); + color: #000000; + background-color: var(--accent-color); + border: 1px solid #29f200; &:hover { - color: var(--button-green-text-color); + color: #000000; + background-color: #29f200; } } &.grey { - background-color: var(--button-grey-bg); - border: 1px solid var(--button-grey-border-color); - color: var(--button-grey-text-color); + background-color: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.1); + color: var(--main-text-color); &:hover { - color: var(--button-grey-text-color); + color: var(--main-text-color); + background-color: rgba(255, 255, 255, 0.09); } } &.red { - background-color: var(--button-red-bg); - border: 1px solid var(--button-red-border-color); - color: var(--button-red-text-color); + background-color: #cc0000; + border: 1px solid #fc3131; + color: var(--main-text-color); &:hover { - color: var(--button-red-text-color); + background-color: #f93939; } } &.yellow { - color: var(--button-yellow-text-color); - background-color: var(--button-yellow-bg); - border: 1px solid var(--button-yellow-border-color); + color: #000000; + background-color: #c4a000; + border: 1px solid #fce94f; &:hover { - color: var(--button-yellow-text-color); + color: #000000; + background-color: #fce94f; } } } @@ -69,34 +68,38 @@ &.outlined { background-color: transparent; &.green { - color: var(--button-green-bg); - border: 1px solid var(--button-green-bg); + color: var(--accent-color); + border: 1px solid var(--accent-color); &:hover { - color: var(--button-green-bg); + color: #29f200; + border: 1px solid #29f200; } } &.grey { - border: 1px solid var(--button-grey-border-color); - color: var(--button-grey-text-color); + border: 1px solid rgba(255, 255, 255, 0.6); + color: rgba(255, 255, 255, 0.6); &:hover { - color: var(--button-grey-text-color); + color: var(--main-text-color); + border: 1px solid var(--main-text-color); } } &.red { - border: 1px solid var(--button-red-bg); - color: var(--button-red-bg); + border: 1px solid #cc0000; + color: #cc0000; &:hover { - color: var(--button-red-bg); + color: #ff3c3c; + border: 1px solid #ff3c3c; } } &.yellow { - color: var(--button-yellow-bg); - border: 1px solid var(--button-yellow-bg); + color: #c4a000; + border: 1px solid #c4a000; &:hover { - color: var(--button-yellow-bg); + color: #fce94f; + border: 1px solid #fce94f; } } } @@ -110,33 +113,33 @@ &.green { border: none; - color: var(--button-green-bg); + color: var(--accent-color); &:hover { - color: var(--button-green-bg); + color: #29f200; } } &.grey { border: none; - color: var(--button-grey-text-color); + color: rgba(255, 255, 255, 0.6); &:hover { - color: var(--button-grey-text-color); + color: var(--main-text-color); } } &.red { border: none; - color: var(--button-red-bg); + color: #cc0000; &:hover { - color: var(--button-red-bg); + color: #fc3131; } } &.yellow { border: none; - color: var(--button-yellow-bg); + color: #c4a000; &:hover { - color: var(--button-yellow-bg); + color: #fce94f; } } } @@ -148,12 +151,11 @@ &:focus, &.focus { - outline: 1px solid var(--button-focus-border-color); + outline: 1px solid var(--success-color); outline-offset: 2px; } // customs styles here - &.border-radius-2 { border-radius: 4px; } @@ -178,6 +180,16 @@ border-radius: 10px; } + &.vertical-padding-0 { + padding-top: 0px; + padding-bottom: 0px; + } + + &.vertical-padding-1 { + padding-top: 1px; + padding-bottom: 1px; + } + &.vertical-padding-2 { padding-top: 2px; padding-bottom: 2px; @@ -223,6 +235,16 @@ padding-bottom: 10px; } + &.horizontal-padding-0 { + padding-left: 0px; + padding-right: 0px; + } + + &.horizontal-padding-1 { + padding-left: 1px; + padding-right: 1px; + } + &.horizontal-padding-2 { padding-left: 2px; padding-right: 2px; diff --git a/frontend/app/element/button.tsx b/frontend/app/element/button.tsx index a1db5c49b..75403e34b 100644 --- a/frontend/app/element/button.tsx +++ b/frontend/app/element/button.tsx @@ -1,41 +1,51 @@ +// Copyright 2024, Command Line Inc. +// SPDX-License-Identifier: Apache-2.0 + import clsx from "clsx"; -import { Children, isValidElement, memo } from "react"; +import { Children, forwardRef, memo, ReactNode, useImperativeHandle, useRef } from "react"; + import "./button.less"; interface ButtonProps extends React.ButtonHTMLAttributes { - forwardedRef?: React.RefObject; className?: string; - children?: React.ReactNode; + children?: ReactNode; + target?: string; + source?: string; } -const Button = memo(({ className = "", children, disabled, ...props }: ButtonProps) => { - const hasIcon = Children.toArray(children).some( - (child) => isValidElement(child) && (child as React.ReactElement).type === "svg" - ); +const Button = memo( + forwardRef( + ({ children, disabled, source, className = "", ...props }: ButtonProps, ref) => { + const btnRef = useRef(null); + useImperativeHandle(ref, () => btnRef.current as HTMLButtonElement); - // Check if the className contains any of the categories: solid, outlined, or ghost - const containsButtonCategory = /(solid|outline|ghost)/.test(className); - // If no category is present, default to 'solid' - const categoryClassName = containsButtonCategory ? className : `solid ${className}`; + const childrenArray = Children.toArray(children); - // Check if the className contains any of the color options: green, grey, red, or yellow - const containsColor = /(green|grey|red|yellow)/.test(categoryClassName); - // If no color is present, default to 'green' - const finalClassName = containsColor ? categoryClassName : `green ${categoryClassName}`; + // Check if the className contains any of the categories: solid, outlined, or ghost + const containsButtonCategory = /(solid|outline|ghost)/.test(className); + // If no category is present, default to 'solid' + const categoryClassName = containsButtonCategory ? className : `solid ${className}`; - return ( - - ); -}); + // Check if the className contains any of the color options: green, grey, red, or yellow + const containsColor = /(green|grey|red|yellow)/.test(categoryClassName); + // If no color is present, default to 'green' + const finalClassName = containsColor ? categoryClassName : `green ${categoryClassName}`; + + return ( + + ); + } + ) +); export { Button }; diff --git a/frontend/app/modals/modal.tsx b/frontend/app/modals/modal.tsx index 00e59a2b4..bdf14602b 100644 --- a/frontend/app/modals/modal.tsx +++ b/frontend/app/modals/modal.tsx @@ -10,7 +10,6 @@ import "./modal.less"; interface ModalProps { children?: React.ReactNode; - description?: string; okLabel?: string; cancelLabel?: string; className?: string; @@ -21,20 +20,7 @@ interface ModalProps { } const Modal = forwardRef( - ( - { - children, - className, - description, - cancelLabel, - okLabel, - onCancel, - onOk, - onClose, - onClickBackdrop, - }: ModalProps, - ref - ) => { + ({ children, className, cancelLabel, okLabel, onCancel, onOk, onClose, onClickBackdrop }: ModalProps, ref) => { const renderBackdrop = (onClick) =>
; const renderFooter = () => { diff --git a/frontend/app/modals/tos.tsx b/frontend/app/modals/tos.tsx index 2f7d6b915..c7233f7c0 100644 --- a/frontend/app/modals/tos.tsx +++ b/frontend/app/modals/tos.tsx @@ -117,7 +117,7 @@ const ModalPage1 = () => {