fix: remove dependency on inset-box-shadow [#87]

clerk · Jan 9, 2025 · 1fe96aa · 1fe96aa
1 parent 5bfd9ba
commit 1fe96aa
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 43 deletions.
diff --git a/packages/clerk_flutter/lib/src/widgets/common.dart b/packages/clerk_flutter/lib/src/widgets/common.dart
@@ -2,7 +2,6 @@
 
 import 'package:clerk_flutter/src/widgets/ui/style/colors.dart';
 import 'package:flutter/material.dart' hide BoxDecoration, BoxShadow;
-import 'package:flutter_inset_box_shadow/flutter_inset_box_shadow.dart';
 import 'package:phone_input/phone_input_package.dart';
 
 extension NullExtension on String {
@@ -31,22 +30,13 @@ const outlineInputBorder = OutlineInputBorder(
   borderSide: BorderSide.none,
 );
 
-const insetBoxShadow = [
-  BoxShadow(
-    color: ClerkColors.seashell,
-    blurRadius: 5.0,
-    offset: Offset(1.0, 1.0),
-    inset: true,
+const inputBoxBorderDecoration = ShapeDecoration(
+  color: ClerkColors.white,
+  shape: RoundedRectangleBorder(
+    side: BorderSide(color: ClerkColors.dawnPink, width: 0.5),
+    borderRadius: borderRadius4,
   ),
-  BoxShadow(
-    color: ClerkColors.seashell,
-    blurRadius: 5.0,
-    offset: Offset(-1.0, -1.0),
-    inset: true,
-  ),
-];
-
-const insetBoxShadowDecoration = BoxDecoration(boxShadow: insetBoxShadow);
+);
 
 const firstColumnWidth = 215.0;
 const secondColumnWidth = 280.0;
@@ -183,6 +173,7 @@ const endPadding32 = EdgeInsetsDirectional.only(end: 32.0);
 const endPadding48 = EdgeInsetsDirectional.only(end: 48.0);
 
 const borderRadius4 = BorderRadius.all(Radius.circular(4.0));
+const borderRadius6 = BorderRadius.all(Radius.circular(6.0));
 const borderRadius8 = BorderRadius.all(Radius.circular(8.0));
 const borderRadius12 = BorderRadius.all(Radius.circular(12.0));
 const borderRadius16 = BorderRadius.all(Radius.circular(16.0));

diff --git a/packages/clerk_flutter/lib/src/widgets/ui/clerk_panel.dart b/packages/clerk_flutter/lib/src/widgets/ui/clerk_panel.dart
@@ -23,11 +23,7 @@ class ClerkPanel extends StatelessWidget {
     return DefaultTextStyle(
       style: ClerkTextStyle.subtitleDark.copyWith(height: 1.0),
       child: DecoratedBox(
-        decoration: const BoxDecoration(
-          borderRadius: BorderRadius.all(Radius.circular(12)),
-          color: ClerkColors.white,
-          boxShadow: insetBoxShadow,
-        ),
+        decoration: inputBoxBorderDecoration,
         child: Padding(padding: padding, child: child),
       ),
     );

diff --git a/packages/clerk_flutter/lib/src/widgets/ui/clerk_phone_number_form_field.dart b/packages/clerk_flutter/lib/src/widgets/ui/clerk_phone_number_form_field.dart
@@ -68,7 +68,7 @@ class ClerkPhoneNumberFormField extends StatelessWidget {
         ),
         verticalMargin4,
         DecoratedBox(
-          decoration: insetBoxShadowDecoration,
+          decoration: inputBoxBorderDecoration,
           child: _PhoneInput(
             initial: initial,
             defaultCountry: defaultCountry,

diff --git a/packages/clerk_flutter/lib/src/widgets/ui/clerk_text_form_field.dart b/packages/clerk_flutter/lib/src/widgets/ui/clerk_text_form_field.dart
@@ -82,22 +82,18 @@ class ClerkTextFormField extends StatelessWidget {
         verticalMargin4,
         SizedBox(
           height: 32.0,
-          child: ClipRRect(
-            clipBehavior: Clip.antiAlias,
-            borderRadius: borderRadius8,
-            child: DecoratedBox(
-              decoration: insetBoxShadowDecoration,
-              child: _TextField(
-                label: label,
-                optional: optional,
-                obscureText: obscureText,
-                onChanged: onChanged,
-                onSubmit: onSubmit,
-                initial: initial,
-                onObscure: onObscure,
-                validator: validator,
-                autofocus: autofocus,
-              ),
+          child: DecoratedBox(
+            decoration: inputBoxBorderDecoration,
+            child: _TextField(
+              label: label,
+              optional: optional,
+              obscureText: obscureText,
+              onChanged: onChanged,
+              onSubmit: onSubmit,
+              initial: initial,
+              onObscure: onObscure,
+              validator: validator,
+              autofocus: autofocus,
             ),
           ),
         ),

diff --git a/packages/clerk_flutter/lib/src/widgets/user/clerk_user_profile_widget.dart b/packages/clerk_flutter/lib/src/widgets/user/clerk_user_profile_widget.dart
@@ -102,10 +102,7 @@ class _SecondChild extends StatelessWidget {
       ],
     );
     final primaryTag = DecoratedBox(
-      decoration: insetBoxShadowDecoration.copyWith(
-        color: ClerkColors.desertStorm,
-        borderRadius: borderRadius4,
-      ),
+      decoration: inputBoxBorderDecoration,
       child: Padding(
         padding: verticalPadding4 + horizontalPadding8,
         child: const Text(

diff --git a/packages/clerk_flutter/pubspec.yaml b/packages/clerk_flutter/pubspec.yaml
@@ -17,7 +17,6 @@ dependencies:
   clerk_auth: ^0.0.4-dev
   collection: ^1.17.1
   email_validator: ^3.0.0
-  flutter_inset_box_shadow: ^1.0.8
   flutter_svg: ^2.0.10+1
   image_picker: ^1.0.7
   path_provider: ^2.1.2