Branding/logo adjustments

.github/workflows/kotlin-test.yml

@@ -0,0 +1,52 @@
+name: Kotlin CI
+
+on:
+  pull_request:
+    types: [ opened, synchronize, edited ]
+    paths:
+      - 'app-android/**'
+  push:
+    branches:
+      - dev-*
+    paths:
+      - 'app-android/**'
+
+jobs:
+  test-kotlin:
+    runs-on: ubuntu-latest
+    env:
+      java-version: 21
+      java-distribution: 'temurin'
+      TZ: "Europe/Berlin" # We have some tests for same day alarms that depends on this TimeZone
+    permissions:
+      actions: none
+      checks: none
+      contents: read
+      deployments: none
+      id-token: none
+      issues: none
+      discussions: none
+      packages: none
+      pages: none
+      pull-requests: none
+      repository-projects: none
+      security-events: none
+      statuses: none
+
+    steps:
+      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1
+      - name: Create dummy build folder
+        run: mkdir build # We need this because gradlew lint searches for the app assets
+      - name: Set up JDK ${{ env.java-version }}
+        uses: actions/setup-java@99b8673ff64fbf99d8d325f52d9a5bdedb8483e9 #4.2.1
+        with:
+          java-version: ${{ env.java-version }}
+          distribution: ${{ env.java-distribution }}
+      - name: Setup Android SDK
+        uses: android-actions/setup-android@07976c6290703d34c16d382cb36445f98bb43b1f #3.2.0
+      - name: Lint
+        working-directory: ./app-android
+        run: ./gradlew lint --quiet
+      - name: Test
+        working-directory: ./app-android
+        run: ./gradlew test

src/calendar/view/CalendarEventBubble.ts

@@ -113,7 +113,19 @@ export class CalendarEventBubble implements Component<CalendarEventBubbleAttrs>
 			const topSectionClass = topSectionMaxLines === 1 ? ".text-ellipsis" : ".text-ellipsis-multi-line"
 			return [
 				// The wrapper around `text` is needed to stop `-webkit-box` from changing the height
-				CalendarEventBubble.renderTextSection("", m(topSectionClass, text), topSectionMaxLines * lineHeight),
+				CalendarEventBubble.renderTextSection(
+					"",
+					m(
+						topSectionClass,
+						{
+							style: {
+								"-webkit-line-clamp": topSectionMaxLines, // This helps resizing the text to show as much as possible of its contents
+							},
+						},
+						text,
+					),
+					topSectionMaxLines * lineHeight,
+				),
 				secondLineText ? CalendarEventBubble.renderTextSection(".text-ellipsis", secondLineText, lineHeight) : null,
 			]
 		} else {

src/gui/ThemeController.ts

@@ -224,10 +224,10 @@ export class ThemeController {
 			return Object.assign({}, this.getBaseTheme(customizations.base), customizations)
 		} else {
 			const themeWithoutLogo = Object.assign({}, this.getBaseTheme(customizations.base), customizations)
-			const coloredTutanotaLogo = getLogoSvg(
-				themeWithoutLogo.content_accent,
-				customizations.base === "light" ? logo_text_dark_grey : logo_text_bright_grey,
-			)
+			// This is a whitelabel theme where logo has not been overwritten.
+			// Generate a logo with muted colors. We do not want to color our logo in
+			// some random color.
+			const coloredTutanotaLogo = getLogoSvg(themeWithoutLogo.navigation_menu_icon, themeWithoutLogo.navigation_menu_icon)
 			return { ...themeWithoutLogo, ...{ logo: coloredTutanotaLogo } }
 		}
 	}

src/gui/builtinThemes.ts

@@ -126,7 +126,8 @@ export const themes: Themes = {
 	}),
 	blue: Object.freeze({
 		themeId: "blue",
-		logo: getLogoSvg(blue, dunkel),
+		// blue is not really our brand color, treat blue like whitelabel color
+		logo: getLogoSvg(grey, grey),
 		button_bubble_bg: grey_lighter_3,
 		button_bubble_fg: grey_darker_1,
 		content_fg: grey_darker_1,

src/gui/theme.ts

@@ -3,8 +3,7 @@ import { assertMainOrNodeBoot, isApp, isDesktop, isTest } from "../api/common/En
 import type { HtmlSanitizer } from "../misc/HtmlSanitizer"
 import { NativeThemeFacade, ThemeController, WebThemeFacade } from "./ThemeController"
 import { isColorLight } from "./base/Color"
-import { logo_text_bright_grey, logo_text_dark_grey } from "./builtinThemes"
-import { getLogoSvg } from "./base/Logo"
+import { themes } from "./builtinThemes"
 
 assertMainOrNodeBoot()
 
@@ -53,7 +52,7 @@ export type Theme = {
 	navigation_button_icon: string
 	navigation_button_icon_selected: string
 	navigation_menu_bg?: string
-	navigation_menu_icon?: string
+	navigation_menu_icon: string
 }
 const selectedThemeFacade = isApp() || isDesktop() ? new NativeThemeFacade() : new WebThemeFacade(deviceConfig)
 
@@ -133,6 +132,11 @@ export function getNavigationMenuIcon(): string {
 	return theme.navigation_menu_icon || theme.navigation_button_icon
 }
 
-export function getColouredTutanotaLogo(): string {
-	return getLogoSvg(theme.content_accent, isColorLight(theme.content_bg) ? logo_text_dark_grey : logo_text_bright_grey)
+export function getLightOrDarkTutanotaLogo(): string {
+	// Use tuta logo with our brand colors
+	if (isColorLight(theme.content_bg)) {
+		return themes.light.logo
+	} else {
+		return themes.dark.logo
+	}
 }

src/settings/AboutDialog.ts

@@ -1,6 +1,6 @@
 import m, { Children, Component, Vnode } from "mithril"
 import { Button, ButtonType } from "../gui/base/Button.js"
-import { getColouredTutanotaLogo } from "../gui/theme"
+import { getLightOrDarkTutanotaLogo } from "../gui/theme"
 import { showUserError } from "../misc/ErrorHandlerImpl"
 import { locator } from "../api/main/MainLocator"
 import { InfoLink, lang } from "../misc/LanguageViewModel"
@@ -9,6 +9,7 @@ import { UserError } from "../api/main/UserError"
 import { clientInfoString, getLogAttachments } from "../misc/ErrorReporter"
 import { ExternalLink } from "../gui/base/ExternalLink.js"
 import { isApp } from "../api/common/Env.js"
+import { px, size } from "../gui/size.js"
 
 interface AboutDialogAttrs {
 	onShowSetupWizard: () => unknown
@@ -18,7 +19,17 @@ export class AboutDialog implements Component<AboutDialogAttrs> {
 	view(vnode: Vnode<AboutDialogAttrs>): Children {
 		return m(".flex.col", [
 			m(".center.mt", "Powered by"),
-			m(".center.mt", m.trust(getColouredTutanotaLogo())),
+			m(
+				".center",
+				// Our logo must be padded but at least a certain amount.
+				// This might be a bit more than needed but it's safe.
+				{
+					style: {
+						margin: px(size.vpad_xl),
+					},
+				},
+				m.trust(getLightOrDarkTutanotaLogo()),
+			),
 			m(".flex.justify-center.mt-l.flex-wrap", [
 				m(ExternalLink, { href: InfoLink.HomePage, text: "Website", isCompanySite: true, specialType: "me", class: "mlr mt" }),
 				m(ExternalLink, {
@@ -31,7 +42,7 @@ export class AboutDialog implements Component<AboutDialogAttrs> {
 			m(".flex.justify-center.selectable.flex-wrap", [
 				m("p.center.mt.mlr", `v${env.versionNumber}`),
 				m("p.text-center.mlr", "GPL-v3"),
-				m("p", "© 2023 Tutao GmbH"),
+				m("p", "© 2024 Tutao GmbH"),
 			]),
 			this._sendLogsLink(),
 			// wrap it in a div so that it's not filling the whole width