Merge pull request #18 from gary-Shen/fix/button-style

fix: button style
gary-Shen · Jun 25, 2023 · 12405b6 · 12405b6 · vercel · Jun 25, 2023
2 parents 8a069ca + cd8409d
commit 12405b6
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 11 deletions.
diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
@@ -16,11 +16,12 @@ export interface MyMenuProps {
   children: React.ReactNode;
   className?: string;
   buttonClassName?: string;
+  buttonStyle?: React.CSSProperties;
 }
 
 const MenuButton = styled.button``;
 
-const Items = React.forwardRef(({ options }: Pick<MyMenuProps, 'options'>, ref) => {
+const Items = React.forwardRef(({ options, buttonStyle }: Pick<MyMenuProps, 'options' | 'buttonStyle'>, ref) => {
   const itemsRef = useRef<any>(null);
 
   useImperativeHandle(ref, () => itemsRef.current, []);
@@ -48,6 +49,7 @@ const Items = React.forwardRef(({ options }: Pick<MyMenuProps, 'options'>, ref)
             {({ active }) => (
               <MenuButton
                 as={as}
+                style={active ? buttonStyle : undefined}
                 className={classNames(
                   itemClassName,
                   'group flex w-full items-center rounded-md pl-2 pr-4 py-1 whitespace-nowrap',
@@ -67,7 +69,7 @@ const Items = React.forwardRef(({ options }: Pick<MyMenuProps, 'options'>, ref)
   );
 });
 
-export default function MyMenu({ children, options, className, buttonClassName }: MyMenuProps) {
+export default function MyMenu({ children, options, className, buttonClassName, buttonStyle }: MyMenuProps) {
   return (
     <Menu as="div" className={classNames('relative inline-block text-left', className)}>
       {({ open }) => (
@@ -83,7 +85,7 @@ export default function MyMenu({ children, options, className, buttonClassName }
             leaveFrom="transform opacity-100 scale-100"
             leaveTo="transform opacity-0 scale-95"
           >
-            <Items options={options} />
+            <Items buttonStyle={buttonStyle} options={options} />
           </Transition>
         </>
       )}

diff --git a/src/components/Popover.tsx b/src/components/Popover.tsx
@@ -24,7 +24,7 @@ export default function MyPopover({
             as={as}
             className={classNames(
               buttonClassName,
-              'group inline-flex items-center rounded-md text-base font-medium text-white hover:text-opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75',
+              'group inline-flex items-center rounded-md text-base font-medium hover:text-opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75',
               {
                 'text-opacity-90': !open,
               },
@@ -41,7 +41,7 @@ export default function MyPopover({
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 translate-y-1"
           >
-            <Popover.Panel className="absolute left-1/2 z-10 -translate-x-1/2 bg-white p-4 shadow rounded-lg">
+            <Popover.Panel className="absolute left-1/2 z-10 border border-[var(--select-border-color)] -translate-x-1/2 bg-[var(--select-bg)] p-4 shadow rounded-lg">
               {overlay}
             </Popover.Panel>
           </Transition>

diff --git a/src/partials/Block/EditModal/index.tsx b/src/partials/Block/EditModal/index.tsx
@@ -85,7 +85,7 @@ const StylePicker = ({ value, onChange }: LinkColorPickerProps) => {
         key: 'built-in',
         content: (
           <StyledColorWrapper className="flex">
-            {TYPES.map((type) => (
+            {TYPES.filter((item) => item !== 'default').map((type) => (
               <Button
                 key={type}
                 type={type as ButtonType}
@@ -129,7 +129,7 @@ const ShadowRow = React.memo(
             <Button
               type="light"
               onClick={(e) => e.preventDefault()}
-              className="self-stretch border !w-24 !p-0 !cursor-move"
+              className="!bg-[var(--gray-color)] !border-0 self-stretch !w-24 !p-0 !cursor-move"
             >
               <BiMove />
             </Button>
@@ -161,9 +161,8 @@ const LinkRow = React.memo(({ index, data, onChange, onDelete, onDragStart }: Li
         getShadowNode={(shadowRef, targetRef) => <ShadowRow ref={shadowRef} data={data} targetRef={targetRef} />}
       >
         <Button
-          type="light"
           onClick={(e) => e.preventDefault()}
-          className="self-stretch border !w-24 !p-0 !cursor-move"
+          className="!bg-[var(--gray-color)] !border-0 self-stretch !w-24 !p-0 !cursor-move"
         >
           <BiMove />
         </Button>

diff --git a/src/partials/Block/index.tsx b/src/partials/Block/index.tsx
@@ -359,14 +359,24 @@ export default function BlockContainer({ block, settings, updateSettings, index,
                   <div className="w-full link-group" onClick={() => onMenuClick(index)}>
                     <MyMenu
                       className="w-full"
+                      buttonStyle={{
+                        backgroundColor: TYPES.includes(style) ? `var(--color-${style})` : style,
+                        color: TYPES.includes(style)
+                          ? ['light', 'default'].includes(style)
+                            ? '#000'
+                            : undefined
+                          : isDark(style)
+                          ? '#fff'
+                          : '#000',
+                      }}
                       buttonClassName="w-full"
                       options={menu.map(({ title: menuTitle, url: menuItemUrl, id: menuItemId }) => {
                         return {
                           title: menuTitle,
                           as: 'a',
                           href: menuItemUrl,
                           key: menuItemId,
-                          className: 'border-transparent text-inherit hover:text-white',
+                          className: `border-transparent text-inherit hover:text-white`,
                         };
                       })}
                     >

diff --git a/src/types/setting.type.ts b/src/types/setting.type.ts
@@ -10,7 +10,7 @@ export interface MenuLink {
 
 export interface Link {
   id: string;
-  style: 'danger' | 'primary' | 'secondary' | 'dark' | 'warning' | 'success' | 'info';
+  style: 'danger' | 'primary' | 'secondary' | 'dark' | 'warning' | 'success' | 'info' | 'light';
   menu?: MenuLink[];
   description?: string;
   url?: string;