UBERF-55: Change editor toolbar behavior and update icons (#3645)

Signed-off-by: Maxim Karmatskikh <mkarmatskih@gmail.com>
hcengineering · Aug 31, 2023 · eaeb3b7 · eaeb3b7
1 parent 4165092
commit eaeb3b7
Show file tree

Hide file tree

Showing 13 changed files with 108 additions and 82 deletions.
diff --git a/packages/text-editor/src/components/ReferenceInput.svelte b/packages/text-editor/src/components/ReferenceInput.svelte
@@ -41,10 +41,10 @@
   import ListBullet from './icons/ListBullet.svelte'
   import ListNumber from './icons/ListNumber.svelte'
   import Quote from './icons/Quote.svelte'
-  import RIBold from './icons/RIBold.svelte'
-  import RICode from './icons/RICode.svelte'
-  import RIItalic from './icons/RIItalic.svelte'
-  import RILink from './icons/RILink.svelte'
+  import Bold from './icons/Bold.svelte'
+  import Code from './icons/Code.svelte'
+  import Italic from './icons/Italic.svelte'
+  import Link from './icons/Link.svelte'
   import RIMention from './icons/RIMention.svelte'
   import RIStrikethrough from './icons/RIStrikethrough.svelte'
   import Underline from './icons/Underline.svelte'
@@ -200,15 +200,15 @@
 <div class="ref-container">
   <div class="formatPanel buttons-group xsmall-gap mb-4" class:withoutTopBorder bind:this={textEditorToolbar}>
     <Button
-      icon={RIBold}
+      icon={Bold}
       kind={'ghost'}
       size={'small'}
       selected={activeModes.has('bold')}
       showTooltip={{ label: textEditorPlugin.string.Bold }}
       on:click={getToggler(textEditor.toggleBold)}
     />
     <Button
-      icon={RIItalic}
+      icon={Italic}
       kind={'ghost'}
       size={'small'}
       selected={activeModes.has('italic')}
@@ -232,7 +232,7 @@
       on:click={getToggler(textEditor.toggleUnderline)}
     />
     <Button
-      icon={RILink}
+      icon={Link}
       kind={'ghost'}
       size={'small'}
       selected={activeModes.has('link')}
@@ -268,7 +268,7 @@
     />
     <div class="buttons-divider" />
     <Button
-      icon={RICode}
+      icon={Code}
       kind={'ghost'}
       size={'small'}
       selected={activeModes.has('code')}

diff --git a/packages/text-editor/src/components/StyledTextEditor.svelte b/packages/text-editor/src/components/StyledTextEditor.svelte
@@ -32,15 +32,16 @@
   import { headingLevels, mInsertTable } from './extensions'
   import Attach from './icons/Attach.svelte'
   import CodeBlock from './icons/CodeBlock.svelte'
-  import Header from './icons/Header.svelte'
+  import Header1 from './icons/Header1.svelte'
+  import Header2 from './icons/Header2.svelte'
   import IconTable from './icons/IconTable.svelte'
   import ListBullet from './icons/ListBullet.svelte'
   import ListNumber from './icons/ListNumber.svelte'
   import Quote from './icons/Quote.svelte'
-  import RIBold from './icons/RIBold.svelte'
-  import RICode from './icons/RICode.svelte'
-  import RIItalic from './icons/RIItalic.svelte'
-  import RILink from './icons/RILink.svelte'
+  import Bold from './icons/Bold.svelte'
+  import Code from './icons/Code.svelte'
+  import Italic from './icons/Italic.svelte'
+  import Link from './icons/Link.svelte'
   import RIStrikethrough from './icons/RIStrikethrough.svelte'
   import Underline from './icons/Underline.svelte'
   import { AnyExtension } from '@tiptap/core'
@@ -182,19 +183,16 @@
     activeModes = new Set(FORMAT_MODES.filter(textEditor.checkIsActive))
     for (const l of headingLevels) {
       if (textEditor.checkIsActive('heading', { level: l })) {
-        headingLevel = l
         activeModes.add('heading')
+        if (l === 1) {
+          activeModes.add('heading1')
+        } else if (l === 2) {
+          activeModes.add('heading2')
+        }
       }
     }
-    if (!activeModes.has('heading')) {
-      headingLevel = 0
-    }
     isSelectionEmpty = textEditor.checkIsSelectionEmpty()
   }
-  // function updateFormattingState () {
-  //   activeModes = new Set(FORMAT_MODES.filter(textEditor.checkIsActive))
-  //   isSelectionEmpty = textEditor.checkIsSelectionEmpty()
-  // }
 
   function getToggler (toggle: () => void) {
     return () => {
@@ -236,28 +234,11 @@
     needFocus = false
   }
 
-  let headingLevel = 0
-
-  function toggleHeader (event: MouseEvent) {
-    if (activeModes.has('heading')) {
-      textEditor.toggleHeading({ level: headingLevel as Level })
+  function getHeaderToggler (level: Level) {
+    return () => {
+      textEditor.toggleHeading({ level })
       needFocus = true
       updateFormattingState()
-    } else {
-      showPopup(
-        SelectPopup,
-        {
-          value: Array.from(headingLevels).map((it) => ({ id: it.toString(), text: it.toString() }))
-        },
-        getEventPositionElement(event),
-        (val) => {
-          if (val !== undefined) {
-            textEditor.toggleHeading({ level: parseInt(val) as Level })
-            needFocus = true
-            updateFormattingState()
-          }
-        }
-      )
     }
   }
 
@@ -408,21 +389,28 @@
 >
   <div class="formatPanel buttons-group xsmall-gap mb-4" class:withoutTopBorder bind:this={textEditorToolbar}>
     <StyleButton
-      icon={Header}
+      icon={Header1}
+      size={formatButtonSize}
+      selected={activeModes.has('heading1')}
+      showTooltip={{ label: getEmbeddedLabel('H1') }}
+      on:click={getHeaderToggler(1)}
+    />
+    <StyleButton
+      icon={Header2}
       size={formatButtonSize}
-      selected={activeModes.has('heading')}
-      showTooltip={{ label: getEmbeddedLabel(`H${headingLevel}`) }}
-      on:click={toggleHeader}
+      selected={activeModes.has('heading2')}
+      showTooltip={{ label: getEmbeddedLabel('H2') }}
+      on:click={getHeaderToggler(2)}
     />
     <StyleButton
-      icon={RIBold}
+      icon={Bold}
       size={formatButtonSize}
       selected={activeModes.has('bold')}
       showTooltip={{ label: textEditorPlugin.string.Bold }}
       on:click={getToggler(textEditor.toggleBold)}
     />
     <StyleButton
-      icon={RIItalic}
+      icon={Italic}
       size={formatButtonSize}
       selected={activeModes.has('italic')}
       showTooltip={{ label: textEditorPlugin.string.Italic }}
@@ -443,7 +431,7 @@
       on:click={getToggler(textEditor.toggleUnderline)}
     />
     <StyleButton
-      icon={RILink}
+      icon={Link}
       size={formatButtonSize}
       selected={activeModes.has('link')}
       disabled={isSelectionEmpty && !activeModes.has('link')}
@@ -475,7 +463,7 @@
     />
     <div class="buttons-divider" />
     <StyleButton
-      icon={RICode}
+      icon={Code}
       size={formatButtonSize}
       selected={activeModes.has('code')}
       showTooltip={{ label: textEditorPlugin.string.Code }}

diff --git a/packages/text-editor/src/components/TextEditor.svelte b/packages/text-editor/src/components/TextEditor.svelte
@@ -67,6 +67,10 @@
   export function clear (): void {
     content = ''
     editor.commands.clearContent(false)
+
+    // editor.commands.clearContent false as argument prevent from onUpdate
+    // so if we want to stay in sync with editor.isEmpty we need to do this manually
+    isEmpty = true
   }
   export function insertText (text: string): void {
     editor.commands.insertContent(text as HTMLContent)
@@ -292,7 +296,9 @@
   })
 
   function onEditorClick () {
-    showContextMenu = true
+    if (!editor.isEmpty) {
+      showContextMenu = true
+    }
   }
 
   /**

diff --git a/packages/text-editor/src/components/icons/Bold.svelte b/packages/text-editor/src/components/icons/Bold.svelte
@@ -3,8 +3,8 @@
   const fill: string = 'currentColor'
 </script>
 
-<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
   <path
-    d="M15.6,11.5c1.3-1.1,2.1-2.7,2.1-4.5c0-3.2-2.6-5.8-5.7-5.8H5.5C5.1,1.2,4.8,1.6,4.8,2v10v10 c0,0.4,0.3,0.8,0.8,0.8H14c3.2,0,5.7-2.6,5.7-5.8C19.8,14.4,18,12.2,15.6,11.5z M6.2,2.8H12c2.3,0,4.2,1.9,4.2,4.2s-1.9,4.2-4.2,4.2 H6.2V2.8z M14,21.2H6.2v-8.5H12h2c2.3,0,4.2,1.9,4.2,4.2S16.4,21.2,14,21.2z"
+    d="M18.25 25H10C9.44772 25 9 24.5523 9 24V8C9 7.44772 9.44772 7 10 7H17.5C18.5022 7.00006 19.4834 7.28695 20.3277 7.82679C21.172 8.36662 21.8442 9.13684 22.2649 10.0465C22.6855 10.9561 22.837 11.9671 22.7015 12.96C22.5659 13.953 22.149 14.8864 21.5 15.65C22.3477 16.328 22.9645 17.252 23.2653 18.295C23.5662 19.3379 23.5364 20.4485 23.18 21.4738C22.8236 22.4991 22.1581 23.3887 21.2753 24.0202C20.3924 24.6517 19.3355 24.994 18.25 25ZM12 22H18.23C18.5255 22 18.8181 21.9418 19.091 21.8287C19.364 21.7157 19.6121 21.5499 19.821 21.341C20.0299 21.1321 20.1957 20.884 20.3087 20.611C20.4218 20.3381 20.48 20.0455 20.48 19.75C20.48 19.4545 20.4218 19.1619 20.3087 18.889C20.1957 18.616 20.0299 18.3679 19.821 18.159C19.6121 17.9501 19.364 17.7843 19.091 17.6713C18.8181 17.5582 18.5255 17.5 18.23 17.5H12V22ZM12 14.5H17.5C17.7955 14.5 18.0881 14.4418 18.361 14.3287C18.634 14.2157 18.8821 14.0499 19.091 13.841C19.2999 13.6321 19.4657 13.384 19.5787 13.111C19.6918 12.8381 19.75 12.5455 19.75 12.25C19.75 11.9545 19.6918 11.6619 19.5787 11.389C19.4657 11.116 19.2999 10.8679 19.091 10.659C18.8821 10.4501 18.634 10.2843 18.361 10.1713C18.0881 10.0582 17.7955 10 17.5 10H12V14.5Z"
   />
 </svg>
diff --git a/packages/text-editor/src/components/icons/Code.svelte b/packages/text-editor/src/components/icons/Code.svelte
@@ -3,14 +3,7 @@
   const fill: string = 'currentColor'
 </script>
 
-<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M8.5,6C8.2,5.7,7.7,5.7,7.5,6l-6,6.2c-0.1,0.1-0.2,0.3-0.2,0.5c0,0.2,0.1,0.4,0.2,0.5l6,5.8 c0.3,0.3,0.8,0.3,1.1,0s0.3-0.8,0-1.1l-5.5-5.3L8.5,7C8.8,6.7,8.8,6.2,8.5,6z"
-  />
-  <path
-    d="M22.5,12.2l-6-6.2c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1l5.5,5.7L15.5,18c-0.3,0.3-0.3,0.8,0,1.1 c0.3,0.3,0.8,0.3,1.1,0l6-5.8c0.1-0.1,0.2-0.3,0.2-0.5C22.8,12.5,22.7,12.3,22.5,12.2z"
-  />
-  <path
-    d="M14.1,1.3c-0.4-0.1-0.8,0.2-0.9,0.6l-3.5,20c-0.1,0.4,0.2,0.8,0.6,0.9c0.4,0.1,0.8-0.2,0.9-0.6l3.5-20 C14.8,1.7,14.5,1.3,14.1,1.3z"
-  />
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2 16L10 24L11.4142 22.5858L4.82843 16L11.4142 9.41421L10 8L2 16Z" />
+  <path d="M29.9999 16L21.9999 8L20.5857 9.41421L27.1715 16L20.5857 22.5858L21.9999 24L29.9999 16Z" />
 </svg>
diff --git a/packages/text-editor/src/components/icons/Header1.svelte b/packages/text-editor/src/components/icons/Header1.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M8 8C8 7.44772 7.55228 7 7 7C6.44772 7 6 7.44772 6 8V24C6 24.5523 6.44772 25 7 25C7.55228 25 8 24.5523 8 24V17H17V24C17 24.5523 17.4477 25 18 25C18.5523 25 19 24.5523 19 24V8C19 7.44772 18.5523 7 18 7C17.4477 7 17 7.44772 17 8V15H8V8Z"
+  />
+  <path
+    d="M25.8751 15.5C25.8751 15.0709 25.5639 14.7051 25.1403 14.6363C24.7166 14.5676 24.3057 14.8162 24.17 15.2233L24.104 15.4213C23.8842 16.0806 23.451 16.6478 22.8728 17.0333L22.5147 17.272C22.1126 17.54 22.004 18.0833 22.272 18.4854C22.5401 18.8875 23.0834 18.9961 23.4855 18.7281L23.8435 18.4894C23.94 18.425 24.17 16.1562 24.1251 18.2868V23.125H23.0001C22.5168 23.125 22.1251 23.5168 22.1251 24C22.1251 24.4833 22.5168 24.875 23.0001 24.875H27.0001C27.4833 24.875 27.8751 24.4833 27.8751 24C27.8751 23.5168 27.4833 23.125 27.0001 23.125H25.8751V15.5Z"
+  />
+</svg>
diff --git a/packages/text-editor/src/components/icons/Header2.svelte b/packages/text-editor/src/components/icons/Header2.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M8 8C8 7.44772 7.55228 7 7 7C6.44772 7 6 7.44772 6 8V24C6 24.5523 6.44772 25 7 25C7.55228 25 8 24.5523 8 24V17H17V24C17 24.5523 17.4477 25 18 25C18.5523 25 19 24.5523 19 24V8C19 7.44772 18.5523 7 18 7C17.4477 7 17 7.44772 17 8V15H8V8Z"
+  />
+  <path
+    d="M25.0002 14.625C23.6175 14.6239 22.6106 15.4018 22.1701 16.7233C22.0173 17.1817 22.2651 17.6773 22.7235 17.8301C23.182 17.9829 23.6775 17.7351 23.8303 17.2767C24.0381 16.6534 24.3614 16.375 25.0002 16.375C25.6752 16.375 26.1033 16.8525 26.1252 17.5065C26.1228 18.4508 25.739 19.0073 25 19.5C23.5 20.5 22.1252 21.5 22.1252 24C22.1252 24.4832 22.517 24.875 23.0002 24.875H27.5002C27.9835 24.875 28.3752 24.4832 28.3752 24C28.3752 23.5167 27.9829 23.125 27.4997 23.125H24.0953C24.0953 22 26 21 27 20C27.509 19.4273 27.8752 18.4765 27.8752 17.5C27.8525 17.0167 27.7507 16.5443 27.5329 16.1087C27.0474 15.1378 26.0693 14.625 25.0002 14.625Z"
+  />
+</svg>
diff --git a/packages/text-editor/src/components/icons/Italic.svelte b/packages/text-editor/src/components/icons/Italic.svelte
@@ -3,8 +3,8 @@
   const fill: string = 'currentColor'
 </script>
 
-<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
   <path
-    d="M18,2.2h-3.3c-0.1,0-0.2,0-0.3,0H10C9.6,2.2,9.2,2.6,9.2,3S9.6,3.8,10,3.8h3.5L8.9,20.2H6 c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h8c0.4,0,0.8-0.3,0.8-0.8s-0.3-0.8-0.8-0.8h-3.5l4.6-16.5H18c0.4,0,0.8-0.3,0.8-0.8 S18.4,2.2,18,2.2z"
+    d="M24 9C24.5523 9 25 8.55228 25 8C25 7.44772 24.5523 7 24 7H13C12.4477 7 12 7.44772 12 8C12 8.55228 12.4477 9 13 9H17.14L12.77 23H8C7.44771 23 7 23.4477 7 24C7 24.5523 7.44772 25 8 25H19C19.5523 25 20 24.5523 20 24C20 23.4477 19.5523 23 19 23H14.86L19.23 9H24Z"
   />
 </svg>
diff --git a/packages/text-editor/src/components/icons/Link.svelte b/packages/text-editor/src/components/icons/Link.svelte
@@ -4,12 +4,11 @@
   const fill: string = 'currentColor'
 </script>
 
-<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
   <path
-    d="M4.1,8c-1-1-1-2.7,0.1-3.8C5.3,3.1,7,3.1,8,4.1l4.6,4.6c0,0,0,0,0,0c1,1,1,2.7-0.1,3.8c-0.3,0.3-0.3,0.8,0,1.1 s0.8,0.3,1.1,0c1.6-1.6,1.7-4.3,0.1-5.9l0,0l0,0L9.1,3.1C7.4,1.4,4.8,1.5,3.1,3.2C1.5,4.8,1.4,7.5,3.1,9.1l4,4 c0.3,0.3,0.8,0.3,1.1,0s0.3-0.8,0-1.1L4.1,8z"
+    d="M29.25 6.75997C28.6926 6.20061 28.0302 5.75679 27.3009 5.45396C26.5716 5.15112 25.7897 4.99524 25 4.99524C24.2103 4.99524 23.4284 5.15112 22.6991 5.45396C22.278 5.62881 21.8792 5.85065 21.5101 6.1146C21.0614 6.43545 21.0693 7.07931 21.4594 7.46935C21.8499 7.85988 22.4827 7.84994 22.9575 7.5679C23.1218 7.47029 23.2933 7.38434 23.4707 7.31086C23.9571 7.10938 24.4785 7.00567 25.005 7.00567C25.5315 7.00567 26.0528 7.10938 26.5393 7.31086C27.0257 7.51235 27.4677 7.80767 27.84 8.17997C28.2123 8.55227 28.5076 8.99425 28.7091 9.48068C28.9106 9.96711 29.0143 10.4885 29.0143 11.015C29.0143 11.5415 28.9106 12.0628 28.7091 12.5493C28.5076 13.0357 28.2123 13.4777 27.84 13.85L19.84 21.85C19.0894 22.6019 18.0709 23.0248 17.0085 23.0257C15.9461 23.0267 14.9269 22.6055 14.175 21.855C13.4231 21.1044 13.0001 20.0859 12.9992 19.0235C12.9983 17.9611 13.4194 16.9419 14.17 16.19L14.8803 15.4746C15.2675 15.0846 15.2659 14.4537 14.8787 14.0637C14.4886 13.6709 13.8519 13.6681 13.4604 14.0596L12.75 14.77C12.1906 15.3274 11.7468 15.9897 11.444 16.7191C11.1411 17.4484 10.9852 18.2303 10.9852 19.02C10.9852 19.8097 11.1411 20.5916 11.444 21.3209C11.7468 22.0502 12.1906 22.7125 12.75 23.27C13.8815 24.387 15.41 25.0092 17 25C17.7927 25.0032 18.5782 24.8494 19.3111 24.5473C20.044 24.2452 20.7098 23.8009 21.27 23.24L29.27 15.24C30.3909 14.1123 31.0184 12.5858 31.0147 10.9958C31.0109 9.40582 30.3762 7.88232 29.25 6.75997Z"
   />
-
   <path
-    d="M20.9,14.9l-4-4c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1l4,4c1,1,1,2.7-0.1,3.8 c-1.1,1.1-2.8,1.1-3.8,0.1l-4.6-4.6c0,0,0,0,0,0c0,0,0,0,0,0c-1-1-1-2.7,0.1-3.8c0.3-0.3,0.3-0.8,0-1.1c-0.3-0.3-0.8-0.3-1.1,0 c-1.6,1.6-1.7,4.3-0.1,5.9c0,0,0,0,0,0c0,0,0,0,0,0l4.6,4.6c1.6,1.6,4.3,1.6,5.9-0.1C22.5,19.2,22.6,16.6,20.9,14.9z"
+    d="M4.18997 24.82C3.81656 24.4483 3.52026 24.0065 3.31807 23.52C3.11589 23.0335 3.01181 22.5118 3.01181 21.985C3.01181 21.4581 3.11589 20.9365 3.31807 20.4499C3.52026 19.9634 3.81656 19.5216 4.18997 19.15L12.19 11.15C12.5616 10.7766 13.0034 10.4803 13.4899 10.2781C13.9765 10.0759 14.4981 9.97181 15.025 9.97181C15.5518 9.97181 16.0735 10.0759 16.56 10.2781C17.0465 10.4803 17.4883 10.7766 17.86 11.15C18.231 11.5246 18.5231 11.9698 18.7189 12.4594C18.9147 12.9489 19.0103 13.4728 19 14C19.003 14.5288 18.9012 15.0529 18.7004 15.5421C18.4995 16.0313 18.2037 16.4758 17.83 16.85L16.4072 18.2929C16.0213 18.6842 16.0289 19.3189 16.4175 19.7075C16.808 20.098 17.4466 20.1034 17.8371 19.7129L19.25 18.3C20.3785 17.1715 21.0124 15.6409 21.0124 14.045C21.0124 12.449 20.3785 10.9185 19.25 9.78997C18.1215 8.66147 16.5909 8.02749 14.995 8.02749C13.399 8.02749 11.8685 8.66147 10.74 9.78997L2.73997 17.79C2.17911 18.3476 1.73401 19.0106 1.43029 19.7408C1.12657 20.471 0.970215 21.2541 0.970215 22.045C0.970215 22.8358 1.12657 23.6189 1.43029 24.3492C1.73401 25.0794 2.17911 25.7424 2.73997 26.3C3.87879 27.4084 5.41087 28.0198 6.99997 28C8.26594 28.0012 9.49169 27.6069 10.5118 26.885C10.964 26.5651 10.961 25.921 10.5693 25.5293C10.1781 25.1381 9.54699 25.1518 9.0717 25.4348C8.90786 25.5324 8.73689 25.6184 8.56 25.6919C8.07349 25.8941 7.55182 25.9981 7.02497 25.9981C6.49812 25.9981 5.97645 25.8941 5.48994 25.6919C5.00342 25.4897 4.56164 25.1934 4.18997 24.82Z"
   />
 </svg>
diff --git a/packages/text-editor/src/components/icons/ListBullet.svelte b/packages/text-editor/src/components/icons/ListBullet.svelte
@@ -3,17 +3,21 @@
   const fill: string = 'currentColor'
 </script>
 
-<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<svg class="svg-{size}" {fill} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4 9C5.10457 9 6 8.10457 6 7C6 5.89543 5.10457 5 4 5C2.89543 5 2 5.89543 2 7C2 8.10457 2.89543 9 4 9Z" />
   <path
-    d="M4.5,16.2c-1.5,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8c1.5,0,2.8-1.2,2.8-2.8S6,16.2,4.5,16.2z M4.5,20.2 c-0.7,0-1.2-0.6-1.2-1.2s0.6-1.2,1.2-1.2s1.2,0.6,1.2,1.2S5.2,20.2,4.5,20.2z"
+    d="M9 7C9 6.44772 9.44772 6 10 6H29C29.5523 6 30 6.44772 30 7C30 7.55228 29.5523 8 29 8H10C9.44772 8 9 7.55228 9 7Z"
   />
   <path
-    d="M4.5,2.2C3,2.2,1.8,3.5,1.8,5S3,7.8,4.5,7.8C6,7.8,7.2,6.5,7.2,5C7.2,3.5,6,2.2,4.5,2.2z M4.5,6.2 C3.8,6.2,3.2,5.7,3.2,5s0.6-1.2,1.2-1.2S5.8,4.3,5.8,5S5.2,6.2,4.5,6.2z"
+    d="M9 16C9 15.4477 9.44772 15 10 15H29C29.5523 15 30 15.4477 30 16C30 16.5523 29.5523 17 29 17H10C9.44772 17 9 16.5523 9 16Z"
   />
   <path
-    d="M4.5,9.2C3,9.2,1.8,10.5,1.8,12s1.2,2.8,2.8,2.8c1.5,0,2.8-1.2,2.8-2.8S6,9.2,4.5,9.2z M4.5,13.2 c-0.7,0-1.2-0.6-1.2-1.2s0.6-1.2,1.2-1.2s1.2,0.6,1.2,1.2S5.2,13.2,4.5,13.2z"
+    d="M10 24C9.44772 24 9 24.4477 9 25C9 25.5523 9.44772 26 10 26H29C29.5523 26 30 25.5523 30 25C30 24.4477 29.5523 24 29 24H10Z"
+  />
+  <path
+    d="M6 16C6 17.1046 5.10457 18 4 18C2.89543 18 2 17.1046 2 16C2 14.8954 2.89543 14 4 14C5.10457 14 6 14.8954 6 16Z"
+  />
+  <path
+    d="M4 27C5.10457 27 6 26.1046 6 25C6 23.8954 5.10457 23 4 23C2.89543 23 2 23.8954 2 25C2 26.1046 2.89543 27 4 27Z"
   />
-  <path d="M21.5,11.2h-11c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h11c0.4,0,0.8-0.3,0.8-0.8S21.9,11.2,21.5,11.2z" />
-  <path d="M21.5,18.2h-11c-0.4,0-0.8,0.3-0.8,0.8s0.3,0.8,0.8,0.8h11c0.4,0,0.8-0.3,0.8-0.8S21.9,18.2,21.5,18.2z" />
-  <path d="M10.5,5.8h11c0.4,0,0.8-0.3,0.8-0.8s-0.3-0.8-0.8-0.8h-11c-0.4,0-0.8,0.3-0.8,0.8S10.1,5.8,10.5,5.8z" />
 </svg>