[Rich text editor] Update design (#1332)

* Fix composer height and padding

* Update plus and cancel icons with design system icons

* Update border so that it is always visible

* Update placeholder color

* Update send and tick icons

* Update design of formatting buttons

* Update RTE icons

* Reduce bottom padding

---------

Co-authored-by: ElementBot <[email protected]>

Author: jonnyandrew

changelog.d/1332.feature

@@ -0,0 +1 @@
+[Rich text editor] Update design

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/VectorIcons.kt

@@ -42,4 +42,6 @@ object VectorIcons {
     val Strikethrough = R.drawable.ic_strikethrough
     val Underline = R.drawable.ic_underline
     val ThreadDecoration = R.drawable.ic_thread_decoration
+    val Plus = R.drawable.ic_plus
+    val Cancel = R.drawable.ic_cancel
 }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorAliases.kt

@@ -75,6 +75,16 @@ val SemanticColors.progressIndicatorTrackColor
         Color(0x25F4F7FA)
     }
 
+// This color is not present in Semantic color, so put hard-coded value for now
+val SemanticColors.iconSuccessPrimaryBackground
+    get() = if (isLight) {
+        // We want LightDesignTokens.colorGreen300
+        Color(0xffe3f7ed)
+    } else {
+        // We want DarkDesignTokens.colorGreen300
+        Color(0xff002513)
+    }
+
 // Temporary color, which is not in the token right now
 val SemanticColors.temporaryColorBgSpecial
     get() = if (isLight) Color(0xFFE4E8F0) else Color(0xFF3A4048)
@@ -102,6 +112,7 @@ private fun ContentToPreview() {
             "messageFromOtherBackground" to ElementTheme.colors.messageFromOtherBackground,
             "progressIndicatorTrackColor" to ElementTheme.colors.progressIndicatorTrackColor,
             "temporaryColorBgSpecial" to ElementTheme.colors.temporaryColorBgSpecial,
+            "iconSuccessPrimaryBackground" to ElementTheme.colors.iconSuccessPrimaryBackground,
         )
     )
 }

libraries/designsystem/src/main/res/drawable/ic_bold.xml

@@ -1,9 +1,9 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
   <path
-      android:pathData="M8.8,19C8.25,19 7.779,18.804 7.388,18.413C6.996,18.021 6.8,17.55 6.8,17V7C6.8,6.45 6.996,5.979 7.388,5.588C7.779,5.196 8.25,5 8.8,5H12.325C13.408,5 14.408,5.333 15.325,6C16.242,6.667 16.7,7.592 16.7,8.775C16.7,9.625 16.508,10.279 16.125,10.738C15.742,11.196 15.383,11.525 15.05,11.725C15.467,11.908 15.929,12.25 16.438,12.75C16.946,13.25 17.2,14 17.2,15C17.2,16.483 16.658,17.521 15.575,18.112C14.492,18.704 13.475,19 12.525,19H8.8ZM9.825,16.2H12.425C13.225,16.2 13.712,15.996 13.887,15.587C14.063,15.179 14.15,14.883 14.15,14.7C14.15,14.517 14.063,14.221 13.887,13.813C13.712,13.404 13.2,13.2 12.35,13.2H9.825V16.2ZM9.825,10.5H12.15C12.7,10.5 13.1,10.358 13.35,10.075C13.6,9.792 13.725,9.475 13.725,9.125C13.725,8.725 13.583,8.4 13.3,8.15C13.017,7.9 12.65,7.775 12.2,7.775H9.825V10.5Z"
+      android:pathData="M7.333,15.833C6.875,15.833 6.483,15.67 6.156,15.343C5.83,15.017 5.667,14.624 5.667,14.166V5.833C5.667,5.374 5.83,4.982 6.156,4.656C6.483,4.329 6.875,4.166 7.333,4.166H10.271C11.174,4.166 12.007,4.444 12.771,4.999C13.535,5.555 13.917,6.326 13.917,7.312C13.917,8.02 13.757,8.565 13.438,8.947C13.118,9.329 12.819,9.604 12.542,9.77C12.889,9.923 13.274,10.208 13.698,10.624C14.122,11.041 14.333,11.666 14.333,12.499C14.333,13.736 13.882,14.6 12.979,15.093C12.076,15.586 11.229,15.833 10.438,15.833H7.333ZM8.188,13.499H10.354C11.021,13.499 11.427,13.329 11.573,12.989C11.719,12.649 11.792,12.402 11.792,12.249C11.792,12.097 11.719,11.85 11.573,11.51C11.427,11.17 11,10.999 10.292,10.999H8.188V13.499ZM8.188,8.749H10.125C10.583,8.749 10.917,8.631 11.125,8.395C11.333,8.159 11.438,7.895 11.438,7.604C11.438,7.27 11.319,6.999 11.083,6.791C10.847,6.583 10.542,6.479 10.167,6.479H8.188V8.749Z"
       android:fillColor="#656D77"/>
 </vector>

libraries/designsystem/src/main/res/drawable/ic_bullet_list.xml

@@ -1,9 +1,9 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
   <path
-      android:pathData="M10,19C9.717,19 9.479,18.904 9.288,18.712C9.096,18.521 9,18.283 9,18C9,17.717 9.096,17.479 9.288,17.288C9.479,17.096 9.717,17 10,17H20C20.283,17 20.521,17.096 20.712,17.288C20.904,17.479 21,17.717 21,18C21,18.283 20.904,18.521 20.712,18.712C20.521,18.904 20.283,19 20,19H10ZM10,13C9.717,13 9.479,12.904 9.288,12.712C9.096,12.521 9,12.283 9,12C9,11.717 9.096,11.479 9.288,11.288C9.479,11.096 9.717,11 10,11H20C20.283,11 20.521,11.096 20.712,11.288C20.904,11.479 21,11.717 21,12C21,12.283 20.904,12.521 20.712,12.712C20.521,12.904 20.283,13 20,13H10ZM10,7C9.717,7 9.479,6.904 9.288,6.713C9.096,6.521 9,6.283 9,6C9,5.717 9.096,5.479 9.288,5.287C9.479,5.096 9.717,5 10,5H20C20.283,5 20.521,5.096 20.712,5.287C20.904,5.479 21,5.717 21,6C21,6.283 20.904,6.521 20.712,6.713C20.521,6.904 20.283,7 20,7H10ZM5,20C4.45,20 3.979,19.804 3.588,19.413C3.196,19.021 3,18.55 3,18C3,17.45 3.196,16.979 3.588,16.587C3.979,16.196 4.45,16 5,16C5.55,16 6.021,16.196 6.412,16.587C6.804,16.979 7,17.45 7,18C7,18.55 6.804,19.021 6.412,19.413C6.021,19.804 5.55,20 5,20ZM5,14C4.45,14 3.979,13.804 3.588,13.413C3.196,13.021 3,12.55 3,12C3,11.45 3.196,10.979 3.588,10.587C3.979,10.196 4.45,10 5,10C5.55,10 6.021,10.196 6.412,10.587C6.804,10.979 7,11.45 7,12C7,12.55 6.804,13.021 6.412,13.413C6.021,13.804 5.55,14 5,14ZM5,8C4.45,8 3.979,7.804 3.588,7.412C3.196,7.021 3,6.55 3,6C3,5.45 3.196,4.979 3.588,4.588C3.979,4.196 4.45,4 5,4C5.55,4 6.021,4.196 6.412,4.588C6.804,4.979 7,5.45 7,6C7,6.55 6.804,7.021 6.412,7.412C6.021,7.804 5.55,8 5,8Z"
+      android:pathData="M8.333,15.834C8.097,15.834 7.899,15.754 7.74,15.594C7.58,15.435 7.5,15.237 7.5,15.001C7.5,14.764 7.58,14.567 7.74,14.407C7.899,14.247 8.097,14.167 8.333,14.167H16.667C16.903,14.167 17.101,14.247 17.26,14.407C17.42,14.567 17.5,14.764 17.5,15.001C17.5,15.237 17.42,15.435 17.26,15.594C17.101,15.754 16.903,15.834 16.667,15.834H8.333ZM8.333,10.834C8.097,10.834 7.899,10.754 7.74,10.594C7.58,10.435 7.5,10.237 7.5,10.001C7.5,9.765 7.58,9.567 7.74,9.407C7.899,9.247 8.097,9.167 8.333,9.167H16.667C16.903,9.167 17.101,9.247 17.26,9.407C17.42,9.567 17.5,9.765 17.5,10.001C17.5,10.237 17.42,10.435 17.26,10.594C17.101,10.754 16.903,10.834 16.667,10.834H8.333ZM8.333,5.834C8.097,5.834 7.899,5.754 7.74,5.594C7.58,5.435 7.5,5.237 7.5,5.001C7.5,4.765 7.58,4.567 7.74,4.407C7.899,4.247 8.097,4.167 8.333,4.167H16.667C16.903,4.167 17.101,4.247 17.26,4.407C17.42,4.567 17.5,4.765 17.5,5.001C17.5,5.237 17.42,5.435 17.26,5.594C17.101,5.754 16.903,5.834 16.667,5.834H8.333ZM4.167,16.667C3.708,16.667 3.316,16.504 2.99,16.178C2.663,15.851 2.5,15.459 2.5,15.001C2.5,14.542 2.663,14.15 2.99,13.824C3.316,13.497 3.708,13.334 4.167,13.334C4.625,13.334 5.017,13.497 5.344,13.824C5.67,14.15 5.833,14.542 5.833,15.001C5.833,15.459 5.67,15.851 5.344,16.178C5.017,16.504 4.625,16.667 4.167,16.667ZM4.167,11.667C3.708,11.667 3.316,11.504 2.99,11.178C2.663,10.851 2.5,10.459 2.5,10.001C2.5,9.542 2.663,9.15 2.99,8.824C3.316,8.497 3.708,8.334 4.167,8.334C4.625,8.334 5.017,8.497 5.344,8.824C5.67,9.15 5.833,9.542 5.833,10.001C5.833,10.459 5.67,10.851 5.344,11.178C5.017,11.504 4.625,11.667 4.167,11.667ZM4.167,6.667C3.708,6.667 3.316,6.504 2.99,6.178C2.663,5.851 2.5,5.459 2.5,5.001C2.5,4.542 2.663,4.15 2.99,3.824C3.316,3.497 3.708,3.334 4.167,3.334C4.625,3.334 5.017,3.497 5.344,3.824C5.67,4.15 5.833,4.542 5.833,5.001C5.833,5.459 5.67,5.851 5.344,6.178C5.017,6.504 4.625,6.667 4.167,6.667Z"
       android:fillColor="#656D77"/>
 </vector>

libraries/designsystem/src/main/res/drawable/ic_cancel.xml

@@ -0,0 +1,26 @@
+<!--
+  ~ Copyright (c) 2023 New Vector Ltd
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="30dp"
+    android:height="30dp"
+    android:viewportWidth="30"
+    android:viewportHeight="30">
+  <path
+      android:pathData="M4.393,4.393C-1.464,10.251 -1.464,19.749 4.393,25.607C10.251,31.465 19.749,31.465 25.607,25.607C31.465,19.749 31.465,10.251 25.607,4.393C19.749,-1.464 10.251,-1.464 4.393,4.393ZM11.465,19.95L15,16.414L18.535,19.95C18.736,20.15 18.972,20.25 19.243,20.25C19.514,20.25 19.749,20.15 19.95,19.95C20.15,19.749 20.25,19.514 20.25,19.243C20.25,18.972 20.15,18.736 19.95,18.535L16.414,15L19.95,11.465C20.15,11.264 20.25,11.028 20.25,10.757C20.25,10.486 20.15,10.251 19.95,10.05C19.749,9.85 19.514,9.75 19.243,9.75C18.972,9.75 18.736,9.85 18.535,10.05L15,13.586L11.465,10.05C11.264,9.85 11.028,9.75 10.757,9.75C10.486,9.75 10.251,9.85 10.05,10.05C9.85,10.251 9.75,10.486 9.75,10.757C9.75,11.028 9.85,11.264 10.05,11.465L13.586,15L10.05,18.535C9.85,18.736 9.75,18.972 9.75,19.243C9.75,19.514 9.85,19.749 10.05,19.95C10.251,20.15 10.486,20.25 10.757,20.25C11.028,20.25 11.264,20.15 11.465,19.95Z"
+      android:fillColor="#ffffff"
+      android:fillType="evenOdd"/>
+</vector>

libraries/designsystem/src/main/res/drawable/ic_code_block.xml

@@ -1,9 +1,9 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
   <path
-      android:pathData="M8.825,12L10.3,10.525C10.5,10.325 10.6,10.092 10.6,9.825C10.6,9.558 10.5,9.325 10.3,9.125C10.1,8.925 9.863,8.825 9.587,8.825C9.313,8.825 9.075,8.925 8.875,9.125L6.7,11.3C6.6,11.4 6.529,11.508 6.488,11.625C6.446,11.742 6.425,11.867 6.425,12C6.425,12.133 6.446,12.258 6.488,12.375C6.529,12.492 6.6,12.6 6.7,12.7L8.875,14.875C9.075,15.075 9.313,15.175 9.587,15.175C9.863,15.175 10.1,15.075 10.3,14.875C10.5,14.675 10.6,14.442 10.6,14.175C10.6,13.908 10.5,13.675 10.3,13.475L8.825,12ZM15.175,12L13.7,13.475C13.5,13.675 13.4,13.908 13.4,14.175C13.4,14.442 13.5,14.675 13.7,14.875C13.9,15.075 14.137,15.175 14.413,15.175C14.688,15.175 14.925,15.075 15.125,14.875L17.3,12.7C17.4,12.6 17.471,12.492 17.513,12.375C17.554,12.258 17.575,12.133 17.575,12C17.575,11.867 17.554,11.742 17.513,11.625C17.471,11.508 17.4,11.4 17.3,11.3L15.125,9.125C15.025,9.025 14.913,8.95 14.788,8.9C14.663,8.85 14.538,8.825 14.413,8.825C14.288,8.825 14.163,8.85 14.038,8.9C13.913,8.95 13.8,9.025 13.7,9.125C13.5,9.325 13.4,9.558 13.4,9.825C13.4,10.092 13.5,10.325 13.7,10.525L15.175,12ZM5,21C4.45,21 3.979,20.804 3.588,20.413C3.196,20.021 3,19.55 3,19V5C3,4.45 3.196,3.979 3.588,3.588C3.979,3.196 4.45,3 5,3H19C19.55,3 20.021,3.196 20.413,3.588C20.804,3.979 21,4.45 21,5V19C21,19.55 20.804,20.021 20.413,20.413C20.021,20.804 19.55,21 19,21H5ZM5,19H19V5H5V19Z"
+      android:pathData="M7.354,10L8.583,8.771C8.75,8.604 8.833,8.41 8.833,8.188C8.833,7.965 8.75,7.771 8.583,7.604C8.417,7.438 8.219,7.354 7.99,7.354C7.76,7.354 7.563,7.438 7.396,7.604L5.583,9.417C5.5,9.5 5.441,9.59 5.406,9.688C5.372,9.785 5.354,9.889 5.354,10C5.354,10.111 5.372,10.215 5.406,10.313C5.441,10.41 5.5,10.5 5.583,10.583L7.396,12.396C7.563,12.563 7.76,12.646 7.99,12.646C8.219,12.646 8.417,12.563 8.583,12.396C8.75,12.229 8.833,12.035 8.833,11.813C8.833,11.59 8.75,11.396 8.583,11.229L7.354,10ZM12.646,10L11.417,11.229C11.25,11.396 11.167,11.59 11.167,11.813C11.167,12.035 11.25,12.229 11.417,12.396C11.583,12.563 11.781,12.646 12.01,12.646C12.24,12.646 12.438,12.563 12.604,12.396L14.417,10.583C14.5,10.5 14.559,10.41 14.594,10.313C14.628,10.215 14.646,10.111 14.646,10C14.646,9.889 14.628,9.785 14.594,9.688C14.559,9.59 14.5,9.5 14.417,9.417L12.604,7.604C12.521,7.521 12.427,7.458 12.323,7.417C12.219,7.375 12.115,7.354 12.01,7.354C11.906,7.354 11.802,7.375 11.698,7.417C11.594,7.458 11.5,7.521 11.417,7.604C11.25,7.771 11.167,7.965 11.167,8.188C11.167,8.41 11.25,8.604 11.417,8.771L12.646,10ZM4.167,17.5C3.708,17.5 3.316,17.337 2.99,17.01C2.663,16.684 2.5,16.292 2.5,15.833V4.167C2.5,3.708 2.663,3.316 2.99,2.99C3.316,2.663 3.708,2.5 4.167,2.5H15.833C16.292,2.5 16.684,2.663 17.01,2.99C17.337,3.316 17.5,3.708 17.5,4.167V15.833C17.5,16.292 17.337,16.684 17.01,17.01C16.684,17.337 16.292,17.5 15.833,17.5H4.167ZM4.167,15.833H15.833V4.167H4.167V15.833Z"
       android:fillColor="#656D77"/>
 </vector>

libraries/designsystem/src/main/res/drawable/ic_indent_decrease.xml

@@ -1,9 +1,9 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
   <path
-      android:pathData="M4,21C3.717,21 3.479,20.904 3.287,20.712C3.096,20.521 3,20.283 3,20C3,19.717 3.096,19.479 3.287,19.288C3.479,19.096 3.717,19 4,19H20C20.283,19 20.521,19.096 20.712,19.288C20.904,19.479 21,19.717 21,20C21,20.283 20.904,20.521 20.712,20.712C20.521,20.904 20.283,21 20,21H4ZM12,17C11.717,17 11.479,16.904 11.288,16.712C11.096,16.521 11,16.283 11,16C11,15.717 11.096,15.479 11.288,15.288C11.479,15.096 11.717,15 12,15H20C20.283,15 20.521,15.096 20.712,15.288C20.904,15.479 21,15.717 21,16C21,16.283 20.904,16.521 20.712,16.712C20.521,16.904 20.283,17 20,17H12ZM12,13C11.717,13 11.479,12.904 11.288,12.712C11.096,12.521 11,12.283 11,12C11,11.717 11.096,11.479 11.288,11.288C11.479,11.096 11.717,11 12,11H20C20.283,11 20.521,11.096 20.712,11.288C20.904,11.479 21,11.717 21,12C21,12.283 20.904,12.521 20.712,12.712C20.521,12.904 20.283,13 20,13H12ZM12,9C11.717,9 11.479,8.904 11.288,8.712C11.096,8.521 11,8.283 11,8C11,7.717 11.096,7.479 11.288,7.287C11.479,7.096 11.717,7 12,7H20C20.283,7 20.521,7.096 20.712,7.287C20.904,7.479 21,7.717 21,8C21,8.283 20.904,8.521 20.712,8.712C20.521,8.904 20.283,9 20,9H12ZM4,5C3.717,5 3.479,4.904 3.287,4.713C3.096,4.521 3,4.283 3,4C3,3.717 3.096,3.479 3.287,3.287C3.479,3.096 3.717,3 4,3H20C20.283,3 20.521,3.096 20.712,3.287C20.904,3.479 21,3.717 21,4C21,4.283 20.904,4.521 20.712,4.713C20.521,4.904 20.283,5 20,5H4ZM6.15,15.15L3.35,12.35C3.25,12.25 3.2,12.133 3.2,12C3.2,11.867 3.25,11.75 3.35,11.65L6.15,8.85C6.317,8.683 6.5,8.642 6.7,8.725C6.9,8.808 7,8.967 7,9.2V14.8C7,15.033 6.9,15.192 6.7,15.275C6.5,15.358 6.317,15.317 6.15,15.15Z"
+      android:pathData="M3.333,17.5C3.097,17.5 2.899,17.42 2.74,17.26C2.58,17.101 2.5,16.903 2.5,16.667C2.5,16.431 2.58,16.233 2.74,16.073C2.899,15.913 3.097,15.833 3.333,15.833H16.667C16.903,15.833 17.101,15.913 17.26,16.073C17.42,16.233 17.5,16.431 17.5,16.667C17.5,16.903 17.42,17.101 17.26,17.26C17.101,17.42 16.903,17.5 16.667,17.5H3.333ZM10,14.167C9.764,14.167 9.566,14.087 9.406,13.927C9.247,13.767 9.167,13.569 9.167,13.333C9.167,13.097 9.247,12.899 9.406,12.74C9.566,12.58 9.764,12.5 10,12.5H16.667C16.903,12.5 17.101,12.58 17.26,12.74C17.42,12.899 17.5,13.097 17.5,13.333C17.5,13.569 17.42,13.767 17.26,13.927C17.101,14.087 16.903,14.167 16.667,14.167H10ZM10,10.833C9.764,10.833 9.566,10.753 9.406,10.594C9.247,10.434 9.167,10.236 9.167,10C9.167,9.764 9.247,9.566 9.406,9.406C9.566,9.247 9.764,9.167 10,9.167H16.667C16.903,9.167 17.101,9.247 17.26,9.406C17.42,9.566 17.5,9.764 17.5,10C17.5,10.236 17.42,10.434 17.26,10.594C17.101,10.753 16.903,10.833 16.667,10.833H10ZM10,7.5C9.764,7.5 9.566,7.42 9.406,7.26C9.247,7.101 9.167,6.903 9.167,6.667C9.167,6.431 9.247,6.233 9.406,6.073C9.566,5.913 9.764,5.833 10,5.833H16.667C16.903,5.833 17.101,5.913 17.26,6.073C17.42,6.233 17.5,6.431 17.5,6.667C17.5,6.903 17.42,7.101 17.26,7.26C17.101,7.42 16.903,7.5 16.667,7.5H10ZM3.333,4.167C3.097,4.167 2.899,4.087 2.74,3.927C2.58,3.767 2.5,3.569 2.5,3.333C2.5,3.097 2.58,2.899 2.74,2.74C2.899,2.58 3.097,2.5 3.333,2.5H16.667C16.903,2.5 17.101,2.58 17.26,2.74C17.42,2.899 17.5,3.097 17.5,3.333C17.5,3.569 17.42,3.767 17.26,3.927C17.101,4.087 16.903,4.167 16.667,4.167H3.333ZM5.125,12.625L2.792,10.292C2.708,10.208 2.667,10.111 2.667,10C2.667,9.889 2.708,9.792 2.792,9.708L5.125,7.375C5.264,7.236 5.417,7.201 5.583,7.271C5.75,7.34 5.833,7.472 5.833,7.667V12.333C5.833,12.528 5.75,12.66 5.583,12.729C5.417,12.799 5.264,12.764 5.125,12.625Z"
       android:fillColor="#656D77"/>
 </vector>

libraries/designsystem/src/main/res/drawable/ic_indent_increase.xml

@@ -1,9 +1,9 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
   <path
-      android:pathData="M4,21C3.717,21 3.479,20.904 3.287,20.712C3.096,20.521 3,20.283 3,20C3,19.717 3.096,19.479 3.287,19.288C3.479,19.096 3.717,19 4,19H20C20.283,19 20.521,19.096 20.712,19.288C20.904,19.479 21,19.717 21,20C21,20.283 20.904,20.521 20.712,20.712C20.521,20.904 20.283,21 20,21H4ZM12,17C11.717,17 11.479,16.904 11.288,16.712C11.096,16.521 11,16.283 11,16C11,15.717 11.096,15.479 11.288,15.288C11.479,15.096 11.717,15 12,15H20C20.283,15 20.521,15.096 20.712,15.288C20.904,15.479 21,15.717 21,16C21,16.283 20.904,16.521 20.712,16.712C20.521,16.904 20.283,17 20,17H12ZM12,13C11.717,13 11.479,12.904 11.288,12.712C11.096,12.521 11,12.283 11,12C11,11.717 11.096,11.479 11.288,11.288C11.479,11.096 11.717,11 12,11H20C20.283,11 20.521,11.096 20.712,11.288C20.904,11.479 21,11.717 21,12C21,12.283 20.904,12.521 20.712,12.712C20.521,12.904 20.283,13 20,13H12ZM12,9C11.717,9 11.479,8.904 11.288,8.712C11.096,8.521 11,8.283 11,8C11,7.717 11.096,7.479 11.288,7.287C11.479,7.096 11.717,7 12,7H20C20.283,7 20.521,7.096 20.712,7.287C20.904,7.479 21,7.717 21,8C21,8.283 20.904,8.521 20.712,8.712C20.521,8.904 20.283,9 20,9H12ZM4,5C3.717,5 3.479,4.904 3.287,4.713C3.096,4.521 3,4.283 3,4C3,3.717 3.096,3.479 3.287,3.287C3.479,3.096 3.717,3 4,3H20C20.283,3 20.521,3.096 20.712,3.287C20.904,3.479 21,3.717 21,4C21,4.283 20.904,4.521 20.712,4.713C20.521,4.904 20.283,5 20,5H4ZM3.85,15.15C3.683,15.317 3.5,15.358 3.3,15.275C3.1,15.192 3,15.033 3,14.8V9.2C3,8.967 3.1,8.808 3.3,8.725C3.5,8.642 3.683,8.683 3.85,8.85L6.65,11.65C6.75,11.75 6.8,11.867 6.8,12C6.8,12.133 6.75,12.25 6.65,12.35L3.85,15.15Z"
+      android:pathData="M3.333,17.5C3.097,17.5 2.899,17.42 2.74,17.26C2.58,17.101 2.5,16.903 2.5,16.667C2.5,16.431 2.58,16.233 2.74,16.073C2.899,15.913 3.097,15.833 3.333,15.833H16.667C16.903,15.833 17.101,15.913 17.26,16.073C17.42,16.233 17.5,16.431 17.5,16.667C17.5,16.903 17.42,17.101 17.26,17.26C17.101,17.42 16.903,17.5 16.667,17.5H3.333ZM10,14.167C9.764,14.167 9.566,14.087 9.406,13.927C9.247,13.767 9.167,13.569 9.167,13.333C9.167,13.097 9.247,12.899 9.406,12.74C9.566,12.58 9.764,12.5 10,12.5H16.667C16.903,12.5 17.101,12.58 17.26,12.74C17.42,12.899 17.5,13.097 17.5,13.333C17.5,13.569 17.42,13.767 17.26,13.927C17.101,14.087 16.903,14.167 16.667,14.167H10ZM10,10.833C9.764,10.833 9.566,10.753 9.406,10.594C9.247,10.434 9.167,10.236 9.167,10C9.167,9.764 9.247,9.566 9.406,9.406C9.566,9.247 9.764,9.167 10,9.167H16.667C16.903,9.167 17.101,9.247 17.26,9.406C17.42,9.566 17.5,9.764 17.5,10C17.5,10.236 17.42,10.434 17.26,10.594C17.101,10.753 16.903,10.833 16.667,10.833H10ZM10,7.5C9.764,7.5 9.566,7.42 9.406,7.26C9.247,7.101 9.167,6.903 9.167,6.667C9.167,6.431 9.247,6.233 9.406,6.073C9.566,5.913 9.764,5.833 10,5.833H16.667C16.903,5.833 17.101,5.913 17.26,6.073C17.42,6.233 17.5,6.431 17.5,6.667C17.5,6.903 17.42,7.101 17.26,7.26C17.101,7.42 16.903,7.5 16.667,7.5H10ZM3.333,4.167C3.097,4.167 2.899,4.087 2.74,3.927C2.58,3.767 2.5,3.569 2.5,3.333C2.5,3.097 2.58,2.899 2.74,2.74C2.899,2.58 3.097,2.5 3.333,2.5H16.667C16.903,2.5 17.101,2.58 17.26,2.74C17.42,2.899 17.5,3.097 17.5,3.333C17.5,3.569 17.42,3.767 17.26,3.927C17.101,4.087 16.903,4.167 16.667,4.167H3.333ZM3.208,12.625C3.069,12.764 2.917,12.799 2.75,12.729C2.583,12.66 2.5,12.528 2.5,12.333V7.667C2.5,7.472 2.583,7.34 2.75,7.271C2.917,7.201 3.069,7.236 3.208,7.375L5.542,9.708C5.625,9.792 5.667,9.889 5.667,10C5.667,10.111 5.625,10.208 5.542,10.292L3.208,12.625Z"
       android:fillColor="#656D77"/>
 </vector>