New layout selector ui in user settings

res/css/views/settings/_LayoutSwitcher.pcss

@@ -15,79 +15,76 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_LayoutSwitcher_RadioButtons {
+.mx_LayoutSwitcher_LayoutSelector {
     display: flex;
-    flex-direction: row;
-    gap: 24px;
-    width: 100%;
+    flex-direction: column;
+    gap: var(--cpd-space-4x) !important;
 
-    color: $primary-content;
+    .mxLayoutSwitcher_LayoutSelector_LayoutRadio {
+        border: 1px solid var(--cpd-color-border-interactive-primary);
+        border-radius: var(--cpd-space-2x);
 
-    > .mx_LayoutSwitcher_RadioButton {
-        flex-grow: 0;
-        flex-shrink: 1;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-
-        flex-basis: 33%;
-        min-width: 0;
-
-        border: 1px solid $quinary-content;
-        border-radius: 10px;
-
-        .mx_EventTile_msgOption,
-        .mx_MessageActionBar {
-            display: none;
-        }
-
-        .mx_LayoutSwitcher_RadioButton_preview {
-            flex-grow: 1;
+        .mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline {
             display: flex;
+            /*
+             * 10px
+             */
+            gap: calc(var(--cpd-space-2x) + var(--cpd-space-0-5x));
             align-items: center;
-            padding: 10px;
-            pointer-events: none;
-
-            .mx_EventTile[data-layout="bubble"] .mx_EventTile_line {
-                padding-right: 11px;
-            }
-        }
-
-        .mx_StyledRadioButton {
-            flex-grow: 0;
-            padding: 10px;
         }
 
-        .mx_EventTile_content {
-            margin-right: 0;
+        .mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline,
+        .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview {
+            margin: var(--cpd-space-3x);
         }
 
-        &.mx_LayoutSwitcher_RadioButton_selected {
-            border-color: var(--cpd-color-bg-accent-rest);
-        }
-    }
-
-    .mx_StyledRadioButton {
-        border-top: 1px solid $quinary-content;
-    }
-
-    .mx_StyledRadioButton_checked {
-        background-color: var(--cpd-color-bg-subtle-secondary);
-    }
+        /**
+         * Override the event tile style to make it fit in the selector
+         * Tweak also hover style and remove action bar
+         */
+        .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview {
+            pointer-events: none;
 
-    .mx_EventTile {
-        margin: 0;
-        &[data-layout="bubble"] {
-            margin-right: 40px;
-            flex-shrink: 1;
-        }
-        &[data-layout="irc"] {
-            > a {
-                display: none;
+            .mx_EventTile {
+                margin: 0;
+
+                /**
+                 * Hide the message options and message action bar in the preview
+                 */
+                .mx_EventTile_msgOption,
+                .mx_MessageActionBar {
+                    display: none;
+                }
+
+                .mx_EventTile_content {
+                    margin-right: 0;
+                }
+
+                &[data-layout="group"] {
+                    margin-top: calc(var(--cpd-space-3x) * -1);
+                }
+
+                /**
+                 * Add margin to center the bubble
+                 */
+                &[data-layout="bubble"] {
+                    /**
+                     * Add the layout margin and the margin to vertically center the bubble
+                     */
+                    margin-top: var(--cpd-space-6x);
+                    margin-right: 34px;
+                    flex-shrink: 1;
+                }
+
+                .mx_EventTile_line {
+                    max-width: 100%;
+                }
             }
         }
-        .mx_EventTile_line {
-            max-width: 90%;
+
+        .mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator {
+            border-top: 0;
+            border-bottom: 1px solid var(--cpd-color-border-interactive-secondary);
         }
     }
 }