design(menu): шторка и нижняя панель 1:1 по живому forbion

Косяк: оба меню расходились с боевым forbion (_header.css).
Шторка (.app-menu--mobile): убраны скругление верха и ручка-хендл
(в живом их нет), высота — по контенту почти на весь экран (была
½ экрана), нижний отступ 90 под панель, сетка 3 кол. с gap 8 (было 20),
фон #FBFBFB. Иконки-glass теперь ЛОКАЛЬНЫЕ (assets/menu/, офлайн);
Уведомления/Настройки — фирменные mobile-*-glass вместо Material-иконок
в круге.
Нижняя панель (.header__mobile-bottom): фикс. пилюля 328×61, паддинг 3,
кнопки 55 с фоном #FBFBFB и рамкой #E6E6E6 (была градиентная), раскладка
space-between; ВОЗВРАЩЕНА подсветка активного — текущий раздел и открытый
бургер красятся полупрозрачным зелёным градиентом 104° (как в forbion).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
b-dev-mobile
2026-07-10 05:22:23 +00:00
parent 92e0e9690b
commit 7f95b07666
21 changed files with 668 additions and 79 deletions
@@ -1,10 +1,10 @@
package ru.forbion.f7cloud.mobile.ui package ru.forbion.f7cloud.mobile.ui
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Notifications
import androidx.compose.material.icons.filled.Settings
import ru.forbion.f7cloud.core.designsystem.F7AppMenuItem import ru.forbion.f7cloud.core.designsystem.F7AppMenuItem
// Иконки-glass шторки — локальные (assets/menu/, из живой темы forbion): офлайн + точные.
private fun glass(name: String): String = "file:///android_asset/menu/$name"
enum class AppTab( enum class AppTab(
val title: String, val title: String,
val headerIconPath: String, val headerIconPath: String,
@@ -59,7 +59,7 @@ fun appMenuItems(
val core = coreAppMenuEntries.map { entry -> val core = coreAppMenuEntries.map { entry ->
F7AppMenuItem( F7AppMenuItem(
label = entry.label, label = entry.label,
iconUrl = "$base/themes/forbion/images/header/${entry.iconPath}", iconUrl = glass(entry.iconPath),
selected = entry.tab == active, selected = entry.tab == active,
externalUrl = entry.webPath?.let { "$base$it" }, externalUrl = entry.webPath?.let { "$base$it" },
) )
@@ -72,19 +72,17 @@ fun appMenuItems(
externalUrl = site.openUrl, externalUrl = site.openUrl,
) )
} }
// Нативные пункты по дизайну — действия обрабатываются в AppScaffold по label // Нативные пункты — тоже glass-иконки живой темы (mobile-*-glass), действия по label в AppScaffold
val native = listOf( val native = listOf(
F7AppMenuItem( F7AppMenuItem(
label = "Уведомления", label = "Уведомления",
iconUrl = "", iconUrl = glass("mobile-notifications-glass.svg"),
selected = false, selected = false,
localIcon = Icons.Filled.Notifications,
), ),
F7AppMenuItem( F7AppMenuItem(
label = "Настройки", label = "Настройки",
iconUrl = "", iconUrl = glass("mobile-settings-glass.svg"),
selected = false, selected = false,
localIcon = Icons.Filled.Settings,
), ),
) )
return core + external + native return core + external + native
@@ -0,0 +1,44 @@
<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_di_2888_36127)">
<circle cx="24.5" cy="23.5" r="22.5" fill="url(#paint0_linear_2888_36127)" fill-opacity="0.6" shape-rendering="crispEdges"/>
<circle cx="24.5" cy="23.5" r="22" stroke="url(#paint1_linear_2888_36127)" stroke-opacity="0.2" shape-rendering="crispEdges"/>
</g>
<path d="M9.46191 34.6143V16.043H39.5381V34.6143C39.5381 36.2224 38.2345 37.5259 36.6264 37.5259H12.3736C10.7655 37.5259 9.46191 36.2224 9.46191 34.6143Z" fill="white" stroke="black"/>
<path d="M9.46191 16.0426V12.5093C9.46191 10.9013 10.7655 9.59766 12.3736 9.59766H36.6264C38.2345 9.59766 39.5381 10.9012 39.5381 12.5093V16.0426H9.46191Z" fill="white" stroke="black"/>
<path d="M15.1792 7.44922H14.4867C14.0847 7.44922 13.7588 7.77512 13.7588 8.17713V12.092C13.7588 12.4941 14.0847 12.82 14.4867 12.82H15.1792C15.5812 12.82 15.9071 12.4941 15.9071 12.092V8.17713C15.9071 7.77512 15.5812 7.44922 15.1792 7.44922Z" fill="white" stroke="black"/>
<path d="M21.6235 7.44922H20.931C20.529 7.44922 20.2031 7.77512 20.2031 8.17713V12.092C20.2031 12.4941 20.529 12.82 20.931 12.82H21.6235C22.0255 12.82 22.3514 12.4941 22.3514 12.092V8.17713C22.3514 7.77512 22.0255 7.44922 21.6235 7.44922Z" fill="white" stroke="black"/>
<path d="M28.0688 7.44922H27.3764C26.9743 7.44922 26.6484 7.77512 26.6484 8.17713V12.092C26.6484 12.4941 26.9743 12.82 27.3764 12.82H28.0688C28.4708 12.82 28.7967 12.4941 28.7967 12.092V8.17713C28.7967 7.77512 28.4708 7.44922 28.0688 7.44922Z" fill="white" stroke="black"/>
<path d="M34.5132 7.44922H33.8207C33.4187 7.44922 33.0928 7.77512 33.0928 8.17713V12.092C33.0928 12.4941 33.4187 12.82 33.8207 12.82H34.5132C34.9152 12.82 35.2411 12.4941 35.2411 12.092V8.17713C35.2411 7.77512 34.9152 7.44922 34.5132 7.44922Z" fill="white" stroke="black"/>
<path d="M24.0094 29.8013V31.043H19.2809V29.8013H20.9992V23.4547C20.9323 23.5551 20.8194 23.668 20.6605 23.7934C20.51 23.9104 20.3386 24.0275 20.1463 24.1446C19.954 24.2533 19.7533 24.3453 19.5443 24.4205C19.3436 24.4958 19.1596 24.5334 18.9924 24.5334V23.2541C19.2181 23.2541 19.4439 23.1955 19.6697 23.0785C19.9038 22.9614 20.1212 22.8276 20.3219 22.6771C20.5226 22.5182 20.6814 22.3761 20.7985 22.2507C20.9239 22.1252 20.9908 22.0583 20.9992 22.05H22.4165V29.8013H24.0094ZM27.7577 31.1433C27.2643 31.1433 26.8128 31.0722 26.4031 30.9301C26.0017 30.7879 25.663 30.5831 25.3871 30.3155C25.1112 30.0479 24.9105 29.7385 24.7851 29.3874L25.5376 28.4843C25.5962 28.7017 25.7174 28.9191 25.9014 29.1365C26.0937 29.3539 26.3403 29.5295 26.6414 29.6633C26.9507 29.7971 27.3103 29.864 27.72 29.864C28.0796 29.864 28.3973 29.8096 28.6733 29.7009C28.9576 29.5839 29.1833 29.4208 29.3506 29.2118C29.5178 29.0027 29.6014 28.756 29.6014 28.4717C29.6014 28.154 29.5011 27.8864 29.3004 27.669C29.0997 27.4516 28.8112 27.2886 28.4349 27.1799C28.0587 27.0712 27.6071 27.0168 27.0804 27.0168H26.6539V25.9131H27.0804C27.7744 25.9131 28.3262 25.8002 28.736 25.5744C29.1541 25.3487 29.3631 25.0142 29.3631 24.571C29.3631 24.2951 29.2878 24.0568 29.1373 23.8561C28.9868 23.6471 28.7903 23.4924 28.5478 23.392C28.3053 23.2833 28.0378 23.229 27.7451 23.229C27.2685 23.229 26.8546 23.3377 26.5034 23.5551C26.1522 23.7725 25.8972 24.0401 25.7383 24.3578L24.8352 23.3669C25.0108 23.091 25.2533 22.8527 25.5627 22.652C25.8721 22.4513 26.2191 22.2966 26.6037 22.1879C26.9967 22.0792 27.3939 22.0249 27.7953 22.0249C28.3806 22.0249 28.9032 22.1294 29.3631 22.3385C29.823 22.5475 30.1825 22.836 30.4418 23.2039C30.701 23.5634 30.8306 23.9732 30.8306 24.4331C30.8306 24.7675 30.7595 25.0685 30.6173 25.3361C30.4836 25.6037 30.2871 25.8295 30.0278 26.0134C29.777 26.189 29.476 26.3186 29.1248 26.4022C29.5011 26.4691 29.8313 26.6113 30.1156 26.8287C30.4083 27.0461 30.6299 27.3137 30.7804 27.6314C30.9393 27.9491 31.0187 28.2962 31.0187 28.6724C31.0187 29.1909 30.8682 29.634 30.5672 30.0019C30.2745 30.3699 29.8815 30.6542 29.3882 30.8548C28.8948 31.0471 28.3513 31.1433 27.7577 31.1433Z" fill="url(#paint2_linear_2888_36127)" fill-opacity="0.91"/>
<defs>
<filter id="filter0_di_2888_36127" x="0" y="0" width="49" height="49" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.901961 0 0 0 0 0.901961 0 0 0 0 0.901961 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2888_36127"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_2888_36127"/>
<feBlend mode="normal" in="effect2_innerShadow_2888_36127" in2="effect1_dropShadow_2888_36127" result="effect2_innerShadow_2888_36127"/>
</filter>
<linearGradient id="paint0_linear_2888_36127" x1="2" y1="1" x2="55.0086" y2="14.4599" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="0.453125" stop-color="white"/>
</linearGradient>
<linearGradient id="paint1_linear_2888_36127" x1="3.40625" y1="3.04546" x2="47" y2="3.04546" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.65625" stop-color="#70B62B"/>
</linearGradient>
<linearGradient id="paint2_linear_2888_36127" x1="18.0547" y1="16.043" x2="35.1" y2="18.8562" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.453125" stop-color="#70B62B"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 5.8 KiB

@@ -0,0 +1,48 @@
<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_di_2888_36139)">
<circle cx="24.5" cy="23.5" r="22.5" fill="url(#paint0_linear_2888_36139)" fill-opacity="0.6" shape-rendering="crispEdges"/>
<circle cx="24.5" cy="23.5" r="22" stroke="url(#paint1_linear_2888_36139)" stroke-opacity="0.2" shape-rendering="crispEdges"/>
</g>
<path d="M13.334 35.4905V11.5096C13.334 9.84638 14.6823 8.49805 16.3456 8.49805H33.6594C35.3227 8.49805 36.671 9.84638 36.671 11.5096V35.4905C36.671 37.1541 35.3224 38.5028 33.6587 38.5028H16.3463C14.6827 38.5028 13.334 37.1541 13.334 35.4905Z" fill="white" stroke="black" stroke-width="1.00411"/>
<path d="M13.334 36.2802V10.7206C13.334 9.49313 14.3291 8.49805 15.5566 8.49805H17.7791V38.5028H15.5566C14.3291 38.5028 13.334 37.5077 13.334 36.2802Z" fill="white" stroke="black" stroke-width="1.00411"/>
<path d="M10.1787 22.5852V23.3016C10.1787 23.7175 10.5159 24.0547 10.9318 24.0547H14.9821C15.398 24.0547 15.7351 23.7175 15.7351 23.3016V22.5852C15.7351 22.1693 15.398 21.8321 14.9821 21.8321H10.9318C10.5159 21.8321 10.1787 22.1693 10.1787 22.5852Z" fill="white" stroke="black" stroke-width="1.00411"/>
<path d="M10.1787 29.2532V29.9696C10.1787 30.3855 10.5159 30.7227 10.9318 30.7227H14.9821C15.398 30.7227 15.7351 30.3855 15.7351 29.9696V29.2532C15.7351 28.8372 15.398 28.5001 14.9821 28.5001H10.9318C10.5159 28.5001 10.1787 28.8372 10.1787 29.2532Z" fill="white" stroke="black" stroke-width="1.00411"/>
<path d="M10 15.9192V16.6356C10 17.0515 10.3372 17.3887 10.7531 17.3887H14.8034C15.2193 17.3887 15.5564 17.0515 15.5564 16.6356V15.9192C15.5564 15.5033 15.2193 15.1661 14.8034 15.1661H10.7531C10.3372 15.1661 10 15.5033 10 15.9192Z" fill="white" stroke="black" stroke-width="1.00411"/>
<circle cx="27.2246" cy="21.21" r="2.29203" fill="url(#paint2_linear_2888_36139)" fill-opacity="0.91"/>
<path d="M27.2247 24.2676C24.6649 24.2676 23.1772 26.2776 22.7615 27.4917C22.6522 27.8111 22.9143 28.0876 23.2518 28.0876H31.1975C31.5351 28.0876 31.7972 27.8111 31.6879 27.4917C31.2722 26.2776 29.7844 24.2676 27.2247 24.2676Z" fill="url(#paint3_linear_2888_36139)" fill-opacity="0.91"/>
<defs>
<filter id="filter0_di_2888_36139" x="0" y="0" width="49" height="49" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.901961 0 0 0 0 0.901961 0 0 0 0 0.901961 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2888_36139"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_2888_36139"/>
<feBlend mode="normal" in="effect2_innerShadow_2888_36139" in2="effect1_dropShadow_2888_36139" result="effect2_innerShadow_2888_36139"/>
</filter>
<linearGradient id="paint0_linear_2888_36139" x1="2" y1="1" x2="55.0086" y2="14.4599" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="0.453125" stop-color="white"/>
</linearGradient>
<linearGradient id="paint1_linear_2888_36139" x1="3.40625" y1="3.04546" x2="47" y2="3.04546" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.65625" stop-color="#70B62B"/>
</linearGradient>
<linearGradient id="paint2_linear_2888_36139" x1="24.9326" y1="18.918" x2="30.3325" y2="20.2891" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.453125" stop-color="#70B62B"/>
</linearGradient>
<linearGradient id="paint3_linear_2888_36139" x1="22.6406" y1="24.2676" x2="31.0235" y2="29.3761" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.453125" stop-color="#70B62B"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 4.2 KiB

@@ -0,0 +1,52 @@
<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_di_2888_36152)">
<circle cx="24.5" cy="23.5" r="22.5" fill="url(#paint0_linear_2888_36152)" fill-opacity="0.6" shape-rendering="crispEdges"/>
<circle cx="24.5" cy="23.5" r="22" stroke="url(#paint1_linear_2888_36152)" stroke-opacity="0.2" shape-rendering="crispEdges"/>
</g>
<path d="M10.0049 34.4152V12.5841C10.0049 10.9153 11.3577 9.5625 13.0265 9.5625H35.9733C37.6421 9.5625 38.9949 10.9153 38.9949 12.5841V34.4152C38.9949 36.0844 37.6417 37.4375 35.9725 37.4375H13.0272C11.358 37.4375 10.0049 36.0844 10.0049 34.4152Z" fill="white" stroke="black"/>
<path d="M12.792 15.1387H18.4224" stroke="url(#paint2_linear_2888_36152)" stroke-opacity="0.91" stroke-linecap="round"/>
<path d="M30.6318 15.1387H36.2623" stroke="url(#paint3_linear_2888_36152)" stroke-opacity="0.91" stroke-linecap="round"/>
<path d="M21.7119 15.1387H27.3423" stroke="url(#paint4_linear_2888_36152)" stroke-opacity="0.91" stroke-linecap="round"/>
<rect x="12.7344" y="31.3613" width="13.495" height="5.69" rx="0.614981" transform="rotate(-90 12.7344 31.3613)" fill="white" stroke="black"/>
<rect x="30.5742" y="31.3613" width="13.495" height="5.69" rx="0.614981" transform="rotate(-90 30.5742 31.3613)" fill="white" stroke="black"/>
<rect x="21.6543" y="23.5586" width="5.69" height="5.69" rx="0.614981" transform="rotate(-90 21.6543 23.5586)" fill="white" stroke="black"/>
<defs>
<filter id="filter0_di_2888_36152" x="0" y="0" width="49" height="49" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.901961 0 0 0 0 0.901961 0 0 0 0 0.901961 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2888_36152"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_2888_36152"/>
<feBlend mode="normal" in="effect2_innerShadow_2888_36152" in2="effect1_dropShadow_2888_36152" result="effect2_innerShadow_2888_36152"/>
</filter>
<linearGradient id="paint0_linear_2888_36152" x1="2" y1="1" x2="55.0086" y2="14.4599" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="0.453125" stop-color="white"/>
</linearGradient>
<linearGradient id="paint1_linear_2888_36152" x1="3.40625" y1="3.04546" x2="47" y2="3.04546" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.65625" stop-color="#70B62B"/>
</linearGradient>
<linearGradient id="paint2_linear_2888_36152" x1="12.792" y1="15.1387" x2="15.1114" y2="18.4546" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.453125" stop-color="#70B62B"/>
</linearGradient>
<linearGradient id="paint3_linear_2888_36152" x1="30.6318" y1="15.1387" x2="32.9512" y2="18.4546" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.453125" stop-color="#70B62B"/>
</linearGradient>
<linearGradient id="paint4_linear_2888_36152" x1="21.7119" y1="15.1387" x2="24.0313" y2="18.4546" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.453125" stop-color="#70B62B"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 3.7 KiB

@@ -0,0 +1,17 @@
<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_205_591)">
<circle cx="17.5" cy="17.5" r="17.5" fill="#e5efe8"/>
<path d="M6.125 25.6282V8.49625C6.125 7.18664 7.18664 6.125 8.49625 6.125H26.5037C27.8134 6.125 28.875 7.18664 28.875 8.49625V25.6282C28.875 26.9381 27.8131 28 26.5032 28H8.49683C7.18691 28 6.125 26.9381 6.125 25.6282Z" fill="#F5F5F5" stroke="black" stroke-width="0.790611"/>
<path d="M8.3125 10.5L12.6875 10.5" stroke="#70B62B" stroke-width="0.7875" stroke-linecap="round"/>
<path d="M22.3125 10.5L26.7537 10.5" stroke="#70B62B" stroke-width="0.7875" stroke-linecap="round"/>
<path d="M15.3125 10.5L19.8459 10.5" stroke="#70B62B" stroke-width="0.7875" stroke-linecap="round"/>
<rect x="8.26875" y="23.2313" width="10.5875" height="4.4625" rx="0.48125" transform="rotate(-90 8.26875 23.2313)" stroke="black" stroke-width="0.7875"/>
<rect x="22.2687" y="23.2313" width="10.5875" height="4.4625" rx="0.48125" transform="rotate(-90 22.2687 23.2313)" stroke="black" stroke-width="0.7875"/>
<rect x="15.2687" y="17.1063" width="4.4625" height="4.4625" rx="0.48125" transform="rotate(-90 15.2687 17.1063)" stroke="black" stroke-width="0.7875"/>
</g>
<defs>
<clipPath id="clip0_205_591">
<rect width="35" height="35" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@@ -0,0 +1,52 @@
<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_di_2888_36114)">
<circle cx="24.5" cy="23.5" r="22.5" fill="url(#paint0_linear_2888_36114)" fill-opacity="0.6" shape-rendering="crispEdges"/>
<circle cx="24.5" cy="23.5" r="22" stroke="url(#paint1_linear_2888_36114)" stroke-opacity="0.2" shape-rendering="crispEdges"/>
</g>
<path d="M38.5625 20.1419V27.3323C38.5625 28.9311 37.2664 30.2272 35.6677 30.2272H12.2519C10.6531 30.2272 9.35707 28.9311 9.35707 27.3323V16.8968C9.35707 15.298 10.6531 14.002 12.2519 14.002H24.3832C25.151 14.002 25.8873 14.3069 26.4302 14.8498L27.9795 16.3991C28.5224 16.942 29.2587 17.247 30.0264 17.247H35.6676C37.2664 17.247 38.5625 18.5431 38.5625 20.1419Z" fill="white" stroke="black"/>
<path d="M13.6836 8.01172V29.7271C13.6836 30.0032 13.9075 30.2271 14.1836 30.2271H34.8172C35.0934 30.2271 35.3172 30.0032 35.3172 29.727V8.01172C35.3172 7.73558 35.0934 7.51172 34.8172 7.51172H14.1836C13.9075 7.51172 13.6836 7.73558 13.6836 8.01172Z" fill="white" stroke="black"/>
<path d="M12.6016 10.1758V32.9728C12.6016 33.2489 12.8254 33.4728 13.1016 33.4728H32.6535C32.9297 33.4728 33.1535 33.2489 33.1535 32.9728V10.1758C33.1535 9.89964 32.9297 9.67578 32.6535 9.67578H13.1016C12.8254 9.67578 12.6016 9.89964 12.6016 10.1758Z" fill="white" stroke="black"/>
<path d="M9.35645 25.552V34.9059C9.35645 36.5046 10.6525 37.8007 12.2513 37.8007H36.7487C38.3475 37.8007 39.6436 36.5046 39.6436 34.9059V22.307C39.6436 20.7082 38.3475 19.4121 36.7487 19.4121H22.0977C21.3387 19.4121 20.61 19.7102 20.0686 20.2423L18.4561 21.827C17.9147 22.359 17.1861 22.6572 16.427 22.6572H12.2513C10.6525 22.6572 9.35645 23.9532 9.35645 25.552Z" fill="white" stroke="black"/>
<path d="M14.7656 12.9219H30.9909" stroke="url(#paint2_linear_2888_36114)" stroke-opacity="0.91" stroke-linecap="round"/>
<path d="M14.7656 15.084H30.9909" stroke="url(#paint3_linear_2888_36114)" stroke-opacity="0.91" stroke-linecap="round"/>
<path d="M14.7656 17.248H30.9909" stroke="url(#paint4_linear_2888_36114)" stroke-opacity="0.91" stroke-linecap="round"/>
<defs>
<filter id="filter0_di_2888_36114" x="0" y="0" width="49" height="49" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.901961 0 0 0 0 0.901961 0 0 0 0 0.901961 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2888_36114"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_2888_36114"/>
<feBlend mode="normal" in="effect2_innerShadow_2888_36114" in2="effect1_dropShadow_2888_36114" result="effect2_innerShadow_2888_36114"/>
</filter>
<linearGradient id="paint0_linear_2888_36114" x1="2" y1="1" x2="55.0086" y2="14.4599" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="0.453125" stop-color="white"/>
</linearGradient>
<linearGradient id="paint1_linear_2888_36114" x1="3.40625" y1="3.04546" x2="47" y2="3.04546" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.65625" stop-color="#70B62B"/>
</linearGradient>
<linearGradient id="paint2_linear_2888_36114" x1="14.7656" y1="12.9219" x2="15.8976" y2="17.5854" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.453125" stop-color="#70B62B"/>
</linearGradient>
<linearGradient id="paint3_linear_2888_36114" x1="14.7656" y1="15.084" x2="15.8976" y2="19.7475" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.453125" stop-color="#70B62B"/>
</linearGradient>
<linearGradient id="paint4_linear_2888_36114" x1="14.7656" y1="17.248" x2="15.8976" y2="21.9116" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.453125" stop-color="#70B62B"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 4.4 KiB

@@ -0,0 +1,46 @@
<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_di_2888_36103)">
<circle cx="24.5" cy="23.5" r="22.5" fill="url(#paint0_linear_2888_36103)" fill-opacity="0.6" shape-rendering="crispEdges"/>
<circle cx="24.5" cy="23.5" r="22" stroke="url(#paint1_linear_2888_36103)" stroke-opacity="0.2" shape-rendering="crispEdges"/>
</g>
<path d="M8.42773 13.3065V34.6143C8.42773 35.2994 8.83838 35.9178 9.46984 36.1836C9.67894 36.2716 9.90352 36.317 10.1304 36.317H23.3758H31.3029H38.9154C39.1238 36.317 39.331 36.285 39.5298 36.2223L39.6153 36.1953C40.4645 35.9272 41.0418 35.1395 41.0418 34.2491V13.3065C41.0418 12.1794 40.1281 11.2656 39.0009 11.2656H24.7348H10.4686C9.34148 11.2656 8.42773 12.1794 8.42773 13.3065Z" fill="white" stroke="black"/>
<path d="M40.5785 32.6801L26.9358 18.7502C25.7321 17.5211 23.7523 17.5249 22.5533 18.7586L9.28202 32.414C8.73422 32.9777 8.42777 33.7327 8.42777 34.5187V35.0417C8.42777 35.4792 8.65206 35.886 9.02193 36.1196C9.22561 36.2482 9.46157 36.3164 9.70245 36.3164L11.1456 36.3164H16.486L31.7755 36.3164H39.2299C41.0832 36.3164 41.5051 33.9059 40.5785 32.6801Z" stroke="black"/>
<path d="M9.146 14.507L24.064 27.5691C24.4505 27.9076 25.0284 27.9059 25.413 27.5651L40.5352 14.1648C40.8643 13.8732 41.0527 13.4545 41.0527 13.0148C41.0527 12.6817 40.9445 12.3577 40.7444 12.0915L40.5825 11.8761C40.299 11.4989 39.9081 11.216 39.4612 11.0646L38.8141 10.8454C38.4978 10.7383 38.166 10.6836 37.8319 10.6836H32.9989H25.3423H21.2663H17.1904H10.2031C8.47223 10.6836 8.04652 12.7971 8.75386 14.0571C8.85195 14.2318 8.99525 14.375 9.146 14.507Z" fill="white" stroke="black"/>
<path d="M24.5492 15.8516C24.2716 15.8516 24.0158 15.9584 23.7809 16.1738C23.5461 16.3891 23.3683 16.6953 23.2492 17.0923C23.1309 17.4893 23.0706 17.8417 23.0706 18.1487C23.0706 18.5584 23.1536 18.8612 23.3188 19.0546C23.4849 19.2481 23.6904 19.3457 23.9353 19.3457L24.1282 20.1784C23.9839 20.2146 23.8346 20.2322 23.6795 20.2322C23.1444 20.2322 22.7007 20.0472 22.3476 19.6771C22.2377 19.5618 22.1446 19.434 22.0691 19.2944C21.9022 18.9874 21.8184 18.6231 21.8184 18.2009C21.8184 17.4414 22.0314 16.7483 22.4566 16.1225C22.9724 15.3595 23.6325 14.9785 24.4385 14.9785C24.5006 14.9785 24.5609 14.981 24.6188 14.9869L24.5492 15.8508V15.8516Z" fill="url(#paint2_linear_2888_36103)" fill-opacity="0.91"/>
<path d="M27.3354 14.694C26.7617 14.1591 25.9607 13.8916 24.9333 13.8916C24.0602 13.8916 23.3205 14.0708 22.7132 14.4274C22.106 14.784 21.6481 15.2862 21.3403 15.9347C21.0325 16.5824 20.879 17.257 20.879 17.9576C20.879 18.5111 20.9922 19.025 21.2186 19.4986C21.2706 19.6079 21.3294 19.7148 21.3931 19.8199C21.7361 20.3793 22.2184 20.7864 22.8382 21.0429C23.458 21.2995 24.1676 21.4281 24.9668 21.4281C25.7661 21.4281 26.3994 21.3205 26.9529 21.106C27.5073 20.8915 27.9535 20.5685 28.2923 20.1395H29.3214C28.9994 20.7956 28.5054 21.3087 27.8377 21.6813C27.0737 22.1078 26.1427 22.3214 25.044 22.3214C23.9453 22.3214 23.0621 22.1414 22.2897 21.7814C21.5164 21.4206 20.9419 20.8898 20.5645 20.1866C20.1879 19.4826 20 18.7172 20 17.8903C20 16.9819 20.2139 16.1366 20.6425 15.3526C21.071 14.5696 21.6581 13.9808 22.4021 13.588C23.146 13.1968 23.9965 13 24.9534 13C25.7653 13 26.4866 13.159 27.119 13.4752C27.7505 13.7915 28.2328 14.2424 28.5658 14.8253C28.8996 15.4082 29.0665 16.0457 29.0665 16.7372C29.0665 17.5606 28.8132 18.3059 28.3074 18.9712C27.6725 19.8115 26.859 20.2312 25.8668 20.2312C25.6001 20.2312 25.3979 20.185 25.2621 20.0907C25.127 19.9974 25.0365 19.8603 24.992 19.6794C24.7303 19.9326 24.441 20.0983 24.1256 20.1774L23.9327 19.3447C24.1164 19.3447 24.2883 19.2992 24.4494 19.2084C24.5718 19.1445 24.6926 19.0427 24.8117 18.9031C24.9828 18.7062 25.1296 18.4186 25.2545 18.0401C25.3787 17.6624 25.4407 17.3108 25.4407 16.9836C25.4407 16.6194 25.356 16.3385 25.1874 16.1433C25.018 15.9473 24.805 15.8498 24.5475 15.8498L24.6171 14.9859C25.0994 15.028 25.4634 15.245 25.7074 15.637L25.8282 15.0986H27.1039L26.3742 18.5733C26.3297 18.7937 26.3063 18.9359 26.3063 18.9998C26.3063 19.0805 26.3247 19.1411 26.3625 19.1815C26.4002 19.2219 26.4438 19.242 26.495 19.242C26.6493 19.242 26.8497 19.1487 27.0938 18.9611C27.4226 18.7155 27.6885 18.3866 27.8914 17.9728C28.0944 17.5589 28.1959 17.1308 28.1959 16.6884C28.1959 15.9431 27.9434 15.3131 27.4402 14.7958C27.4067 14.7613 27.3714 14.7277 27.3354 14.694Z" fill="url(#paint3_linear_2888_36103)" fill-opacity="0.91"/>
<defs>
<filter id="filter0_di_2888_36103" x="0" y="0" width="49" height="49" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.901961 0 0 0 0 0.901961 0 0 0 0 0.901961 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2888_36103"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_2888_36103"/>
<feBlend mode="normal" in="effect2_innerShadow_2888_36103" in2="effect1_dropShadow_2888_36103" result="effect2_innerShadow_2888_36103"/>
</filter>
<linearGradient id="paint0_linear_2888_36103" x1="2" y1="1" x2="55.0086" y2="14.4599" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="0.453125" stop-color="white"/>
</linearGradient>
<linearGradient id="paint1_linear_2888_36103" x1="3.40625" y1="3.04546" x2="47" y2="3.04546" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.65625" stop-color="#70B62B"/>
</linearGradient>
<linearGradient id="paint2_linear_2888_36103" x1="21.8184" y1="14.9785" x2="25.2667" y2="15.4453" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.453125" stop-color="#70B62B"/>
</linearGradient>
<linearGradient id="paint3_linear_2888_36103" x1="20" y1="13" x2="30.9804" y2="15.7881" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.453125" stop-color="#70B62B"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 6.4 KiB

@@ -0,0 +1,8 @@
<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="17.5" cy="17.5" r="17.5" fill="#e5efe8"/>
<path d="M5 10.0405V26.6132C5 27.1461 5.31939 27.627 5.81053 27.8338C5.97316 27.9022 6.14783 27.9375 6.32429 27.9375H16.6263H22.7918H28.7126C28.8747 27.9375 29.0359 27.9127 29.1905 27.8639L29.257 27.8429C29.9174 27.6344 30.3665 27.0217 30.3665 26.3291V10.0405C30.3665 9.16381 29.6558 8.45312 28.7791 8.45312H17.6832H6.58736C5.71069 8.45312 5 9.16381 5 10.0405Z" fill="#F5F5F5" stroke="black" stroke-width="0.793683"/>
<path d="M30.0062 25.1093L19.3952 14.2749C18.4589 13.3189 16.9191 13.3219 15.9866 14.2814L5.66445 24.9023C5.23838 25.3407 5.00003 25.928 5.00003 26.5393V26.9461C5.00003 27.2863 5.17448 27.6028 5.46215 27.7844C5.62057 27.8844 5.80409 27.9375 5.99144 27.9375H7.1139H11.2675L23.1594 27.9375L28.9572 27.9375C30.3987 27.9375 30.7269 26.0626 30.0062 25.1093Z" stroke="black" stroke-width="0.793683"/>
<path d="M5.55865 10.9737L17.1615 21.1332C17.4622 21.3965 17.9117 21.3951 18.2107 21.1301L29.9725 10.7076C30.2285 10.4808 30.375 10.1551 30.375 9.81312C30.375 9.55409 30.2908 9.30207 30.1352 9.09501L30.0093 8.92751C29.7887 8.6341 29.4848 8.41412 29.1371 8.29636L28.6339 8.12588C28.3878 8.04252 28.1297 8 27.8699 8H24.1109H18.1557H14.9856H11.8154H6.38085C5.0346 8 4.7035 9.64383 5.25366 10.6238C5.32995 10.7597 5.4414 10.8711 5.55865 10.9737Z" fill="#F5F5F5" stroke="black" stroke-width="0.793683"/>
<path d="M17.5381 12.2162C17.3221 12.2162 17.1232 12.2993 16.9405 12.4667C16.7579 12.6342 16.6196 12.8724 16.5269 13.1811C16.435 13.4899 16.388 13.7641 16.388 14.0028C16.388 14.3214 16.4526 14.557 16.5811 14.7074C16.7102 14.8579 16.8701 14.9338 17.0605 14.9338L17.2106 15.5815C17.0984 15.6096 16.9823 15.6233 16.8616 15.6233C16.4454 15.6233 16.1003 15.4794 15.8257 15.1915C15.7402 15.1019 15.6678 15.0025 15.6091 14.8939C15.4793 14.6551 15.4141 14.3718 15.4141 14.0434C15.4141 13.4526 15.5798 12.9136 15.9105 12.4268C16.3117 11.8335 16.8251 11.5371 17.4519 11.5371C17.5002 11.5371 17.5472 11.5391 17.5922 11.5437L17.5381 12.2155V12.2162Z" fill="#70B62B"/>
<path d="M19.7053 11.3176C19.2591 10.9015 18.6361 10.6935 17.837 10.6935C17.1579 10.6935 16.5826 10.8328 16.1103 11.1102C15.638 11.3876 15.2818 11.7782 15.0424 12.2826C14.803 12.7863 14.6836 13.311 14.6836 13.8559C14.6836 14.2864 14.7717 14.6861 14.9478 15.0545C14.9883 15.1395 15.0339 15.2226 15.0835 15.3044C15.3503 15.7394 15.7254 16.0561 16.2075 16.2556C16.6896 16.4551 17.2414 16.5552 17.8631 16.5552C18.4848 16.5552 18.9773 16.4715 19.4078 16.3047C19.839 16.1378 20.186 15.8866 20.4496 15.553H21.25C20.9995 16.0633 20.6153 16.4623 20.096 16.7521C19.5018 17.0838 18.7777 17.25 17.9231 17.25C17.0686 17.25 16.3817 17.11 15.7809 16.83C15.1794 16.5493 14.7326 16.1365 14.439 15.5896C14.1461 15.042 14 14.4467 14 13.8036C14 13.097 14.1663 12.4396 14.4997 11.8298C14.833 11.2208 15.2897 10.7628 15.8683 10.4573C16.4469 10.1531 17.1084 10 17.8527 10C18.4841 10 19.0451 10.1236 19.537 10.3696C20.0282 10.6156 20.4033 10.9663 20.6623 11.4196C20.9219 11.873 21.0517 12.3689 21.0517 12.9067C21.0517 13.5471 20.8547 14.1268 20.4613 14.6443C19.9675 15.2978 19.3348 15.6243 18.5631 15.6243C18.3556 15.6243 18.1984 15.5883 18.0927 15.515C17.9877 15.4424 17.9172 15.3358 17.8827 15.1951C17.6791 15.392 17.4541 15.5209 17.2088 15.5824L17.0588 14.9347C17.2016 14.9347 17.3354 14.8994 17.4606 14.8288C17.5559 14.779 17.6498 14.6999 17.7424 14.5913C17.8755 14.4382 17.9897 14.2144 18.0869 13.9201C18.1834 13.6263 18.2317 13.3528 18.2317 13.0984C18.2317 12.8151 18.1658 12.5966 18.0347 12.4448C17.9029 12.2924 17.7372 12.2165 17.5369 12.2165L17.5911 11.5446C17.9662 11.5773 18.2493 11.7461 18.4391 12.051L18.533 11.6323H19.5252L18.9577 14.3348C18.9231 14.5062 18.9049 14.6168 18.9049 14.6665C18.9049 14.7293 18.9192 14.7764 18.9486 14.8078C18.9779 14.8392 19.0119 14.8549 19.0516 14.8549C19.1717 14.8549 19.3276 14.7823 19.5174 14.6364C19.7731 14.4454 19.9799 14.1896 20.1378 13.8677C20.2956 13.5458 20.3746 13.2128 20.3746 12.8687C20.3746 12.2891 20.1782 11.7991 19.7868 11.3967C19.7607 11.3699 19.7333 11.3438 19.7053 11.3176Z" fill="#70B62B"/>
</svg>

After

Width:  |  Height:  |  Size: 4.1 KiB

@@ -0,0 +1,12 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1460_27244)">
<path d="M3 3H13.5341" stroke="#808080" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 8H13.5" stroke="#808080" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 13H13.5" stroke="#808080" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_1460_27244">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 570 B

@@ -0,0 +1,31 @@
<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_di_mobile_lk)">
<circle cx="24.5" cy="23.5" r="22.5" fill="#FBFBFB"/>
<circle cx="24.5" cy="23.5" r="22" stroke="url(#paint0_linear_mobile_lk)" stroke-opacity="0.2"/>
</g>
<path d="M21.6484 30.5127L21.4043 30.3672C20.5844 29.8802 19.8801 29.3418 19.2324 28.9043L19.0439 28.7695C18.119 28.0734 17.4972 27.0443 17.3047 25.8936L16.9492 23.7686L16.8799 23.3516H16.4561C15.6199 23.3515 14.9443 22.676 14.9443 21.8398C14.9443 21.2184 15.3169 20.6859 15.8516 20.4541L16.3086 20.2568L16.1133 19.7988C15.5068 18.3768 15.0616 16.8689 14.7939 15.3223V15.3213C14.633 14.3931 14.554 13.4916 14.7578 12.6826L14.8018 12.5215C15.0627 11.6631 15.7059 11.0626 16.3135 11.043L16.4043 11.0488L16.6992 11.0693L16.8594 10.8193C17.3654 10.0292 18.1702 9.48976 19.0498 9.1709C19.9382 8.84842 20.8853 8.73496 21.8906 8.61914L21.8896 8.61816C22.2806 8.57336 22.6678 8.53 23.0557 8.49121L23.0547 8.49023C24.8442 8.31807 26.7407 8.28354 28.501 8.77344C30.2556 9.26222 31.9082 10.3473 32.7705 12.0332C33.4592 13.378 33.6123 15.0327 33.4307 16.6416C33.3107 17.7074 33.054 18.7541 32.7461 19.8057L32.6143 20.2578L33.0576 20.417C33.6407 20.6259 34.0566 21.1833 34.0566 21.8398C34.0566 22.6762 33.3819 23.3516 32.5449 23.3516H32.1211L32.0518 23.7686L31.6963 25.8936C31.491 27.1211 30.7974 28.2101 29.7686 28.9043C29.119 29.3424 28.4178 29.88 27.5977 30.3672L27.3525 30.5127V32.2617L27.7021 32.3721L34.3613 34.4746C36.836 35.2559 38.7321 37.1384 39.5879 39.4785C39.4957 39.5654 39.4051 39.6539 39.3115 39.7393L38.7871 40.2021C38.0881 40.801 37.3502 41.3559 36.5791 41.8633C33.1124 44.1452 28.9623 45.4726 24.501 45.4727C20.3184 45.4727 16.4089 44.3062 13.0801 42.2803L12.4219 41.8633C11.6508 41.3559 10.9129 40.801 10.2139 40.2021L9.68945 39.7393C9.59565 39.6538 9.50443 39.5656 9.41211 39.4785C10.2674 37.1379 12.1653 35.2555 14.6396 34.4746L21.2998 32.3721L21.6484 32.2617V30.5127Z" fill="#F5F5F5" stroke="#151515"/>
<path d="M25.45 32.4766H23.6647C23.5097 32.4766 23.4011 32.6295 23.4523 32.7758L23.8998 34.0557C23.9314 34.1459 24.0165 34.2064 24.1122 34.2064H25.0025C25.0981 34.2064 25.1833 34.1459 25.2149 34.0557L25.6624 32.7758C25.7135 32.6295 25.6049 32.4766 25.45 32.4766Z" fill="#70B62B"/>
<path d="M22.4034 42.3473L23.921 34.2577C23.9409 34.1513 24.0338 34.0742 24.1421 34.0742H24.9757C25.0851 34.0742 25.1787 34.153 25.1974 34.2608L26.5986 42.3528C26.6101 42.4189 26.5914 42.4868 26.5476 42.5377L24.7261 44.6592C24.638 44.7618 24.4799 44.7641 24.3889 44.664L22.4581 42.5401C22.4107 42.4879 22.3905 42.4165 22.4034 42.3473Z" fill="#70B62B"/>
<defs>
<filter id="filter0_di_mobile_lk" x="0" y="0" width="49" height="49" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.901961 0 0 0 0 0.901961 0 0 0 0 0.901961 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
</filter>
<linearGradient id="paint0_linear_mobile_lk" x1="3.40625" y1="3.04546" x2="47" y2="3.04546" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.65625" stop-color="#70B62B"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 3.9 KiB

@@ -0,0 +1,39 @@
<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_di_mobile_notif)">
<circle cx="24.5" cy="23.5" r="22.5" fill="#FBFBFB"/>
<circle cx="24.5" cy="23.5" r="22" stroke="url(#paint0_linear_mobile_notif)" stroke-opacity="0.2"/>
</g>
<path d="M25.45 32.4766H23.6647C23.5097 32.4766 23.4011 32.6295 23.4523 32.7758L23.8998 34.0557C23.9314 34.1459 24.0165 34.2064 24.1122 34.2064H25.0025C25.0981 34.2064 25.1833 34.1459 25.2149 34.0557L25.6624 32.7758C25.7135 32.6295 25.6049 32.4766 25.45 32.4766Z" fill="#70B62B"/>
<g clip-path="url(#clip0_mobile_notif)">
<path d="M26.873 34.1191C26.8587 35.4359 26.5062 36.604 25.9668 37.4336C25.413 38.2852 24.7067 38.7265 24 38.7266C23.2932 38.7266 22.586 38.2854 22.0322 37.4336C21.4929 36.604 21.1403 35.4358 21.126 34.1191C21.7482 34.1398 22.4045 34.1546 23.0967 34.1611L24 34.165C25.0307 34.165 25.9866 34.1486 26.873 34.1191Z" fill="#F5F5F5" stroke="#151515"/>
<circle cx="23.9108" cy="10.1384" r="1.91181" fill="white" stroke="#151515"/>
<path d="M23.918 11.918C24.6991 11.9182 25.1174 11.9077 25.8135 12.0244C26.3882 12.1208 26.7767 12.283 27.2783 12.4951V12.4941C30.3861 13.8088 32.5654 16.8863 32.5654 20.4707V26.2158C32.5654 27.4878 33.1606 28.6857 34.1719 29.4561C34.5152 29.7176 34.9215 30.011 35.3926 30.3262C35.5803 30.4517 35.6934 30.6634 35.6934 30.8906V33.3008C35.6932 33.5439 35.5641 33.7652 35.3604 33.8857L35.2686 33.9307C34.2146 34.3548 31.3656 34.9795 23.9092 34.9795C16.4527 34.9795 13.6037 34.3548 12.5498 33.9307C12.2938 33.8277 12.1251 33.5786 12.125 33.3008V30.8906C12.125 30.6633 12.2381 30.4517 12.4258 30.3262C12.8969 30.011 13.3031 29.7176 13.6465 29.4561C14.6577 28.6857 15.2529 27.4878 15.2529 26.2158V20.5225C15.2531 16.3239 17.8426 12.5461 21.9854 12.0283C22.75 11.9328 23.1522 11.9178 23.918 11.918Z" fill="#F5F5F5" stroke="#151515"/>
<path d="M11.0015 18.9519C11.0717 18.9699 11.1419 18.978 11.2113 18.978C11.5917 18.978 11.9382 18.7213 12.0358 18.3356C12.0464 18.2936 13.1533 14.0906 17.2979 11.8968C17.7134 11.6768 17.8722 11.1618 17.6522 10.7463C17.4322 10.3308 16.9171 10.172 16.5016 10.392C15.3903 10.9801 14.3773 11.7409 13.4908 12.6527C12.7843 13.3792 12.1566 14.2028 11.6252 15.0999C10.7167 16.6341 10.3987 17.8655 10.3857 17.9173C10.2702 18.3732 10.5461 18.8364 11.0015 18.9519Z" fill="#70B62B"/>
<path d="M30.425 11.8969C31.3683 12.3961 32.2299 13.041 32.9862 13.8132C33.596 14.4365 34.1405 15.1446 34.6033 15.9177C35.3976 17.2442 35.6829 18.3176 35.6878 18.3376C35.7862 18.7221 36.1323 18.978 36.5119 18.978C36.5813 18.978 36.6515 18.9695 36.7217 18.9519C37.1776 18.8364 37.4531 18.3736 37.3376 17.9176C37.3245 17.8658 37.0066 16.6344 36.098 15.1001C35.5666 14.2026 34.9388 13.3793 34.2323 12.6528C33.3458 11.741 32.3327 10.9802 31.2213 10.392C30.8058 10.172 30.2907 10.3308 30.0707 10.7463C29.8507 11.1618 30.0095 11.6769 30.425 11.8969Z" fill="#70B62B"/>
</g>
<defs>
<filter id="filter0_di_mobile_notif" x="0" y="0" width="49" height="49" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.901961 0 0 0 0 0.901961 0 0 0 0 0.901961 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
</filter>
<linearGradient id="paint0_linear_mobile_notif" x1="3.40625" y1="3.04546" x2="47" y2="3.04546" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.65625" stop-color="#70B62B"/>
</linearGradient>
<clipPath id="clip0_mobile_notif">
<rect width="29.25" height="31.5" fill="white" transform="translate(9.375 7.72656)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 4.3 KiB

@@ -0,0 +1,29 @@
<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_di_mobile_settings)">
<circle cx="24.5" cy="23.5" r="22.5" fill="#FBFBFB"/>
<circle cx="24.5" cy="23.5" r="22" stroke="url(#paint0_linear_mobile_settings)" stroke-opacity="0.2"/>
</g>
<path d="M17.2747 15.3916C17.6719 15.5314 18.0947 15.5836 18.514 15.5447C18.9333 15.5057 19.3392 15.3765 19.7039 15.1659C20.0685 14.9552 20.3833 14.6682 20.6266 14.3245C20.8699 13.9807 21.0359 13.5884 21.1133 13.1745L21.5804 10.6641C23.5009 10.2266 25.4952 10.2266 27.4157 10.6641L27.8857 13.1745C27.963 13.5884 28.1291 13.9807 28.3724 14.3245C28.6156 14.6682 28.9304 14.9552 29.2951 15.1659C29.6597 15.3765 30.0657 15.5057 30.485 15.5447C30.9043 15.5836 31.3271 15.5314 31.7243 15.3916L34.1311 14.545C35.4708 15.9882 36.469 17.7141 37.0517 19.5951L35.1105 21.259C34.7908 21.533 34.5341 21.873 34.3582 22.2556C34.1822 22.6381 34.0911 23.0542 34.0911 23.4753C34.0911 23.8964 34.1822 24.3125 34.3582 24.6951C34.5341 25.0777 34.7908 25.4176 35.1105 25.6917L37.0517 27.3541C36.469 29.2351 35.4708 30.961 34.1311 32.4042L31.7228 31.5576C31.3256 31.4178 30.9028 31.3656 30.4835 31.4046C30.0642 31.4435 29.6583 31.5727 29.2936 31.7834C28.929 31.994 28.6142 32.281 28.3709 32.6247C28.1276 32.9685 27.9616 33.3608 27.8842 33.7747L27.4186 36.2852C25.4981 36.7227 23.5038 36.7227 21.5833 36.2852L21.1133 33.7747C21.0359 33.3608 20.8699 32.9685 20.6266 32.6247C20.3833 32.281 20.0685 31.994 19.7039 31.7834C19.3392 31.5727 18.9333 31.4435 18.514 31.4046C18.0947 31.3656 17.6719 31.4178 17.2747 31.5576L14.8678 32.4042C13.5281 30.961 12.53 29.2351 11.9473 27.3541L13.8885 25.6902C14.2079 25.4162 14.4644 25.0763 14.6402 24.6939C14.816 24.3114 14.907 23.8955 14.907 23.4746C14.907 23.0537 14.816 22.6378 14.6402 22.2554C14.4644 21.8729 14.2079 21.533 13.8885 21.259L11.9473 19.5951C12.5295 17.7142 13.5272 15.9883 14.8664 14.545L17.2747 15.3916ZM24.4995 19.0959C25.6608 19.0959 26.7745 19.5573 27.5957 20.3784C28.4168 21.1996 28.8782 22.3133 28.8782 23.4746C28.8782 24.6359 28.4168 25.7496 27.5957 26.5708C26.7745 27.392 25.6608 27.8533 24.4995 27.8533C23.3382 27.8533 22.2244 27.392 21.4033 26.5708C20.5821 25.7496 20.1208 24.6359 20.1208 23.4746C20.1208 22.3133 20.5821 21.1996 21.4033 20.3784C22.2244 19.5573 23.3382 19.0959 24.4995 19.0959Z" stroke="#151515" stroke-width="1.04493" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<filter id="filter0_di_mobile_settings" x="0" y="0" width="49" height="49" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.901961 0 0 0 0 0.901961 0 0 0 0 0.901961 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-0.25"/>
<feGaussianBlur stdDeviation="1.5"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
</filter>
<linearGradient id="paint0_linear_mobile_settings" x1="3.40625" y1="3.04546" x2="47" y2="3.04546" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.65625" stop-color="#70B62B"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 3.7 KiB

@@ -0,0 +1,51 @@
<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_di_2888_36178)">
<circle cx="24.5" cy="23.5" r="22.5" fill="url(#paint0_linear_2888_36178)" fill-opacity="0.6" shape-rendering="crispEdges"/>
<circle cx="24.5" cy="23.5" r="22" stroke="url(#paint1_linear_2888_36178)" stroke-opacity="0.2" shape-rendering="crispEdges"/>
</g>
<path d="M10.5596 34.5319V12.4645C10.5596 10.8596 11.8606 9.55859 13.4655 9.55859H35.5336C37.1385 9.55859 38.4396 10.8596 38.4396 12.4645V34.5319C38.4396 36.1372 37.1382 37.4386 35.5329 37.4386H13.4662C11.8609 37.4386 10.5596 36.1372 10.5596 34.5319Z" fill="white" stroke="black"/>
<path d="M32.3645 20.0973L34.4368 22.0599M26.6445 27.7874L29.2714 27.6498L34.7878 21.8678C34.9257 21.7232 35.0352 21.5515 35.1099 21.3625C35.1846 21.1736 35.223 20.971 35.223 20.7665C35.223 20.562 35.1846 20.3594 35.1099 20.1705C35.0352 19.9815 34.9257 19.8098 34.7878 19.6652C34.6498 19.5205 34.486 19.4058 34.3057 19.3275C34.1254 19.2493 33.9322 19.209 33.737 19.209C33.5419 19.209 33.3487 19.2493 33.1684 19.3275C32.9881 19.4058 32.8243 19.5205 32.6863 19.6652L27.1699 25.4471L26.6445 27.7874Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.7773 22.4258H26.645" stroke="url(#paint2_linear_2888_36178)" stroke-opacity="0.91" stroke-linecap="round"/>
<path d="M13.7773 26.7148H24.5004" stroke="url(#paint3_linear_2888_36178)" stroke-opacity="0.91" stroke-linecap="round"/>
<path d="M13.7773 31.0039H26.645" stroke="url(#paint4_linear_2888_36178)" stroke-opacity="0.91" stroke-linecap="round"/>
<path d="M10.5596 15.9924V12.4653C10.5596 10.86 11.8609 9.55859 13.4662 9.55859H35.5329C37.1382 9.55859 38.4396 10.86 38.4396 12.4653V15.9924H10.5596Z" fill="white" stroke="black" stroke-width="0.968889"/>
<defs>
<filter id="filter0_di_2888_36178" x="0" y="0" width="49" height="49" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.901961 0 0 0 0 0.901961 0 0 0 0 0.901961 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2888_36178"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_2888_36178"/>
<feBlend mode="normal" in="effect2_innerShadow_2888_36178" in2="effect1_dropShadow_2888_36178" result="effect2_innerShadow_2888_36178"/>
</filter>
<linearGradient id="paint0_linear_2888_36178" x1="2" y1="1" x2="55.0086" y2="14.4599" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="0.453125" stop-color="white"/>
</linearGradient>
<linearGradient id="paint1_linear_2888_36178" x1="3.40625" y1="3.04546" x2="47" y2="3.04546" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.65625" stop-color="#70B62B"/>
</linearGradient>
<linearGradient id="paint2_linear_2888_36178" x1="13.7773" y1="22.4258" x2="15.1593" y2="26.9411" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.453125" stop-color="#70B62B"/>
</linearGradient>
<linearGradient id="paint3_linear_2888_36178" x1="13.7773" y1="26.7148" x2="15.3755" y2="31.0662" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.453125" stop-color="#70B62B"/>
</linearGradient>
<linearGradient id="paint4_linear_2888_36178" x1="13.7773" y1="31.0039" x2="15.1593" y2="35.5192" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.453125" stop-color="#70B62B"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 4.1 KiB

@@ -0,0 +1,5 @@
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="4" cy="4" r="4" fill="#B62B2B"/>
<path d="M4.05859 1.91016V4.44118" stroke="white" stroke-width="0.86956" stroke-linecap="round"/>
<circle cx="4.05833" cy="5.92942" r="0.511452" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 304 B

@@ -0,0 +1,40 @@
<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_di_2888_36093)">
<circle cx="24.5" cy="23.5" r="22.5" fill="url(#paint0_linear_2888_36093)" fill-opacity="0.6" shape-rendering="crispEdges"/>
<circle cx="24.5" cy="23.5" r="22" stroke="url(#paint1_linear_2888_36093)" stroke-opacity="0.2" shape-rendering="crispEdges"/>
</g>
<path d="M22.5421 31.5021C25.4539 31.5021 28.1032 30.3783 30.08 28.5408C32.2554 26.5187 33.6163 23.6322 33.6163 20.4278C33.6163 14.3115 28.6583 9.35352 22.5421 9.35352C16.4258 9.35352 11.4678 14.3115 11.4678 20.4278C11.4678 26.5441 16.4258 31.5021 22.5421 31.5021Z" fill="white" stroke="black" stroke-width="1.11673" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M34.7117 37.4755L28.4082 30.2022L30.6417 27.9688L37.2753 35.5501C37.8919 36.2547 37.7206 37.3456 36.9177 37.8273C36.1945 38.2612 35.2641 38.1128 34.7117 37.4755Z" fill="white" stroke="black" stroke-width="1.11673"/>
<path d="M27.85 17.36C27.1173 16.2965 26.247 15.4531 25.2888 14.8782C24.3306 14.3033 23.3034 14.0082 22.2663 14.0098C21.2292 14.0082 20.202 14.3033 19.2438 14.8782C18.2856 15.4531 17.4152 16.2965 16.6826 17.36" stroke="url(#paint2_linear_2888_36093)" stroke-opacity="0.91" stroke-width="1.6751" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<filter id="filter0_di_2888_36093" x="0" y="0" width="49" height="49" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.901961 0 0 0 0 0.901961 0 0 0 0 0.901961 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2888_36093"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_2888_36093"/>
<feBlend mode="normal" in="effect2_innerShadow_2888_36093" in2="effect1_dropShadow_2888_36093" result="effect2_innerShadow_2888_36093"/>
</filter>
<linearGradient id="paint0_linear_2888_36093" x1="2" y1="1" x2="55.0086" y2="14.4599" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="0.453125" stop-color="white"/>
</linearGradient>
<linearGradient id="paint1_linear_2888_36093" x1="3.40625" y1="3.04546" x2="47" y2="3.04546" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.65625" stop-color="#70B62B"/>
</linearGradient>
<linearGradient id="paint2_linear_2888_36093" x1="16.6826" y1="14.0098" x2="24.841" y2="20.915" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.453125" stop-color="#70B62B"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

@@ -0,0 +1,3 @@
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.9847 20L7.43923 13.1999C7.01817 12.8204 7.01861 12.1598 7.44019 11.7809L14.9847 5" stroke="#808080" stroke-width="1.73077" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 264 B

@@ -0,0 +1,42 @@
<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_di_2888_36209)">
<circle cx="24.5" cy="23.5" r="22.5" fill="url(#paint0_linear_2888_36209)" fill-opacity="0.6" shape-rendering="crispEdges"/>
<circle cx="24.5" cy="23.5" r="22" stroke="url(#paint1_linear_2888_36209)" stroke-opacity="0.2" shape-rendering="crispEdges"/>
</g>
<path d="M22.2695 33.4517V32.061C22.2695 31.3434 22.8513 30.7617 23.5688 30.7617H25.4328C26.1504 30.7617 26.7321 31.3434 26.7321 32.061V33.4517C26.7321 34.1693 26.1504 34.751 25.4328 34.751H23.5688C22.8513 34.751 22.2695 34.1693 22.2695 33.4517Z" fill="white" stroke="black"/>
<path d="M16.2301 27.8098C18.4045 29.9843 21.2222 31.1235 24.0706 31.2275C27.2051 31.342 30.377 30.2027 32.7699 27.8098C37.3374 23.2424 37.3374 15.8374 32.7699 11.2699C28.2025 6.7025 20.7975 6.7025 16.2301 11.2699C11.6626 15.8374 11.6626 23.2424 16.2301 27.8098Z" fill="white" stroke="black" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.7786 23.2638C21.7571 24.2423 23.025 24.7549 24.3068 24.8017C25.7173 24.8532 27.1446 24.3406 28.2214 23.2638C30.2767 21.2085 30.2767 17.8763 28.2214 15.821C26.1661 13.7657 22.8339 13.7657 20.7786 15.821C18.7233 17.8763 18.7233 21.2085 20.7786 23.2638Z" fill="white" stroke="black" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M23.7287 12.1655C23.9315 12.3683 24.1943 12.4746 24.4599 12.4843C24.7523 12.4949 25.0481 12.3887 25.2713 12.1655C25.6973 11.7395 25.6973 11.0489 25.2713 10.6229C24.8453 10.1969 24.1547 10.1969 23.7287 10.6229C23.3027 11.0489 23.3027 11.7395 23.7287 12.1655Z" fill="url(#paint2_linear_2888_36209)" fill-opacity="0.91"/>
<path d="M16.8008 37.0142V35.6235C16.8008 34.9059 17.3825 34.3242 18.1001 34.3242H30.9003C31.6179 34.3242 32.1996 34.9059 32.1996 35.6235V37.0142C32.1996 37.7318 31.6179 38.3135 30.9003 38.3135H18.1001C17.3825 38.3135 16.8008 37.7318 16.8008 37.0142Z" fill="white" stroke="black"/>
<defs>
<filter id="filter0_di_2888_36209" x="0" y="0" width="49" height="49" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.901961 0 0 0 0 0.901961 0 0 0 0 0.901961 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2888_36209"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_2888_36209"/>
<feBlend mode="normal" in="effect2_innerShadow_2888_36209" in2="effect1_dropShadow_2888_36209" result="effect2_innerShadow_2888_36209"/>
</filter>
<linearGradient id="paint0_linear_2888_36209" x1="2" y1="1" x2="55.0086" y2="14.4599" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="0.453125" stop-color="white"/>
</linearGradient>
<linearGradient id="paint1_linear_2888_36209" x1="3.40625" y1="3.04546" x2="47" y2="3.04546" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.65625" stop-color="#70B62B"/>
</linearGradient>
<linearGradient id="paint2_linear_2888_36209" x1="24.5" y1="9.85156" x2="25.8558" y2="12.1301" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.453125" stop-color="#70B62B"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 3.8 KiB

@@ -0,0 +1,15 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1200_28545)">
<circle cx="15" cy="15" r="15" fill="#e5efe8"/>
<path d="M13.5283 21.8039V20.8864C13.5283 20.4131 13.9121 20.0293 14.3855 20.0293H15.6151C16.0885 20.0293 16.4722 20.4131 16.4722 20.8864V21.8039C16.4722 22.2772 16.0885 22.661 15.6151 22.661H14.3855C13.9121 22.661 13.5283 22.2772 13.5283 21.8039Z" fill="#F5F5F5" stroke="black" stroke-width="0.8"/>
<path d="M9.54439 18.0817C10.9789 19.5161 12.8376 20.2677 14.7167 20.3363C16.7846 20.4118 18.877 19.6603 20.4556 18.0817C23.4687 15.0686 23.4687 10.1835 20.4556 7.17045C17.4425 4.15735 12.5575 4.15735 9.54439 7.17045C6.5313 10.1835 6.5313 15.0686 9.54439 18.0817Z" fill="#F5F5F5" stroke="black" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.545 15.0817C13.1905 15.7272 14.027 16.0654 14.8725 16.0963C15.803 16.1303 16.7446 15.7921 17.455 15.0817C18.8108 13.7258 18.8108 11.5276 17.455 10.1718C16.0991 8.8159 13.9009 8.8159 12.545 10.1718C11.1892 11.5276 11.1892 13.7258 12.545 15.0817Z" fill="#F5F5F5" stroke="black" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.3769 7.87512C14.5407 8.03895 14.753 8.12479 14.9676 8.13262C15.2038 8.14125 15.4428 8.05541 15.6231 7.87512C15.9672 7.53099 15.9672 6.97307 15.6231 6.62895C15.279 6.28482 14.721 6.28482 14.3769 6.62895C14.0328 6.97307 14.0328 7.53099 14.3769 7.87512Z" fill="#70B62B"/>
<path d="M9.9209 24.1535V23.236C9.9209 22.7627 10.3047 22.3789 10.778 22.3789H19.2222C19.6956 22.3789 20.0794 22.7627 20.0794 23.236V24.1535C20.0794 24.6268 19.6956 25.0106 19.2222 25.0106H10.778C10.3047 25.0106 9.9209 24.6268 9.9209 24.1535Z" fill="#F5F5F5" stroke="black" stroke-width="0.8"/>
</g>
<defs>
<clipPath id="clip0_1200_28545">
<rect width="30" height="30" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

@@ -0,0 +1,58 @@
<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_di_2888_36164)">
<circle cx="24.5" cy="23.5" r="22.5" fill="url(#paint0_linear_2888_36164)" fill-opacity="0.6" shape-rendering="crispEdges"/>
<circle cx="24.5" cy="23.5" r="22" stroke="url(#paint1_linear_2888_36164)" stroke-opacity="0.2" shape-rendering="crispEdges"/>
</g>
<path d="M10.5596 34.5319V12.4645C10.5596 10.8596 11.8606 9.55859 13.4655 9.55859H35.5336C37.1385 9.55859 38.4396 10.8596 38.4396 12.4645V34.5319C38.4396 36.1372 37.1382 37.4386 35.5329 37.4386H13.4662C11.8609 37.4386 10.5596 36.1372 10.5596 34.5319Z" fill="white" stroke="black"/>
<path d="M10.5596 17.6009V12.4653C10.5596 10.86 11.8609 9.55859 13.4662 9.55859H35.5329C37.1382 9.55859 38.4396 10.86 38.4396 12.4653V17.6009H10.5596Z" fill="white" stroke="black"/>
<circle cx="13.5093" cy="13.5796" r="0.804231" fill="url(#paint2_linear_2888_36164)" fill-opacity="0.91"/>
<circle cx="15.8687" cy="13.5796" r="0.804231" fill="url(#paint3_linear_2888_36164)" fill-opacity="0.91"/>
<circle cx="18.229" cy="13.5796" r="0.804231" fill="url(#paint4_linear_2888_36164)" fill-opacity="0.91"/>
<path d="M21.2832 13.5801H35.9132" stroke="url(#paint5_linear_2888_36164)" stroke-opacity="0.91" stroke-linecap="round"/>
<rect x="13.2051" y="20.7832" width="9.72308" height="3.28923" rx="0.572308" stroke="black"/>
<rect x="13.2051" y="26.1445" width="15.0846" height="3.28923" rx="0.572308" stroke="black"/>
<rect x="18.5664" y="31.5078" width="17.2292" height="3.28923" rx="0.572308" stroke="black"/>
<defs>
<filter id="filter0_di_2888_36164" x="0" y="0" width="49" height="49" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.901961 0 0 0 0 0.901961 0 0 0 0 0.901961 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2888_36164"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_2888_36164"/>
<feBlend mode="normal" in="effect2_innerShadow_2888_36164" in2="effect1_dropShadow_2888_36164" result="effect2_innerShadow_2888_36164"/>
</filter>
<linearGradient id="paint0_linear_2888_36164" x1="2" y1="1" x2="55.0086" y2="14.4599" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="0.453125" stop-color="white"/>
</linearGradient>
<linearGradient id="paint1_linear_2888_36164" x1="3.40625" y1="3.04546" x2="47" y2="3.04546" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.65625" stop-color="#70B62B"/>
</linearGradient>
<linearGradient id="paint2_linear_2888_36164" x1="12.7051" y1="12.7754" x2="14.5998" y2="13.2565" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.453125" stop-color="#70B62B"/>
</linearGradient>
<linearGradient id="paint3_linear_2888_36164" x1="15.0645" y1="12.7754" x2="16.9592" y2="13.2565" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.453125" stop-color="#70B62B"/>
</linearGradient>
<linearGradient id="paint4_linear_2888_36164" x1="17.4248" y1="12.7754" x2="19.3195" y2="13.2565" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.453125" stop-color="#70B62B"/>
</linearGradient>
<linearGradient id="paint5_linear_2888_36164" x1="21.2832" y1="13.5801" x2="22.5227" y2="18.1847" gradientUnits="userSpaceOnUse">
<stop stop-color="#C0FF7B"/>
<stop offset="0.453125" stop-color="#70B62B"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 4.1 KiB

@@ -13,21 +13,20 @@ import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.navigationBarsPadding import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.grid.GridCells import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.itemsIndexed
import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
@@ -53,13 +52,12 @@ import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp import androidx.compose.ui.unit.sp
import coil.compose.AsyncImage import coil.compose.AsyncImage
// Живой forbion (_header.css .app-menu--mobile): нижний отступ 90 под плавающую панель,
// иконки 62, сетка 3 колонки с gap 8, БЕЗ скругления верха и БЕЗ ручки-хендла,
// высота — по контенту (почти весь экран), фон #FBFBFB.
private val BottomBarReserve: Dp = 90.dp private val BottomBarReserve: Dp = 90.dp
private val MenuIconSize = 62.dp private val MenuIconSize = 62.dp
private val MenuGridGap = 20.dp private val MenuGridGap = 8.dp
// Меню-лист выезжает снизу и занимает ~пол-экрана (не весь), по требованию владельца
private const val MenuSheetHeightFraction = 0.6f
private val MenuSheetShape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp)
data class F7AppMenuItem( data class F7AppMenuItem(
val label: String, val label: String,
@@ -110,7 +108,8 @@ fun F7AppMenuSheet(
), ),
) )
} }
// Сам лист — выезжает снизу вверх на ~пол-экрана, скруглённый верх + тень // Сам лист — выезжает снизу вверх (translateY 100%→0), как в живом forbion:
// без скругления верха и без ручки, высота по контенту до почти всего экрана.
AnimatedVisibility( AnimatedVisibility(
visible = visible, visible = visible,
enter = fadeIn(tween(250)) + slideInVertically( enter = fadeIn(tween(250)) + slideInVertically(
@@ -126,61 +125,47 @@ fun F7AppMenuSheet(
Column( Column(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.fillMaxHeight(MenuSheetHeightFraction) .heightIn(max = 640.dp)
.padding(bottom = BottomBarReserve)
.navigationBarsPadding()
.shadow(16.dp, MenuSheetShape, clip = false)
.clip(MenuSheetShape)
.background(F7Colors.Background) .background(F7Colors.Background)
.padding(start = 16.dp, end = 16.dp, top = 8.dp, bottom = 8.dp), .navigationBarsPadding()
.padding(start = 16.dp, end = 16.dp, top = 16.dp, bottom = BottomBarReserve)
.verticalScroll(rememberScrollState()),
) { ) {
// Ручка-хендл
Box(
modifier = Modifier
.align(Alignment.CenterHorizontally)
.padding(top = 2.dp, bottom = 10.dp)
.width(40.dp)
.height(4.dp)
.clip(RoundedCornerShape(2.dp))
.background(F7Colors.Border),
)
F7AppMenuSearchField( F7AppMenuSearchField(
serverUrl = base, serverUrl = base,
value = searchQuery, value = searchQuery,
onValueChange = { searchQuery = it }, onValueChange = { searchQuery = it },
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.padding(bottom = 20.dp), .padding(bottom = 24.dp),
) )
LazyVerticalGrid( // Сетка 3 колонки, gap 8 (живой forbion). Не-ленивая — лист сам в verticalScroll.
columns = GridCells.Fixed(3), Column(
horizontalArrangement = Arrangement.spacedBy(MenuGridGap), modifier = Modifier.fillMaxWidth(),
verticalArrangement = Arrangement.spacedBy(MenuGridGap), verticalArrangement = Arrangement.spacedBy(MenuGridGap),
contentPadding = PaddingValues(horizontal = 2.dp),
modifier = Modifier
.fillMaxWidth()
.weight(1f),
) { ) {
itemsIndexed( filteredItems.chunked(3).forEach { rowItems ->
items = filteredItems, Row(
key = { index, item -> "${item.label}-$index" }, modifier = Modifier.fillMaxWidth(),
) { index, item -> horizontalArrangement = Arrangement.spacedBy(MenuGridGap),
val originalIndex = items.indexOf(item) ) {
Box( rowItems.forEach { item ->
modifier = Modifier.fillMaxWidth(), val originalIndex = items.indexOf(item)
contentAlignment = Alignment.TopCenter, Box(
) { modifier = Modifier.weight(1f),
F7AppMenuGridItem( contentAlignment = Alignment.TopCenter,
item = item, ) {
onClick = { F7AppMenuGridItem(
if (originalIndex >= 0) { item = item,
onItemClick(originalIndex) onClick = { if (originalIndex >= 0) onItemClick(originalIndex) },
)
} }
}, }
) // добить ряд пустыми ячейками для выравнивания по левому краю
repeat(3 - rowItems.size) { Box(modifier = Modifier.weight(1f)) {} }
}
} }
} }
}
} }
} }
} }
@@ -9,7 +9,8 @@ import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentWidth import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
@@ -34,17 +35,19 @@ data class F7BottomBarActions(
val onMenuClick: () -> Unit = {}, val onMenuClick: () -> Unit = {},
) )
// Живой forbion (_header.css .header__mobile-bottom): пилюля 328×61, паддинг 3,
// фон #F5F5F5; кнопки 55, фон #FBFBFB, рамка #E6E6E6; активная кнопка-раздел и открытый
// бургер — полупрозрачный зелёный градиент 104°.
private val BottomBarWidth = 328.dp
private val BottomBarHeight = 61.dp
private val BottomBarButtonSize = 55.dp private val BottomBarButtonSize = 55.dp
private val BottomBarIconSize = 34.dp private val BottomBarIconSize = 34.dp
// Иконки-разделы (Почта/Карточки/Конференции) — серверные SVG с внутренним
// «воздухом», поэтому рендерим крупнее, чтобы заполняли кружок.
private val BottomBarSectionIconSize = 46.dp private val BottomBarSectionIconSize = 46.dp
private val BottomBarGap = 8.dp private val BottomBarOuterPadding = 3.dp
private val BottomBarOuterPaddingH = 6.dp
private val BottomBarOuterPaddingV = 6.dp
private val BottomBarButtonShape = RoundedCornerShape(100.dp) private val BottomBarButtonShape = RoundedCornerShape(100.dp)
private val BottomBarBorderBrush = Brush.linearGradient( private val BottomBarButtonBg = Color(0xFFFBFBFB)
private val BottomBarButtonBorder = Color(0xFFE6E6E6)
private val BottomBarActiveBrush = Brush.linearGradient(
listOf(Color(0x33C0FF7B), Color(0x3370B62B)), listOf(Color(0x33C0FF7B), Color(0x3370B62B)),
) )
@@ -62,10 +65,11 @@ fun F7MobileBottomBar(
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
) { ) {
val base = serverUrl.trimEnd('/') val base = serverUrl.trimEnd('/')
val pillShape = RoundedCornerShape(percent = 50) val pillShape = RoundedCornerShape(100.dp)
Row( Row(
modifier = modifier modifier = modifier
.wrapContentWidth() .width(BottomBarWidth)
.height(BottomBarHeight)
.shadow( .shadow(
elevation = 2.dp, elevation = 2.dp,
shape = pillShape, shape = pillShape,
@@ -73,11 +77,8 @@ fun F7MobileBottomBar(
) )
.clip(pillShape) .clip(pillShape)
.background(Color(0xFFF5F5F5)) .background(Color(0xFFF5F5F5))
.padding( .padding(BottomBarOuterPadding),
horizontal = BottomBarOuterPaddingH, horizontalArrangement = Arrangement.SpaceBetween,
vertical = BottomBarOuterPaddingV,
),
horizontalArrangement = Arrangement.spacedBy(BottomBarGap),
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
) { ) {
config.slots.forEach { slot -> config.slots.forEach { slot ->
@@ -89,6 +90,7 @@ fun F7MobileBottomBar(
"$base/themes/forbion/images/header/chat-icon-gray.svg" "$base/themes/forbion/images/header/chat-icon-gray.svg"
}, },
contentDescription = "Чаты", contentDescription = "Чаты",
active = chatsHighlighted,
onClick = actions.onChatsClick, onClick = actions.onChatsClick,
) )
F7BottomBarSlot.NavBack -> F7BottomBarIconSlot( F7BottomBarSlot.NavBack -> F7BottomBarIconSlot(
@@ -101,18 +103,21 @@ fun F7MobileBottomBar(
iconUrl = "$base/themes/forbion/images/header/mail-header-icon.svg", iconUrl = "$base/themes/forbion/images/header/mail-header-icon.svg",
contentDescription = "Почта", contentDescription = "Почта",
iconSize = BottomBarSectionIconSize, iconSize = BottomBarSectionIconSize,
active = activeTabKey.equals("mail", ignoreCase = true),
onClick = actions.onMailClick, onClick = actions.onMailClick,
) )
F7BottomBarSlot.SectionCards -> F7BottomBarIconSlot( F7BottomBarSlot.SectionCards -> F7BottomBarIconSlot(
iconUrl = "$base/themes/forbion/images/header/deck-header-icon.svg", iconUrl = "$base/themes/forbion/images/header/deck-header-icon.svg",
contentDescription = "Карточки", contentDescription = "Карточки",
iconSize = BottomBarSectionIconSize, iconSize = BottomBarSectionIconSize,
active = activeTabKey.equals("deck", ignoreCase = true),
onClick = actions.onCardsClick, onClick = actions.onCardsClick,
) )
F7BottomBarSlot.SectionConferences -> F7BottomBarIconSlot( F7BottomBarSlot.SectionConferences -> F7BottomBarIconSlot(
iconUrl = "$base/themes/forbion/images/header/spreed-header-icon.svg", iconUrl = "$base/themes/forbion/images/header/spreed-header-icon.svg",
contentDescription = "Конференции", contentDescription = "Конференции",
iconSize = BottomBarSectionIconSize, iconSize = BottomBarSectionIconSize,
active = activeTabKey.equals("talk", ignoreCase = true),
onClick = actions.onConferencesClick, onClick = actions.onConferencesClick,
) )
F7BottomBarSlot.Menu -> F7BottomBarIconSlot( F7BottomBarSlot.Menu -> F7BottomBarIconSlot(
@@ -122,6 +127,7 @@ fun F7MobileBottomBar(
"$base/themes/forbion/images/header/menu-burger-gray.svg" "$base/themes/forbion/images/header/menu-burger-gray.svg"
}, },
contentDescription = "Меню", contentDescription = "Меню",
active = menuOpen,
showBadge = showNotificationBadge, showBadge = showNotificationBadge,
onClick = actions.onMenuClick, onClick = actions.onMenuClick,
) )
@@ -135,19 +141,27 @@ private fun F7BottomBarIconSlot(
iconUrl: String, iconUrl: String,
contentDescription: String, contentDescription: String,
onClick: () -> Unit, onClick: () -> Unit,
active: Boolean = false,
iconRotation: Float = 0f, iconRotation: Float = 0f,
showBadge: Boolean = false, showBadge: Boolean = false,
iconSize: Dp = BottomBarIconSize, iconSize: Dp = BottomBarIconSize,
) { ) {
// Зелёной подложки под активной кнопкой быть не должно — фон всегда нейтральный. // Живой forbion: кнопка 55, фон #FBFBFB + рамка #E6E6E6; активная (текущий раздел /
// открытый бургер) — полупрозрачный зелёный градиент 104°.
Box( Box(
modifier = Modifier modifier = Modifier
.size(BottomBarButtonSize) .size(BottomBarButtonSize)
.clip(BottomBarButtonShape) .clip(BottomBarButtonShape)
.background(Color(0x99FFFFFF), BottomBarButtonShape) .then(
if (active) {
Modifier.background(BottomBarActiveBrush, BottomBarButtonShape)
} else {
Modifier.background(BottomBarButtonBg, BottomBarButtonShape)
},
)
.border( .border(
width = 1.dp, width = 1.dp,
brush = BottomBarBorderBrush, color = BottomBarButtonBorder,
shape = BottomBarButtonShape, shape = BottomBarButtonShape,
) )
.clickable( .clickable(