fix: border size & color

Author: lumixraku

src/components/editor/components/toolbar/selection-toolbar/SelectionToolbar.tsx

@@ -46,7 +46,7 @@ export function SelectionToolbar() {
       <div
         ref={ref}
         className={
-          'selection-toolbar pointer-events-none transform transition-opacity duration-200 absolute z-[100] flex min-h-[32px] w-fit flex-grow items-center rounded-border-radius-border-radius-l bg-surface-primary px-2 py-xs opacity-0 shadow-toolbar'
+          'selection-toolbar pointer-events-none transform transition-opacity duration-200 absolute z-[100] flex min-h-[32px] w-fit flex-grow items-center rounded-400 bg-surface-primary px-2 py-xs opacity-0 shadow-toolbar'
         }
         onMouseDown={(e) => {
           // prevent toolbar from taking focus away from editor

src/components/editor/components/toolbar/selection-toolbar/actions/Align.tsx

@@ -140,8 +140,8 @@ export function Align({ blockId, enabled = true }: { blockId?: string; enabled?:
             {activeIcon()}
           </ActionButton>
         </PopoverTrigger>
-        <PopoverContent className="w-[200px] p-2 bg-surface-primary rounded-[6px]">
-          <div className="flex flex-col rounded-[12px]">
+        <PopoverContent className="w-[200px] p-2" align="start" sideOffset={5}>
+          <div className="flex flex-col gap-1">
             {alignOptions.map((option, index) => (
               <MenuButton
                 key={option.labelKey}

src/components/editor/components/toolbar/selection-toolbar/actions/Color.tsx

@@ -133,7 +133,7 @@ function Color() {
                     }}
                   >
                     <div
-                      className={`absolute top-0 left-0 h-full w-full cursor-pointer rounded-[6px] border-2 opacity-50 hover:opacity-100`}
+                      className={`absolute top-0 left-0 h-full w-full cursor-pointer rounded-200 border opacity-50 hover:opacity-100`}
                       style={{
                         borderColor: activeFontColor === color.color ? 'var(--fill-default)' : undefined,
                         color: renderColor(color.color) || 'var(--text-title)',

src/components/editor/components/toolbar/selection-toolbar/actions/ColorHighlight.tsx

@@ -128,23 +128,27 @@ function ColorHighlight() {
                                 <Tooltip disableInteractive={true} key={index} title={color.label} placement={'top'}>
                                     <div
                                         key={index}
-                                        className={
-                                            'relative flex h-6 w-6 cursor-pointer items-center justify-center overflow-hidden rounded-[6px]'
-                                        }
+                                        className="relative flex h-6 w-6 cursor-pointer items-center justify-center overflow-hidden"
                                         onClick={() => handlePickedColor(EditorMarkFormat.BgColor, color.color)}
                                     >
-                                        <div
-                                            className={`absolute top-0 left-0 h-full w-full rounded-[6px] border-2`}
-                                            style={{
-                                                borderColor: activeBgColor === color.color ? 'var(--fill-default)' : undefined,
-                                            }}
-                                        />
-                                        <div
-                                            className={'z-[1] h-full w-full opacity-50 hover:opacity-100'}
-                                            style={{
-                                                backgroundColor: renderColor(color.color),
-                                            }}
-                                        />
+                                        {activeBgColor === color.color ? (
+                                            <>
+                                                <div className="absolute inset-0 rounded-200 border-2 border-[#5555E0] bg-transparent pointer-events-none" />
+                                                <div
+                                                    className="z-[1] w-4 h-4 rounded-100"
+                                                    style={{
+                                                        backgroundColor: renderColor(color.color),
+                                                    }}
+                                                />
+                                            </>
+                                        ) : (
+                                            <div
+                                                className="w-full h-full rounded-200 border border-tertiary"
+                                                style={{
+                                                    backgroundColor: renderColor(color.color),
+                                                }}
+                                            />
+                                        )}
                                     </div>
                                 </Tooltip>
                             );