Merge branch 'develop' of https://github.com/matrix-org/matrix-react-sdk into joriks/font-scaling-slider

res/css/_components.scss

@@ -41,6 +41,7 @@
 @import "./views/auth/_CountryDropdown.scss";
 @import "./views/auth/_InteractiveAuthEntryComponents.scss";
 @import "./views/auth/_LanguageSelector.scss";
+@import "./views/auth/_PassphraseField.scss";
 @import "./views/auth/_ServerConfig.scss";
 @import "./views/auth/_ServerTypeSelector.scss";
 @import "./views/auth/_Welcome.scss";
@@ -108,6 +109,7 @@
 @import "./views/elements/_ManageIntegsButton.scss";
 @import "./views/elements/_PowerSelector.scss";
 @import "./views/elements/_ProgressBar.scss";
+@import "./views/elements/_QRCode.scss";
 @import "./views/elements/_ReplyThread.scss";
 @import "./views/elements/_ResizeHandle.scss";
 @import "./views/elements/_RichText.scss";
@@ -141,6 +143,7 @@
 @import "./views/messages/_ReactionsRow.scss";
 @import "./views/messages/_ReactionsRowButton.scss";
 @import "./views/messages/_ReactionsRowButtonTooltip.scss";
+@import "./views/messages/_RedactedBody.scss";
 @import "./views/messages/_RoomAvatarEvent.scss";
 @import "./views/messages/_SenderProfile.scss";
 @import "./views/messages/_TextualEvent.scss";
@@ -160,6 +163,8 @@
 @import "./views/rooms/_EditMessageComposer.scss";
 @import "./views/rooms/_EntityTile.scss";
 @import "./views/rooms/_EventTile.scss";
+@import "./views/rooms/_GroupLayout.scss";
+@import "./views/rooms/_IRCLayout.scss";
 @import "./views/rooms/_InviteOnlyIcon.scss";
 @import "./views/rooms/_JumpToBottomButton.scss";
 @import "./views/rooms/_LinkPreviewWidget.scss";

res/css/views/auth/_AuthBody.scss

@@ -146,27 +146,3 @@ limitations under the License.
 .mx_AuthBody_spinner {
     margin: 1em 0;
 }
-
-.mx_AuthBody_passwordScore {
-    width: 100%;
-    appearance: none;
-    height: 4px;
-    border: 0;
-    border-radius: 2px;
-    position: absolute;
-    top: -12px;
-
-    &::-moz-progress-bar {
-        border-radius: 2px;
-        background-color: $accent-color;
-    }
-
-    &::-webkit-progress-bar,
-    &::-webkit-progress-value {
-        border-radius: 2px;
-    }
-
-    &::-webkit-progress-value {
-        background-color: $accent-color;
-    }
-}

res/css/views/auth/_PassphraseField.scss

@@ -0,0 +1,55 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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.
+*/
+
+$PassphraseStrengthHigh: $accent-color;
+$PassphraseStrengthMedium: $username-variant5-color;
+$PassphraseStrengthLow: $notice-primary-color;
+
+@define-mixin ProgressBarColour $colour {
+    color: $colour;
+    &::-moz-progress-bar {
+        background-color: $colour;
+    }
+    &::-webkit-progress-value {
+        background-color: $colour;
+    }
+}
+
+progress.mx_PassphraseField_progress {
+    appearance: none;
+    width: 100%;
+    border: 0;
+    height: 4px;
+    position: absolute;
+    top: -12px;
+
+    border-radius: 2px;
+    &::-moz-progress-bar {
+        border-radius: 2px;
+    }
+    &::-webkit-progress-bar,
+    &::-webkit-progress-value {
+        border-radius: 2px;
+    }
+
+    @mixin ProgressBarColour $PassphraseStrengthLow;
+    &[value="2"], &[value="3"] {
+        @mixin ProgressBarColour $PassphraseStrengthMedium;
+    }
+    &[value="4"] {
+        @mixin ProgressBarColour $PassphraseStrengthHigh;
+    }
+}

res/css/views/dialogs/_ShareDialog.scss

@@ -64,9 +64,6 @@ limitations under the License.
 
 .mx_ShareDialog_qrcode_container {
     float: left;
-    background-color: #ffffff;
-    padding: 5px; // makes qr code more readable in dark theme
-    border-radius: 5px;
     height: 256px;
     width: 256px;
     margin-right: 64px;

res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss

@@ -35,17 +35,6 @@ limitations under the License.
     align-items: flex-start;
 }
 
-.mx_CreateKeyBackupDialog_passPhraseHelp {
-    flex: 1;
-    height: 85px;
-    margin-left: 20px;
-    font-size: 80%;
-}
-
-.mx_CreateKeyBackupDialog_passPhraseHelp progress {
-    width: 100%;
-}
-
 .mx_CreateKeyBackupDialog_passPhraseInput {
     flex: none;
     width: 250px;

res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss

@@ -68,17 +68,6 @@ limitations under the License.
     margin-top: 0px;
 }
 
-.mx_CreateSecretStorageDialog_passPhraseHelp {
-    flex: 1;
-    height: 64px;
-    margin-left: 20px;
-    font-size: 80%;
-}
-
-.mx_CreateSecretStorageDialog_passPhraseHelp progress {
-    width: 100%;
-}
-
 .mx_CreateSecretStorageDialog_passPhraseMatch {
     width: 200px;
     margin-left: 20px;

res/css/views/elements/_Dropdown.scss

@@ -77,12 +77,18 @@ limitations under the License.
     white-space: nowrap;
 }
 
-.mx_Dropdown_option img {
+.mx_Dropdown_option img,
+.mx_Dropdown_option .mx_Dropdown_option_emoji {
     margin: 5px;
     width: 16px;
     vertical-align: middle;
 }
 
+.mx_Dropdown_option_emoji {
+    font-size: $font-16px;
+    line-height: $font-16px;
+}
+
 input.mx_Dropdown_option,
 input.mx_Dropdown_option:focus {
     font-weight: normal;

res/css/views/elements/_ImageView.scss

@@ -37,7 +37,7 @@ limitations under the License.
     order: 2;
     /* min-width hack needed for FF */
     min-width: 0px;
-    max-height: 90%;
+    height: 90%;
     flex: 15 15 0;
     display: flex;
     align-items: center;

res/css/views/elements/_QRCode.scss

@@ -0,0 +1,21 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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.
+*/
+
+.mx_QRCode {
+    img {
+        border-radius: 8px;
+    }
+}

res/css/views/messages/_RedactedBody.scss

@@ -0,0 +1,36 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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.
+*/
+
+.mx_RedactedBody {
+    white-space: pre-wrap;
+    color: $muted-fg-color;
+    vertical-align: middle;
+
+    padding-left: 20px;
+    position: relative;
+
+    &::before {
+        height: 14px;
+        width: 14px;
+        background-color: $muted-fg-color;
+        mask-image: url('$(res)/img/feather-customised/trash.custom.svg');
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+        content: '';
+        position: absolute;
+        top: 2px;
+        left: 0;
+    }
+}

res/css/views/rooms/_AppsDrawer.scss

@@ -96,6 +96,10 @@ $AppsDrawerBodyHeight: 273px;
     height: $AppsDrawerBodyHeight;
 }
 
+.mx_AppTile_persistedWrapper > div {
+    height: 100%;
+}
+
 .mx_AppTile_mini .mx_AppTile_persistedWrapper {
     height: 114px;
 }

res/css/views/rooms/_EventTile.scss

@@ -37,7 +37,6 @@ limitations under the License.
 }
 
 .mx_EventTile_avatar {
-    position: absolute;
     top: 14px;
     left: 8px;
     cursor: pointer;
@@ -68,11 +67,9 @@ limitations under the License.
     display: inline-block; /* anti-zalgo, with overflow hidden */
     overflow: hidden;
     cursor: pointer;
-    padding-left: 65px; /* left gutter */
     padding-bottom: 0px;
     padding-top: 0px;
     margin: 0px;
-    line-height: $font-17px;
     /* the next three lines, along with overflow hidden, truncate long display names */
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -101,12 +98,9 @@ limitations under the License.
 
 .mx_EventTile .mx_MessageTimestamp {
     display: block;
-    visibility: hidden;
     white-space: nowrap;
     left: 0px;
-    width: 46px; /* 8 + 30 (avatar) + 8 */
     text-align: center;
-    position: absolute;
     user-select: none;
 }
 
@@ -117,10 +111,7 @@ limitations under the License.
 .mx_EventTile_line, .mx_EventTile_reply {
     position: relative;
     padding-left: 65px; /* left gutter */
-    padding-top: 3px;
-    padding-bottom: 3px;
     border-radius: 4px;
-    line-height: $font-22px;
 }
 
 .mx_RoomView_timeline_rr_enabled,
@@ -151,10 +142,6 @@ limitations under the License.
     margin-right: 10px;
 }
 
-.mx_EventTile_info .mx_EventTile_line {
-    padding-left: 83px;
-}
-
 /* HACK to override line-height which is already marked important elsewhere */
 .mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
     font-size: 48px !important;
@@ -244,34 +231,6 @@ limitations under the License.
     color: $event-notsent-color;
 }
 
-.mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody,
-.mx_EventTile_redacted .mx_EventTile_reply .mx_UnknownBody {
-    --lozenge-color: $event-redacted-fg-color;
-    --lozenge-border-color: $event-redacted-border-color;
-    display: block;
-    height: 22px;
-    width: 250px;
-    border-radius: 11px;
-    background:
-        repeating-linear-gradient(
-            -45deg,
-            var(--lozenge-color),
-            var(--lozenge-color) 3px,
-            transparent 3px,
-            transparent 6px
-        );
-    box-shadow: 0px 0px 3px var(--lozenge-border-color) inset;
-}
-
-.mx_EventTile_sending.mx_EventTile_redacted .mx_UnknownBody {
-    opacity: 0.4;
-}
-
-div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
-    --lozenge-color: $event-notsent-color;
-    --lozenge-border-color: $event-notsent-color;
-}
-
 .mx_EventTile_contextual {
     opacity: 0.4;
 }
@@ -588,84 +547,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 
 /* end of overrides */
 
-.mx_MatrixChat_useCompactLayout {
-    .mx_EventTile {
-        padding-top: 4px;
-    }
-
-    .mx_EventTile.mx_EventTile_info {
-        // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
-        padding-top: 0px;
-        font-size: $font-13px;
-        .mx_EventTile_line, .mx_EventTile_reply {
-            line-height: $font-20px;
-        }
-        .mx_EventTile_avatar {
-            top: 4px;
-        }
-    }
-
-    .mx_EventTile .mx_SenderProfile {
-        font-size: $font-13px;
-    }
-
-    .mx_EventTile.mx_EventTile_emote {
-        // add a bit more space for emotes so that avatars don't collide
-        padding-top: 8px;
-        .mx_EventTile_avatar {
-            top: 2px;
-        }
-        .mx_EventTile_line, .mx_EventTile_reply {
-            padding-top: 0px;
-            padding-bottom: 1px;
-        }
-    }
-
-    .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
-        padding-top: 0;
-        .mx_EventTile_line, .mx_EventTile_reply {
-            padding-top: 0px;
-            padding-bottom: 0px;
-        }
-    }
-
-    .mx_EventTile_line, .mx_EventTile_reply {
-        padding-top: 0px;
-        padding-bottom: 0px;
-    }
-
-    .mx_EventTile_avatar {
-        top: 2px;
-    }
-
-    .mx_EventTile_e2eIcon {
-        top: 3px;
-    }
-
-    .mx_EventTile_readAvatars {
-        top: 27px;
-    }
-
-    .mx_EventTile_continuation .mx_EventTile_readAvatars,
-    .mx_EventTile_emote .mx_EventTile_readAvatars {
-        top: 5px;
-    }
-
-    .mx_EventTile_info .mx_EventTile_readAvatars {
-        top: 4px;
-    }
-
-    .mx_RoomView_MessageList h2 {
-        margin-top: 6px;
-    }
-
-    .mx_EventTile_content .markdown-body {
-        p, ul, ol, dl, blockquote, pre, table {
-            margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
-        }
-    }
-}
-
 .mx_EventTile_tileError {
     color: red;
     text-align: center;

res/css/views/rooms/_GroupLayout.scss

@@ -0,0 +1,132 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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.
+*/
+
+$left-gutter: 65px;
+
+.mx_GroupLayout {
+
+    .mx_EventTile {
+        > .mx_SenderProfile {
+            line-height: $font-17px;
+            padding-left: $left-gutter;
+        }
+
+        > .mx_EventTile_line {
+            padding-left: $left-gutter;
+        }
+
+        > .mx_EventTile_avatar {
+            position: absolute;
+        }
+
+        .mx_MessageTimestamp {
+            visibility: hidden;
+            position: absolute;
+            width: 46px; /* 8 + 30 (avatar) + 8 */
+        }
+
+        .mx_EventTile_line, .mx_EventTile_reply {
+            padding-top: 3px;
+            padding-bottom: 3px;
+            line-height: $font-22px;
+        }
+    }
+
+    .mx_EventTile_info .mx_EventTile_line {
+        padding-left: calc($left-gutter + 18px);
+    }
+}
+
+/* Compact layout overrides */
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_EventTile {
+        padding-top: 4px;
+    }
+
+    .mx_EventTile.mx_EventTile_info {
+        // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
+        padding-top: 0px;
+        font-size: $font-13px;
+        .mx_EventTile_line, .mx_EventTile_reply {
+            line-height: $font-20px;
+        }
+        .mx_EventTile_avatar {
+            top: 4px;
+        }
+    }
+
+    .mx_EventTile .mx_SenderProfile {
+        font-size: $font-13px;
+    }
+
+    .mx_EventTile.mx_EventTile_emote {
+        // add a bit more space for emotes so that avatars don't collide
+        padding-top: 8px;
+        .mx_EventTile_avatar {
+            top: 2px;
+        }
+        .mx_EventTile_line, .mx_EventTile_reply {
+            padding-top: 0px;
+            padding-bottom: 1px;
+        }
+    }
+
+    .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
+        padding-top: 0;
+        .mx_EventTile_line, .mx_EventTile_reply {
+            padding-top: 0px;
+            padding-bottom: 0px;
+        }
+    }
+
+    .mx_EventTile_line, .mx_EventTile_reply {
+        padding-top: 0px;
+        padding-bottom: 0px;
+    }
+
+    .mx_EventTile_avatar {
+        top: 2px;
+    }
+
+    .mx_EventTile_e2eIcon {
+        top: 3px;
+    }
+
+    .mx_EventTile_readAvatars {
+        top: 27px;
+    }
+
+    .mx_EventTile_continuation .mx_EventTile_readAvatars,
+    .mx_EventTile_emote .mx_EventTile_readAvatars {
+        top: 5px;
+    }
+
+    .mx_EventTile_info .mx_EventTile_readAvatars {
+        top: 4px;
+    }
+
+    .mx_RoomView_MessageList h2 {
+        margin-top: 6px;
+    }
+
+    .mx_EventTile_content .markdown-body {
+        p, ul, ol, dl, blockquote, pre, table {
+            margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
+        }
+    }
+}

res/css/views/rooms/_IRCLayout.scss

@@ -0,0 +1,214 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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.
+*/
+
+$icon-width: 14px;
+$timestamp-width: 45px;
+$right-padding: 5px;
+$irc-line-height: $font-18px;
+
+.mx_IRCLayout {
+    --name-width: 70px;
+
+    line-height: $irc-line-height !important;
+
+    .mx_EventTile {
+
+        // timestamps are links which shouldn't be underlined
+        > a {
+            text-decoration: none;
+        }
+
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        padding-top: 0;
+
+        > * {
+            margin-right: $right-padding;
+        }
+
+        > .mx_EventTile_msgOption {
+            order: 4;
+            flex-shrink: 0;
+        }
+
+        > .mx_SenderProfile {
+            order: 2;
+            flex-shrink: 0;
+            width: var(--name-width);
+            text-overflow: ellipsis;
+            text-align: right;
+            display: flex;
+            align-items: center;
+            overflow: visible;
+            justify-content: flex-end;
+        }
+
+        .mx_EventTile_line, .mx_EventTile_reply {
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            order: 3;
+            flex-grow: 1;
+        }
+
+        > .mx_EventTile_avatar {
+            order: 1;
+            position: relative;
+            top: 0;
+            left: 0;
+            flex-shrink: 0;
+            height: $irc-line-height;
+            display: flex;
+            align-items: center;
+
+            // Need to use important to override the js provided height and width values.
+            > .mx_BaseAvatar, .mx_BaseAvatar > * {
+                height: $font-14px !important;
+                width: $font-14px !important;
+                font-size: $font-10px !important;
+                line-height: $font-15px !important;
+            }
+        }
+
+        .mx_MessageTimestamp {
+            font-size: $font-10px;
+            width: $timestamp-width;
+            text-align: right;
+        }
+
+        .mx_EventTile_e2eIcon {
+            position: relative;
+            right: unset;
+            left: unset;
+            top: -2px;
+            padding: 0;
+        }
+
+        .mx_EventTile_line {
+            .mx_EventTile_e2eIcon,
+            .mx_TextualEvent,
+            .mx_MTextBody,
+            .mx_ReplyThread_wrapper_empty {
+                display: inline-block;
+            }
+        }
+
+        .mx_EvenTile_line .mx_MessageActionBar,
+        .mx_EvenTile_line .mx_ReplyThread_wrapper {
+            display: block;
+        }
+
+        .mx_EventTile_reply {
+            order: 3;
+        }
+
+        .mx_EditMessageComposer_buttons {
+            position: relative;
+        }
+    }
+
+    .mx_EventTile_emote {
+        > .mx_EventTile_avatar {
+            margin-left: calc(var(--name-width) + $icon-width + $right-padding);
+        }
+    }
+
+    blockquote {
+        margin: 0;
+    }
+
+    .mx_EventListSummary {
+        > .mx_EventTile_line {
+            padding-left: calc(var(--name-width) + $icon-width + $timestamp-width + 3 * $right-padding); // 15 px of padding
+        }
+
+        .mx_EventListSummary_avatars {
+            padding: 0;
+            margin: 0 9px 0 0;
+        }
+    }
+
+    .mx_EventTile.mx_EventTile_info {
+        .mx_EventTile_avatar {
+            left: calc(var(--name-width) + 10px + $icon-width);
+            top: 0;
+        }
+
+        .mx_EventTile_line {
+            left: calc(var(--name-width) + 10px + $icon-width);
+        }
+
+        .mx_TextualEvent {
+            line-height: $irc-line-height;
+        }
+    }
+
+    // Suppress highlight thing from the normal Layout.
+    .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
+    .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
+    .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
+        padding-left: 0;
+        border-left: 0;
+    }
+
+    .mx_SenderProfile_hover {
+        background-color: $primary-bg-color;
+        overflow: hidden;
+
+        > span {
+            display: flex;
+
+            > .mx_SenderProfile_name {
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+
+    .mx_SenderProfile:hover {
+        justify-content: flex-start;
+    }
+
+    .mx_SenderProfile_hover:hover {
+        overflow: visible;
+        width: max(auto, 100%);
+        z-index: 10;
+    }
+
+    .mx_ReplyThread {
+        margin: 0;
+        .mx_SenderProfile {
+            width: unset;
+            max-width: var(--name-width);
+        }
+    }
+
+    .mx_ProfileResizer {
+        position: absolute;
+        height: 100%;
+        width: 15px;
+        left: calc(80px + var(--name-width));
+        cursor: col-resize;
+        z-index: 100;
+    }
+
+    // Need to use important to override the js provided height and width values.
+    .mx_Flair > img {
+        height: $font-14px !important;
+        width: $font-14px !important;
+    }
+}

res/img/feather-customised/trash.custom.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.25 5.5H5.16667H21.75" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.5 5.5L15 1H9L7.5 5.5" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.25 9.25V20.75C5.25 21.8546 6.14543 22.75 7.25 22.75H16.75C17.8546 22.75 18.75 21.8546 18.75 20.75V9.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.75 9.25V18.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.25 9.25V18.25" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>