From 243305a7e941064ec2bac8c9e7fbfce7dd01246e Mon Sep 17 00:00:00 2001 From: Rasmus Schlunsen Date: Thu, 26 Jun 2025 13:06:58 +0200 Subject: [PATCH] Feat: Add clovrlabs theme for cinny --- index.html | 20 +++---- public/res/clovrlabs-logo-black.webp | Bin 0 -> 850 bytes src/app/features/settings/about/About.tsx | 18 +++---- src/app/pages/auth/AuthLayout.tsx | 6 +-- src/app/pages/auth/styles.css.ts | 5 +- src/app/pages/client/WelcomePage.tsx | 20 +++---- src/colors.css.ts | 62 +++++++++++----------- src/index.scss | 24 +++++---- 8 files changed, 78 insertions(+), 77 deletions(-) create mode 100644 public/res/clovrlabs-logo-black.webp diff --git a/index.html b/index.html index 9196cf3d..b4588b0e 100644 --- a/index.html +++ b/index.html @@ -4,24 +4,24 @@ - Cinny - - + Clovr Labs + + - - + + @@ -29,8 +29,8 @@ - - + + diff --git a/public/res/clovrlabs-logo-black.webp b/public/res/clovrlabs-logo-black.webp new file mode 100644 index 0000000000000000000000000000000000000000..3e6338c3e49f024b431c00544173f1838c01790b GIT binary patch literal 850 zcmV-Y1Fig0Nk&FW0{{S5MM6+kP&il$0000G00025000;O06|PpNb>>!00EFx+jiVa z7lI%>2!`IQr!Kx7Fdh}b9XNjb9XP2e0sd%HFx)X%fri(_eUwaEyZW?*JJjpF@D*g z0`;1$q=6h@8x?>giPaLW0F+xQgcTNFvv4r1TNj+gY99z~A&ye_9)t>1UE%za1mt^o zjY4G}C7mo+yH9ymHElo(T>>cA$lp>J9UUWk(3z`HYm-)n9rtY@1bRn^lG`y#bQson6V@_65c`UMoQELRZto zJJZEWbwu03SvRXpqpWjn0In;?x0H#my;FJu#7<7%j?^{a)Mp~|W(whCzDo`eOP4N$ z7rj1b%;VCuX&47UO%i~A4K5`X-%{*OfU1?n@&&0oy5kOx&?!&gsRo=M+7_D0!nu$o zIn#7YvoENfRe*2@K9K!Phz<}xqc&+<@M>0PQBs;z-O-{xmjH_PF0bq{#&`nQK(cfU zJa?xJo~PZDM{TnTZL>P6k`&sgthL&@tS>mbXj=nXScsAox-_sL$xfh!22fK7(Sc%j z= Cinny logo - Cinny + Clovr Labs v{cons.version} - Yet another matrix client. + Secure matrix client for teams. diff --git a/src/app/pages/auth/AuthLayout.tsx b/src/app/pages/auth/AuthLayout.tsx index 3943f42d..49437610 100644 --- 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() {
- Cinny Logo - Cinny + Clovr Labs Logo + Clovr Labs
diff --git a/src/app/pages/auth/styles.css.ts b/src/app/pages/auth/styles.css.ts index 5834ad84..ac2370e8 100644 --- 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%', }, ]); diff --git a/src/app/pages/client/WelcomePage.tsx b/src/app/pages/client/WelcomePage.tsx index 645753ff..b1ff619e 100644 --- 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() { > } - title="Welcome to Cinny" + icon={Clovr Labs Logo} + title="Welcome to Clovr Labs" subTitle={ - Yet another matrix client.{' '} + Reach out channel for .{' '} - v4.8.1 + Learn More } @@ -33,25 +33,25 @@ export function WelcomePage() { diff --git a/src/colors.css.ts b/src/colors.css.ts index 268cbf78..ea01c302 100644 --- 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: { diff --git a/src/index.scss b/src/index.scss index 14bf4749..4d1d3c5d 100644 --- 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 {