💄Lot of adds

This commit is contained in:
Victor Bodinaud
2025-01-08 08:51:06 +01:00
parent 295a0515c3
commit b09cf50619
31 changed files with 859 additions and 15 deletions

View File

@@ -0,0 +1,30 @@
//
// SQAddressModifyLine.swift
// AlloVoisinsSwiftUI
//
// Created by Victor on 06/01/2025.
//
import SwiftUI
struct SQAddressModifyLine: View {
var body: some View {
let attributedText = NSAttributedString("Modifier")
HStack {
SQText("à 8 allée Baco, 44000 Nantes", size: 14)
Spacer()
Button {
print("Modifier")
} label: {
SQText("Modifier", size: 14, font: .bold)
.underline(true, pattern: .solid)
}
}
}
}
#Preview {
SQAddressModifyLine()
.padding()
}

View File

@@ -57,6 +57,7 @@ enum SQIconName: String {
case camera_plus case camera_plus
case camera_rotate case camera_rotate
case camera case camera
case car_side
case chart_line_up case chart_line_up
case chart_user case chart_user
case check case check
@@ -141,6 +142,7 @@ enum SQIconName: String {
case paper_plane_top case paper_plane_top
case paper_plane case paper_plane
case paperclip case paperclip
case passport
case payer case payer
case pen_to_square case pen_to_square
case phone_flip case phone_flip

View File

@@ -0,0 +1,44 @@
//
// SQSearchBar.swift
// AlloVoisinsSwiftUI
//
// Created by Victor on 06/01/2025.
//
import SwiftUI
struct SQSearchBar: View {
@Binding var text: String
var placeholder: String
var body: some View {
HStack(spacing: 16) {
SQIcon(.magnifying_glass, type: .solid)
TextField("", text: $text)
.placeholder(when: text.isEmpty) {
SQText(placeholder, textColor: .sqNeutral(50))
}
.tint(Color.sqNeutral(100))
}
.padding()
.background(Color.sqNeutral(10))
.cornerRadius(8)
}
}
#Preview {
SQSearchBar(text: .constant(""), placeholder: "Rechercher")
}
extension View {
func placeholder<Content: View>(
when shouldShow: Bool,
alignment: Alignment = .leading,
@ViewBuilder placeholder: () -> Content
) -> some View {
ZStack(alignment: alignment) {
placeholder().opacity(shouldShow ? 1 : 0)
self
}
}
}

View File

@@ -17,21 +17,36 @@ enum SQTextFont: String {
struct SQText: View { struct SQText: View {
var text: String var text: String
var attributedText: AttributedString?
var size: CGFloat var size: CGFloat
var font: SQTextFont var font: SQTextFont
var textColor: Color var textColor: Color
init(_ text: String, size: CGFloat = 16, font: SQTextFont = .medium, textColor: Color = .sqNeutral(90)) { init(_ text: String, size: CGFloat = 16, font: SQTextFont = .medium, textColor: Color = .sqNeutral(90)) {
self.text = text self.text = text
self.attributedText = nil
self.size = size self.size = size
self.font = font self.font = font
self.textColor = textColor self.textColor = textColor
} }
init(_ attributedText: AttributedString, size: CGFloat = 16, textColor: Color = .sqNeutral(90)) {
self.text = ""
self.attributedText = attributedText
self.size = size
self.font = .medium
self.textColor = textColor
}
var body: some View { var body: some View {
Text(text) if let attributedText = attributedText {
.font(.custom(font.rawValue, size: size)) Text(attributedText)
.foregroundStyle(textColor) .foregroundStyle(textColor)
} else {
Text(text)
.font(.custom(font.rawValue, size: size))
.foregroundStyle(textColor)
}
} }
} }

View File

@@ -158,18 +158,21 @@ struct SQTextField: View {
} }
} }
} }
.overlay( .popover(isPresented: $showTooltip, content: {
Group { SQText(tooltipText ?? "")
if showTooltip { })
Color.black.opacity(0.001) // .overlay(
.onTapGesture { // Group {
withAnimation { // if showTooltip {
showTooltip = false // Color.black.opacity(0.001)
} // .onTapGesture {
} // withAnimation {
} // showTooltip = false
} // }
) // }
// }
// }
// )
} }
private var characterCountText: String { private var characterCountText: String {

View File

@@ -52,6 +52,10 @@ extension Color {
return Color("FOREST_\(variant)") return Color("FOREST_\(variant)")
} }
static func sqRed(_ variant: Int = 60) -> Color {
return Color("RED_\(variant)")
}
static let sqSemanticRed = Color("SEMANTIC_RED") static let sqSemanticRed = Color("SEMANTIC_RED")
static let sqSemanticOrange = Color("SEMANTIC_CRITICAL") static let sqSemanticOrange = Color("SEMANTIC_CRITICAL")
static let sqSemanticGreen = Color("SEMANTIC_GREEN") static let sqSemanticGreen = Color("SEMANTIC_GREEN")

View File

@@ -0,0 +1,55 @@
//
// DocumentPreviewView.swift
// AlloVoisinsSwiftUI
//
// Created by Victor on 16/12/2024.
//
import SwiftUI
struct DocumentPreviewView: View {
let fileName: String
let onDelete: () -> Void
var body: some View {
VStack {
ZStack(alignment: .topTrailing) {
VStack {
if true {
SQImage("visit_card_new", height: 160)
} else {
SQIcon(.file_pdf, size: .l, color: .sqNeutral(80))
SQText("PDF", size: 16, font: .demiBold)
}
}
.frame(width: 160, height: 160, alignment: .center)
.background(Color.sqNeutral(10))
.overlay(
RoundedRectangle(cornerRadius: 8)
.inset(by: 0.5)
.stroke(Color.sqNeutral(20), lineWidth: 1)
)
Button {
} label: {
SQIcon(.trash_can, size: .s, color: .white)
.padding()
.background {
Circle()
.foregroundColor(Color.sqSemanticRed)
.frame(height: 24)
}
}
}
SQText(fileName, size: 13)
}
}
}
#Preview {
DocumentPreviewView(fileName: "le-nom-de-mon-fichier.pdf") {
}
}

View File

@@ -0,0 +1,102 @@
//
// IdentityDocumentButton.swift
// AlloVoisinsSwiftUI
//
// Created by Victor on 11/12/2024.
//
import SwiftUI
enum IdentityDocumentButtonType {
case nationalID
case passport
case driverLicense
case residencePermit
var title: String {
switch self {
case .nationalID:
"Carte nationale didentité"
case .passport:
"Passeport"
case .driverLicense:
"Permis de conduire"
case .residencePermit:
"Titre de séjour"
}
}
var subtitle: String {
switch self {
case .driverLicense:
"Nouveau format (après septembre 2013)"
default:
""
}
}
var icon: SQIcon {
switch self {
case .nationalID:
SQIcon(.address_card)
case .passport:
SQIcon(.passport)
case .driverLicense:
SQIcon(.car_side)
case .residencePermit:
SQIcon(.address_card)
}
}
}
struct IdentityDocumentButton: View {
var type: IdentityDocumentButtonType
var action: () -> Void
var body: some View {
Button {
action()
} label: {
HStack {
type.icon
.padding(8)
.background {
RoundedRectangle(cornerRadius: 8)
.fill(Color.sqNeutral(10))
}
VStack(alignment: .leading) {
SQText(type.title)
if !type.subtitle.isEmpty {
SQText(type.subtitle, size: 13, textColor: .sqNeutral(70))
}
}
Spacer()
SQIcon(.chevron_right, size: .xl)
}
.padding()
.overlay(
RoundedRectangle(cornerRadius: 8)
.inset(by: 0.5)
.stroke(Color.sqNeutral(30), lineWidth: 1)
)
}
}
}
#Preview {
VStack {
IdentityDocumentButton(type: .nationalID) {
}
IdentityDocumentButton(type: .passport) {
}
IdentityDocumentButton(type: .driverLicense) {
}
IdentityDocumentButton(type: .residencePermit) {
}
}
.padding()
}

View File

@@ -0,0 +1,103 @@
//
// KYCDocumentButton.swift
// AlloVoisinsSwiftUI
//
// Created by Victor on 11/12/2024.
//
import SwiftUI
enum KYCDocumentStatus: String {
case accepted
case missing
case imported
case pending
case refused
case expired
var text: String {
switch self {
case .accepted:
"Accepté"
case .missing:
"Manquant"
case .imported:
"Importé"
case .pending:
"En cours de vérification"
case .refused:
"Refusé"
case .expired:
"Expiré"
}
}
var color: Color {
switch self {
case .accepted:
.sqSemanticPositive
case .missing:
.sqNeutral(80)
case .imported, .pending:
.sqSemanticCritical
case .refused, .expired:
.sqSemanticNegative
}
}
var icon: SQIcon {
switch self {
case .accepted:
SQIcon(.check, size: .xs, color: color)
case .missing:
SQIcon(.circle_exclamation, size: .xs, color: color)
case .imported, .pending:
SQIcon(.hourglass_half, size: .xs, color: color)
case .refused:
SQIcon(.xmark, size: .xs, color: color)
case .expired:
SQIcon(.triangle_exclamation, size: .xs, color: color)
}
}
}
struct KYCDocumentButton: View {
var name: String
var desc: String
var status: KYCDocumentStatus
var body: some View {
VStack(alignment: .leading) {
HStack {
SQText(name, font: .bold)
Spacer()
HStack(spacing: 4) {
SQText(status.text, size: 13, font: .demiBold, textColor: status.color)
status.icon
}
}
HStack {
SQText(desc, size: 14)
Spacer()
if [.missing, .expired, .refused].contains(status) {
SQIcon(.chevron_right, size: .l)
}
}
}
.padding()
.overlay(
RoundedRectangle(cornerRadius: 8)
.inset(by: 0.5)
.stroke(Color.sqNeutral(30), lineWidth: 1)
)
}
}
#Preview {
VStack {
KYCDocumentButton(name: "Document didentité", desc: "Carte didentité, passeport, permis de conduire ou titre de séjour du représentant légal.", status: .pending)
KYCDocumentButton(name: "Preuve dimmatriculation", desc: "Extrait Kbis de moins de 3 mois.", status: .accepted)
KYCDocumentButton(name: "Statuts de la société", desc: "Statuts complets, à jour et signés.", status: .refused)
}
.padding()
}

View File

@@ -0,0 +1,29 @@
//
// KYCInformationAlertView.swift
// AlloVoisinsSwiftUI
//
// Created by Victor on 11/12/2024.
//
import SwiftUI
struct KYCInformationAlertView: View {
var body: some View {
HStack {
SQIcon(.triangle_exclamation, size: .xl, color: .sqRed(80))
VStack(alignment: .leading) {
SQText("Mangopay facturera le montant de la vérification dès lors que vous aurez soumis un document à vérification.", size: 14, font: .demiBold, textColor: .sqRed(80))
}
}
.frame(maxWidth: .infinity)
.foregroundStyle(.white)
.padding(16)
.background(Color.sqRed(20))
.cornerRadius(8)
}
}
#Preview {
KYCInformationAlertView()
.padding()
}

View File

@@ -0,0 +1,49 @@
//
// CategorySelectorView.swift
// AlloVoisinsSwiftUI
//
// Created by Victor on 06/01/2025.
//
import SwiftUI
struct CategorySelectorView: View {
var body: some View {
VStack(spacing: 0) {
VStack(spacing: 16) {
SQText("Zone de texte sur la partie haute de lécran, pouvant être sur plusieurs lignes.")
HStack(alignment: .top, spacing: 0) {
VStack {
SQText("Services", font: .demiBold)
.frame(maxWidth: .infinity)
Rectangle()
.fill(Color.sqNeutral(100))
.frame(height: 2)
}
VStack {
SQText("Objets", font: .demiBold)
.frame(maxWidth: .infinity)
Rectangle()
.fill(Color.sqNeutral(20))
.frame(height: 1)
}
}
}
// MARK: -List
ScrollView {
LazyVStack(spacing: 0) {
ForEach(0..<10) { _ in
VStack(spacing: 0) {
CategoryCell()
}
}
}
}
}
}
}
#Preview {
CategorySelectorView()
}

View File

@@ -0,0 +1,22 @@
//
// AllCategoriesCell.swift
// AlloVoisinsSwiftUI
//
// Created by Victor on 06/01/2025.
//
import SwiftUI
struct AllCategoriesCell: View {
var body: some View {
HStack {
SQText("Voir toutes les catégories", font: .demiBold)
Spacer()
SQIcon(.chevron_right)
}
}
}
#Preview {
AllCategoriesCell()
}

View File

@@ -0,0 +1,27 @@
//
// CategoryCell.swift
// AlloVoisinsSwiftUI
//
// Created by Victor on 06/01/2025.
//
import SwiftUI
struct CategoryCell: View {
var body: some View {
VStack(spacing: 0) {
HStack {
SQText("Bricolage - Travaux")
Spacer()
SQIcon(.chevron_right)
}
.padding()
Divider()
.padding(.horizontal)
}
}
}
#Preview {
CategoryCell()
}

View File

@@ -0,0 +1,24 @@
//
// PrestationCell.swift
// AlloVoisinsSwiftUI
//
// Created by Victor on 06/01/2025.
//
import SwiftUI
struct PrestationCell: View {
var body: some View {
HStack {
SQIcon(.magnifying_glass)
VStack(alignment: .leading) {
SQText("remplacement de vitre")
SQText("dans Menuiserie - Huisserie - Agencement", size: 12, textColor: .sqNeutral(60))
}
}
}
}
#Preview {
PrestationCell()
}

View File

@@ -0,0 +1,26 @@
//
// PrestationHistorySearchCell.swift
// AlloVoisinsSwiftUI
//
// Created by Victor on 06/01/2025.
//
import SwiftUI
struct PrestationHistorySearchCell: View {
var body: some View {
HStack {
SQIcon(.clock)
VStack(alignment: .leading) {
SQText("remplacement de vitre")
SQText("dans Menuiserie - Huisserie - Agencement", size: 12, textColor: .sqNeutral(60))
}
Spacer()
SQIcon(.xmark)
}
}
}
#Preview {
PrestationHistorySearchCell()
}

View File

@@ -0,0 +1,66 @@
//
// PrestationSearchView.swift
// AlloVoisinsSwiftUI
//
// Created by Victor on 06/01/2025.
//
import SwiftUI
struct PrestationSearchView: View {
@State var text = ""
var body: some View {
VStack(spacing: 32) {
// MARK: - Header
VStack {
HStack {
SQIcon(.chevron_left, size: .l)
.padding(.horizontal, 8)
SQSearchBar(text: $text, placeholder: "Rechercher")
}
HStack {
Spacer()
.frame(width: 38)
SQAddressModifyLine()
}
}
// MARK: - List
ScrollView {
LazyVStack(alignment: .leading, spacing: 16) {
AllCategoriesCell()
Divider()
VStack(alignment: .leading, spacing: 16) {
SQText("Mes dernières recherches", size: 18, font: .bold)
ForEach(0..<3) { _ in
PrestationHistorySearchCell()
}
}
VStack(alignment: .leading, spacing: 16) {
SQText("Recherches les plus populaires", size: 18, font: .bold)
ForEach(0..<3) { _ in
PrestationCell()
}
}
ForEach(0..<10) { _ in
LazyVStack(alignment: .leading, spacing: 0) {
PrestationCell()
}
}
}
}
}
.padding()
}
}
#Preview {
PrestationSearchView()
}

View File

@@ -0,0 +1,6 @@
{
"info" : {
"author" : "xcode",
"version" : 1
}
}

View File

@@ -0,0 +1,20 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0xEB",
"green" : "0xEB",
"red" : "0xFF"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

View File

@@ -0,0 +1,20 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0x00",
"green" : "0x00",
"red" : "0x4D"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

View File

@@ -0,0 +1,20 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0.867",
"green" : "0.867",
"red" : "1.000"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

View File

@@ -0,0 +1,20 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0xCE",
"green" : "0xCE",
"red" : "0xFF"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

View File

@@ -0,0 +1,20 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0xA6",
"green" : "0xA6",
"red" : "0xFF"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

View File

@@ -0,0 +1,20 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0x7B",
"green" : "0x7B",
"red" : "0xFF"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

View File

@@ -0,0 +1,20 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0.314",
"green" : "0.314",
"red" : "0.996"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

View File

@@ -0,0 +1,20 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0x23",
"green" : "0x23",
"red" : "0xDC"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

View File

@@ -0,0 +1,20 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0.004",
"green" : "0.004",
"red" : "0.694"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

View File

@@ -0,0 +1,20 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0x00",
"green" : "0x00",
"red" : "0x80"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

View File

@@ -0,0 +1,12 @@
{
"images" : [
{
"filename" : "Name=car-side, Size=32.svg",
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

View File

@@ -0,0 +1,3 @@
<svg width="40" height="32" viewBox="0 0 40 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.7063 5H14V6V11V12H6.2125L8.38125 6.56875C8.76875 5.625 9.6875 5 10.7063 5ZM17 12V11V6V5H22.075C22.8375 5 23.55 5.34375 24.025 5.9375L28.875 12H17ZM32.75 12.0375L26.375 4.0625C25.3312 2.75625 23.75 2 22.0812 2H10.7063C8.45625 2 6.4375 3.36875 5.6 5.45625L2.925 12.1438C1.2375 12.6125 0 14.1625 0 16V23C0 24.1063 0.89375 25 2 25H4.08125C4.55625 27.8375 7.025 30 10 30C12.975 30 15.4437 27.8375 15.9187 25H24.0812C24.5562 27.8375 27.025 30 30 30C32.975 30 35.4438 27.8375 35.9188 25H38C39.1063 25 40 24.1063 40 23V20C40 15.8313 36.8187 12.4125 32.75 12.0375ZM27.1688 23C27.2961 22.6235 27.4969 22.2761 27.7597 21.9778C28.0224 21.6796 28.3418 21.4366 28.6992 21.2628C29.0567 21.0891 29.4451 20.9881 29.8419 20.9658C30.2387 20.9434 30.636 21.0001 31.0108 21.1326C31.3855 21.2651 31.7301 21.4708 32.0247 21.7376C32.3192 22.0044 32.5579 22.3271 32.7267 22.6869C32.8954 23.0467 32.9911 23.4365 33.0079 23.8336C33.0248 24.2307 32.9626 24.6272 32.825 25C32.6977 25.3765 32.4968 25.7239 32.2341 26.0222C31.9713 26.3204 31.652 26.5634 31.2945 26.7372C30.9371 26.9109 30.5486 27.0119 30.1518 27.0342C29.755 27.0566 29.3577 26.9999 28.983 26.8674C28.6083 26.7349 28.2636 26.5292 27.9691 26.2624C27.6745 25.9956 27.4359 25.6729 27.2671 25.3131C27.0983 24.9533 27.0027 24.5635 26.9858 24.1664C26.9689 23.7693 27.0311 23.3728 27.1688 23ZM35.6562 22C34.8312 19.6688 32.6125 18 30 18C27.3875 18 25.1625 19.6688 24.3438 22H15.6562C14.8313 19.6688 12.6125 18 10 18C7.3875 18 5.1625 19.6688 4.34375 22H3V16C3 15.45 3.45 15 4 15H32C34.7625 15 37 17.2375 37 20V22H35.6562ZM10 21C10.7956 21 11.5587 21.3161 12.1213 21.8787C12.6839 22.4413 13 23.2044 13 24C13 24.7956 12.6839 25.5587 12.1213 26.1213C11.5587 26.6839 10.7956 27 10 27C9.20435 27 8.44129 26.6839 7.87868 26.1213C7.31607 25.5587 7 24.7956 7 24C7 23.2044 7.31607 22.4413 7.87868 21.8787C8.44129 21.3161 9.20435 21 10 21Z" fill="#172433"/>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@@ -0,0 +1,12 @@
{
"images" : [
{
"filename" : "Name=passport, Size=32.svg",
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

View File

@@ -0,0 +1,10 @@
<svg width="28" height="32" viewBox="0 0 28 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2218_58)">
<path d="M24 3C24.55 3 25 3.45 25 4V28C25 28.55 24.55 29 24 29H4C3.45 29 3 28.55 3 28V4C3 3.45 3.45 3 4 3H24ZM4 0C1.79375 0 0 1.79375 0 4V28C0 30.2062 1.79375 32 4 32H24C26.2062 32 28 30.2062 28 28V4C28 1.79375 26.2062 0 24 0H4ZM6 25C6 25.55 6.45 26 7 26H21C21.55 26 22 25.55 22 25C22 24.45 21.55 24 21 24H7C6.45 24 6 24.45 6 25ZM8.08125 14H10.525C10.625 15.9 11.0063 17.3625 11.4375 18.425C9.69375 17.6 8.4125 15.9625 8.08125 14ZM14 19H13.9812C13.8313 18.7812 13.625 18.4438 13.4125 17.9688C13.0375 17.1187 12.6375 15.825 12.525 14H15.4688C15.3562 15.825 14.9625 17.1187 14.5813 17.9688C14.3688 18.4438 14.1625 18.7812 14.0125 19H13.9937H14ZM19.9188 14C19.5875 15.9625 18.3062 17.6 16.5625 18.425C16.9875 17.3562 17.3687 15.9 17.475 14H19.9188ZM19.9188 12H17.475C17.375 10.1 16.9937 8.6375 16.5625 7.575C18.3062 8.4 19.5875 10.0375 19.9188 12ZM14 7H14.0188C14.1687 7.21875 14.375 7.55625 14.5875 8.03125C14.9625 8.88125 15.3625 10.175 15.475 12H12.5312C12.6438 10.175 13.0375 8.88125 13.4187 8.03125C13.6312 7.55625 13.8375 7.21875 13.9875 7H14.0063H14ZM8.08125 12C8.4125 10.0375 9.69375 8.4 11.4375 7.575C11.0125 8.64375 10.6312 10.1 10.525 12H8.08125ZM14 21C16.1217 21 18.1566 20.1571 19.6569 18.6569C21.1571 17.1566 22 15.1217 22 13C22 10.8783 21.1571 8.84344 19.6569 7.34315C18.1566 5.84285 16.1217 5 14 5C11.8783 5 9.84344 5.84285 8.34315 7.34315C6.84285 8.84344 6 10.8783 6 13C6 15.1217 6.84285 17.1566 8.34315 18.6569C9.84344 20.1571 11.8783 21 14 21Z" fill="#172433"/>
</g>
<defs>
<clipPath id="clip0_2218_58">
<rect width="28" height="32" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB