Styling fixes

config.json

@@ -34,11 +34,7 @@
     "privacy_policy_url": "https://github.com/elecordapp/elecord-web/blob/master/PRIVACY.md",
     "setting_defaults": {
         "RustCrypto.staged_rollout_percent": 100,
-        "use_system_theme": false,
-        "showRedactions": false,
-        "showTwelveHourTimestamps": true,
-        "urlPreviewsEnabled_e2ee": true,
-        "useOnlyCurrentProfiles": true
+        "use_system_theme": false
     },
     "features": {
         "feature_video_rooms": true,

res/css/_common.pcss

@@ -130,6 +130,10 @@ body {
     .mx_SpaceRoomView_landing_inviteButton:before {
         background: #101317 !important;
     }
+    /* settings, profile, display name, submit button */
+    .mx_UserProfileSettings_profile button:nth-child(1) > svg {
+        color: #101317 !important;
+    }
 }
 
 pre,
@@ -494,6 +498,9 @@ legend {
     margin-left: -2px;
     margin-right: 4px;
     margin-bottom: 2px;
+
+    /* elecord, temp colour fix */
+    filter: invert(1) brightness(0.85);
 }
 
 .mx_Dialog_title {

res/css/structures/_RoomView.pcss

@@ -37,8 +37,8 @@ Please see LICENSE files in the repository root for full details.
         flex: 0 0 auto;
         /* margin-right: 2px; */
         border: 1px #ffffff1c solid;
-        border-radius: 50px;
-        margin: 0 12px 14px;
+        border-radius: 30px !important;
+        margin: 0 12px 14px !important;
     }
 }
 

res/css/structures/_SpaceHierarchy.pcss

@@ -159,7 +159,10 @@ Please see LICENSE files in the repository root for full details.
                     display: grid;
                     grid-template-columns: 20px auto;
                     gap: 6px 8px;
-                    align-items: center;
+
+                    /* elecord, aligned room list */
+                    align-items: start;
+
                     flex: 1; /* wrap action buttons */
 
                     .mx_SpaceHierarchy_roomTile_avatar {
@@ -173,7 +176,9 @@ Please see LICENSE files in the repository root for full details.
 
                         .mx_InfoTooltip,
                         .mx_SpaceHierarchy_roomTile_joined {
-                            margin-left: 12px;
+                            /* elecord, aligned room list */
+                            /* margin-left: 12px; */
+
                             color: $tertiary-content;
                             font-size: $font-12px;
                             line-height: $font-15px;
@@ -196,7 +201,10 @@ Please see LICENSE files in the repository root for full details.
                         }
 
                         .mx_SpaceHierarchy_roomTile_joined {
-                            display: inline;
+                            /* elecord, aligned room list */
+                            display: block;
+                            margin-top: 3px;
+
                             position: relative;
                             padding-left: 16px;
 

res/css/views/auth/_AuthPage.pcss

@@ -46,7 +46,7 @@ Please see LICENSE files in the repository root for full details.
     overflow: hidden;
     position: absolute;
     inset: 0px;
-    border-radius: 7px;
+    border-radius: 8px;
 }
 
 @keyframes lavaLamp {

res/css/views/auth/_CompleteSecurityBody.pcss

@@ -9,12 +9,17 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_CompleteSecurityBody {
     width: 600px;
-    color: $authpage-primary-color;
-    background-color: $background;
-    border-radius: 4px;
+    /* color: $authpage-primary-color; */
+    /* background-color: $background; */
+    border-radius: 8px;
     padding: 20px;
     box-sizing: border-box;
 
+    /* elecord, custom colours */
+    color: #ebeef2;
+    background: linear-gradient(to right, #191d22, #1f1d1e);
+    outline: solid #7d7d7d5c;
+
     h2 {
         font-size: $font-24px;
         font-weight: var(--cpd-font-weight-semibold);

res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss

@@ -37,7 +37,7 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_AccessSecretStorageDialog_primaryContainer {
         .mx_AccessSecretStorageDialog_passPhraseInput {
-            width: 300px;
+            width: auto; /* full width input */
             border: 1px solid $accent;
             border-radius: 5px;
         }
@@ -122,6 +122,9 @@ Please see LICENSE files in the repository root for full details.
                         top: 2px; /* alignment */
                         background-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
                         background-size: contain;
+
+                        /* elecord, temp colour fix */
+                        filter: invert(1) brightness(0.7);
                     }
 
                     .mx_AccessSecretStorageDialog_reset_link {

res/css/views/elements/_TagComposer.pcss

@@ -12,6 +12,7 @@ Please see LICENSE files in the repository root for full details.
         flex-direction: row;
 
         .mx_AccessibleButton {
+            width: fit-content; /* prevent full width */
             min-width: 70px;
             padding: 0 8px; /* override from button styles */
             align-self: stretch; /* override default settingstab style */

res/css/views/rooms/_LiveContentSummary.pcss

@@ -34,11 +34,17 @@ Please see LICENSE files in the repository root for full details.
         }
     }
 
+    /* elecord, highlight participants */
+    .mx_LiveContentSummary_participants {
+        color: var(--cpd-color-text-action-accent);
+    }
+
     .mx_LiveContentSummary_participants::before {
         display: inline-block;
         vertical-align: text-bottom;
         content: "";
-        background-color: $secondary-content;
+        /* background-color: $secondary-content; */
+        background-color: var(--cpd-color-text-action-accent);
         mask-image: url("$(res)/img/element-icons/group-members.svg");
         mask-size: 16px;
         width: 16px;

res/css/views/rooms/_ReplyPreview.pcss

@@ -48,7 +48,15 @@ Please see LICENSE files in the repository root for full details.
     .mx_ReplyPreview {
         /* Add box-shadow to the reply preview on the main (left) panel only. */
         /* It is not added to the preview on the (right) panel for threads and a chat with a maximized widget. */
-        box-shadow: 0px -16px 32px $composer-shadow-color;
-        border-radius: 8px 8px 0 0;
+        /* box-shadow: 0px -16px 32px $composer-shadow-color; */
+        /* border-radius: 8px 8px 0 0; */
+
+        /* elecord implementation */
+        filter: drop-shadow(0 -42px 32px rgba(0, 0, 0, 0.18)); /* drop-shadow is more direct */
+        border-radius: 0 8px 0 0;
+        /* adjust cancel button position */
+        .mx_ReplyPreview_header_cancel {
+            margin-right: 4px;
+        }
     }
 }

res/css/views/rooms/_RoomRPC.pcss

@@ -6,14 +6,24 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_RoomRPC {
+    /* hide text overflow on hover */
     display: contents;
 
+    /* crop icon to circle */
     img {
         border-radius: 50%;
     }
 }
 
+/* adjust subtitle down */
 .mx_RoomTile_dm
 .mx_RoomTile_subtitle {
-    top: 0px !important;
+    top: 1px !important;
+}
+
+/* fix dm room title ascenders clipping subtitle */
+.mx_RoomTile_titleWithSubtitle {
+    margin-bottom: -0.2em;
+    overflow: visible;
+    mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
 }

src/components/structures/ScrollPanel.tsx

@@ -918,7 +918,7 @@ export default class ScrollPanel extends React.Component<IProps> {
                 const currentOffset = messageList.clientHeight - (offsetNode.offsetTop + offsetNode.clientHeight);
                 const offsetDiff = offsetFromBottom - currentOffset;
                 if (offsetDiff > 0 && balanceElement) {
-                    balanceElement.style.paddingBottom = `${offsetDiff}px`;
+                    // balanceElement.style.paddingBottom = `${offsetDiff}px`; /* elecord, excessive padding added */
                     debuglog("update prevent shrinking ", offsetDiff, "px from bottom");
                 } else if (offsetDiff < 0) {
                     shouldClear = true;

src/components/structures/UserMenu.tsx

@@ -370,6 +370,15 @@ export default class UserMenu extends React.Component<IProps, IState> {
             ? toRightOf(this.state.contextMenuPosition)
             : below(this.state.contextMenuPosition);
 
+        // elecord, remove matrix.org username suffix
+        function removeMatrixOrgSuffix(userId: string | null): string | null {
+            const suffix = ':matrix.org';
+            if (userId?.endsWith(suffix)) {
+                return userId.slice(0, -suffix.length);
+            }
+            return userId;
+        }
+
         return (
             <IconizedContextMenu {...position} onFinished={this.onCloseMenu} className="mx_UserMenu_contextMenu">
                 <div className="mx_UserMenu_contextMenu_header">
@@ -378,11 +387,13 @@ export default class UserMenu extends React.Component<IProps, IState> {
                             {OwnProfileStore.instance.displayName}
                         </span>
                         <span className="mx_UserMenu_contextMenu_userId">
-                            {UserIdentifierCustomisations.getDisplayUserIdentifier(
-                                MatrixClientPeg.safeGet().getSafeUserId(),
-                                {
-                                    withDisplayName: true,
-                                },
+                            {removeMatrixOrgSuffix(
+                                UserIdentifierCustomisations.getDisplayUserIdentifier(
+                                    MatrixClientPeg.safeGet().getSafeUserId(),
+                                    {
+                                        withDisplayName: true,
+                                    },
+                                )
                             )}
                         </span>
                     </div>

src/components/views/auth/AuthPage.tsx

@@ -59,7 +59,7 @@ export default class AuthPage extends React.PureComponent<React.PropsWithChildre
             display: "flex",
             zIndex: 1,
             background: "rgba(255, 255, 255, 0.59)",
-            borderRadius: "8px",
+            borderRadius: "10px",
         };
 
         return (

src/components/views/settings/CrossSigningPanel.tsx

@@ -189,7 +189,7 @@ export default class CrossSigningPanel extends React.PureComponent<EmptyObject,
         } else if (crossSigningReady && !crossSigningPrivateKeysInStorage) {
             summarisedStatus = (
                 <SettingsSubsectionText data-testid="summarised-status">
-                    ⚠️ {_t("encryption|cross_signing_ready_no_backup")}
+                    🚨 {_t("encryption|cross_signing_ready_no_backup")}
                 </SettingsSubsectionText>
             );
         } else if (crossSigningPrivateKeysInStorage) {

src/settings/Settings.tsx

@@ -732,7 +732,7 @@ export const SETTINGS: Settings = {
     "showRedactions": {
         supportedLevels: LEVELS_ROOM_SETTINGS_WITH_ROOM,
         displayName: _td("settings|show_redaction_placeholder"),
-        default: true,
+        default: false,
         invertedSettingName: "hideRedactions",
     },
     "showJoinLeaves": {
@@ -762,7 +762,7 @@ export const SETTINGS: Settings = {
     "showTwelveHourTimestamps": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
         displayName: _td("settings|use_12_hour_format"),
-        default: false,
+        default: true,
     },
     "alwaysShowTimestamps": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
@@ -1279,7 +1279,7 @@ export const SETTINGS: Settings = {
     },
     [UIFeature.LocationSharing]: {
         supportedLevels: LEVELS_UI_FEATURE,
-        default: true,
+        default: false,
     },
     [UIFeature.Voip]: {
         supportedLevels: LEVELS_UI_FEATURE,

src/theme.ts

@@ -87,7 +87,7 @@ export function isHighContrastTheme(theme: string): boolean {
 
 export function enumerateThemes(): { [key: string]: string } {
     const BUILTIN_THEMES = {
-        "light": _t("common|light"),
+        // "light": _t("common|light"), /* elecord, remove default light theme */
         "light-high-contrast": _t("theme|light_high_contrast"),
         "dark": _t("common|dark"),
     };