From c60ed11fe5b3acb785f11613fc326934caf834bf Mon Sep 17 00:00:00 2001
From: Richard Shiue <71320345+richardshiue@users.noreply.github.com>
Date: Mon, 22 Apr 2024 14:04:17 +0800
Subject: [PATCH] fix: add an outline to accessory buttons (#5178)

---
 .../desktop_grid/desktop_grid_url_cell.dart   | 20 ++++++++++++-------
 .../widgets/row/accessory/cell_accessory.dart | 17 +++++++++++-----
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/frontend/appflowy_flutter/lib/plugins/database/widgets/cell/desktop_grid/desktop_grid_url_cell.dart b/frontend/appflowy_flutter/lib/plugins/database/widgets/cell/desktop_grid/desktop_grid_url_cell.dart
index 0fce67a29c..8ccda95391 100644
--- a/frontend/appflowy_flutter/lib/plugins/database/widgets/cell/desktop_grid/desktop_grid_url_cell.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/widgets/cell/desktop_grid/desktop_grid_url_cell.dart
@@ -1,6 +1,3 @@
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database/application/cell/bloc/url_cell_bloc.dart';
@@ -9,8 +6,11 @@ import 'package:appflowy/plugins/database/widgets/row/accessory/cell_accessory.d
 import 'package:appflowy/plugins/database/widgets/row/cells/cell_container.dart';
 import 'package:appflowy/workspace/presentation/home/toast.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 import '../editable_cell_skeleton/url.dart';
@@ -193,10 +193,16 @@ class _URLAccessoryIconContainer extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox.square(
-      dimension: 26,
-      child: Padding(
-        padding: const EdgeInsets.all(3.0),
+    return Container(
+      width: 26,
+      height: 26,
+      decoration: BoxDecoration(
+        border: Border.fromBorderSide(
+          BorderSide(color: Theme.of(context).dividerColor),
+        ),
+        borderRadius: Corners.s6Border,
+      ),
+      child: Center(
         child: child,
       ),
     );
diff --git a/frontend/appflowy_flutter/lib/plugins/database/widgets/row/accessory/cell_accessory.dart b/frontend/appflowy_flutter/lib/plugins/database/widgets/row/accessory/cell_accessory.dart
index 74a3eb8ba9..5e42870208 100644
--- a/frontend/appflowy_flutter/lib/plugins/database/widgets/row/accessory/cell_accessory.dart
+++ b/frontend/appflowy_flutter/lib/plugins/database/widgets/row/accessory/cell_accessory.dart
@@ -71,11 +71,16 @@ class _PrimaryCellAccessoryState extends State<PrimaryCellAccessory>
   Widget build(BuildContext context) {
     return FlowyTooltip(
       message: LocaleKeys.tooltip_openAsPage.tr(),
-      child: SizedBox(
+      child: Container(
         width: 26,
         height: 26,
-        child: Padding(
-          padding: const EdgeInsets.all(3.0),
+        decoration: BoxDecoration(
+          border: Border.fromBorderSide(
+            BorderSide(color: Theme.of(context).dividerColor),
+          ),
+          borderRadius: Corners.s6Border,
+        ),
+        child: Center(
           child: FlowySvg(
             FlowySvgs.full_view_s,
             color: Theme.of(context).colorScheme.primary,
@@ -162,8 +167,10 @@ class CellAccessoryContainer extends StatelessWidget {
     final children =
         accessories.where((accessory) => accessory.enable()).map((accessory) {
       final hover = FlowyHover(
-        style:
-            HoverStyle(hoverColor: AFThemeExtension.of(context).lightGreyHover),
+        style: HoverStyle(
+          hoverColor: AFThemeExtension.of(context).lightGreyHover,
+          backgroundColor: Theme.of(context).cardColor,
+        ),
         builder: (_, onHover) => accessory.build(),
       );
       return GestureDetector(