feat: improve app theming code and add Material You (#58)

2025-06-12 04:37:37 +02:00 · 2022-09-05 03:32:36 +01:00
parent 35d334ea1f
commit 5404208562
44 changed files with 627 additions and 854 deletions
--- a/lib/ui/widgets/appSelectorView/installed_app_item.dart
+++ b/lib/ui/widgets/appSelectorView/installed_app_item.dart
@ -1,7 +1,6 @@
 import 'dart:typed_data';
 import 'package:flutter/material.dart';
-import 'package:google_fonts/google_fonts.dart';
-import 'package:revanced_manager/constants.dart';
+import 'package:revanced_manager/ui/widgets/shared/custom_card.dart';

 class InstalledAppItem extends StatefulWidget {
  final String name;
@ -24,12 +23,7 @@ class _InstalledAppItemState extends State<InstalledAppItem> {
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 4.0),
-      child: Container(
-        padding: const EdgeInsets.all(12.0),
-        decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(12),
-          color: Theme.of(context).colorScheme.primary,
-        ),
+      child: CustomCard(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
@ -52,16 +46,13 @@ class _InstalledAppItemState extends State<InstalledAppItem> {
                    widget.name,
                    maxLines: 2,
                    overflow: TextOverflow.visible,
-                    style: GoogleFonts.inter(
+                    style: const TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  const SizedBox(height: 4),
-                  Text(
-                    widget.pkgName,
-                    style: kRobotoTextStyle,
-                  ),
+                  Text(widget.pkgName),
                ],
              ),
            ),
--- a/lib/ui/widgets/contributorsView/contributors_card.dart
+++ b/lib/ui/widgets/contributorsView/contributors_card.dart
@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:github/github.dart';
-import 'package:google_fonts/google_fonts.dart';
-import 'package:revanced_manager/theme.dart';
+import 'package:revanced_manager/ui/widgets/shared/custom_card.dart';
 import 'package:url_launcher/url_launcher.dart';

 class ContributorsCard extends StatefulWidget {
@ -23,54 +22,49 @@ class ContributorsCard extends StatefulWidget {
 class _ContributorsCardState extends State<ContributorsCard> {
  @override
  Widget build(BuildContext context) {
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: <Widget>[
-        Padding(
-          padding: const EdgeInsets.symmetric(vertical: 4.0, horizontal: 4.0),
-          child: Text(
-            widget.title,
-            style: GoogleFonts.poppins(
-              fontSize: 20,
-              fontWeight: FontWeight.w600,
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: <Widget>[
+          Padding(
+            padding: const EdgeInsets.only(bottom: 8.0),
+            child: Text(
+              widget.title,
+              style: const TextStyle(
+                fontSize: 20,
+                fontWeight: FontWeight.w600,
+              ),
            ),
          ),
-        ),
-        Container(
-          margin: const EdgeInsets.all(8.0),
-          padding: const EdgeInsets.all(4.0),
-          decoration: BoxDecoration(
-            color: isDark
-                ? Theme.of(context).colorScheme.primary
-                : Theme.of(context).navigationBarTheme.backgroundColor!,
-            borderRadius: BorderRadius.circular(12),
-          ),
-          height: widget.height,
-          child: GridView.builder(
-            physics: const NeverScrollableScrollPhysics(),
-            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-              crossAxisCount: 7,
-              mainAxisSpacing: 8,
-              crossAxisSpacing: 8,
-            ),
-            itemCount: widget.contributors.length,
-            itemBuilder: (context, index) {
-              return ClipRRect(
-                borderRadius: BorderRadius.circular(100),
-                child: GestureDetector(
-                  onTap: () =>
-                      launchUrl(Uri.parse(widget.contributors[index].htmlUrl!)),
-                  child: Image.network(
-                    widget.contributors[index].avatarUrl!,
-                    height: 40,
-                    width: 40,
+          CustomCard(
+            child: GridView.builder(
+              shrinkWrap: true,
+              physics: const NeverScrollableScrollPhysics(),
+              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                crossAxisCount: 7,
+                mainAxisSpacing: 8,
+                crossAxisSpacing: 8,
+              ),
+              itemCount: widget.contributors.length,
+              itemBuilder: (context, index) {
+                return ClipRRect(
+                  borderRadius: BorderRadius.circular(100),
+                  child: GestureDetector(
+                    onTap: () => launchUrl(
+                        Uri.parse(widget.contributors[index].htmlUrl!)),
+                    child: Image.network(
+                      widget.contributors[index].avatarUrl!,
+                      height: 40,
+                      width: 40,
+                    ),
                  ),
-                ),
-              );
-            },
+                );
+              },
+            ),
          ),
-        ),
-      ],
+        ],
+      ),
    );
  }
 }
--- a/lib/ui/widgets/homeView/available_updates_card.dart
+++ b/lib/ui/widgets/homeView/available_updates_card.dart
@ -4,6 +4,7 @@ import 'package:revanced_manager/app/app.locator.dart';
 import 'package:revanced_manager/models/patched_application.dart';
 import 'package:revanced_manager/ui/views/home/home_viewmodel.dart';
 import 'package:revanced_manager/ui/widgets/shared/application_item.dart';
+import 'package:revanced_manager/ui/widgets/shared/custom_card.dart';

 class AvailableUpdatesCard extends StatelessWidget {
  AvailableUpdatesCard({Key? key}) : super(key: key);
@ -14,28 +15,18 @@ class AvailableUpdatesCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return apps.isEmpty
-        ? Container(
-            decoration: BoxDecoration(
-              borderRadius: BorderRadius.circular(12),
-              color: Theme.of(context).colorScheme.primary,
-            ),
-            padding: const EdgeInsets.symmetric(vertical: 18, horizontal: 20),
+        ? CustomCard(
            child: Center(
              child: Column(
                children: <Widget>[
-                  Icon(
-                    Icons.update_disabled,
-                    size: 40,
-                    color: Theme.of(context).colorScheme.secondary,
-                  ),
+                  const Icon(Icons.update_disabled, size: 40),
                  const SizedBox(height: 16),
                  I18nText(
                    'homeView.noUpdates',
                    child: Text(
                      '',
                      textAlign: TextAlign.center,
-                      style: Theme.of(context).textTheme.subtitle1!.copyWith(
-                          color: Theme.of(context).colorScheme.secondary),
+                      style: Theme.of(context).textTheme.subtitle1!,
                    ),
                  )
                ],
--- a/lib/ui/widgets/homeView/dashboard_chip.dart
+++ b/lib/ui/widgets/homeView/dashboard_chip.dart
@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+
+class DashboardChip extends StatelessWidget {
+  final Widget label;
+  final bool isSelected;
+  final Function(bool)? onSelected;
+
+  const DashboardChip({
+    Key? key,
+    required this.label,
+    required this.isSelected,
+    this.onSelected,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return RawChip(
+      showCheckmark: false,
+      label: label,
+      selected: isSelected,
+      labelStyle: Theme.of(context).textTheme.subtitle2!.copyWith(
+            color: Theme.of(context).colorScheme.primary,
+            fontWeight: FontWeight.bold,
+          ),
+      backgroundColor: Colors.transparent,
+      selectedColor: Theme.of(context).colorScheme.secondaryContainer,
+      padding: const EdgeInsets.all(10),
+      onSelected: onSelected,
+    );
+  }
+}
--- a/lib/ui/widgets/homeView/dashboard_raw_chip.dart
+++ b/lib/ui/widgets/homeView/dashboard_raw_chip.dart
@ -1,52 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:google_fonts/google_fonts.dart';
-import 'package:revanced_manager/theme.dart';
-
-class DashboardChip extends StatelessWidget {
-  final Widget label;
-  final bool isSelected;
-  final Function(bool)? onSelected;
-
-  const DashboardChip({
-    Key? key,
-    required this.label,
-    required this.isSelected,
-    this.onSelected,
-  }) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return RawChip(
-      showCheckmark: false,
-      label: label,
-      selected: isSelected,
-      labelStyle: GoogleFonts.inter(
-        color: isSelected
-            ? isDark
-                ? const Color(0xff95C0FE)
-                : Theme.of(context).colorScheme.secondary
-            : isDark
-                ? Colors.grey
-                : Colors.grey[700],
-        fontWeight: FontWeight.w500,
-      ),
-      backgroundColor:
-          isDark ? Theme.of(context).colorScheme.background : Colors.white,
-      selectedColor: const Color.fromRGBO(118, 155, 209, 0.42),
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(12),
-        side: BorderSide(
-          width: 1,
-          color: isDark
-              ? isSelected
-                  ? const Color.fromRGBO(118, 155, 209, 0.42)
-                  : Colors.grey
-              : isSelected
-                  ? const Color.fromRGBO(118, 155, 209, 0.42)
-                  : Colors.grey,
-        ),
-      ),
-      onSelected: onSelected,
-    );
-  }
-}
--- a/lib/ui/widgets/homeView/installed_apps_card.dart
+++ b/lib/ui/widgets/homeView/installed_apps_card.dart
@ -5,6 +5,7 @@ import 'package:revanced_manager/app/app.locator.dart';
 import 'package:revanced_manager/models/patched_application.dart';
 import 'package:revanced_manager/ui/views/home/home_viewmodel.dart';
 import 'package:revanced_manager/ui/widgets/shared/application_item.dart';
+import 'package:revanced_manager/ui/widgets/shared/custom_card.dart';

 class InstalledAppsCard extends StatelessWidget {
  InstalledAppsCard({Key? key}) : super(key: key);
@ -15,28 +16,18 @@ class InstalledAppsCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return apps.isEmpty
-        ? Container(
-            decoration: BoxDecoration(
-              borderRadius: BorderRadius.circular(12),
-              color: Theme.of(context).colorScheme.primary,
-            ),
-            padding: const EdgeInsets.symmetric(vertical: 18, horizontal: 20),
+        ? CustomCard(
            child: Center(
              child: Column(
                children: <Widget>[
-                  Icon(
-                    Icons.file_download_off,
-                    size: 40,
-                    color: Theme.of(context).colorScheme.secondary,
-                  ),
+                  const Icon(Icons.file_download_off, size: 40),
                  const SizedBox(height: 16),
                  I18nText(
                    'homeView.noInstallations',
                    child: Text(
                      '',
                      textAlign: TextAlign.center,
-                      style: Theme.of(context).textTheme.subtitle1!.copyWith(
-                          color: Theme.of(context).colorScheme.secondary),
+                      style: Theme.of(context).textTheme.subtitle1!,
                    ),
                  )
                ],
--- a/lib/ui/widgets/homeView/latest_commit_card.dart
+++ b/lib/ui/widgets/homeView/latest_commit_card.dart
@ -1,11 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
-import 'package:google_fonts/google_fonts.dart';
 import 'package:revanced_manager/app/app.locator.dart';
 import 'package:revanced_manager/services/github_api.dart';
 import 'package:revanced_manager/constants.dart';
 import 'package:revanced_manager/ui/views/home/home_viewmodel.dart';
-import 'package:revanced_manager/ui/widgets/shared/patch_text_button.dart';
+import 'package:revanced_manager/ui/widgets/installerView/custom_material_button.dart';
+import 'package:revanced_manager/ui/widgets/shared/custom_card.dart';

 class LatestCommitCard extends StatefulWidget {
  final Function() onPressed;
@ -24,12 +24,7 @@ class _LatestCommitCardState extends State<LatestCommitCard> {

  @override
  Widget build(BuildContext context) {
-    return Container(
-      decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(12),
-        color: Theme.of(context).colorScheme.primary,
-      ),
-      padding: const EdgeInsets.symmetric(vertical: 18, horizontal: 20),
+    return CustomCard(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
@ -40,11 +35,9 @@ class _LatestCommitCardState extends State<LatestCommitCard> {
                children: <Widget>[
                  I18nText(
                    'latestCommitCard.patcherLabel',
-                    child: Text(
+                    child: const Text(
                      '',
-                      style: GoogleFonts.roboto(
-                        fontWeight: FontWeight.w700,
-                      ),
+                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                  ),
                  FutureBuilder<String>(
@ -60,7 +53,6 @@ class _LatestCommitCardState extends State<LatestCommitCard> {
                              context,
                              'latestCommitCard.loadingLabel',
                            ),
-                      style: kRobotoTextStyle,
                    ),
                  ),
                ],
@ -70,28 +62,20 @@ class _LatestCommitCardState extends State<LatestCommitCard> {
                children: <Widget>[
                  I18nText(
                    'latestCommitCard.managerLabel',
-                    child: Text(
+                    child: const Text(
                      '',
-                      style: GoogleFonts.roboto(
-                        fontWeight: FontWeight.w700,
-                      ),
+                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                  ),
                  FutureBuilder<String>(
                    future: _githubAPI.latestCommitTime(ghOrg, managerRepo),
-                    builder: (context, snapshot) => Text(
-                      snapshot.hasData && snapshot.data!.isNotEmpty
-                          ? FlutterI18n.translate(
-                              context,
-                              'latestCommitCard.timeagoLabel',
-                              translationParams: {'time': snapshot.data!},
-                            )
-                          : FlutterI18n.translate(
-                              context,
-                              'latestCommitCard.loadingLabel',
-                            ),
-                      style: kRobotoTextStyle,
-                    ),
+                    builder: (context, snapshot) =>
+                        snapshot.hasData && snapshot.data!.isNotEmpty
+                            ? I18nText(
+                                'latestCommitCard.timeagoLabel',
+                                translationParams: {'time': snapshot.data!},
+                              )
+                            : I18nText('latestCommitCard.loadingLabel'),
                  ),
                ],
              ),
@ -101,17 +85,13 @@ class _LatestCommitCardState extends State<LatestCommitCard> {
            future: locator<HomeViewModel>().hasManagerUpdates(),
            initialData: false,
            builder: (context, snapshot) => Opacity(
-              opacity: snapshot.hasData && snapshot.data! ? 1.0 : 0.5,
-              child: PatchTextButton(
-                text: FlutterI18n.translate(
-                  context,
-                  'latestCommitCard.updateButton',
-                ),
+              opacity: snapshot.hasData && snapshot.data! ? 1.0 : 1.0,
+              child: CustomMaterialButton(
+                isExpanded: false,
+                label: I18nText('latestCommitCard.updateButton'),
                onPressed: snapshot.hasData && snapshot.data!
                    ? widget.onPressed
                    : () => {},
-                backgroundColor: Theme.of(context).colorScheme.secondary,
-                borderColor: Theme.of(context).colorScheme.secondary,
              ),
            ),
          ),
--- a/lib/ui/widgets/installerView/custom_material_button.dart
+++ b/lib/ui/widgets/installerView/custom_material_button.dart
@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:revanced_manager/theme.dart';

 class CustomMaterialButton extends StatelessWidget {
  final Widget label;
@ -21,43 +20,17 @@ class CustomMaterialButton extends StatelessWidget {
      style: ButtonStyle(
        padding: MaterialStateProperty.all(
          isExpanded
-              ? const EdgeInsets.symmetric(
-                  horizontal: 24,
-                  vertical: 12,
-                )
-              : const EdgeInsets.symmetric(
-                  horizontal: 20,
-                  vertical: 12,
-                ),
-        ),
-        shape: MaterialStateProperty.all(
-          RoundedRectangleBorder(
-            borderRadius: BorderRadius.circular(100),
-            side: BorderSide(
-              width: 1,
-              color: Theme.of(context).colorScheme.secondary,
-            ),
-          ),
-        ),
-        side: MaterialStateProperty.all(
-          BorderSide(
-            color: isFilled
-                ? Colors.transparent
-                : Theme.of(context).iconTheme.color!.withOpacity(0.4),
-            width: 1,
-          ),
+              ? const EdgeInsets.symmetric(horizontal: 24, vertical: 12)
+              : const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
        ),
+        shape: MaterialStateProperty.all(const StadiumBorder()),
        backgroundColor: MaterialStateProperty.all(
-          isFilled
-              ? Theme.of(context).colorScheme.secondary
-              : isDark
-                  ? Theme.of(context).colorScheme.background
-                  : Colors.white,
+          isFilled ? Theme.of(context).colorScheme.primary : Colors.transparent,
        ),
        foregroundColor: MaterialStateProperty.all(
          isFilled
-              ? Theme.of(context).colorScheme.background
-              : Theme.of(context).colorScheme.secondary,
+              ? Theme.of(context).colorScheme.surface
+              : Theme.of(context).colorScheme.primary,
        ),
      ),
      onPressed: onPressed,
--- a/lib/ui/widgets/patcherView/app_selector_card.dart
+++ b/lib/ui/widgets/patcherView/app_selector_card.dart
@ -1,10 +1,9 @@
 import 'dart:typed_data';
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
-import 'package:google_fonts/google_fonts.dart';
 import 'package:revanced_manager/app/app.locator.dart';
-import 'package:revanced_manager/constants.dart';
 import 'package:revanced_manager/ui/views/patcher/patcher_viewmodel.dart';
+import 'package:revanced_manager/ui/widgets/shared/custom_card.dart';

 class AppSelectorCard extends StatelessWidget {
  final Function() onPressed;
@ -18,13 +17,7 @@ class AppSelectorCard extends StatelessWidget {
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPressed,
-      child: Container(
-        width: double.infinity,
-        decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(12),
-          color: Theme.of(context).colorScheme.primary,
-        ),
-        padding: const EdgeInsets.symmetric(vertical: 18, horizontal: 20),
+      child: CustomCard(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
@ -32,9 +25,9 @@ class AppSelectorCard extends StatelessWidget {
              locator<PatcherViewModel>().selectedApp == null
                  ? 'appSelectorCard.widgetTitle'
                  : 'appSelectorCard.widgetTitleSelected',
-              child: Text(
+              child: const Text(
                '',
-                style: GoogleFonts.roboto(
+                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.w500,
                ),
@ -42,13 +35,7 @@ class AppSelectorCard extends StatelessWidget {
            ),
            const SizedBox(height: 10),
            locator<PatcherViewModel>().selectedApp == null
-                ? I18nText(
-                    'appSelectorCard.widgetSubtitle',
-                    child: Text(
-                      '',
-                      style: kRobotoTextStyle,
-                    ),
-                  )
+                ? I18nText('appSelectorCard.widgetSubtitle')
                : Row(
                    children: <Widget>[
                      SizedBox(
@ -63,10 +50,7 @@ class AppSelectorCard extends StatelessWidget {
                        ),
                      ),
                      const SizedBox(width: 4),
-                      Text(
-                        _getAppSelection(),
-                        style: kRobotoTextStyle,
-                      ),
+                      Text(_getAppSelection()),
                    ],
                  ),
          ],
--- a/lib/ui/widgets/patcherView/patch_selector_card.dart
+++ b/lib/ui/widgets/patcherView/patch_selector_card.dart
@ -1,10 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
-import 'package:google_fonts/google_fonts.dart';
 import 'package:revanced_manager/app/app.locator.dart';
-import 'package:revanced_manager/constants.dart';
 import 'package:revanced_manager/models/patch.dart';
 import 'package:revanced_manager/ui/views/patcher/patcher_viewmodel.dart';
+import 'package:revanced_manager/ui/widgets/shared/custom_card.dart';

 class PatchSelectorCard extends StatelessWidget {
  final Function() onPressed;
@ -18,13 +17,7 @@ class PatchSelectorCard extends StatelessWidget {
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPressed,
-      child: Container(
-        width: double.infinity,
-        decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(12),
-          color: Theme.of(context).colorScheme.primary,
-        ),
-        padding: const EdgeInsets.symmetric(vertical: 18, horizontal: 20),
+      child: CustomCard(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
@ -32,9 +25,9 @@ class PatchSelectorCard extends StatelessWidget {
              locator<PatcherViewModel>().selectedPatches.isEmpty
                  ? 'patchSelectorCard.widgetTitle'
                  : 'patchSelectorCard.widgetTitleSelected',
-              child: Text(
+              child: const Text(
                '',
-                style: GoogleFonts.roboto(
+                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.w500,
                ),
@ -42,25 +35,10 @@ class PatchSelectorCard extends StatelessWidget {
            ),
            const SizedBox(height: 10),
            locator<PatcherViewModel>().selectedApp == null
-                ? I18nText(
-                    'patchSelectorCard.widgetSubtitle',
-                    child: Text(
-                      '',
-                      style: kRobotoTextStyle,
-                    ),
-                  )
+                ? I18nText('patchSelectorCard.widgetSubtitle')
                : locator<PatcherViewModel>().selectedPatches.isEmpty
-                    ? I18nText(
-                        'patchSelectorCard.widgetEmptySubtitle',
-                        child: Text(
-                          '',
-                          style: kRobotoTextStyle,
-                        ),
-                      )
-                    : Text(
-                        _getPatchesSelection(),
-                        style: kRobotoTextStyle,
-                      ),
+                    ? I18nText('patchSelectorCard.widgetEmptySubtitle')
+                    : Text(_getPatchesSelection()),
          ],
        ),
      ),
--- a/lib/ui/widgets/patchesSelectorView/patch_item.dart
+++ b/lib/ui/widgets/patchesSelectorView/patch_item.dart
@ -1,8 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
-import 'package:google_fonts/google_fonts.dart';
 import 'package:revanced_manager/ui/widgets/patchesSelectorView/patch_options_fields.dart';
-import 'package:revanced_manager/ui/widgets/shared/patch_text_button.dart';
+import 'package:revanced_manager/ui/widgets/installerView/custom_material_button.dart';
+import 'package:revanced_manager/ui/widgets/shared/custom_card.dart';

 // ignore: must_be_immutable
 class PatchItem extends StatefulWidget {
@ -43,96 +43,92 @@ class _PatchItemState extends State<PatchItem> {
        setState(() => widget.isSelected = !widget.isSelected);
        widget.onChanged(widget.isSelected);
      },
-      child: Container(
-        decoration: BoxDecoration(
-          color: Theme.of(context).colorScheme.primary,
-          borderRadius: BorderRadius.circular(12),
-        ),
-        padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 12),
-        margin: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
-        child: Column(
-          children: <Widget>[
-            Row(
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-              children: <Widget>[
-                Flexible(
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: <Widget>[
-                      Row(
-                        crossAxisAlignment: CrossAxisAlignment.end,
-                        children: <Widget>[
-                          Text(
-                            widget.simpleName,
-                            style: GoogleFonts.inter(
-                              fontSize: 16,
-                              fontWeight: FontWeight.w600,
-                            ),
-                          ),
-                          const SizedBox(width: 4),
-                          Text(widget.version)
-                        ],
-                      ),
-                      const SizedBox(height: 4),
-                      Text(
-                        widget.description,
-                        softWrap: true,
-                        maxLines: 3,
-                        overflow: TextOverflow.visible,
-                        style: GoogleFonts.roboto(
-                          fontSize: 14,
-                        ),
-                      ),
-                    ],
-                  ),
-                ),
-                Transform.scale(
-                  scale: 1.2,
-                  child: Checkbox(
-                    value: widget.isSelected,
-                    activeColor: Theme.of(context).colorScheme.secondary,
-                    onChanged: (newValue) {
-                      setState(() => widget.isSelected = newValue!);
-                      widget.onChanged(widget.isSelected);
-                    },
-                  ),
-                )
-              ],
-            ),
-            widget.isUnsupported
-                ? Row(
-                    children: <Widget>[
-                      Padding(
-                        padding: const EdgeInsets.only(top: 8),
-                        child: TextButton.icon(
-                          label: I18nText('patchItem.unsupportedWarningButton'),
-                          icon: const Icon(Icons.warning),
-                          onPressed: () => _showUnsupportedWarningDialog(),
-                          style: ButtonStyle(
-                            shape: MaterialStateProperty.all(
-                              RoundedRectangleBorder(
-                                borderRadius: BorderRadius.circular(12),
-                                side: BorderSide(
-                                  width: 1,
-                                  color:
-                                      Theme.of(context).colorScheme.secondary,
-                                ),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 4.0),
+        child: CustomCard(
+          child: Column(
+            children: <Widget>[
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: <Widget>[
+                  Flexible(
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: <Widget>[
+                        Row(
+                          crossAxisAlignment: CrossAxisAlignment.end,
+                          children: <Widget>[
+                            Text(
+                              widget.simpleName,
+                              style: const TextStyle(
+                                fontSize: 16,
+                                fontWeight: FontWeight.w600,
                              ),
                            ),
-                            backgroundColor: MaterialStateProperty.all(
-                              Colors.transparent,
-                            ),
-                            foregroundColor: MaterialStateProperty.all(
-                              Theme.of(context).colorScheme.secondary,
+                            const SizedBox(width: 4),
+                            Text(widget.version)
+                          ],
+                        ),
+                        const SizedBox(height: 4),
+                        Text(
+                          widget.description,
+                          softWrap: true,
+                          maxLines: 3,
+                          overflow: TextOverflow.visible,
+                          style: const TextStyle(fontSize: 14),
+                        ),
+                      ],
+                    ),
+                  ),
+                  Transform.scale(
+                    scale: 1.2,
+                    child: Checkbox(
+                      value: widget.isSelected,
+                      activeColor: Theme.of(context).colorScheme.primary,
+                      onChanged: (newValue) {
+                        setState(() => widget.isSelected = newValue!);
+                        widget.onChanged(widget.isSelected);
+                      },
+                    ),
+                  )
+                ],
+              ),
+              widget.isUnsupported
+                  ? Row(
+                      children: <Widget>[
+                        Padding(
+                          padding: const EdgeInsets.only(top: 8),
+                          child: TextButton.icon(
+                            label:
+                                I18nText('patchItem.unsupportedWarningButton'),
+                            icon: const Icon(Icons.warning),
+                            onPressed: () => _showUnsupportedWarningDialog(),
+                            style: ButtonStyle(
+                              shape: MaterialStateProperty.all(
+                                RoundedRectangleBorder(
+                                  borderRadius: BorderRadius.circular(12),
+                                  side: BorderSide(
+                                    width: 1,
+                                    color:
+                                        Theme.of(context).colorScheme.primary,
+                                  ),
+                                ),
+                              ),
+                              backgroundColor: MaterialStateProperty.all(
+                                Colors.transparent,
+                              ),
+                              foregroundColor: MaterialStateProperty.all(
+                                Theme.of(context).colorScheme.primary,
+                              ),
                            ),
                          ),
                        ),
-                      ),
-                    ],
-                  )
-                : Container(),
-            widget.child ?? const SizedBox(),
-          ],
+                      ],
+                    )
+                  : Container(),
+              widget.child ?? const SizedBox(),
+            ],
+          ),
        ),
      ),
    );
@ -152,14 +148,13 @@ class _PatchItemState extends State<PatchItem> {
          },
        ),
        actions: [
-          PatchTextButton(
-            text: FlutterI18n.translate(context, 'okButton'),
+          CustomMaterialButton(
+            isFilled: true,
+            label: I18nText('okButton'),
            onPressed: () => Navigator.of(context).pop(),
-            backgroundColor: Theme.of(context).colorScheme.secondary,
-            borderColor: Theme.of(context).colorScheme.secondary,
          )
        ],
-        backgroundColor: Theme.of(context).colorScheme.surface,
+        backgroundColor: Theme.of(context).colorScheme.secondaryContainer,
      ),
    );
  }
--- a/lib/ui/widgets/rootCheckerView/magisk_button.dart
+++ b/lib/ui/widgets/rootCheckerView/magisk_button.dart
@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
 import 'package:flutter_svg/flutter_svg.dart';
-import 'package:google_fonts/google_fonts.dart';

 class MagiskButton extends StatelessWidget {
  final Function() onPressed;
@ -20,7 +19,7 @@ class MagiskButton extends StatelessWidget {
          onTap: onPressed,
          child: CircleAvatar(
            radius: 32,
-            backgroundColor: Theme.of(context).colorScheme.secondary,
+            backgroundColor: Theme.of(context).colorScheme.primary,
            child: SvgPicture.asset(
              'assets/images/magisk.svg',
              color: Theme.of(context).colorScheme.surface,
@ -32,11 +31,9 @@ class MagiskButton extends StatelessWidget {
        const SizedBox(height: 8),
        I18nText(
          'rootCheckerView.grantPermission',
-          child: Text(
+          child: const Text(
            '',
-            style: GoogleFonts.poppins(
-              fontSize: 15,
-            ),
+            style: TextStyle(fontSize: 15),
          ),
        ),
      ],
--- a/lib/ui/widgets/settingsView/about_widget.dart
+++ b/lib/ui/widgets/settingsView/about_widget.dart
@ -1,7 +1,5 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
-import 'package:revanced_manager/constants.dart';
-import 'package:revanced_manager/theme.dart';
 import 'package:revanced_manager/utils/about_info.dart';
 import 'package:flutter/services.dart';

@ -22,7 +20,13 @@ class _AboutWidgetState extends State<AboutWidget> {
        children: <Widget>[
          I18nText(
            'settingsView.aboutLabel',
-            child: Text('', style: kSettingItemTextStyle),
+            child: const Text(
+              '',
+              style: TextStyle(
+                fontSize: 20,
+                fontWeight: FontWeight.w500,
+              ),
+            ),
          ),
          const SizedBox(height: 4),
          FutureBuilder<Map<String, dynamic>>(
@ -42,30 +46,50 @@ class _AboutWidgetState extends State<AboutWidget> {
                    );
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
-                        content: Text(
-                          'Copied to clipboard',
-                          style: TextStyle(
-                            color: isDark ? Colors.white : Colors.grey[300],
-                          ),
-                        ),
-                        backgroundColor: Theme.of(context).colorScheme.tertiary,
+                        content: const Text('Copied to clipboard'),
+                        backgroundColor:
+                            Theme.of(context).colorScheme.secondary,
                      ),
                    );
                  },
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
-                      Text('Version: ${snapshot.data!['version']}',
-                          style: kSettingItemSubtitleTextStyle),
-                      Text('Build: ${snapshot.data!['buildNumber']}',
-                          style: kSettingItemSubtitleTextStyle),
-                      Text('Model: ${snapshot.data!['model']}',
-                          style: kSettingItemSubtitleTextStyle),
                      Text(
-                          'Android Version: ${snapshot.data!['androidVersion']}',
-                          style: kSettingItemSubtitleTextStyle),
-                      Text('Arch: ${snapshot.data!['arch']}',
-                          style: kSettingItemSubtitleTextStyle),
+                        'Version: ${snapshot.data!['version']}',
+                        style: const TextStyle(
+                          fontSize: 13,
+                          fontWeight: FontWeight.w300,
+                        ),
+                      ),
+                      Text(
+                        'Build: ${snapshot.data!['buildNumber']}',
+                        style: const TextStyle(
+                          fontSize: 13,
+                          fontWeight: FontWeight.w300,
+                        ),
+                      ),
+                      Text(
+                        'Model: ${snapshot.data!['model']}',
+                        style: const TextStyle(
+                          fontSize: 13,
+                          fontWeight: FontWeight.w300,
+                        ),
+                      ),
+                      Text(
+                        'Android Version: ${snapshot.data!['androidVersion']}',
+                        style: const TextStyle(
+                          fontSize: 13,
+                          fontWeight: FontWeight.w300,
+                        ),
+                      ),
+                      Text(
+                        'Arch: ${snapshot.data!['arch']}',
+                        style: const TextStyle(
+                          fontSize: 13,
+                          fontWeight: FontWeight.w300,
+                        ),
+                      ),
                    ],
                  ),
                );
--- a/lib/ui/widgets/settingsView/custom_switch.dart
+++ b/lib/ui/widgets/settingsView/custom_switch.dart
@ -12,8 +12,6 @@ class CustomSwitch extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    Color? activeColor = Theme.of(context).colorScheme.tertiary;
-    Color? inactiveColor = Theme.of(context).colorScheme.secondary;
    return GestureDetector(
      onTap: () => onChanged(!value),
      child: SizedBox(
@ -30,7 +28,9 @@ class CustomSwitch extends StatelessWidget {
                borderRadius: const BorderRadius.all(
                  Radius.circular(25.0),
                ),
-                color: !value ? activeColor : inactiveColor,
+                color: value
+                    ? Theme.of(context).colorScheme.primary
+                    : Theme.of(context).colorScheme.secondary,
              ),
            ),
            AnimatedAlign(
--- a/lib/ui/widgets/settingsView/custom_text_field.dart
+++ b/lib/ui/widgets/settingsView/custom_text_field.dart
@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:revanced_manager/theme.dart';

 class CustomTextField extends StatelessWidget {
  final TextEditingController inputController;
@ -17,69 +16,55 @@ class CustomTextField extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.all(8.0),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: <Widget>[
-          const SizedBox(height: 8),
-          TextField(
-            controller: inputController,
-            onChanged: onChanged,
-            keyboardType: TextInputType.text,
-            style: TextStyle(
-              fontSize: 14,
-              color: Theme.of(context).textTheme.headline5!.color,
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: <Widget>[
+        const SizedBox(height: 8),
+        TextField(
+          controller: inputController,
+          onChanged: onChanged,
+          keyboardType: TextInputType.text,
+          decoration: InputDecoration(
+            label: label,
+            filled: true,
+            fillColor: Theme.of(context).colorScheme.secondaryContainer,
+            hintText: hint,
+            contentPadding: const EdgeInsets.symmetric(
+              vertical: 0.0,
+              horizontal: 20.0,
            ),
-            cursorColor: Theme.of(context).textTheme.headline5!.color,
-            decoration: InputDecoration(
-              label: label,
-              labelStyle: TextStyle(
-                color: isDark ? Colors.grey[300] : Colors.black,
+            border: OutlineInputBorder(
+              borderSide: BorderSide(
+                color: Theme.of(context).colorScheme.primary,
+                width: 1.0,
              ),
-              filled: true,
-              fillColor: Theme.of(context).colorScheme.primary,
-              hintText: hint,
-              hintStyle: TextStyle(
-                color: Colors.grey.withOpacity(.75),
+              borderRadius: BorderRadius.circular(10),
+              gapPadding: 4.0,
+            ),
+            focusedBorder: OutlineInputBorder(
+              borderSide: BorderSide(
+                color: Theme.of(context).colorScheme.primary,
+                width: 2.0,
              ),
-              contentPadding: const EdgeInsets.symmetric(
-                vertical: 0.0,
-                horizontal: 20.0,
+              borderRadius: BorderRadius.circular(10),
+            ),
+            errorBorder: OutlineInputBorder(
+              borderSide: const BorderSide(
+                color: Colors.red,
+                width: 1.0,
              ),
-              border: OutlineInputBorder(
-                borderSide: BorderSide(
-                  color: Theme.of(context).colorScheme.tertiary,
-                  width: 1.0,
-                ),
-                borderRadius: BorderRadius.circular(10),
-                gapPadding: 4.0,
-              ),
-              focusedBorder: OutlineInputBorder(
-                borderSide: BorderSide(
-                  color: Theme.of(context).colorScheme.secondary,
-                  width: 2.0,
-                ),
-                borderRadius: BorderRadius.circular(10),
-              ),
-              errorBorder: OutlineInputBorder(
-                borderSide: const BorderSide(
-                  color: Color(0xffEF4444),
-                  width: 1.0,
-                ),
-                borderRadius: BorderRadius.circular(10),
-              ),
-              enabledBorder: OutlineInputBorder(
-                borderSide: BorderSide(
-                  color: Theme.of(context).colorScheme.tertiary,
-                  width: 1.0,
-                ),
-                borderRadius: BorderRadius.circular(10),
+              borderRadius: BorderRadius.circular(10),
+            ),
+            enabledBorder: OutlineInputBorder(
+              borderSide: BorderSide(
+                color: Theme.of(context).colorScheme.primary,
+                width: 1.0,
              ),
+              borderRadius: BorderRadius.circular(10),
            ),
          ),
-        ],
-      ),
+        ),
+      ],
    );
  }
 }
--- a/lib/ui/widgets/settingsView/settings_section.dart
+++ b/lib/ui/widgets/settingsView/settings_section.dart
@ -23,7 +23,7 @@ class SettingsSection extends StatelessWidget {
            child: Text(
              '',
              style: TextStyle(
-                color: Theme.of(context).colorScheme.secondary,
+                color: Theme.of(context).colorScheme.primary,
              ),
            ),
          ),
--- a/lib/ui/widgets/settingsView/settings_tile_dialog.dart
+++ b/lib/ui/widgets/settingsView/settings_tile_dialog.dart
@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
-import 'package:revanced_manager/constants.dart';

 class SettingsTileDialog extends StatelessWidget {
  final String title;
@ -20,9 +19,12 @@ class SettingsTileDialog extends StatelessWidget {
      contentPadding: EdgeInsets.zero,
      title: I18nText(
        title,
-        child: Text(
+        child: const Text(
          '',
-          style: kSettingItemTextStyle,
+          style: TextStyle(
+            fontSize: 20,
+            fontWeight: FontWeight.w500,
+          ),
        ),
      ),
      subtitle: I18nText(subtitle),
--- a/lib/ui/widgets/settingsView/social_media_widget.dart
+++ b/lib/ui/widgets/settingsView/social_media_widget.dart
@ -2,8 +2,7 @@ import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
-import 'package:revanced_manager/constants.dart';
-import 'package:revanced_manager/theme.dart';
+import 'package:revanced_manager/ui/widgets/shared/custom_card.dart';
 import 'package:url_launcher/url_launcher.dart';

 class SocialMediaWidget extends StatelessWidget {
@ -18,32 +17,25 @@ class SocialMediaWidget extends StatelessWidget {
        iconPadding: const EdgeInsets.symmetric(vertical: 16.0),
        animationDuration: const Duration(milliseconds: 400),
      ),
-      header: SizedBox(
-        width: double.infinity,
-        child: ListTile(
-          contentPadding: EdgeInsets.zero,
-          title: I18nText(
-            'socialMediaCard.widgetTitle',
-            child: Text('', style: kSettingItemTextStyle),
-          ),
-          subtitle: I18nText(
-            'socialMediaCard.widgetSubtitle',
-            child: Text(
-              '',
-              style: Theme.of(context).textTheme.bodyMedium!.copyWith(
-                    color: isDark ? Colors.grey[400] : Colors.grey[600],
-                  ),
+      header: ListTile(
+        contentPadding: EdgeInsets.zero,
+        title: I18nText(
+          'socialMediaCard.widgetTitle',
+          child: const Text(
+            '',
+            style: TextStyle(
+              fontSize: 20,
+              fontWeight: FontWeight.w500,
            ),
          ),
        ),
+        subtitle: I18nText('socialMediaCard.widgetSubtitle'),
      ),
-      expanded: Card(
-        color: isDark
-            ? Theme.of(context).colorScheme.primary
-            : Theme.of(context).navigationBarTheme.backgroundColor!,
+      expanded: CustomCard(
        child: Column(
          children: <Widget>[
            ListTile(
+              contentPadding: EdgeInsets.zero,
              leading: Padding(
                padding: const EdgeInsets.all(8.0),
                child: FaIcon(
@ -59,6 +51,7 @@ class SocialMediaWidget extends StatelessWidget {
              ),
            ),
            ListTile(
+              contentPadding: EdgeInsets.zero,
              leading: Padding(
                padding: const EdgeInsets.all(8.0).copyWith(left: 5),
                child: FaIcon(
@ -74,6 +67,7 @@ class SocialMediaWidget extends StatelessWidget {
              ),
            ),
            ListTile(
+              contentPadding: EdgeInsets.zero,
              leading: Padding(
                padding: const EdgeInsets.all(8.0),
                child: FaIcon(
@ -89,6 +83,7 @@ class SocialMediaWidget extends StatelessWidget {
              ),
            ),
            ListTile(
+              contentPadding: EdgeInsets.zero,
              leading: Padding(
                padding: const EdgeInsets.all(8.0),
                child: FaIcon(
@ -104,6 +99,7 @@ class SocialMediaWidget extends StatelessWidget {
              ),
            ),
            ListTile(
+              contentPadding: EdgeInsets.zero,
              leading: Padding(
                padding: const EdgeInsets.all(8.0),
                child: FaIcon(
@ -119,6 +115,7 @@ class SocialMediaWidget extends StatelessWidget {
              ),
            ),
            ListTile(
+              contentPadding: EdgeInsets.zero,
              leading: Padding(
                padding: const EdgeInsets.all(8.0),
                child: FaIcon(
--- a/lib/ui/widgets/settingsView/sources_widget.dart
+++ b/lib/ui/widgets/settingsView/sources_widget.dart
@ -2,8 +2,8 @@ import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
 import 'package:revanced_manager/constants.dart';
-import 'package:revanced_manager/theme.dart';
 import 'package:revanced_manager/ui/widgets/settingsView/custom_text_field.dart';
+import 'package:revanced_manager/ui/widgets/shared/custom_card.dart';

 class SourcesWidget extends StatelessWidget {
  final String title;
@ -28,29 +28,21 @@ class SourcesWidget extends StatelessWidget {
        iconPadding: const EdgeInsets.symmetric(vertical: 16.0),
        animationDuration: const Duration(milliseconds: 400),
      ),
-      header: SizedBox(
-        width: double.infinity,
-        child: ListTile(
-          contentPadding: EdgeInsets.zero,
-          title: I18nText(
-            'sourcesCard.widgetTitle',
-            child: Text('', style: kSettingItemTextStyle),
-          ),
-          subtitle: I18nText(
-            'sourcesCard.widgetSubtitle',
-            child: Text(
-              '',
-              style: Theme.of(context).textTheme.bodyMedium!.copyWith(
-                    color: isDark ? Colors.grey[400] : Colors.grey[600],
-                  ),
+      header: ListTile(
+        contentPadding: EdgeInsets.zero,
+        title: I18nText(
+          'sourcesCard.widgetTitle',
+          child: const Text(
+            '',
+            style: TextStyle(
+              fontSize: 20,
+              fontWeight: FontWeight.w500,
            ),
          ),
        ),
+        subtitle: I18nText('sourcesCard.widgetSubtitle'),
      ),
-      expanded: Card(
-        color: isDark
-            ? Theme.of(context).colorScheme.primary
-            : Theme.of(context).navigationBarTheme.backgroundColor!,
+      expanded: CustomCard(
        child: Column(
          children: <Widget>[
            CustomTextField(
@ -59,12 +51,14 @@ class SourcesWidget extends StatelessWidget {
              hint: ghOrg,
              onChanged: (value) => ghOrg = value,
            ),
+            const SizedBox(height: 8),
            CustomTextField(
              inputController: patchesSourceController,
              label: I18nText('sourcesCard.patchesSourceLabel'),
              hint: patchesRepo,
              onChanged: (value) => patchesRepo = value,
            ),
+            const SizedBox(height: 8),
            CustomTextField(
              inputController: integrationsSourceController,
              label: I18nText('sourcesCard.integrationsSourceLabel'),
--- a/lib/ui/widgets/shared/application_item.dart
+++ b/lib/ui/widgets/shared/application_item.dart
@ -1,10 +1,8 @@
 import 'dart:typed_data';
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
-import 'package:google_fonts/google_fonts.dart';
-import 'package:revanced_manager/constants.dart';
-import 'package:revanced_manager/theme.dart';
-import 'package:revanced_manager/ui/widgets/shared/patch_text_button.dart';
+import 'package:revanced_manager/ui/widgets/installerView/custom_material_button.dart';
+import 'package:revanced_manager/ui/widgets/shared/custom_card.dart';
 import 'package:expandable/expandable.dart';
 import 'package:timeago/timeago.dart';

@ -33,56 +31,35 @@ class ApplicationItem extends StatelessWidget {
        hasIcon: false,
        animationDuration: Duration(milliseconds: 450),
      ),
-      header: Container(
-        height: 60,
-        decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(12),
-          color: Theme.of(context).colorScheme.primary,
-        ),
-        padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 12.0),
+      header: CustomCard(
        child: Row(
          children: <Widget>[
            SizedBox(
              width: 60,
-              child: Image.memory(
-                icon,
-                height: 39,
-                width: 39,
-              ),
+              child: Image.memory(icon, height: 39, width: 39),
            ),
            const SizedBox(width: 4),
-            SizedBox(
-              width: MediaQuery.of(context).size.width - 250,
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: <Widget>[
-                  Text(
-                    name,
-                    style: GoogleFonts.roboto(
-                      color: Theme.of(context).colorScheme.secondary,
-                      fontWeight: FontWeight.w600,
-                    ),
+            Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: <Widget>[
+                Text(
+                  name,
+                  style: const TextStyle(
+                    fontSize: 16,
+                    fontWeight: FontWeight.w500,
                  ),
-                  Text(
-                    format(patchDate, locale: 'en_short'),
-                    style: kRobotoTextStyle.copyWith(
-                      color: Theme.of(context).colorScheme.tertiary,
-                    ),
-                  ),
-                ],
-              ),
+                ),
+                Text(format(patchDate, locale: 'en_short')),
+              ],
            ),
            const Spacer(),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
-              child: PatchTextButton(
-                text: isUpdatableApp
-                    ? 'applicationItem.patchButton'
-                    : 'applicationItem.openButton',
+              child: CustomMaterialButton(
+                label: isUpdatableApp
+                    ? I18nText('applicationItem.patchButton')
+                    : I18nText('applicationItem.openButton'),
                onPressed: onPressed,
-                borderColor: isDark
-                    ? const Color(0xff4D5054)
-                    : const Color.fromRGBO(119, 146, 168, 1),
              ),
            ),
          ],
@ -96,16 +73,13 @@ class ApplicationItem extends StatelessWidget {
          children: <Widget>[
            I18nText(
              'applicationItem.changelogLabel',
-              child: Text(
+              child: const Text(
                '',
-                style: kRobotoTextStyle.copyWith(fontWeight: FontWeight.w700),
+                style: TextStyle(fontWeight: FontWeight.w700),
              ),
            ),
            const SizedBox(height: 4),
-            Text(
-              '\u2022 ${changelog.join('\n\u2022 ')}',
-              style: kRobotoTextStyle,
-            ),
+            Text('\u2022 ${changelog.join('\n\u2022 ')}'),
          ],
        ),
      ),
--- a/lib/ui/widgets/shared/custom_card.dart
+++ b/lib/ui/widgets/shared/custom_card.dart
@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+
+class CustomCard extends StatelessWidget {
+  final bool isFilled;
+  final Widget child;
+
+  const CustomCard({
+    Key? key,
+    this.isFilled = true,
+    required this.child,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(16),
+        color: isFilled
+            ? Theme.of(context).colorScheme.secondaryContainer
+            : Colors.transparent,
+        border: isFilled
+            ? null
+            : Border.all(
+                width: 1,
+                color: Theme.of(context).colorScheme.secondary,
+              ),
+      ),
+      padding: const EdgeInsets.all(20),
+      child: child,
+    );
+  }
+}
--- a/lib/ui/widgets/shared/custom_sliver_app_bar.dart
+++ b/lib/ui/widgets/shared/custom_sliver_app_bar.dart
@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:revanced_manager/theme.dart';

 class CustomSliverAppBar extends StatelessWidget {
  final Widget title;
@ -21,10 +20,8 @@ class CustomSliverAppBar extends StatelessWidget {
      automaticallyImplyLeading: false,
      backgroundColor: MaterialStateColor.resolveWith(
        (states) => states.contains(MaterialState.scrolledUnder)
-            ? isDark
-                ? Theme.of(context).colorScheme.primary
-                : Theme.of(context).navigationBarTheme.backgroundColor!
-            : Theme.of(context).scaffoldBackgroundColor,
+            ? Theme.of(context).colorScheme.surface
+            : Theme.of(context).canvasColor,
      ),
      flexibleSpace: FlexibleSpaceBar(
        titlePadding: const EdgeInsets.symmetric(
--- a/lib/ui/widgets/shared/open_container_wrapper.dart
+++ b/lib/ui/widgets/shared/open_container_wrapper.dart
@ -21,7 +21,7 @@ class OpenContainerWrapper extends StatelessWidget {
      openColor: Theme.of(context).colorScheme.primary,
      closedColor: Colors.transparent,
      closedShape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(12),
+        borderRadius: BorderRadius.circular(16),
      ),
    );
  }
--- a/lib/ui/widgets/shared/patch_text_button.dart
+++ b/lib/ui/widgets/shared/patch_text_button.dart
@ -1,51 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_i18n/flutter_i18n.dart';
-import 'package:revanced_manager/constants.dart';
-import 'package:revanced_manager/theme.dart';
-
-class PatchTextButton extends StatelessWidget {
-  final String text;
-  final Function() onPressed;
-  final Color borderColor;
-  final Color backgroundColor;
-
-  const PatchTextButton({
-    Key? key,
-    required this.text,
-    required this.onPressed,
-    this.borderColor = const Color(0xff7792BA),
-    this.backgroundColor = Colors.transparent,
-  }) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return TextButton(
-      onPressed: onPressed,
-      style: Theme.of(context).textButtonTheme.style?.copyWith(
-          backgroundColor: MaterialStateProperty.all<Color?>(backgroundColor),
-          side: MaterialStateProperty.all<BorderSide>(
-            BorderSide(
-              color: borderColor,
-              width: 1,
-            ),
-          ),
-          padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
-            const EdgeInsets.symmetric(
-              horizontal: 16,
-              vertical: 4,
-            ),
-          )),
-      child: I18nText(text,
-          child: Text(
-            '',
-            style: kInterTextStyle.copyWith(
-              color: backgroundColor == Colors.transparent
-                  ? const Color.fromRGBO(119, 146, 186, 1)
-                  : isDark
-                      ? Colors.black
-                      : Colors.white,
-            ),
-          )),
-    );
-  }
-}
--- a/lib/ui/widgets/shared/search_bar.dart
+++ b/lib/ui/widgets/shared/search_bar.dart
@ -1,23 +1,16 @@
 import 'package:flutter/material.dart';
-import 'package:google_fonts/google_fonts.dart';

 class SearchBar extends StatefulWidget {
  final String? hintText;
-  final Color? fillColor;
  final bool showSelectIcon;
  final Function(bool)? onSelectAll;
-  final Color? backgroundColor;
-  final Color? hintTextColor;

  const SearchBar({
    Key? key,
    required this.hintText,
-    required this.fillColor,
-    required this.onQueryChanged,
-    this.onSelectAll,
    this.showSelectIcon = false,
-    this.backgroundColor = const Color(0xff1B222B),
-    this.hintTextColor = Colors.white,
+    this.onSelectAll,
+    required this.onQueryChanged,
  }) : super(key: key);

  final Function(String) onQueryChanged;
@ -34,14 +27,8 @@ class _SearchBarState extends State<SearchBar> {
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(12),
-        color: widget.backgroundColor,
-        border: Border.all(
-          color: widget.backgroundColor != null
-              ? widget.backgroundColor!
-              : Colors.white,
-          width: 1,
-        ),
+        borderRadius: BorderRadius.circular(16),
+        color: Theme.of(context).colorScheme.secondaryContainer,
      ),
      child: Row(
        children: <Widget>[
@ -49,25 +36,18 @@ class _SearchBarState extends State<SearchBar> {
            child: TextFormField(
              onChanged: widget.onQueryChanged,
              controller: _textController,
-              cursorColor: Theme.of(context).textTheme.headline5!.color,
              decoration: InputDecoration(
-                fillColor: widget.fillColor,
                filled: true,
+                fillColor: Theme.of(context).colorScheme.secondaryContainer,
                contentPadding: const EdgeInsets.all(12.0),
                hintText: widget.hintText,
-                hintStyle: GoogleFonts.poppins(
-                  color: widget.hintTextColor,
-                  fontWeight: FontWeight.w400,
-                ),
                prefixIcon: Icon(
                  Icons.search,
-                  size: 24.0,
                  color: Theme.of(context).iconTheme.color,
                ),
                suffixIcon: _textController.text.isNotEmpty
                    ? IconButton(
                        icon: const Icon(Icons.clear),
-                        iconSize: 24.0,
                        onPressed: () {
                          _textController.clear();
                          widget.onQueryChanged('');
@ -78,7 +58,6 @@ class _SearchBarState extends State<SearchBar> {
                            icon: _toggleSelectAll
                                ? const Icon(Icons.deselect)
                                : const Icon(Icons.select_all),
-                            iconSize: 24.0,
                            onPressed: widget.onSelectAll != null
                                ? () {
                                    setState(() {
@ -94,11 +73,6 @@ class _SearchBarState extends State<SearchBar> {
                  borderSide: BorderSide.none,
                ),
              ),
-              style: GoogleFonts.poppins(
-                color: Theme.of(context).textTheme.headline5!.color,
-                fontWeight: FontWeight.w400,
-                fontSize: 16,
-              ),
            ),
          ),
        ],