feat: upgrade template button style (#6121)

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/footer/sidebar_footer.dart

@@ -9,6 +9,7 @@ import 'package:appflowy/workspace/presentation/home/menu/menu_shared_state.dart
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/footer/sidebar_toast.dart';
 import 'package:appflowy/workspace/presentation/settings/widgets/setting_appflowy_cloud.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flutter/material.dart';
 
 import 'sidebar_footer_button.dart';
@@ -26,11 +27,26 @@ class SidebarFooter extends StatelessWidget {
               return const SidebarToast();
             },
           ),
-        const SidebarTemplateButton(),
+        Row(
-        const SidebarTrashButton(),
+          // mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            const Expanded(child: SidebarTemplateButton()),
+            _buildVerticalDivider(context),
+            const Expanded(child: SidebarTrashButton()),
+          ],
+        ),
       ],
     );
   }
+
+  Widget _buildVerticalDivider(BuildContext context) {
+    return Container(
+      width: 1.0,
+      height: 14,
+      margin: const EdgeInsets.symmetric(horizontal: 4),
+      color: AFThemeExtension.of(context).borderColor,
+    );
+  }
 }
 
 class SidebarTemplateButton extends StatelessWidget {
@@ -39,12 +55,9 @@ class SidebarTemplateButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return SidebarFooterButton(
-      leftIconSize: const Size.square(24.0),
+      leftIconSize: const Size.square(18.0),
-      leftIcon: const Padding(
+      leftIcon: const FlowySvg(
-        padding: EdgeInsets.all(2.0),
+        FlowySvgs.icon_template_s,
-        child: FlowySvg(
-          FlowySvgs.icon_template_s,
-        ),
       ),
       text: LocaleKeys.template_label.tr(),
       onTap: () => afLaunchUrlString('https://appflowy.io/templates'),
@@ -61,9 +74,9 @@ class SidebarTrashButton extends StatelessWidget {
       valueListenable: getIt<MenuSharedState>().notifier,
       builder: (context, value, child) {
         return SidebarFooterButton(
-          leftIconSize: const Size.square(24.0),
+          leftIconSize: const Size.square(18.0),
           leftIcon: const FlowySvg(
-            FlowySvgs.sidebar_footer_trash_m,
+            FlowySvgs.icon_delete_s,
           ),
           text: LocaleKeys.trash_text.tr(),
           onTap: () {

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/footer/sidebar_footer_button.dart

@@ -26,11 +26,15 @@ class SidebarFooterButton extends StatelessWidget {
       child: FlowyButton(
         leftIcon: leftIcon,
         leftIconSize: leftIconSize,
-        iconPadding: 8.0,
         margin: const EdgeInsets.all(4.0),
-        text: FlowyText.regular(
+        expandText: false,
-          text,
+        text: Padding(
-          lineHeight: 1.15,
+          padding: const EdgeInsets.only(right: 6.0),
+          child: FlowyText(
+            text,
+            fontWeight: FontWeight.w400,
+            figmaLineHeight: 18.0,
+          ),
         ),
         onTap: onTap,
       ),

frontend/resources/flowy_icons/16x/icon_delete.svg

@@ -0,0 +1,14 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.6" clip-path="url(#clip0_632_5742)">
+<path d="M12.3746 4.48999C10.7096 4.32499 9.03454 4.23999 7.36453 4.23999C6.37453 4.23999 5.38452 4.28999 4.39452 4.38999L3.37451 4.48999" stroke="#171717" stroke-width="0.750004" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.12427 3.98501L6.23427 3.33C6.31427 2.855 6.37427 2.5 7.21927 2.5H8.52928C9.37429 2.5 9.43929 2.875 9.51429 3.335L9.62429 3.98501" stroke="#171717" stroke-width="0.750004" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.2995 6.07031L10.9745 11.1053C10.9195 11.8903 10.8745 12.5003 9.47949 12.5003H6.26947C4.87447 12.5003 4.82947 11.8903 4.77446 11.1053L4.44946 6.07031" stroke="#171717" stroke-width="0.750004" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.03955 9.75H8.70456" stroke="#171717" stroke-width="0.750004" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.62451 7.75H9.12453" stroke="#171717" stroke-width="0.750004" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_632_5742">
+<rect width="14" height="14" fill="white" transform="translate(0.874512 0.5)"/>
+</clipPath>
+</defs>
+</svg>

frontend/resources/flowy_icons/16x/icon_template.svg

@@ -1,5 +1,5 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g opacity="0.6">
+<g id="icon_template_outlined" opacity="0.6">
-<path d="M8.125 3.125H4.375C4.04348 3.125 3.72554 3.2567 3.49112 3.49112C3.2567 3.72554 3.125 4.04348 3.125 4.375V8.125C3.125 8.45652 3.2567 8.77446 3.49112 9.00888C3.72554 9.2433 4.04348 9.375 4.375 9.375H8.125C8.45652 9.375 8.77446 9.2433 9.00888 9.00888C9.2433 8.77446 9.375 8.45652 9.375 8.125V4.375C9.375 4.04348 9.2433 3.72554 9.00888 3.49112C8.77446 3.2567 8.45652 3.125 8.125 3.125ZM8.125 8.125H4.375V4.375H8.125V8.125ZM15.625 3.125H11.875C11.5435 3.125 11.2255 3.2567 10.9911 3.49112C10.7567 3.72554 10.625 4.04348 10.625 4.375V8.125C10.625 8.45652 10.7567 8.77446 10.9911 9.00888C11.2255 9.2433 11.5435 9.375 11.875 9.375H15.625C15.9565 9.375 16.2745 9.2433 16.5089 9.00888C16.7433 8.77446 16.875 8.45652 16.875 8.125V4.375C16.875 4.04348 16.7433 3.72554 16.5089 3.49112C16.2745 3.2567 15.9565 3.125 15.625 3.125ZM15.625 8.125H11.875V4.375H15.625V8.125ZM8.125 10.625H4.375C4.04348 10.625 3.72554 10.7567 3.49112 10.9911C3.2567 11.2255 3.125 11.5435 3.125 11.875V15.625C3.125 15.9565 3.2567 16.2745 3.49112 16.5089C3.72554 16.7433 4.04348 16.875 4.375 16.875H8.125C8.45652 16.875 8.77446 16.7433 9.00888 16.5089C9.2433 16.2745 9.375 15.9565 9.375 15.625V11.875C9.375 11.5435 9.2433 11.2255 9.00888 10.9911C8.77446 10.7567 8.45652 10.625 8.125 10.625ZM8.125 15.625H4.375V11.875H8.125V15.625ZM15.625 10.625H11.875C11.5435 10.625 11.2255 10.7567 10.9911 10.9911C10.7567 11.2255 10.625 11.5435 10.625 11.875V15.625C10.625 15.9565 10.7567 16.2745 10.9911 16.5089C11.2255 16.7433 11.5435 16.875 11.875 16.875H15.625C15.9565 16.875 16.2745 16.7433 16.5089 16.5089C16.7433 16.2745 16.875 15.9565 16.875 15.625V11.875C16.875 11.5435 16.7433 11.2255 16.5089 10.9911C16.2745 10.7567 15.9565 10.625 15.625 10.625ZM15.625 15.625H11.875V11.875H15.625V15.625Z" fill="#101012"/>
+<path id="Union" d="M11.7339 8.97626L11.7024 9.00328L11.7232 9.0392L13.0125 11.2712C13.399 11.9403 12.9159 12.7767 12.1428 12.7767H6.66498C6.07845 12.7767 5.65818 12.295 5.6592 11.7695L5.6593 11.7171L5.60693 11.7195C5.55512 11.7218 5.503 11.723 5.45061 11.723C3.58596 11.723 2.07441 10.2123 2.07441 8.3487C2.07441 6.48514 3.58596 4.97438 5.45061 4.97438C5.79803 4.97438 6.13311 5.02681 6.4484 5.12415L6.49801 5.13947L6.51145 5.08933L7.12678 2.79415C7.27031 2.25875 7.82095 1.94099 8.35669 2.08446L12.4299 3.17527C12.9656 3.31874 13.2835 3.86908 13.1399 4.40446L12.0485 8.47541C11.9942 8.67795 11.8818 8.84923 11.7339 8.97626ZM12.2182 4.15765L12.2312 4.10935L12.1829 4.09641L8.10971 3.0056L8.06142 2.99267L8.04848 3.04095L6.95708 7.1119L6.94413 7.16021L6.99244 7.17314L7.9688 7.43462L8.00584 7.44454L8.02503 7.41133L8.53423 6.52985C8.92075 5.86074 9.88707 5.86074 10.2736 6.52985L11.1071 7.97271L11.1674 8.07718L11.1987 7.96064L12.2182 4.15765ZM6.1238 10.6746L6.14315 10.6691L6.15323 10.6516L7.47933 8.356L7.51193 8.29955L7.44897 8.28269L6.74546 8.09429C6.20973 7.95081 5.89184 7.40047 6.03537 6.86509L6.23824 6.10839L6.2505 6.06267L6.20551 6.04793C5.96789 5.97009 5.71411 5.92802 5.45061 5.92802C4.11301 5.92802 3.02863 7.01177 3.02863 8.3487C3.02863 9.68564 4.11301 10.7694 5.45061 10.7694C5.68413 10.7694 5.91002 10.7363 6.1238 10.6746ZM9.44721 7.00665L9.40391 6.9317L9.36061 7.00665L6.62169 11.748L6.57836 11.823H6.66498H12.1428H12.2295L12.1861 11.748L9.44721 7.00665Z" fill="#171717" stroke="#F7F8FC" stroke-width="0.1"/>
 </g>
-</svg>
+</svg>