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

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

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

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

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

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

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

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

62
src/colors.css.ts
View file

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

24
src/index.scss
View file

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