mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-04 14:30:29 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Feat: Add clovrlabs theme for cinny

Browse source
This commit is contained in:
Rasmus Schlunsen 2025-06-26 13:06:58 +02:00
parent ba72925d53
commit 243305a7e9
8 changed files with 78 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

20
index.html
View file

@ -4,24 +4,24 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Cinny</title> <title>Clovr Labs</title>
<meta name="name" content="Cinny" /> <meta name="name" content="Clovr Labs" />
<meta name="author" content="Ajay Bura" /> <meta name="author" content="Clovr Labs" />
<meta <meta
name="description" 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 <meta
name="keywords" 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:title" content="Clovr Labs" />
<meta property="og:url" content="https://cinny.in" /> <meta property="og:url" content="https://clovrlabs.com" />
<meta property="og:image" content="https://cinny.in/assets/favicon-48x48.png" /> <meta property="og:image" content="https://cinny.in/assets/favicon-48x48.png" />
<meta <meta
property="og:description" 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" /> <meta name="theme-color" content="#000000" />
@ -29,8 +29,8 @@
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<meta name="mobile-web-app-capable" content="yes" /> <meta name="mobile-web-app-capable" content="yes" />
<meta name="application-name" content="Cinny" /> <meta name="application-name" content="Clovr Labs" />
<meta name="apple-mobile-web-app-title" content="Cinny" /> <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-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

BIN
public/res/clovrlabs-logo-black.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 850 B

18
src/app/features/settings/about/About.tsx
View file

@ -4,7 +4,7 @@ import { Page, PageContent, PageHeader } from '../../../components/page';
import { SequenceCard } from '../../../components/sequence-card'; import { SequenceCard } from '../../../components/sequence-card';
import { SequenceCardStyle } from '../styles.css'; import { SequenceCardStyle } from '../styles.css';
import { SettingTile } from '../../../components/setting-tile'; 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 cons from '../../../../client/state/cons';
import { clearCacheAndReload } from '../../../../client/initMatrix'; import { clearCacheAndReload } from '../../../../client/initMatrix';
import { useMatrixClient } from '../../../hooks/useMatrixClient'; import { useMatrixClient } from '../../../hooks/useMatrixClient';
@ -39,23 +39,23 @@ export function About({ requestClose }: AboutProps) {
<Box shrink="No"> <Box shrink="No">
<img <img
style={{ width: toRem(60), height: toRem(60) }} style={{ width: toRem(60), height: toRem(60) }}
src={CinnySVG} src={ClovrLabsLogo}
alt="Cinny logo" alt="Clovr Labs logo"
/> />
</Box> </Box>
<Box direction="Column" gap="300"> <Box direction="Column" gap="300">
<Box direction="Column" gap="100"> <Box direction="Column" gap="100">
<Box gap="100" alignItems="End"> <Box gap="100" alignItems="End">
<Text size="H3">Cinny</Text> <Text size="H3">Clovr Labs</Text>
<Text size="T200">v{cons.version}</Text> <Text size="T200">v{cons.version}</Text>
</Box> </Box>
<Text>Yet another matrix client.</Text> <Text>Secure matrix client for teams.</Text>
</Box> </Box>
<Box gap="200" wrap="Wrap"> <Box gap="200" wrap="Wrap">
<Button <Button
as="a" as="a"
href="https://github.com/cinnyapp/cinny" href="https://clovrlabs.com/products"
rel="noreferrer noopener" rel="noreferrer noopener"
target="_blank" target="_blank"
variant="Secondary" variant="Secondary"
@ -64,11 +64,11 @@ export function About({ requestClose }: AboutProps) {
radii="300" radii="300"
before={<Icon src={Icons.Code} size="100" filled />} before={<Icon src={Icons.Code} size="100" filled />}
> >
<Text size="B300">Source Code</Text> <Text size="B300">Our Products</Text>
</Button> </Button>
<Button <Button
as="a" as="a"
href="https://cinny.in/#sponsor" href="https://clovrlabs.com/contact"
rel="noreferrer noopener" rel="noreferrer noopener"
target="_blank" target="_blank"
variant="Critical" variant="Critical"
@ -77,7 +77,7 @@ export function About({ requestClose }: AboutProps) {
radii="300" radii="300"
before={<Icon src={Icons.Heart} size="100" filled />} before={<Icon src={Icons.Heart} size="100" filled />}
> >
<Text size="B300">Support</Text> <Text size="B300">Contact Us</Text>
</Button> </Button>
</Box> </Box>
</Box> </Box>

6
src/app/pages/auth/AuthLayout.tsx
View file

@ -20,7 +20,7 @@ import {
} from '../../hooks/useClientConfig'; } from '../../hooks/useClientConfig';
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback'; import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
import { LOGIN_PATH, REGISTER_PATH, RESET_PASSWORD_PATH } from '../paths'; 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 { ServerPicker } from './ServerPicker';
import { AutoDiscoveryAction, autoDiscovery } from '../../cs-api'; import { AutoDiscoveryAction, autoDiscovery } from '../../cs-api';
import { SpecVersionsLoader } from '../../components/SpecVersionsLoader'; import { SpecVersionsLoader } from '../../components/SpecVersionsLoader';
@ -134,8 +134,8 @@ export function AuthLayout() {
<Box direction="Column" className={css.AuthCard}> <Box direction="Column" className={css.AuthCard}>
<Header className={css.AuthHeader} size="600" variant="Surface"> <Header className={css.AuthHeader} size="600" variant="Surface">
<Box grow="Yes" direction="Row" gap="300" alignItems="Center"> <Box grow="Yes" direction="Row" gap="300" alignItems="Center">
<img className={css.AuthLogo} src={CinnySVG} alt="Cinny Logo" /> <img className={css.AuthLogo} src={ClovrLabsLogo} alt="Clovr Labs Logo" />
<Text size="H3">Cinny</Text> <Text size="H3">Clovr Labs</Text>
</Box> </Box>
</Header> </Header>
<Box className={css.AuthCardContent} direction="Column"> <Box className={css.AuthCardContent} direction="Column">

5
src/app/pages/auth/styles.css.ts
View file

@ -26,10 +26,9 @@ export const AuthCard = style({
export const AuthLogo = style([ export const AuthLogo = style([
DefaultReset, DefaultReset,
{ {
width: toRem(26), width: '105px',
height: toRem(26), height: 'auto',
borderRadius: '50%',
}, },
]); ]);

20
src/app/pages/client/WelcomePage.tsx
View file

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

62
src/colors.css.ts
View file

@ -3,53 +3,53 @@ import { color } from 'folds';
export const silverTheme = createTheme(color, { export const silverTheme = createTheme(color, {
Background: { Background: {
Container: '#DEDEDE', Container: '#FFFFFF',
ContainerHover: '#D3D3D3', ContainerHover: '#F8F8F8',
ContainerActive: '#C7C7C7', ContainerActive: '#F0F0F0',
ContainerLine: '#BBBBBB', ContainerLine: '#DCDCDC',
OnContainer: '#000000', OnContainer: '#000000',
}, },
Surface: { Surface: {
Container: '#EAEAEA', Container: '#FFFFFF',
ContainerHover: '#DEDEDE', ContainerHover: '#F8F8F8',
ContainerActive: '#D3D3D3', ContainerActive: '#F0F0F0',
ContainerLine: '#C7C7C7', ContainerLine: '#DCDCDC',
OnContainer: '#000000', OnContainer: '#000000',
}, },
SurfaceVariant: { SurfaceVariant: {
Container: '#DEDEDE', Container: '#F8F8F8',
ContainerHover: '#D3D3D3', ContainerHover: '#F0F0F0',
ContainerActive: '#C7C7C7', ContainerActive: '#E8E8E8',
ContainerLine: '#BBBBBB', ContainerLine: '#DCDCDC',
OnContainer: '#000000', OnContainer: '#000000',
}, },
Primary: { Primary: {
Main: '#1245A8', Main: '#000000',
MainHover: '#103E97', MainHover: '#303030',
MainActive: '#0F3B8F', MainActive: '#5A5A5A',
MainLine: '#0E3786', MainLine: '#000000',
OnMain: '#FFFFFF', OnMain: '#FFFFFF',
Container: '#C4D0E9', Container: '#F0F0F0',
ContainerHover: '#B8C7E5', ContainerHover: '#E8E8E8',
ContainerActive: '#ACBEE1', ContainerActive: '#DCDCDC',
ContainerLine: '#A0B5DC', ContainerLine: '#C0C0C0',
OnContainer: '#0D3076', OnContainer: '#000000',
}, },
Secondary: { Secondary: {
Main: '#000000', Main: '#5A5A5A',
MainHover: '#171717', MainHover: '#303030',
MainActive: '#232323', MainActive: '#000000',
MainLine: '#2F2F2F', MainLine: '#5A5A5A',
OnMain: '#EAEAEA', OnMain: '#FFFFFF',
Container: '#C7C7C7', Container: '#DCDCDC',
ContainerHover: '#BBBBBB', ContainerHover: '#C0C0C0',
ContainerActive: '#AFAFAF', ContainerActive: '#A8A8A8',
ContainerLine: '#A4A4A4', ContainerLine: '#909090',
OnContainer: '#0C0C0C', OnContainer: '#000000',
}, },
Success: { Success: {

24
src/index.scss
View file

@ -1,5 +1,7 @@
@use './app/partials/screen'; @use './app/partials/screen';
@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');
@font-face { @font-face {
font-family: Twemoji; font-family: Twemoji;
src: url('../public/font/Twemoji.Mozilla.v15.1.0.woff2'), src: url('../public/font/Twemoji.Mozilla.v15.1.0.woff2'),
@ -11,18 +13,18 @@
/* background color | --bg-[background type]: value */ /* background color | --bg-[background type]: value */
--bg-surface: #ffffff; --bg-surface: #ffffff;
--bg-surface-transparent: #ffffff00; --bg-surface-transparent: #ffffff00;
--bg-surface-low: #f6f6f6; --bg-surface-low: #ffffff;
--bg-surface-low-transparent: #f6f6f600; --bg-surface-low-transparent: #ffffff00;
--bg-surface-extra-low: #f6f6f6; --bg-surface-extra-low: #f8f8f8;
--bg-surface-extra-low-transparent: #f6f6f600; --bg-surface-extra-low-transparent: #f8f8f800;
--bg-surface-hover: rgba(0, 0, 0, 3%); --bg-surface-hover: rgba(0, 0, 0, 3%);
--bg-surface-active: rgba(0, 0, 0, 5%); --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: rgb(0, 0, 0);
--bg-primary-hover: rgba(18, 69, 168, 80%); --bg-primary-hover: rgba(0, 0, 0, 80%);
--bg-primary-active: rgba(18, 69, 168, 70%); --bg-primary-active: rgba(0, 0, 0, 70%);
--bg-primary-border: rgba(18, 69, 168, 38%); --bg-primary-border: rgba(0, 0, 0, 20%);
--bg-positive: rgb(1, 115, 67); --bg-positive: rgb(1, 115, 67);
--bg-positive-hover: rgba(1, 115, 67, 8%); --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); --fluid-slide-up: cubic-bezier(0.13, 0.56, 0.25, 0.99);
--font-emoji: 'Twemoji_DISABLED'; --font-emoji: 'Twemoji_DISABLED';
--font-primary: 'InterVariable', var(--font-emoji), sans-serif; --font-primary: 'Questrial', var(--font-emoji), sans-serif;
--font-secondary: 'InterVariable', var(--font-emoji), sans-serif; --font-secondary: 'Questrial', var(--font-emoji), sans-serif;
} }
.silver-theme { .silver-theme {