Merge pull request #57 from elecordapp/style-fixes

Assorted styling fixes

Author: hazzuk

res/css/_common.pcss

@@ -115,6 +115,7 @@ body {
     --cpd-color-bg-accent-pressed: var(--cpd-color-blue-1100) !important;
     --cpd-color-text-action-accent: var(--cpd-color-blue-900) !important;
     --cpd-color-icon-accent-primary: var(--cpd-color-blue-900) !important;
+    --cpd-color-icon-success-primary: var(--cpd-color-blue-900) !important;
     --cpd-color-icon-accent-tertiary: var(--cpd-color-blue-800) !important;
     --cpd-color-icon-on-solid-primary: var(--cpd-color-gray-1400) !important;
     /* e2e verification */

res/css/structures/auth/_LoginSplashView.pcss

@@ -23,11 +23,23 @@ Please see LICENSE files in the repository root for full details.
     }
 }
 
+// elecord, splash icon
+.mx_LoginSplashView_splashIcon {
+    display: flex;
+    justify-content: center;
+    height: 100%;
+    align-items: center;
+}
+
 .mx_LoginSplashView_splashButtons {
     text-align: center;
     width: 100%;
     position: absolute;
     bottom: 30px;
+
+    .mx_AccessibleButton.mx_AccessibleButton_kind_link_inline {
+        color: var(--cpd-color-text-secondary);
+    }
 }
 
 .mx_LoginSplashView_syncError {

res/css/views/rooms/_NotificationBadge.pcss

@@ -77,7 +77,8 @@ Please see LICENSE files in the repository root for full details.
 
         .mx_NotificationBadge_count {
             font-size: $font-10px;
-            line-height: $font-14px;
+            // elecord, center notifications badge count
+            /* line-height: $font-14px; */
             font-weight: var(--cpd-font-weight-semibold);
             color: var(--cpd-color-text-on-solid-primary);
         }

src/components/structures/auth/LoginSplashView.tsx

@@ -70,14 +70,14 @@ export function LoginSplashView(props: Props): JSX.Element {
     return (
         <div className="mx_MatrixChat_splash">
             {errorBox}
-            {spinnerOrProgress}
-            <div className="mx_LoginSplashView_splashButtons">
 
-                {/* elecord mono icon on loading screen */}
-                <div>
-                    <img src="vector-icons/128-mono.png" />
-                </div>
+            {/* elecord mono icon on loading screen */}
+            <div className="mx_LoginSplashView_splashIcon">
+                <img src="vector-icons/128-mono.png" />
+            </div>
 
+            <div className="mx_LoginSplashView_splashButtons">
+                {spinnerOrProgress}
                 <AccessibleButton kind="link_inline" onClick={props.onLogoutClick}>
                     {_t("action|logout")}
                 </AccessibleButton>

src/components/views/messages/MImageReplyBody.tsx

@@ -13,7 +13,7 @@ import { MImageBodyInner } from "./MImageBody";
 import { type IBodyProps } from "./IBodyProps";
 import { useMediaVisible } from "../../../hooks/useMediaVisible";
 
-const FORCED_IMAGE_HEIGHT = 44;
+const FORCED_IMAGE_HEIGHT = 66;
 
 class MImageReplyBodyInner extends MImageBodyInner {
     public onClick = (ev: React.MouseEvent): void => {

src/i18n/strings/en_EN.json

@@ -1701,7 +1701,7 @@
         "create_room": "Create a Group Chat",
         "explore_rooms": "Explore Public Rooms",
         "has_avatar_label": "Great, that'll help people know it's you",
-        "intro_byline": "Own your conversations.",
+        "intro_byline": "Plug and play privacy.",
         "intro_welcome": "Welcome to %(appName)s",
         "no_avatar_label": "Add a photo so people know it's you.",
         "send_dm": "Send a Direct Message",