Initial Countly work

res/css/_components.scss

@@ -9,6 +9,7 @@
 @import "./structures/_CustomRoomTagPanel.scss";
 @import "./structures/_FilePanel.scss";
 @import "./structures/_GenericErrorPage.scss";
+@import "./structures/_GroupFilterPanel.scss";
 @import "./structures/_GroupView.scss";
 @import "./structures/_HeaderButtons.scss";
 @import "./structures/_HomePage.scss";
@@ -27,7 +28,6 @@
 @import "./structures/_ScrollPanel.scss";
 @import "./structures/_SearchBox.scss";
 @import "./structures/_TabbedView.scss";
-@import "./structures/_GroupFilterPanel.scss";
 @import "./structures/_ToastContainer.scss";
 @import "./structures/_UploadBar.scss";
 @import "./structures/_UserMenu.scss";
@@ -70,6 +70,7 @@
 @import "./views/dialogs/_DeactivateAccountDialog.scss";
 @import "./views/dialogs/_DevtoolsDialog.scss";
 @import "./views/dialogs/_EditCommunityPrototypeDialog.scss";
+@import "./views/dialogs/_FeedbackDialog.scss";
 @import "./views/dialogs/_GroupAddressPicker.scss";
 @import "./views/dialogs/_IncomingSasDialog.scss";
 @import "./views/dialogs/_InviteDialog.scss";

res/css/views/dialogs/_FeedbackDialog.scss

@@ -0,0 +1,121 @@
+/*
+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_FeedbackDialog {
+    hr {
+        margin: 24px 0;
+        border-color: $input-border-color;
+    }
+
+    .mx_Dialog_content {
+        margin-bottom: 24px;
+
+        > h2 {
+            margin-bottom: 32px;
+        }
+    }
+
+    .mx_FeedbackDialog_section {
+        position: relative;
+        padding-left: 52px;
+
+        > p {
+            color: $tertiary-fg-color;
+        }
+
+        .mx_AccessibleButton_kind_link {
+            padding: 0;
+            font-size: inherit;
+        }
+
+        a, .mx_AccessibleButton_kind_link {
+            color: $accent-color;
+            text-decoration: underline;
+        }
+
+        &::before, &::after {
+            content: "";
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            left: 0;
+            top: 0;
+        }
+
+        &::before {
+            background-color: $icon-button-color;
+            border-radius: 20px;
+        }
+
+        &::after {
+            background: $avatar-initial-color; // TODO
+            mask-position: center;
+            mask-size: 24px;
+            mask-repeat: no-repeat;
+        }
+    }
+
+    .mx_FeedbackDialog_reportBug {
+        &::after {
+            mask-image: url('$(res)/img/feather-customised/bug.svg');
+        }
+    }
+
+    .mx_FeedbackDialog_rateApp {
+        .mx_RadioButton {
+            display: inline-flex;
+            font-size: 20px;
+            transition: font-size 1s, border .5s;
+            border-radius: 50%;
+            border: 2px solid transparent;
+            margin-top: 12px;
+            margin-bottom: 24px;
+            vertical-align: top;
+            cursor: pointer;
+
+            input[type="radio"] + div {
+                display: none;
+            }
+
+            .mx_RadioButton_content {
+                background: $icon-button-color;
+                width: 40px;
+                height: 40px;
+                text-align: center;
+                line-height: 40px;
+                border-radius: 20px;
+                margin: 5px;
+            }
+
+            .mx_RadioButton_spacer {
+                display: none;
+            }
+
+            & + .mx_RadioButton {
+                margin-left: 16px;
+            }
+        }
+
+        .mx_RadioButton_checked {
+            font-size: 24px;
+            border-color: $accent-color;
+        }
+
+        &::after {
+            mask-image: url('$(res)/img/element-icons/feedback.svg');
+        }
+    }
+}

res/img/element-icons/feedback.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.283 21.4392C17.649 21.4392 21.9991 17.0875 21.9991 11.7196C21.9991 6.3516 17.649 2 12.283 2C6.91698 2 2.56696 6.3516 2.56696 11.7196C2.56696 13.2233 2.90831 14.6472 3.51772 15.9181L2.04565 20.7041C1.80906 21.4733 2.53172 22.1926 3.29983 21.9525L8.04605 20.4688C9.32655 21.0905 10.7641 21.4392 12.283 21.4392Z" fill="black"/>
+</svg>

res/img/feather-customised/bug.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C9.23858 2 7 4.23858 7 7L17 7C17 4.23858 14.7614 2 12 2ZM2.29289 7.70711C1.90237 7.31658 1.90237 6.68342 2.29289 6.29289C2.68342 5.90237 3.31658 5.90237 3.70711 6.29289L6.41421 9H17.5858L20.2929 6.29289C20.6834 5.90237 21.3166 5.90237 21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L19 10.4142V13H22C22.5523 13 23 13.4477 23 14C23 14.5523 22.5523 15 22 15H19C19 15.7795 18.8726 16.5292 18.6375 17.2295C18.6614 17.2493 18.6847 17.2705 18.7071 17.2929L21.7071 20.2929C22.0976 20.6834 22.0976 21.3166 21.7071 21.7071C21.3166 22.0976 20.6834 22.0976 20.2929 21.7071L17.6791 19.0933C16.5924 20.5983 14.9222 21.6542 13 21.9291L13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12V21.9291C9.07785 21.6542 7.40759 20.5983 6.32091 19.0933L3.70711 21.7071C3.31658 22.0976 2.68342 22.0976 2.29289 21.7071C1.90237 21.3166 1.90237 20.6834 2.29289 20.2929L5.29289 17.2929C5.31533 17.2705 5.33857 17.2493 5.36252 17.2295C5.1274 16.5292 5 15.7795 5 15H2C1.44772 15 1 14.5523 1 14C1 13.4477 1.44772 13 2 13H5V10.4142L2.29289 7.70711Z" fill="#FF4B55"/>
+</svg>