feat: improve page thumbnail on mobile (#5535)

* feat: improve view thumbnail

* chore: blur the bottom navigation bar

* feat: improve date format

* feat: support url avatar

* fix: remove duplicated divider
This commit is contained in:
Lucas.Xu 2024-06-14 13:15:41 +08:00 committed by GitHub
parent 27899ee993
commit cbe452a73d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
16 changed files with 219 additions and 66 deletions

View File

@ -33,6 +33,7 @@ class BlockActionBottomSheet extends StatelessWidget {
FlowySvgs.arrow_up_s,
size: Size.square(20),
),
showTopBorder: false,
onTap: () => onAction(BlockActionBottomSheetType.insertAbove),
),
FlowyOptionTile.text(
@ -48,7 +49,7 @@ class BlockActionBottomSheet extends StatelessWidget {
FlowyOptionTile.text(
showTopBorder: false,
text: LocaleKeys.button_duplicate.tr(),
leftIcon: const FlowySvg(FlowySvgs.m_field_copy_s),
leftIcon: const FlowySvg(FlowySvgs.m_duplicate_s),
onTap: () => onAction(BlockActionBottomSheetType.duplicate),
),

View File

@ -95,8 +95,11 @@ class _FavoriteViews extends StatelessWidget {
return Scrollbar(
child: ListView.separated(
key: const PageStorageKey('favorite_views_page_storage_key'),
padding: const EdgeInsets.symmetric(
horizontal: HomeSpaceViewSizes.mHorizontalPadding,
padding: EdgeInsets.only(
left: HomeSpaceViewSizes.mHorizontalPadding,
right: HomeSpaceViewSizes.mHorizontalPadding,
bottom: HomeSpaceViewSizes.mVerticalPadding +
MediaQuery.of(context).padding.bottom,
),
itemBuilder: (context, index) {
final view = favoriteViews[index];

View File

@ -28,9 +28,12 @@ class _MobileHomeSpaceState extends State<MobileHomeSpace>
return Scrollbar(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: HomeSpaceViewSizes.mHorizontalPadding,
vertical: HomeSpaceViewSizes.mVerticalPadding,
padding: EdgeInsets.only(
left: HomeSpaceViewSizes.mHorizontalPadding,
right: HomeSpaceViewSizes.mHorizontalPadding,
top: HomeSpaceViewSizes.mVerticalPadding,
bottom: HomeSpaceViewSizes.mVerticalPadding +
MediaQuery.of(context).padding.bottom,
),
child: MobileFolders(
user: widget.userProfile,

View File

@ -57,6 +57,7 @@ class MobileHomeScreen extends StatelessWidget {
return Scaffold(
body: SafeArea(
bottom: false,
child: Provider.value(
value: userProfile,
child: MobileHomePage(

View File

@ -1,5 +1,6 @@
import 'package:appflowy/mobile/presentation/home/shared/empty_placeholder.dart';
import 'package:appflowy/mobile/presentation/home/shared/mobile_view_card.dart';
import 'package:appflowy/util/theme_extension.dart';
import 'package:appflowy/workspace/application/recent/prelude.dart';
import 'package:appflowy/workspace/presentation/home/home_sizes.dart';
import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
@ -63,12 +64,18 @@ class _RecentViews extends StatelessWidget {
@override
Widget build(BuildContext context) {
final borderColor = Theme.of(context).isLightMode
? const Color(0x00e2e2e4)
: const Color(0x1AFFFFFF);
return SlidableAutoCloseBehavior(
child: Scrollbar(
child: ListView.separated(
key: const PageStorageKey('recent_views_page_storage_key'),
padding: const EdgeInsets.symmetric(
horizontal: HomeSpaceViewSizes.mHorizontalPadding,
padding: EdgeInsets.only(
left: HomeSpaceViewSizes.mHorizontalPadding,
right: HomeSpaceViewSizes.mHorizontalPadding,
bottom: HomeSpaceViewSizes.mVerticalPadding +
MediaQuery.of(context).padding.bottom,
),
itemBuilder: (context, index) {
final sectionView = recentViews[index];
@ -77,7 +84,7 @@ class _RecentViews extends StatelessWidget {
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Theme.of(context).dividerColor,
color: borderColor,
width: 0.5,
),
),

View File

@ -10,6 +10,10 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.da
import 'package:appflowy/shared/appflowy_network_image.dart';
import 'package:appflowy/shared/flowy_gradient_colors.dart';
import 'package:appflowy/util/string_extension.dart';
import 'package:appflowy/util/theme_extension.dart';
import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
import 'package:appflowy/workspace/application/settings/date_time/date_format_ext.dart';
import 'package:appflowy/workspace/application/settings/date_time/time_format_ext.dart';
import 'package:appflowy/workspace/application/view/view_bloc.dart';
import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
@ -23,6 +27,7 @@ import 'package:flutter_slidable/flutter_slidable.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';
import 'package:string_validator/string_validator.dart';
import 'package:time/time.dart';
enum MobileViewCardType {
recent,
@ -153,6 +158,7 @@ class MobileViewCard extends StatelessWidget {
return ClipRRect(
borderRadius: BorderRadius.circular(8),
child: _ViewCover(
layout: view.layout,
coverTypeV1: state.coverTypeV1,
coverTypeV2: state.coverTypeV2,
value: state.coverValue,
@ -185,6 +191,7 @@ class MobileViewCard extends StatelessWidget {
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
fontSize: 16.0,
fontWeight: FontWeight.w600,
height: 1.3,
),
),
],
@ -203,40 +210,45 @@ class MobileViewCard extends StatelessWidget {
}
Widget _buildLastViewed(BuildContext context) {
final textColor = Theme.of(context).isLightMode
? const Color(0xFF171717)
: Colors.white.withOpacity(0.45);
if (timestamp == null) {
return const SizedBox.shrink();
}
final date = _formatTimestamp(
context,
timestamp!.toInt() * 1000,
);
return FlowyText.regular(
date,
fontSize: 12.0,
color: Theme.of(context).hintColor,
fontSize: 13.0,
color: textColor,
);
}
String _formatTimestamp(int timestamp) {
String _formatTimestamp(BuildContext context, int timestamp) {
final now = DateTime.now();
final dateTime = DateTime.fromMillisecondsSinceEpoch(timestamp);
final difference = now.difference(dateTime);
final String date;
final dateFormate =
context.read<AppearanceSettingsCubit>().state.dateFormat;
final timeFormate =
context.read<AppearanceSettingsCubit>().state.timeFormat;
if (difference.inMinutes < 1) {
date = LocaleKeys.sideBar_justNow.tr();
} else if (difference.inHours < 1) {
} else if (difference.inHours < 1 && dateTime.isToday) {
// Less than 1 hour
date = LocaleKeys.sideBar_minutesAgo
.tr(namedArgs: {'count': difference.inMinutes.toString()});
} else if (difference.inHours >= 1 && difference.inHours < 24) {
// Between 1 hour and 24 hours
date = DateFormat('h:mm a').format(dateTime);
} else if (difference.inDays >= 1 && dateTime.year == now.year) {
// More than 24 hours but within the current year
date = DateFormat('M/d, h:mm a').format(dateTime);
} else if (difference.inHours >= 1 && dateTime.isToday) {
// in same day
date = timeFormate.formatTime(dateTime);
} else {
// Other cases (previous years)
date = DateFormat('M/d/yyyy, h:mm a').format(dateTime);
date = dateFormate.formatDate(dateTime, false);
}
if (difference.inHours >= 1) {
@ -249,20 +261,20 @@ class MobileViewCard extends StatelessWidget {
class _ViewCover extends StatelessWidget {
const _ViewCover({
required this.layout,
required this.coverTypeV1,
this.coverTypeV2,
this.value,
});
final ViewLayoutPB layout;
final CoverType coverTypeV1;
final PageStyleCoverImageType? coverTypeV2;
final String? value;
@override
Widget build(BuildContext context) {
final placeholder = Container(
color: const Color(0xFFE1FBFF),
);
final placeholder = _buildPlaceholder(context);
final value = this.value;
if (value == null) {
return placeholder;
@ -273,6 +285,45 @@ class _ViewCover extends StatelessWidget {
return _buildCoverV1(context, value, placeholder);
}
Widget _buildPlaceholder(BuildContext context) {
final isLightMode = Theme.of(context).isLightMode;
final (svg, color) = switch (layout) {
ViewLayoutPB.Document => (
FlowySvgs.m_document_thumbnail_m,
isLightMode ? const Color(0xCCEDFBFF) : const Color(0x33658B90)
),
ViewLayoutPB.Grid => (
FlowySvgs.m_grid_thumbnail_m,
isLightMode ? const Color(0xFFF5F4FF) : const Color(0x338B80AD)
),
ViewLayoutPB.Board => (
FlowySvgs.m_board_thumbnail_m,
isLightMode ? const Color(0x7FE0FDD9) : const Color(0x3372936B),
),
ViewLayoutPB.Calendar => (
FlowySvgs.m_calendar_thumbnail_m,
isLightMode ? const Color(0xFFFFF7F0) : const Color(0x33A68B77)
),
ViewLayoutPB.Chat => (
FlowySvgs.m_chat_thumbnail_m,
isLightMode ? const Color(0x66FFE6FD) : const Color(0x33987195)
),
_ => (
FlowySvgs.m_document_thumbnail_m,
isLightMode ? Colors.black : Colors.white
)
};
return ColoredBox(
color: color,
child: Center(
child: FlowySvg(
svg,
blendMode: null,
),
),
);
}
Widget _buildCoverV2(BuildContext context, String value, Widget placeholder) {
final type = coverTypeV2;
if (type == null) {

View File

@ -21,8 +21,8 @@ class MobileSpaceTabBar extends StatelessWidget {
Widget build(BuildContext context) {
final baseStyle = Theme.of(context).textTheme.bodyMedium;
final labelStyle = baseStyle?.copyWith(
fontWeight: FontWeight.w500,
fontSize: 15.0,
fontWeight: FontWeight.w600,
fontSize: 16.0,
);
final unselectedLabelStyle = baseStyle?.copyWith(
fontWeight: FontWeight.w400,

View File

@ -1,7 +1,10 @@
import 'dart:ui';
import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/mobile/application/mobile_router.dart';
import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
import 'package:appflowy/util/theme_extension.dart';
import 'package:appflowy/workspace/application/workspace/workspace_service.dart';
import 'package:appflowy_backend/dispatch/dispatch.dart';
import 'package:appflowy_backend/log.dart';
@ -46,22 +49,40 @@ class MobileBottomNavigationBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
final isLightMode = Theme.of(context).isLightMode;
final backgroundColor = isLightMode
? Colors.white.withOpacity(0.95)
: const Color(0x0023262b).withOpacity(0.95);
return Scaffold(
body: navigationShell,
bottomNavigationBar: Theme(
data: Theme.of(context).copyWith(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
),
child: BottomNavigationBar(
showSelectedLabels: false,
showUnselectedLabels: false,
enableFeedback: false,
type: BottomNavigationBarType.fixed,
elevation: 0,
items: _items,
currentIndex: navigationShell.currentIndex,
onTap: (int bottomBarIndex) => _onTap(context, bottomBarIndex),
extendBody: true,
bottomNavigationBar: ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 2,
sigmaY: 2,
),
child: DecoratedBox(
decoration: BoxDecoration(
border: isLightMode
? Border(
top: BorderSide(color: Theme.of(context).dividerColor),
)
: null,
color: backgroundColor,
),
child: BottomNavigationBar(
showSelectedLabels: false,
showUnselectedLabels: false,
enableFeedback: false,
type: BottomNavigationBarType.fixed,
elevation: 0,
items: _items,
backgroundColor: Colors.transparent,
currentIndex: navigationShell.currentIndex,
onTap: (int bottomBarIndex) => _onTap(context, bottomBarIndex),
),
),
),
),
);

View File

@ -1,7 +1,6 @@
import 'package:flutter/material.dart';
import 'package:avatar_stack/avatar_stack.dart';
import 'package:avatar_stack/positions.dart';
import 'package:flutter/material.dart';
class CollaboratorAvatarStack extends StatelessWidget {
const CollaboratorAvatarStack({
@ -31,14 +30,14 @@ class CollaboratorAvatarStack extends StatelessWidget {
Widget build(BuildContext context) {
final settings = this.settings ??
RestrictedPositions(
maxCoverage: 0.3,
minCoverage: 0.2,
maxCoverage: 0.4,
minCoverage: 0.3,
align: StackAlign.right,
laying: StackLaying.first,
);
final border = BorderSide(
color: borderColor ?? Theme.of(context).colorScheme.onPrimary,
color: borderColor ?? Theme.of(context).dividerColor,
width: borderWidth ?? 2.0,
);

View File

@ -1,3 +1,4 @@
import 'package:appflowy/plugins/document/application/document_awareness_metadata.dart';
import 'package:appflowy/plugins/document/application/document_collaborators_bloc.dart';
import 'package:appflowy/plugins/document/presentation/collaborator_avater_stack.dart';
import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
@ -7,6 +8,7 @@ import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:string_validator/string_validator.dart';
class DocumentCollaborators extends StatelessWidget {
const DocumentCollaborators({
@ -66,21 +68,11 @@ class DocumentCollaborators extends StatelessWidget {
),
);
},
avatars: collaborators
.map(
(c) => FlowyTooltip(
message: c.userName,
child: CircleAvatar(
backgroundColor: c.cursorColor.tryToColor(),
child: FlowyText(
c.userName.characters.firstOrNull ?? ' ',
fontSize: fontSize,
color: Colors.black,
),
),
),
)
.toList(),
avatars: [
...collaborators.map(
(c) => _UserAvatar(fontSize: fontSize, user: c, width: width),
),
],
),
);
},
@ -88,3 +80,55 @@ class DocumentCollaborators extends StatelessWidget {
);
}
}
class _UserAvatar extends StatelessWidget {
const _UserAvatar({
this.fontSize,
required this.user,
required this.width,
});
final DocumentAwarenessMetadata user;
final double? fontSize;
final double width;
@override
Widget build(BuildContext context) {
final Widget child;
if (isURL(user.userAvatar)) {
child = _buildUrlAvatar(context);
} else {
child = _buildNameAvatar(context);
}
return FlowyTooltip(
message: user.userName,
child: child,
);
}
Widget _buildNameAvatar(BuildContext context) {
return CircleAvatar(
backgroundColor: user.cursorColor.tryToColor(),
child: FlowyText(
user.userName.characters.firstOrNull ?? ' ',
fontSize: fontSize,
color: Colors.black,
),
);
}
Widget _buildUrlAvatar(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.circular(width),
child: CircleAvatar(
backgroundColor: user.cursorColor.tryToColor(),
child: Image.network(
user.userAvatar,
fit: BoxFit.cover,
errorBuilder: (context, error, stackTrace) =>
_buildNameAvatar(context),
),
),
);
}
}

View File

@ -1,8 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="magic-star">
<g id="Group">
<path id="Vector" d="M16.8019 4.94194L16.7382 8.38587C16.7292 8.85839 17.0291 9.4854 17.4107 9.7671L19.6643 11.4754C21.1091 12.5659 20.8728 13.9016 19.1463 14.4469L16.2112 15.3646C15.7205 15.5191 15.2026 16.0553 15.0754 16.555L14.3757 19.2266C13.8214 21.3347 12.4401 21.5438 11.2952 19.69L9.69587 17.1002C9.40508 16.6277 8.71448 16.2733 8.16927 16.3006L5.13426 16.4551C2.96248 16.5641 2.34456 15.3101 3.76213 13.6563L5.56132 11.5663C5.89754 11.1756 6.05201 10.4486 5.89753 9.95792L4.9798 7.02283C4.44367 5.29631 5.40687 4.34219 7.1243 4.90558L9.80496 5.78702C10.2593 5.93241 10.9408 5.83244 11.3225 5.55075L14.1213 3.53344C15.6297 2.44301 16.8382 3.07911 16.8019 4.94194Z" stroke="#171717" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_2" d="M20.9994 21.1711L18.2461 18.4177" stroke="#171717" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.08 2.99005C20.7241 2.67453 20.3 2.69989 20.03 2.9366L11.5598 13.38C11 14.1608 10.69 14.8119 10.481 15.8C10.4521 15.9564 10.5007 15.94 10.5923 15.9C11.5208 15.5161 12.1477 15 12.78 14.2909L21.05 4.07919C21.35 3.72 21.46 3.4 21.08 2.99005ZM16.6 4.34995C15.1707 3.76697 13.6172 3.45131 12.0202 3.44995H11.9981L11.5096 3.45995L11.0459 3.48995C9.96531 3.57324 8.89552 3.81069 7.86042 4.17995C6.58826 4.63934 5.67097 5.13749 4.68 5.9696C3.685 6.80591 2.83229 7.77598 2.28 8.85281C1.70147 9.97969 1.40039 11.165 1.40039 12.3793C1.40039 13.5913 1.71014 14.7664 2.28953 15.8723C2.87953 16.9229 3.47953 17.6735 4.45876 18.48C5.44872 19.278 6.59438 19.9339 7.86713 20.37C9.17801 20.8187 10.5738 21.0599 12.0097 21.0599L12.5046 21.0499L12.9812 21.02C13.4574 20.9848 13.9324 20.9178 14.4059 20.83L15.0616 20.7L15.2394 20.6399C15.7061 20.42 15.9524 20.2 16.2195 19.816C16.5545 19.2279 16.6454 18.5031 16.4595 17.8388L16.3795 17.5219L16.3495 17.3241C16.3295 16.861 16.4195 16.3906 16.6495 16.0045C16.9738 15.48 17.5595 15.0626 18.2244 15.06L19.8294 15.0621L20.0141 15.06C21.48 14.9576 22.5111 13.65 22.5995 12.1519V11.9533V11.7355L22.5495 11.3426L22.4795 10.9756C22.2927 10.0012 21.9079 9.06018 21.3495 8.18023C21.2717 8.07269 21.2133 7.98923 21.1618 7.9157L21.1618 7.91559L21.1617 7.91547L21.1616 7.91536L21.1616 7.91533C21.0478 7.75275 20.9679 7.63864 20.7876 7.41995L19.8895 8.52889C20.0292 8.71047 20.1489 8.89698 20.2695 9.08815C20.7074 9.77849 20.9798 10.5073 21.1295 11.2613L21.1795 11.586L21.2095 11.8367V11.9147L21.1995 12.1136L21.1795 12.2676C21.0716 13.1 20.4865 13.5984 19.9539 13.67L19.8294 13.68H18.2219L17.9987 13.69C16.9627 13.7614 16.1995 14.241 15.5995 15.0804C14.9995 15.9197 14.835 16.9485 15.0495 17.9446L15.1095 18.1929L15.1395 18.311L15.1595 18.4506C15.1995 18.7031 15.1095 19.0546 14.9063 19.22C14.8526 19.28 14.7895 19.3226 14.6815 19.36L14.6184 19.38L14.009 19.5L13.5115 19.58C13.0129 19.646 12.5113 19.68 12.0071 19.68C10.756 19.68 9.5141 19.4692 8.37953 19.08C7.29227 18.7082 6.15268 18.0721 5.31953 17.4C4.50187 16.7382 3.88424 15.9393 3.43953 15.0959C2.98816 14.2341 2.77953 13.3223 2.77953 12.3869C2.77953 11.4456 3.00491 10.5164 3.45953 9.63271C3.9084 8.75793 4.71152 7.77076 5.53282 7.07995C6.37139 6.37606 7.34479 5.8617 8.42529 5.46995C9.42749 5.10632 10.4659 4.90565 11.521 4.85995L12.0097 4.84995L12.4597 4.85995C13.5068 4.90373 14.5306 5.08489 15.4905 5.41995L16.6 4.34995ZM12.0609 8.8499C12.6685 8.8499 13.1609 8.35742 13.1609 7.7499C13.1609 7.14239 12.6685 6.6499 12.0609 6.6499C11.4534 6.6499 10.9609 7.14239 10.9609 7.7499C10.9609 8.35742 11.4534 8.8499 12.0609 8.8499ZM8.39922 9.4501C8.39922 10.0576 7.90673 10.5501 7.29922 10.5501C6.69171 10.5501 6.19922 10.0576 6.19922 9.4501C6.19922 8.84258 6.69171 8.3501 7.29922 8.3501C7.90673 8.3501 8.39922 8.84258 8.39922 9.4501ZM6.15078 15.0799C6.75829 15.0799 7.25078 14.5874 7.25078 13.9799C7.25078 13.3724 6.75829 12.8799 6.15078 12.8799C5.54327 12.8799 5.05078 13.3724 5.05078 13.9799C5.05078 14.5874 5.54327 15.0799 6.15078 15.0799Z" fill="#171717"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.16484 3.1001H8.96484L8.96484 15.1001C8.96484 15.6524 8.51713 16.1001 7.96484 16.1001H4.16484C3.33642 16.1001 2.66484 15.4285 2.66484 14.6001L2.66484 4.6001C2.66484 3.77167 3.33642 3.1001 4.16484 3.1001Z" stroke="#49CD57" stroke-width="1.58" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.2648 3.1001H8.96484V19.4001C8.96484 20.2285 9.63642 20.9001 10.4648 20.9001H13.7648C14.5933 20.9001 15.2648 20.2285 15.2648 19.4001V3.1001Z" stroke="#49CD57" stroke-width="1.58" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.0656 12.6001H16.2656C15.7133 12.6001 15.2656 12.1524 15.2656 11.6001V3.1001H20.0656C20.8941 3.1001 21.5656 3.77167 21.5656 4.6001V11.1001C21.5656 11.9285 20.8941 12.6001 20.0656 12.6001Z" stroke="#49CD57" stroke-width="1.58" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 932 B

View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.57344 2.0002C8.57344 1.55837 8.21527 1.2002 7.77344 1.2002C7.33161 1.2002 6.97344 1.55837 6.97344 2.0002V3.01729H6C3.79086 3.01729 2 4.80815 2 7.01729V18.0003C2 20.2095 3.79086 22.0003 6 22.0003H18C20.2091 22.0003 22 20.2095 22 18.0003V7.01728C22 4.80815 20.2091 3.01729 18 3.01729H17.0266V2.0002C17.0266 1.55837 16.6684 1.2002 16.2266 1.2002C15.7847 1.2002 15.4266 1.55837 15.4266 2.0002V3.01729H8.57344V2.0002ZM6.97344 4.61729V5.22053C6.97344 5.66236 7.33161 6.02053 7.77344 6.02053C8.21527 6.02053 8.57344 5.66236 8.57344 5.22053V4.61729H15.4266V5.22053C15.4266 5.66236 15.7847 6.02053 16.2266 6.02053C16.6684 6.02053 17.0266 5.66236 17.0266 5.22053V4.61729H18C19.3255 4.61729 20.4 5.6918 20.4 7.01728V8.81165H3.6V7.01729C3.6 5.6918 4.67452 4.61729 6 4.61729H6.97344ZM3.6 10.4116V18.0003C3.6 19.3258 4.67452 20.4003 6 20.4003H18C19.3255 20.4003 20.4 19.3258 20.4 18.0003V10.4116H3.6Z" fill="#FD9D44"/>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -0,0 +1,14 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.2512 2.00865C12.6242 2.024 12.9057 2.33929 12.9057 2.71167C12.9057 3.15181 12.5169 3.48883 12.0759 3.47567C11.9942 3.47323 11.9122 3.472 11.83 3.472C7.29835 3.472 3.47548 7.20902 3.47548 11.6008C3.47548 12.9149 3.83321 14.1816 4.43775 15.2947C4.80485 15.9386 4.9607 16.656 5.01511 17.3947C5.06953 18.1335 4.96317 18.875 4.69436 19.5655L11.83 19.664C16.3632 19.664 20.1677 15.9926 20.1677 11.5992C20.1677 11.46 20.1638 11.3214 20.1563 11.1836C20.1314 10.7297 20.4752 10.32 20.9309 10.32C21.2989 10.32 21.6136 10.5912 21.6383 10.9576C21.6526 11.1697 21.6599 11.3836 21.6599 11.5992C21.6599 16.903 17.261 21.2 11.83 21.2H3.18451C3.00675 21.1812 2.84212 21.0979 2.72191 20.9659C2.60169 20.8339 2.53427 20.6624 2.53246 20.4841C2.53246 20.3811 2.61274 20.185 2.66844 20.0706C3.23694 19.4577 3.58426 18.6486 3.58426 17.7595C3.58426 17.1596 3.42535 16.5925 3.14519 16.1005C2.39249 14.7197 1.99876 13.1726 2 11.6008C2 6.29863 6.40218 2 11.83 2C11.9711 2 12.1115 2.0029 12.2512 2.00865Z" fill="url(#paint0_linear_428_29806)"/>
<path d="M19.0812 2.44864C18.9077 2.03084 18.3146 2.03074 18.1409 2.44848L17.916 2.98961C17.5715 3.81841 16.9112 4.47685 16.0803 4.82022L15.5338 5.04608C15.1148 5.21922 15.1149 5.81133 15.5339 5.98433L16.0753 6.20781C16.9078 6.55152 17.5691 7.21144 17.9133 8.04209L18.1383 8.58479C18.3116 9.00301 18.9054 9.00311 19.0789 8.58495L19.3022 8.04649C19.6466 7.21653 20.3074 6.55714 21.1393 6.21353L21.6857 5.98783C22.1047 5.81479 22.1048 5.22283 21.6859 5.04965L21.1432 4.82527C20.3122 4.48168 19.6519 3.82291 19.3076 2.99381L19.0812 2.44864Z" fill="url(#paint1_linear_428_29806)"/>
<defs>
<linearGradient id="paint0_linear_428_29806" x1="23.5236" y1="6.53153" x2="6.77803" y2="20.7735" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF53C5"/>
<stop offset="1" stop-color="#8E59FF"/>
</linearGradient>
<linearGradient id="paint1_linear_428_29806" x1="23.5236" y1="6.53153" x2="6.77803" y2="20.7735" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF53C5"/>
<stop offset="1" stop-color="#8E59FF"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.1281 9.71474C21.2395 9.97997 21.2969 10.2648 21.2969 10.5524V15.0265C21.2969 17.5387 20.8692 19.5 19.7213 20.8261C18.5476 22.1821 16.7813 22.6972 14.55 22.6972H9.45C7.21866 22.6972 5.45244 22.1821 4.27874 20.8261C3.13079 19.5 2.70312 17.5387 2.70312 15.0265V9.1346C2.70312 6.62238 3.13079 4.66112 4.27874 3.33493C5.45244 1.97899 7.21866 1.46387 9.45 1.46387H13.2039C13.4655 1.46387 13.7245 1.51474 13.9666 1.61366C14.2618 1.73425 14.5241 1.92311 14.7322 2.16473L20.8619 9.28469C20.9725 9.41324 21.0624 9.55836 21.1281 9.71474ZM4.29688 9.1346C4.29688 6.73691 4.71921 5.26125 5.48376 4.37799C6.22256 3.52448 7.43134 3.05762 9.45 3.05762H12.8281V6.04936C12.8281 7.55636 13.0326 8.80405 13.7648 9.65464C14.5286 10.5418 15.681 10.7955 17.025 10.7955H19.7031V15.0265C19.7031 17.4242 19.2808 18.8998 18.5162 19.7831C17.7774 20.6366 16.5687 21.1034 14.55 21.1034H9.45C7.43134 21.1034 6.22256 20.6366 5.48376 19.7831C4.71921 18.8998 4.29688 17.4242 4.29688 15.0265V9.1346ZM14.4219 6.04936V4.24708L18.6874 9.20175H17.025C15.819 9.20175 15.2714 8.96182 14.9727 8.61481C14.6424 8.23125 14.4219 7.50431 14.4219 6.04936Z" fill="#00C2FF"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3028 4.01974H18.4211C19.5583 4.01974 20.4803 4.94168 20.4803 6.07895V8.12292H10.3028V4.01974ZM10.3028 9.64266H20.4803V14.3572H10.3028V9.64266ZM8.7831 14.3572V9.64266H3.51974V14.3572H8.7831ZM3.51974 15.8769H8.7831V19.9803H5.57895C4.44168 19.9803 3.51974 19.0583 3.51974 17.9211V15.8769ZM10.3028 15.8769H20.4803V17.9211C20.4803 19.0583 19.5583 19.9803 18.4211 19.9803H10.3028V15.8769ZM8.7831 4.01974V8.12292H3.51974V6.07895C3.51974 4.94168 4.44168 4.01974 5.57895 4.01974H8.7831ZM2 6.07895C2 4.10235 3.60235 2.5 5.57895 2.5H18.4211C20.3976 2.5 22 4.10235 22 6.07895V17.9211C22 19.8976 20.3977 21.5 18.4211 21.5H5.57895C3.60235 21.5 2 19.8977 2 17.9211V6.07895Z" fill="#8263FF"/>
</svg>

After

Width:  |  Height:  |  Size: 833 B