From e7bb1dc16ee5ffbc6f05d2203f26b37be562e2f0 Mon Sep 17 00:00:00 2001
From: inexcode <inex.code@selfprivacy.org>
Date: Thu, 20 Oct 2022 22:23:55 +0300
Subject: [PATCH] feat(timezone): Design the search bar for 'Select Timezone'
 page

---
 .../server_details/server_details_screen.dart |  7 +--
 .../server_details/time_zone/time_zone.dart   | 59 +++++++++----------
 2 files changed, 31 insertions(+), 35 deletions(-)

diff --git a/lib/ui/pages/server_details/server_details_screen.dart b/lib/ui/pages/server_details/server_details_screen.dart
index d1eada36..894c9a28 100644
--- a/lib/ui/pages/server_details/server_details_screen.dart
+++ b/lib/ui/pages/server_details/server_details_screen.dart
@@ -12,23 +12,20 @@ import 'package:selfprivacy/logic/models/auto_upgrade_settings.dart';
 import 'package:selfprivacy/logic/models/job.dart';
 import 'package:selfprivacy/ui/components/brand_button/segmented_buttons.dart';
 import 'package:selfprivacy/ui/components/brand_cards/filled_card.dart';
-import 'package:selfprivacy/ui/components/brand_header/brand_header.dart';
 import 'package:selfprivacy/ui/components/brand_hero_screen/brand_hero_screen.dart';
 import 'package:selfprivacy/ui/components/brand_icons/brand_icons.dart';
 import 'package:selfprivacy/ui/components/brand_loader/brand_loader.dart';
 import 'package:selfprivacy/ui/components/brand_text/brand_text.dart';
 import 'package:selfprivacy/ui/components/list_tiles/list_tile_on_surface_variant.dart';
+import 'package:selfprivacy/ui/pages/server_details/charts/cpu_chart.dart';
+import 'package:selfprivacy/ui/pages/server_details/charts/network_charts.dart';
 import 'package:selfprivacy/ui/pages/server_storage/storage_card.dart';
-import 'package:selfprivacy/ui/pages/server_details/time_zone/lang.dart';
 import 'package:selfprivacy/utils/extensions/duration.dart';
 import 'package:selfprivacy/utils/extensions/string_extensions.dart';
 import 'package:selfprivacy/utils/named_font_weight.dart';
 import 'package:selfprivacy/utils/route_transitions/basic.dart';
 import 'package:timezone/timezone.dart';
 
-import 'package:selfprivacy/ui/pages/server_details/charts/cpu_chart.dart';
-import 'package:selfprivacy/ui/pages/server_details/charts/network_charts.dart';
-
 part 'charts/chart.dart';
 part 'server_settings.dart';
 part 'text_details.dart';
diff --git a/lib/ui/pages/server_details/time_zone/time_zone.dart b/lib/ui/pages/server_details/time_zone/time_zone.dart
index 2073d305..28407d7d 100644
--- a/lib/ui/pages/server_details/time_zone/time_zone.dart
+++ b/lib/ui/pages/server_details/time_zone/time_zone.dart
@@ -18,6 +18,7 @@ class _SelectTimezoneState extends State<SelectTimezone> {
   final TextEditingController searchController = TextEditingController();
 
   String? timezoneFilterValue;
+  bool isSearching = false;
 
   @override
   void initState() {
@@ -57,38 +58,36 @@ class _SelectTimezoneState extends State<SelectTimezone> {
 
   @override
   Widget build(final BuildContext context) => Scaffold(
-        appBar: PreferredSize(
-          preferredSize: const Size.fromHeight(156),
-          child: Column(
-            children: [
-              BrandHeader(
-                title: 'server.select_timezone'.tr(),
-              ),
-              Row(
-                children: [
-                  const SizedBox(width: 16),
-                  SizedBox(
-                    height: 52,
-                    child: TextField(
-                      readOnly: false,
-                      textAlign: TextAlign.start,
-                      textInputAction: TextInputAction.next,
-                      enabled: true,
-                      controller: searchController,
-                      decoration: InputDecoration(
-                        border: const OutlineInputBorder(),
-                        errorText: null,
-                        labelText: 'server.timezone_search_bar'.tr(),
-                      ),
-                    ),
+        appBar: AppBar(
+          title: isSearching
+              ? TextField(
+                  readOnly: false,
+                  textAlign: TextAlign.start,
+                  textInputAction: TextInputAction.next,
+                  enabled: true,
+                  controller: searchController,
+                  decoration: InputDecoration(
+                    errorText: null,
+                    hintText: 'server.timezone_search_bar'.tr(),
                   ),
-                  const SizedBox(width: 16),
-                  const Icon(Icons.search_outlined),
-                  const SizedBox(width: 16),
-                ],
-              ),
-            ],
+                )
+              : Padding(
+                  padding: const EdgeInsets.only(top: 4.0),
+                  child: Text('server.select_timezone'.tr()),
+                ),
+          leading: IconButton(
+            icon: const Icon(Icons.arrow_back),
+            onPressed: isSearching
+                ? () => setState(() => isSearching = false)
+                : () => Navigator.of(context).pop(),
           ),
+          actions: [
+            if (!isSearching)
+              IconButton(
+                icon: const Icon(Icons.search),
+                onPressed: () => setState(() => isSearching = true),
+              ),
+          ],
         ),
         body: SafeArea(
           child: ListView(