feat: feed base post, content scaling, font (#29)

* add base feed post (footer, header + text as body)
* add NotoSans font, apply it for all app text themes
* add font scaling
* fix icon scaling
* adjust feed screen offsets

.github/workflows/CICD.yaml

@@ -160,7 +160,7 @@ jobs:
               echo "IOS_SIGN_TYPE=adhoc" >> $GITHUB_ENV
               echo "DEPLOY_TARGET=firebase" >> $GITHUB_ENV
               echo "APP_VERSION=9.9.9" >> $GITHUB_ENV
-              echo "RELEASE_NOTES=${{ github.head_ref }}" >> $GITHUB_ENV
+              echo "RELEASE_NOTES=${{ github.ref_name }}" >> $GITHUB_ENV
             else
               echo "IOS_SIGN_TYPE=appstore" >> $GITHUB_ENV
               echo "DEPLOY_TARGET=testflight" >> $GITHUB_ENV
@@ -251,7 +251,7 @@ jobs:
               echo "ANDROID_ARCHIVE_TYPE=apk" >> $GITHUB_ENV
               echo "DEPLOY_TARGET=firebase" >> $GITHUB_ENV
               echo "APP_VERSION=9.9.9" >> $GITHUB_ENV
-              echo "RELEASE_NOTES=release_notes:${{ github.head_ref }}" >> $GITHUB_ENV
+              echo "RELEASE_NOTES=release_notes:${{ github.ref_name }}" >> $GITHUB_ENV
             else
               echo "ANDROID_ARCHIVE_TYPE=appbundle" >> $GITHUB_ENV
               echo "DEPLOY_TARGET=playstore" >> $GITHUB_ENV

ios/Podfile.lock

@@ -52,4 +52,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 4e8f8b2be68aeea4c0d5beb6ff1e79fface1d048
 
-COCOAPODS: 1.14.3
+COCOAPODS: 1.15.2

lib/app/components/list_item/list_item.dart

@@ -24,12 +24,11 @@ class ListItem extends StatelessWidget {
     BoxConstraints? constraints,
     this.backgroundColor,
     this.onTap,
-  })  : borderRadius =
-            borderRadius ?? BorderRadius.all(Radius.circular(16.0.s)),
-        contentPadding = contentPadding ?? EdgeInsets.all(12.0.s),
-        leadingPadding = leadingPadding ?? EdgeInsets.only(right: 10.0.s),
-        trailingPadding = trailingPadding ?? EdgeInsets.only(left: 10.0.s),
-        constraints = constraints ?? BoxConstraints(minHeight: 60.0.s);
+  })  : borderRadius = borderRadius ?? defaultBorderRadius,
+        contentPadding = contentPadding ?? defaultContentPadding,
+        leadingPadding = leadingPadding ?? defaultLeadingPadding,
+        trailingPadding = trailingPadding ?? defaultTrailingPadding,
+        constraints = constraints ?? defaultConstraints;
 
   factory ListItem.checkbox({
     Key? key,
@@ -59,9 +58,9 @@ class ListItem extends StatelessWidget {
     BoxConstraints? constraints,
     Color? backgroundColor,
     VoidCallback? onTap,
+    String? profilePicture,
     required Widget title,
     required Widget subtitle,
-    required String profilePicture,
     bool verifiedBadge,
     bool iceBadge,
     DateTime? timeago,
@@ -80,6 +79,14 @@ class ListItem extends StatelessWidget {
   final Color? backgroundColor;
   final VoidCallback? onTap;
 
+  static BorderRadius get defaultBorderRadius =>
+      BorderRadius.all(Radius.circular(16.0.s));
+  static EdgeInsets get defaultContentPadding => EdgeInsets.all(12.0.s);
+  static EdgeInsets get defaultLeadingPadding => EdgeInsets.only(right: 10.0.s);
+  static EdgeInsets get defaultTrailingPadding => EdgeInsets.only(left: 10.0.s);
+  static BoxConstraints get defaultConstraints =>
+      BoxConstraints(minHeight: 60.0.s);
+
   @override
   Widget build(BuildContext context) {
     return _buildMainContainer(

lib/app/components/list_item/variants/list_item_user.dart

@@ -67,8 +67,7 @@ class _ListItemUser extends ListItem {
 
   @override
   TextStyle _getDefaultTitleStyle(BuildContext context) {
-    //TODO::change to subtitle3
-    return context.theme.appTextThemes.subtitle2.copyWith(
+    return context.theme.appTextThemes.subtitle3.copyWith(
       color: context.theme.appColors.primaryText,
     );
   }

lib/app/components/search_input/search_input.dart

@@ -68,10 +68,10 @@ class SearchInput extends HookWidget {
                   color: context.theme.appColors.tertararyText,
                 ),
                 prefixIcon: Padding(
-                  padding: EdgeInsets.only(left: 12.0.s, right: 6.0.s),
+                  padding: EdgeInsets.only(left: 9.0.s, right: 5.0.s),
                   child: Assets.images.icons.iconFieldSearch.icon(
                     color: context.theme.appColors.tertararyText,
-                    size: 16.0.s,
+                    size: 18.0.s,
                   ),
                 ),
                 suffixIcon: loading

lib/app/extensions/asset_gen_image.dart

@@ -4,10 +4,11 @@ import 'package:ice/generated/assets.gen.dart';
 
 extension IconExtension on AssetGenImage {
   Widget icon({Color? color, double? size}) {
-    return ImageIcon(
-      AssetImage(path),
-      color: color,
-      size: size ?? 24.0.s,
+    return SizedBox.square(
+      dimension: size ?? 24.0.s,
+      child: FittedBox(
+        child: ImageIcon(AssetImage(path), color: color),
+      ),
     );
   }
 }

lib/app/features/core/views/components/content_scaler.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+
+class ContentScaler extends StatelessWidget {
+  const ContentScaler({
+    super.key,
+    required this.child,
+  });
+
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    return ScreenUtilInit(
+      designSize: const Size(375, 812),
+      builder: (BuildContext context, Widget? widget) => MediaQuery(
+        data: MediaQuery.of(context)
+            .copyWith(textScaler: TextScaler.linear(1.0.sp)),
+        child: child,
+      ),
+    );
+  }
+}

lib/app/features/core/views/pages/splash_page.dart

@@ -32,7 +32,6 @@ class SplashPage extends IceSimplePage {
         width: double.infinity,
         color: Colors.blueGrey,
         child: Center(
-          // <-- Wrap Lottie animation with a Container
           child: LottieBuilder.asset(
             'assets/lottie/splash-logo.json',
             controller: animationController,

lib/app/features/feed/components/post/components/post_body/post_body.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+import 'package:ice/app/components/screen_side_offset/screen_side_offset.dart';
+import 'package:ice/app/extensions/build_context.dart';
+import 'package:ice/app/extensions/theme_data.dart';
+
+class PostBody extends StatelessWidget {
+  const PostBody({
+    super.key,
+    required this.content,
+  });
+
+  final String content;
+
+  @override
+  Widget build(BuildContext context) {
+    return ScreenSideOffset.small(
+      child: Text(
+        content,
+        style: context.theme.appTextThemes.body2
+            .copyWith(color: context.theme.appColors.sharkText),
+      ),
+    );
+  }
+}

lib/app/features/feed/components/post/components/post_footer/post_engagement_metric.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+import 'package:ice/app/extensions/build_context.dart';
+import 'package:ice/app/extensions/num.dart';
+import 'package:ice/app/extensions/theme_data.dart';
+
+class PostEngagementMetric extends StatelessWidget {
+  const PostEngagementMetric({
+    super.key,
+    required this.icon,
+    required this.onPressed,
+    this.value,
+  });
+
+  static double get horizontalHitSlop => 12.0.s;
+  static double get verticalHitSlop => 6.0.s;
+
+  final Widget icon;
+  final VoidCallback onPressed;
+  final String? value;
+
+  @override
+  Widget build(BuildContext context) {
+    return TextButton(
+      onPressed: onPressed,
+      child: Padding(
+        padding: EdgeInsets.symmetric(
+          vertical: verticalHitSlop,
+          horizontal: horizontalHitSlop,
+        ),
+        child: Row(
+          children: <Widget>[
+            IconTheme(
+              data: IconThemeData(
+                size: 16.0.s,
+                color: context.theme.appColors.onTertararyBackground,
+              ),
+              child: icon,
+            ),
+            if (value != null)
+              Padding(
+                padding: EdgeInsets.only(left: 4.0.s),
+                child: Text(
+                  value!,
+                  style: context.theme.appTextThemes.caption2.copyWith(
+                    color: context.theme.appColors.onTertararyBackground,
+                  ),
+                ),
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/app/features/feed/components/post/components/post_footer/post_footer.dart

@@ -0,0 +1,67 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:ice/app/components/screen_side_offset/screen_side_offset.dart';
+import 'package:ice/app/extensions/asset_gen_image.dart';
+import 'package:ice/app/extensions/num.dart';
+import 'package:ice/app/features/feed/components/post/components/post_footer/post_engagement_metric.dart';
+import 'package:ice/app/features/feed/components/post/components/post_footer/post_metric_space.dart';
+import 'package:ice/generated/assets.gen.dart';
+
+class PostFooter extends StatelessWidget {
+  const PostFooter({super.key});
+
+  static double get horizontalPadding => max(
+        ScreenSideOffset.defaultSmallMargin -
+            PostEngagementMetric.horizontalHitSlop,
+        0,
+      );
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.fromLTRB(
+        horizontalPadding,
+        10.0.s,
+        horizontalPadding,
+        0,
+      ),
+      child: Row(
+        children: <Widget>[
+          PostMetricSpace(
+            child: PostEngagementMetric(
+              onPressed: () {},
+              icon: Assets.images.icons.iconBlockComment.icon(size: 16.0.s),
+              value: '121k',
+            ),
+          ),
+          PostMetricSpace(
+            child: PostEngagementMetric(
+              onPressed: () {},
+              icon: Assets.images.icons.iconBlockRepost.icon(size: 16.0.s),
+              value: '442k',
+            ),
+          ),
+          PostMetricSpace(
+            child: PostEngagementMetric(
+              onPressed: () {},
+              icon: Assets.images.icons.iconVideoLikeOff.icon(size: 16.0.s),
+              value: '121k',
+            ),
+          ),
+          PostMetricSpace(
+            child: PostEngagementMetric(
+              onPressed: () {},
+              icon: Assets.images.icons.iconButtonIceStroke.icon(size: 16.0.s),
+              value: '7',
+            ),
+          ),
+          PostEngagementMetric(
+            onPressed: () {},
+            icon: Assets.images.icons.iconBlockShare.icon(size: 16.0.s),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/app/features/feed/components/post/components/post_footer/post_metric_space.dart

@@ -0,0 +1,19 @@
+import 'package:flutter/material.dart';
+
+class PostMetricSpace extends StatelessWidget {
+  const PostMetricSpace({super.key, required this.child});
+
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    return Expanded(
+      child: Container(
+        alignment: Alignment.centerLeft,
+        child: IntrinsicWidth(
+          child: child,
+        ),
+      ),
+    );
+  }
+}

lib/app/features/feed/components/post/components/post_header/post_header.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:ice/app/components/list_item/list_item.dart';
+import 'package:ice/app/components/screen_side_offset/screen_side_offset.dart';
+import 'package:ice/app/extensions/num.dart';
+
+class PostHeader extends StatelessWidget {
+  const PostHeader({
+    super.key,
+    this.trailing,
+  });
+
+  final Widget? trailing;
+
+  @override
+  Widget build(BuildContext context) {
+    return ScreenSideOffset.small(
+      child: Padding(
+        padding: EdgeInsets.only(top: 2.0.s),
+        child: ListItem.user(
+          title: const Text('Arnold Grey'),
+          subtitle: const Text('@arnoldgrey'),
+          profilePicture:
+              'https://ice-staging.b-cdn.net/profile/default-profile-picture-16.png',
+          trailing: trailing,
+          constraints: BoxConstraints(minHeight: 55.0.s),
+          iceBadge: true,
+          verifiedBadge: true,
+        ),
+      ),
+    );
+  }
+}

lib/app/features/feed/components/post/components/post_header/post_menu.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:ice/app/extensions/asset_gen_image.dart';
+import 'package:ice/app/extensions/build_context.dart';
+import 'package:ice/app/extensions/num.dart';
+import 'package:ice/app/extensions/theme_data.dart';
+import 'package:ice/generated/assets.gen.dart';
+
+class PostMenu extends StatelessWidget {
+  const PostMenu({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 48.0.s,
+      height: 48.0.s,
+      transform: Matrix4.translationValues(12.0.s, 0, 0),
+      child: IconButton(
+        onPressed: () {},
+        icon: Assets.images.icons.iconMorePopup.icon(
+          color: context.theme.appColors.onTertararyBackground,
+        ),
+      ),
+    );
+  }
+}