install help card

flutter/lib/common/widgets/peer_card.dart

@@ -155,11 +155,9 @@ class _PeerCardState extends State<_PeerCard>
                 decoration:
                     BoxDecoration(color: Theme.of(context).backgroundColor),
                 child: Row(
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                   children: [
                     Expanded(
                       child: Column(
-                        mainAxisAlignment: MainAxisAlignment.center,
                         children: [
                           Row(children: [
                             getOnline(4, peer.online),

flutter/lib/desktop/pages/desktop_home_page.dart

@@ -15,6 +15,8 @@ import 'package:provider/provider.dart';
 import 'package:tray_manager/tray_manager.dart';
 import 'package:window_manager/window_manager.dart';
 
+import '../widgets/button.dart';
+
 class DesktopHomePage extends StatefulWidget {
   const DesktopHomePage({Key? key}) : super(key: key);
 
@@ -324,16 +326,42 @@ class _DesktopHomePageState extends State<DesktopHomePage>
   Widget buildInstallCard() {
     return Container(
       margin: EdgeInsets.only(top: 20),
+      child: Container(
+          decoration: BoxDecoration(
+              gradient: LinearGradient(
+            begin: Alignment.centerLeft,
+            end: Alignment.centerRight,
+            colors: [
+              Color.fromARGB(255, 226, 66, 188),
+              Color.fromARGB(255, 244, 114, 124),
+            ],
+          )),
+          padding: EdgeInsets.all(20),
           child: Column(
             mainAxisAlignment: MainAxisAlignment.start,
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               Text(
                 translate("install_tip"),
-            style: TextStyle(fontWeight: FontWeight.normal, fontSize: 19),
+                style: TextStyle(
-          ),
+                    height: 1.5,
+                    color: Colors.white,
+                    fontWeight: FontWeight.normal,
+                    fontSize: 13),
+              ).marginOnly(bottom: 20),
+              Row(mainAxisAlignment: MainAxisAlignment.center, children: [
+                Button(
+                    padding: 8,
+                    isOutline: true,
+                    text: 'Install',
+                    textColor: Colors.white,
+                    borderColor: Colors.white,
+                    textSize: 20,
+                    radius: 10,
+                    onTap: () {})
+              ]),
             ],
-      ),
+          )),
     );
   }
 

flutter/lib/desktop/widgets/button.dart

@@ -6,13 +6,23 @@ import '../../common.dart';
 class Button extends StatefulWidget {
   GestureTapCallback onTap;
   String text;
+  double? textSize;
   double? minWidth;
   bool isOutline;
+  double? padding;
+  Color? textColor;
+  double? radius;
+  Color? borderColor;
 
   Button({
     Key? key,
     this.minWidth,
     this.isOutline = false,
+    this.textSize,
+    this.padding,
+    this.textColor,
+    this.radius,
+    this.borderColor,
     required this.onTap,
     required this.text,
   }) : super(key: key);
@@ -35,10 +45,10 @@ class _ButtonState extends State<Button> {
           onTap: widget.onTap,
           child: ConstrainedBox(
               constraints: BoxConstraints(
-                minWidth: widget.minWidth ?? 80.0,
+                minWidth: widget.minWidth ?? 70.0,
               ),
               child: Container(
-                height: 27,
+                padding: EdgeInsets.all(widget.padding ?? 4.5),
                 alignment: Alignment.center,
                 decoration: BoxDecoration(
                   color: pressed.value
@@ -52,20 +62,21 @@ class _ButtonState extends State<Button> {
                         : hover.value
                             ? MyTheme.hoverBorder
                             : (widget.isOutline
-                                ? MyTheme.border
+                                ? widget.borderColor ?? MyTheme.border
                                 : MyTheme.button),
                   ),
-                  borderRadius: BorderRadius.circular(5),
+                  borderRadius: BorderRadius.circular(widget.radius ?? 5),
                 ),
                 child: Text(
                   translate(
                     widget.text,
                   ),
                   style: TextStyle(
-                      fontSize: 12,
+                      fontSize: widget.textSize ?? 12.0,
                       color: pressed.value || !widget.isOutline
                           ? Theme.of(context).backgroundColor
-                          : Theme.of(context).textTheme.titleLarge?.color),
+                          : widget.textColor ??
+                              Theme.of(context).textTheme.titleLarge?.color),
                 ).marginSymmetric(horizontal: 12),
               )),
         ));