improve UI for leave family

lib/ui/payment/child_subscription_widget.dart

@@ -1,8 +1,8 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/painting.dart';
 import 'package:photos/models/user_details.dart';
 import 'package:photos/services/user_service.dart';
 import 'package:photos/ui/common/dialogs.dart';
-import 'package:photos/ui/common_elements.dart';
 import 'package:photos/utils/dialog_util.dart';
 
 class ChildSubscriptionWidget extends StatelessWidget {
@@ -18,33 +18,107 @@ class ChildSubscriptionWidget extends StatelessWidget {
     final String familyAdmin = userDetails.familyData.members
         .firstWhere((element) => element.isAdmin)
         .email;
-    return Column(
-      children: [
-        Padding(
-          padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 20),
-          child: Row(
-            children: [
-              Expanded(
-                child: Text(
-                  "only your family plan admin ($familyAdmin) can change the plan.",
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 32),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          Center(
+            child: Text(
+              "you are on a family plan!",
+              style: TextStyle(fontSize: 14, color: Colors.white),
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.symmetric(vertical: 8),
+          ),
+          Padding(
+            padding: EdgeInsets.symmetric(horizontal: 8),
+            child: RichText(
+              textAlign: TextAlign.center,
+              text: TextSpan(
+                children: [
+                  TextSpan(
+                    text: "please contact ",
+                  ),
+                  TextSpan(
+                    text: familyAdmin,
+                    style: TextStyle(color: Color.fromRGBO(29, 185, 84, 1)),
+                  ),
+                  TextSpan(
+                    text: " to manage your family subscription",
+                  ),
+                ],
+                style: TextStyle(
+                  fontFamily: 'Ubuntu',
+                  fontSize: 14,
+                ),
+              ),
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.symmetric(vertical: 8),
+          ),
+          Image.asset(
+            "assets/family_sharing.jpg",
+            height: 256,
+          ),
+          Padding(
+            padding: const EdgeInsets.symmetric(vertical: 0),
+          ),
+          InkWell(
+            child: OutlinedButton(
+              style: OutlinedButton.styleFrom(
+                shape: RoundedRectangleBorder(
+                  borderRadius: BorderRadius.circular(10),
+                ),
+                padding: EdgeInsets.symmetric(vertical: 18, horizontal: 100),
+                side: BorderSide(
+                  width: 2,
+                  color: Color.fromRGBO(255, 52, 52, 1),
+                ),
+              ),
+              child: Text(
+                "leave family",
+                style: TextStyle(
+                  fontFamily: 'Ubuntu-Regular',
+                  fontWeight: FontWeight.bold,
+                  fontSize: 18,
+                  color: Color.fromRGBO(255, 52, 52, 1),
+                ),
+                textAlign: TextAlign.center,
+              ),
+              onPressed: () async => {await _leaveFamilyPlan(context)},
+            ),
+          ),
+          Expanded(
+            child: Align(
+              alignment: Alignment.bottomCenter,
+              child: RichText(
+                textAlign: TextAlign.center,
+                text: TextSpan(
+                  children: const [
+                    TextSpan(
+                      text: "please contact ",
+                    ),
+                    TextSpan(
+                      text: "support@ente.io",
+                      style: TextStyle(color: Color.fromRGBO(29, 185, 84, 1)),
+                    ),
+                    TextSpan(
+                      text: " for help",
+                    ),
+                  ],
                   style: TextStyle(
-                    fontSize: 16,
-                    height: 1.3,
-                    color: Colors.white,
+                    fontFamily: 'Ubuntu-Regular',
+                    fontSize: 12,
                   ),
                 ),
               ),
-            ],
+            ),
           ),
-        ),
-        button(
-          "leave family",
-          onPressed: () async {
-            await _leaveFamilyPlan(context);
-          },
-          fontSize: 18,
-        ),
-      ],
+        ],
+      ),
     );
   }