Feat: Add clovrlabs theme for cinny

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" />
 

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>

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">

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%',
   },
 ]);
 

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>

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: {

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 {