Feat: Add clovrlabs theme for cinny

2025-11-04 14:30:29 +03:00 · 2025-06-26 13:06:58 +02:00 · 2025-06-26 13:06:58 +02:00 · 243305a7e9
commit 243305a7e9
parent ba72925d53
8 changed files with 78 additions and 77 deletions
--- a/index.html
+++ b/index.html
@ -4,24 +4,24 @@
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
-    <title>Cinny</title>
-    <meta name="name" content="Cinny" />
-    <meta name="author" content="Ajay Bura" />
+    <title>Clovr Labs</title>
+    <meta name="name" content="Clovr Labs" />
+    <meta name="author" content="Clovr Labs" />
    <meta
      name="description"
-      content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source."
+      content="Secure matrix client for teams - built with enterprise-grade security and modern design."
    />
    <meta
      name="keywords"
-      content="cinny, cinnyapp, cinnychat, matrix, matrix client, matrix.org, element"
+      content="clovr labs, matrix client, secure chat, team communication, enterprise messaging"
    />

-    <meta property="og:title" content="Cinny" />
-    <meta property="og:url" content="https://cinny.in" />
+    <meta property="og:title" content="Clovr Labs" />
+    <meta property="og:url" content="https://clovrlabs.com" />
    <meta property="og:image" content="https://cinny.in/assets/favicon-48x48.png" />
    <meta
      property="og:description"
-      content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source."
+      content="Secure matrix client for teams - built with enterprise-grade security and modern design."
    />
    <meta name="theme-color" content="#000000" />

@ -29,8 +29,8 @@

    <link rel="manifest" href="/manifest.json" />
    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="application-name" content="Cinny" />
-    <meta name="apple-mobile-web-app-title" content="Cinny" />
+    <meta name="application-name" content="Clovr Labs" />
+    <meta name="apple-mobile-web-app-title" content="Clovr Labs" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

--- a/public/res/clovrlabs-logo-black.webp
+++ b/public/res/clovrlabs-logo-black.webp
--- a/src/app/features/settings/about/About.tsx
+++ b/src/app/features/settings/about/About.tsx
@ -4,7 +4,7 @@ import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
-import CinnySVG from '../../../../../public/res/svg/cinny.svg';
+import ClovrLabsLogo from '../../../../../public/res/clovrlabs-logo-black.webp';
 import cons from '../../../../client/state/cons';
 import { clearCacheAndReload } from '../../../../client/initMatrix';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
@ -39,23 +39,23 @@ export function About({ requestClose }: AboutProps) {
                <Box shrink="No">
                  <img
                    style={{ width: toRem(60), height: toRem(60) }}
-                    src={CinnySVG}
-                    alt="Cinny logo"
+                    src={ClovrLabsLogo}
+                    alt="Clovr Labs logo"
                  />
                </Box>
                <Box direction="Column" gap="300">
                  <Box direction="Column" gap="100">
                    <Box gap="100" alignItems="End">
-                      <Text size="H3">Cinny</Text>
+                      <Text size="H3">Clovr Labs</Text>
                      <Text size="T200">v{cons.version}</Text>
                    </Box>
-                    <Text>Yet another matrix client.</Text>
+                    <Text>Secure matrix client for teams.</Text>
                  </Box>

                  <Box gap="200" wrap="Wrap">
                    <Button
                      as="a"
-                      href="https://github.com/cinnyapp/cinny"
+                      href="https://clovrlabs.com/products"
                      rel="noreferrer noopener"
                      target="_blank"
                      variant="Secondary"
@ -64,11 +64,11 @@ export function About({ requestClose }: AboutProps) {
                      radii="300"
                      before={<Icon src={Icons.Code} size="100" filled />}
                    >
-                      <Text size="B300">Source Code</Text>
+                      <Text size="B300">Our Products</Text>
                    </Button>
                    <Button
                      as="a"
-                      href="https://cinny.in/#sponsor"
+                      href="https://clovrlabs.com/contact"
                      rel="noreferrer noopener"
                      target="_blank"
                      variant="Critical"
@ -77,7 +77,7 @@ export function About({ requestClose }: AboutProps) {
                      radii="300"
                      before={<Icon src={Icons.Heart} size="100" filled />}
                    >
-                      <Text size="B300">Support</Text>
+                      <Text size="B300">Contact Us</Text>
                    </Button>
                  </Box>
                </Box>
--- a/src/app/pages/auth/AuthLayout.tsx
+++ b/src/app/pages/auth/AuthLayout.tsx
@ -20,7 +20,7 @@ import {
 } from '../../hooks/useClientConfig';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { LOGIN_PATH, REGISTER_PATH, RESET_PASSWORD_PATH } from '../paths';
-import CinnySVG from '../../../../public/res/svg/cinny.svg';
+import ClovrLabsLogo from '../../../../public/res/clovrlabs-logo-black.webp';
 import { ServerPicker } from './ServerPicker';
 import { AutoDiscoveryAction, autoDiscovery } from '../../cs-api';
 import { SpecVersionsLoader } from '../../components/SpecVersionsLoader';
@ -134,8 +134,8 @@ export function AuthLayout() {
        <Box direction="Column" className={css.AuthCard}>
          <Header className={css.AuthHeader} size="600" variant="Surface">
            <Box grow="Yes" direction="Row" gap="300" alignItems="Center">
-              <img className={css.AuthLogo} src={CinnySVG} alt="Cinny Logo" />
-              <Text size="H3">Cinny</Text>
+              <img className={css.AuthLogo} src={ClovrLabsLogo} alt="Clovr Labs Logo" />
+              <Text size="H3">Clovr Labs</Text>
            </Box>
          </Header>
          <Box className={css.AuthCardContent} direction="Column">
--- a/src/app/pages/auth/styles.css.ts
+++ b/src/app/pages/auth/styles.css.ts
@ -26,10 +26,9 @@ export const AuthCard = style({
 export const AuthLogo = style([
  DefaultReset,
  {
-    width: toRem(26),
-    height: toRem(26),
+    width: '105px',
+    height: 'auto',

-    borderRadius: '50%',
  },
 ]);

--- a/src/app/pages/client/WelcomePage.tsx
+++ b/src/app/pages/client/WelcomePage.tsx
@ -1,7 +1,7 @@
 import React from 'react';
 import { Box, Button, Icon, Icons, Text, config, toRem } from 'folds';
 import { Page, PageHero, PageHeroSection } from '../../components/page';
-import CinnySVG from '../../../../public/res/svg/cinny.svg';
+import ClovrLabsLogo from '../../../../public/res/clovrlabs-logo-black.webp';

 export function WelcomePage() {
  return (
@ -14,17 +14,17 @@ export function WelcomePage() {
      >
        <PageHeroSection>
          <PageHero
-            icon={<img width="70" height="70" src={CinnySVG} alt="Cinny Logo" />}
-            title="Welcome to Cinny"
+            icon={<img width="170" height="auto" src={ClovrLabsLogo} alt="Clovr Labs Logo" />}
+            title="Welcome to Clovr Labs"
            subTitle={
              <span>
-                Yet another matrix client.{' '}
+                Reach out channel for .{' '}
                <a
-                  href="https://github.com/cinnyapp/cinny/releases"
+                  href="https://clovrlabs.com"
                  target="_blank"
                  rel="noreferrer noopener"
                >
-                  v4.8.1
+                  Learn More
                </a>
              </span>
            }
@ -33,25 +33,25 @@ export function WelcomePage() {
              <Box grow="Yes" style={{ maxWidth: toRem(300) }} direction="Column" gap="300">
                <Button
                  as="a"
-                  href="https://github.com/cinnyapp/cinny"
+                  href="https://clovrlabs.com/products"
                  target="_blank"
                  rel="noreferrer noopener"
                  before={<Icon size="200" src={Icons.Code} />}
                >
                  <Text as="span" size="B400" truncate>
-                    Source Code
+                    Our Products
                  </Text>
                </Button>
                <Button
                  as="a"
-                  href="https://cinny.in/#sponsor"
+                  href="https://clovrlabs.com/contact"
                  target="_blank"
                  rel="noreferrer noopener"
                  fill="Soft"
                  before={<Icon size="200" src={Icons.Heart} />}
                >
                  <Text as="span" size="B400" truncate>
-                    Support
+                    Contact Us
                  </Text>
                </Button>
              </Box>
--- a/src/colors.css.ts
+++ b/src/colors.css.ts
@ -3,53 +3,53 @@ import { color } from 'folds';

 export const silverTheme = createTheme(color, {
  Background: {
-    Container: '#DEDEDE',
-    ContainerHover: '#D3D3D3',
-    ContainerActive: '#C7C7C7',
-    ContainerLine: '#BBBBBB',
+    Container: '#FFFFFF',
+    ContainerHover: '#F8F8F8',
+    ContainerActive: '#F0F0F0',
+    ContainerLine: '#DCDCDC',
    OnContainer: '#000000',
  },

  Surface: {
-    Container: '#EAEAEA',
-    ContainerHover: '#DEDEDE',
-    ContainerActive: '#D3D3D3',
-    ContainerLine: '#C7C7C7',
+    Container: '#FFFFFF',
+    ContainerHover: '#F8F8F8',
+    ContainerActive: '#F0F0F0',
+    ContainerLine: '#DCDCDC',
    OnContainer: '#000000',
  },

  SurfaceVariant: {
-    Container: '#DEDEDE',
-    ContainerHover: '#D3D3D3',
-    ContainerActive: '#C7C7C7',
-    ContainerLine: '#BBBBBB',
+    Container: '#F8F8F8',
+    ContainerHover: '#F0F0F0',
+    ContainerActive: '#E8E8E8',
+    ContainerLine: '#DCDCDC',
    OnContainer: '#000000',
  },

  Primary: {
-    Main: '#1245A8',
-    MainHover: '#103E97',
-    MainActive: '#0F3B8F',
-    MainLine: '#0E3786',
+    Main: '#000000',
+    MainHover: '#303030',
+    MainActive: '#5A5A5A',
+    MainLine: '#000000',
    OnMain: '#FFFFFF',
-    Container: '#C4D0E9',
-    ContainerHover: '#B8C7E5',
-    ContainerActive: '#ACBEE1',
-    ContainerLine: '#A0B5DC',
-    OnContainer: '#0D3076',
+    Container: '#F0F0F0',
+    ContainerHover: '#E8E8E8',
+    ContainerActive: '#DCDCDC',
+    ContainerLine: '#C0C0C0',
+    OnContainer: '#000000',
  },

  Secondary: {
-    Main: '#000000',
-    MainHover: '#171717',
-    MainActive: '#232323',
-    MainLine: '#2F2F2F',
-    OnMain: '#EAEAEA',
-    Container: '#C7C7C7',
-    ContainerHover: '#BBBBBB',
-    ContainerActive: '#AFAFAF',
-    ContainerLine: '#A4A4A4',
-    OnContainer: '#0C0C0C',
+    Main: '#5A5A5A',
+    MainHover: '#303030',
+    MainActive: '#000000',
+    MainLine: '#5A5A5A',
+    OnMain: '#FFFFFF',
+    Container: '#DCDCDC',
+    ContainerHover: '#C0C0C0',
+    ContainerActive: '#A8A8A8',
+    ContainerLine: '#909090',
+    OnContainer: '#000000',
  },

  Success: {
--- a/src/index.scss
+++ b/src/index.scss
@ -1,5 +1,7 @@
@use './app/partials/screen';

+@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');
+
@font-face {
  font-family: Twemoji;
  src: url('../public/font/Twemoji.Mozilla.v15.1.0.woff2'),
@ -11,18 +13,18 @@
  /* background color | --bg-[background type]: value */
  --bg-surface: #ffffff;
  --bg-surface-transparent: #ffffff00;
-  --bg-surface-low: #f6f6f6;
-  --bg-surface-low-transparent: #f6f6f600;
-  --bg-surface-extra-low: #f6f6f6;
-  --bg-surface-extra-low-transparent: #f6f6f600;
+  --bg-surface-low: #ffffff;
+  --bg-surface-low-transparent: #ffffff00;
+  --bg-surface-extra-low: #f8f8f8;
+  --bg-surface-extra-low-transparent: #f8f8f800;
  --bg-surface-hover: rgba(0, 0, 0, 3%);
  --bg-surface-active: rgba(0, 0, 0, 5%);
-  --bg-surface-border: rgba(0, 0, 0, 6%);
+  --bg-surface-border: rgba(220, 220, 220, 100%);

-  --bg-primary: rgb(18, 69, 168);
-  --bg-primary-hover: rgba(18, 69, 168, 80%);
-  --bg-primary-active: rgba(18, 69, 168, 70%);
-  --bg-primary-border: rgba(18, 69, 168, 38%);
+  --bg-primary: rgb(0, 0, 0);
+  --bg-primary-hover: rgba(0, 0, 0, 80%);
+  --bg-primary-active: rgba(0, 0, 0, 70%);
+  --bg-primary-border: rgba(0, 0, 0, 20%);

  --bg-positive: rgb(1, 115, 67);
  --bg-positive-hover: rgba(1, 115, 67, 8%);
@ -193,8 +195,8 @@
  --fluid-slide-up: cubic-bezier(0.13, 0.56, 0.25, 0.99);

  --font-emoji: 'Twemoji_DISABLED';
-  --font-primary: 'InterVariable', var(--font-emoji), sans-serif;
-  --font-secondary: 'InterVariable', var(--font-emoji), sans-serif;
+  --font-primary: 'Questrial', var(--font-emoji), sans-serif;
+  --font-secondary: 'Questrial', var(--font-emoji), sans-serif;
 }

 .silver-theme {