danvics/Handy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(overlay): update recording overlay theme to pink palette

Browse source
This commit is contained in:
Vlad Gerasimov 2025-08-02 18:26:31 +04:00
parent 949be1b785
commit 3862e23cef
5 changed files with 14 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src-tauri/src/utils.rs
View file

@ -325,7 +325,7 @@ pub fn create_recording_overlay(app_handle: &AppHandle) {
if let Ok(monitors) = app_handle.primary_monitor() { if let Ok(monitors) = app_handle.primary_monitor() {
if let Some(monitor) = monitors { if let Some(monitor) = monitors {
const OVERLAY_WIDTH: f64 = 172.0; const OVERLAY_WIDTH: f64 = 172.0;
const OVERLAY_HEIGHT: f64 = 00.0; const OVERLAY_HEIGHT: f64 = 40.0;
// Platform-specific bottom offset // Platform-specific bottom offset
#[cfg(target_os = "windows")] #[cfg(target_os = "windows")]
@ -352,7 +352,7 @@ pub fn create_recording_overlay(app_handle: &AppHandle) {
.title("Recording") .title("Recording")
.position(x, y) .position(x, y)
.resizable(false) .resizable(false)
.inner_size(172.0, 40.0) .inner_size(OVERLAY_WIDTH, OVERLAY_HEIGHT)
.shadow(false) .shadow(false)
.maximizable(false) .maximizable(false)
.minimizable(false) .minimizable(false)

1
src/App.css
View file

@ -3,6 +3,7 @@
@theme { @theme {
--color-text: #0f0f0f; --color-text: #0f0f0f;
--color-background: #fbfbfb; --color-background: #fbfbfb;
--color-background-ui: #DA5893;
--color-logo-primary: #FAA2CA; --color-logo-primary: #FAA2CA;
--color-logo-stroke: #382731; --color-logo-stroke: #382731;
--color-text-stroke: #f6f6f6; --color-text-stroke: #f6f6f6;

2
src/components/ui/ToggleSwitch.tsx
View file

@ -38,7 +38,7 @@ export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
disabled={disabled || isUpdating} disabled={disabled || isUpdating}
onChange={(e) => onChange(e.target.checked)} onChange={(e) => onChange(e.target.checked)}
/> />
<div className="relative w-11 h-6 bg-mid-gray/20 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-logo-primary rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-logo-primary peer-disabled:opacity-50"></div> <div className="relative w-11 h-6 bg-mid-gray/20 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-logo-primary rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-background-ui peer-disabled:opacity-50"></div>
</label> </label>
{isUpdating && ( {isUpdating && (
<div className="absolute inset-0 flex items-center justify-center"> <div className="absolute inset-0 flex items-center justify-center">

13
src/overlay/RecordingOverlay.css
View file

@ -6,7 +6,7 @@
align-items: center; align-items: center;
padding-left: 6px; padding-left: 6px;
padding-right: 6px; padding-right: 6px;
background: rgba(0, 0, 0, 0.6); background: #DA5893DD;
border-radius: 24px; border-radius: 24px;
opacity: 0; opacity: 0;
transition: opacity 300ms ease-out; transition: opacity 300ms ease-out;
@ -40,9 +40,9 @@
.bar { .bar {
width: 6px; width: 6px;
background: linear-gradient(to top, #faa2ca, #f28cbb); background: #FFE5EE;
max-height: 28px; max-height: 28px;
border-radius: 4px; border-radius: 2px;
transition: height 80ms linear; transition: height 80ms linear;
min-height: 4px; min-height: 4px;
} }
@ -52,9 +52,8 @@
} }
.transcribing-text { .transcribing-text {
color: #faa2ca; color: white;
font-size: 14px; font-size: 14px;
font-weight: 600;
font-family: font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
animation: transcribing-pulse 1.5s infinite ease-in-out; animation: transcribing-pulse 1.5s infinite ease-in-out;
@ -74,7 +73,7 @@
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
background: #e53e3e; background: white;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -86,7 +85,7 @@
} }
.cancel-button:hover { .cancel-button:hover {
background: #c53030; background: #FFDCEC;
transform: scale(1.05); transform: scale(1.05);
} }

8
src/overlay/RecordingOverlay.tsx
View file

@ -1,7 +1,7 @@
import React, { useEffect, useState, useRef } from "react";
import "./RecordingOverlay.css";
import { listen } from "@tauri-apps/api/event";
import { invoke } from "@tauri-apps/api/core"; import { invoke } from "@tauri-apps/api/core";
import { listen } from "@tauri-apps/api/event";
import React, { useEffect, useRef, useState } from "react";
import "./RecordingOverlay.css";
type OverlayState = "recording" | "transcribing"; type OverlayState = "recording" | "transcribing";
@ -105,7 +105,7 @@ const RecordingOverlay: React.FC = () => {
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"> <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
<path <path
d="M9 3L3 9M3 3L9 9" d="M9 3L3 9M3 3L9 9"
stroke="white" stroke="#843358"
strokeWidth="2" strokeWidth="2"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"