From 63000a178d1143b5cc968d7184c5c6492882cc94 Mon Sep 17 00:00:00 2001 From: Perry Mitchell Date: Fri, 14 Jun 2024 20:14:29 +0300 Subject: [PATCH] Fix UI issues --- source/renderer/components/VaultEditor.tsx | 1 - .../renderer/components/vault/EntriesList.tsx | 2 +- source/renderer/components/vault/Entry.tsx | 3 +- source/renderer/components/vault/SiteIcon.tsx | 13 +- .../components/vault/VaultContext.tsx | 4 - source/renderer/components/vault/VaultUI.tsx | 5 +- .../components/vault/styles/vault-ui.sass | 6 +- .../renderer/components/vault/utils/theme.ts | 7 +- source/renderer/styles/themes.ts | 117 ++++++++++++++++++ 9 files changed, 134 insertions(+), 24 deletions(-) diff --git a/source/renderer/components/VaultEditor.tsx b/source/renderer/components/VaultEditor.tsx index 8b251481..812c605b 100644 --- a/source/renderer/components/VaultEditor.tsx +++ b/source/renderer/components/VaultEditor.tsx @@ -137,7 +137,6 @@ export function VaultEditor(props: VaultEditorProps) { attachmentsMaxSize={ATTACHMENTS_MAX_SIZE} attachmentPreviews={attachmentPreviews} icons - iconsPath="icons" onAddAttachments={addAttachments} onDeleteAttachment={deleteAttachment} onDownloadAttachment={downloadAttachment} diff --git a/source/renderer/components/vault/EntriesList.tsx b/source/renderer/components/vault/EntriesList.tsx index 93a61444..f7f8b7f3 100644 --- a/source/renderer/components/vault/EntriesList.tsx +++ b/source/renderer/components/vault/EntriesList.tsx @@ -101,7 +101,7 @@ export const EntriesList = ({ className }: EntriesListProps) => { {entries.length === 0 && trashSelected && ( )} - {entries.length === 0 && filters.term && !trashSelected && ( + {entries.length === 0 && !filters.term && !trashSelected && ( { @@ -206,7 +206,6 @@ export function Entry({ entry, selected, onClick, innerRef, ...props }) { diff --git a/source/renderer/components/vault/SiteIcon.tsx b/source/renderer/components/vault/SiteIcon.tsx index 61134213..d9f959ac 100644 --- a/source/renderer/components/vault/SiteIcon.tsx +++ b/source/renderer/components/vault/SiteIcon.tsx @@ -1,7 +1,6 @@ import React, { useEffect, useMemo, useRef, useState } from "react"; import styled from "styled-components"; import { DEFAULT_ENTRY_TYPE, EntryType } from "buttercup"; -import path from "path-posix"; import ICON_LOGIN from "../../../../resources/images/login.png"; import ICON_WEBSITE from "../../../../resources/images/website.png"; import ICON_NOTE from "../../../../resources/images/note.png"; @@ -34,7 +33,7 @@ const IconContainer = styled.div` `; export function SiteIcon(props) { - const { className, domain = null, iconPath = null, type = DEFAULT_ENTRY_TYPE } = props; + const { className, domain = null, type = DEFAULT_ENTRY_TYPE } = props; const imgRef = useRef(null); const [dynamicState, setDynamicState] = useState(DYNAMIC_STATE_LOADING); const onImgError = useMemo( @@ -67,16 +66,12 @@ export function SiteIcon(props) { }, [imgRef.current]); return ( - {dynamicState === DYNAMIC_STATE_LOADED || dynamicState === DYNAMIC_STATE_LOADING && ( + {(dynamicState === DYNAMIC_STATE_LOADED || dynamicState === DYNAMIC_STATE_LOADING) && ( )} - {dynamicState === DYNAMIC_STATE_FAILED || dynamicState === DYNAMIC_STATE_LOADING && ( + {(dynamicState === DYNAMIC_STATE_FAILED || dynamicState === DYNAMIC_STATE_LOADING) && ( )} diff --git a/source/renderer/components/vault/VaultContext.tsx b/source/renderer/components/vault/VaultContext.tsx index 9d510316..f999421c 100644 --- a/source/renderer/components/vault/VaultContext.tsx +++ b/source/renderer/components/vault/VaultContext.tsx @@ -31,7 +31,6 @@ export interface VaultContextState { // Icons iconsEnabled: boolean; - iconsPath: string | null; // Editing readOnly: boolean; @@ -68,7 +67,6 @@ export interface VaultProviderProps { attachmentPreviews?: Record | null, children?: React.ReactNode; icons?: boolean; - iconsPath?: string | null; onAddAttachments: (entryID: EntryID, files: Array) => Promise; onDeleteAttachment: (entryID: EntryID, attachmentID: string) => Promise; onDownloadAttachment: (entryID: EntryID, attachmentID: string) => Promise; @@ -93,7 +91,6 @@ export const VaultProvider = ({ attachmentsMaxSize = Infinity, attachmentPreviews = null, icons = false, - iconsPath = null, onAddAttachments, onDeleteAttachment, onDownloadAttachment, @@ -181,7 +178,6 @@ export const VaultProvider = ({ // Icons iconsEnabled: icons, - iconsPath, // Editing readOnly, diff --git a/source/renderer/components/vault/VaultUI.tsx b/source/renderer/components/vault/VaultUI.tsx index 7bf38279..df6e3510 100644 --- a/source/renderer/components/vault/VaultUI.tsx +++ b/source/renderer/components/vault/VaultUI.tsx @@ -5,7 +5,6 @@ import { EntriesList } from "./EntriesList"; import { EntryDetails } from "./EntryDetails"; import { GroupsList } from "./GroupsList"; -// import "allotment/dist/style.css"; import "./styles/vault-ui.sass"; const GridWrapper = styled.div` @@ -20,10 +19,10 @@ export const VaultUI = () => { - + - + diff --git a/source/renderer/components/vault/styles/vault-ui.sass b/source/renderer/components/vault/styles/vault-ui.sass index 43a73faf..70015db8 100644 --- a/source/renderer/components/vault/styles/vault-ui.sass +++ b/source/renderer/components/vault/styles/vault-ui.sass @@ -19,9 +19,13 @@ $bc-brand-colour-dark: #179E94 .bp4-input:focus, .bp4-input.bp4-active box-shadow: inset 0 0 0 1px $bc-brand-colour, 0 0 0 2px rgba(45, 114, 210, 0.3), inset 0 1px 1px rgba(17, 20, 24, 0.2) - a color: $bc-brand-colour-dark &:hover color: $bc-brand-colour + +// Splitter + +.split-pane-entries, .split-pane-entry-details + background-color: #252A31 //rgb(48, 64, 77); diff --git a/source/renderer/components/vault/utils/theme.ts b/source/renderer/components/vault/utils/theme.ts index dc90b373..5d8670f2 100644 --- a/source/renderer/components/vault/utils/theme.ts +++ b/source/renderer/components/vault/utils/theme.ts @@ -1,7 +1,8 @@ -import { pathOr } from "ramda"; +import nestedProperty from "nested-property"; +import { ExecutionContext } from "styled-components"; -export function getThemeProp(props, propName) { - const res = pathOr(null, ["theme", "vault", ...propName.split("vault-ui..")], props); +export function getThemeProp(props: unknown, propName: string): string { + const res = nestedProperty.get(props, `theme.vault.${propName}`); if (res === null) { console.warn(`No theme value found for \`${propName}\`.`); return "red"; diff --git a/source/renderer/styles/themes.ts b/source/renderer/styles/themes.ts index 6f63dbd6..196a2859 100644 --- a/source/renderer/styles/themes.ts +++ b/source/renderer/styles/themes.ts @@ -16,6 +16,45 @@ interface AppTheme { color: string; }; }; + vault: { + list: { + focusedBackgroundColor: string; + selectedBackgroundColor: string; + selectedTextColor: string; + }; + colors: { + divider: string; + paneDivider: string; + uiBackground: string; + mainPaneBackground: string; + }; + tree: { + selectedBackgroundColor: string; + hoverBackgroundColor: string; + selectedTextColor: string; + selectedIconColor: string; + }; + entry: { + primaryContainer: string; + separatorTextColor: string; + separatorBorder: string; + fieldHoverBorder: string; + }; + attachment: { + dropBackground: string; + dropBorder: string; + dropText: string; + }; + tab: { + background: string; + backgroundSelected: string; + barBackground: string; + border: string; + close: string; + closeBackgroundHover: string; + dropBorder: string; + }; + }; vaultChooser: { selectVaultAnchor: { color: string; @@ -40,6 +79,45 @@ export const THEME_DARK: AppTheme = { color: Colors.LIGHT_GRAY2 } }, + vault: { + list: { + focusedBackgroundColor: Colors.DARK_GRAY5, + selectedBackgroundColor: Colors.TURQUOISE3, + selectedTextColor: "#fff" + }, + colors: { + divider: Colors.DARK_GRAY5, + paneDivider: Colors.GRAY3, + uiBackground: Colors.DARK_GRAY2, + mainPaneBackground: Colors.DARK_GRAY3 + }, + tree: { + selectedBackgroundColor: Colors.DARK_GRAY5, + hoverBackgroundColor: "transparent", + selectedTextColor: Colors.LIGHT_GRAY5, + selectedIconColor: Colors.LIGHT_GRAY5 + }, + entry: { + primaryContainer: Colors.DARK_GRAY3, + separatorTextColor: Colors.GRAY3, + separatorBorder: Colors.GRAY1, + fieldHoverBorder: Colors.GRAY1 + }, + attachment: { + dropBackground: Colors.DARK_GRAY3, + dropBorder: Colors.DARK_GRAY5, + dropText: Colors.GRAY2 + }, + tab: { + background: Colors.DARK_GRAY2, + backgroundSelected: Colors.DARK_GRAY3, + barBackground: Colors.DARK_GRAY1, + border: Colors.GRAY1, + close: Colors.GRAY3, + closeBackgroundHover: Colors.DARK_GRAY5, + dropBorder: Colors.GRAY1 + } + }, vaultChooser: { selectVaultAnchor: { color: Colors.GRAY2, @@ -64,6 +142,45 @@ export const THEME_LIGHT: AppTheme = { color: Colors.GRAY2 } }, + vault: { + list: { + focusedBackgroundColor: Colors.LIGHT_GRAY5, + selectedBackgroundColor: Colors.TURQUOISE3, + selectedTextColor: "#fff" + }, + colors: { + divider: Colors.LIGHT_GRAY4, + paneDivider: Colors.GRAY3, + uiBackground: Colors.LIGHT_GRAY5, + mainPaneBackground: Colors.LIGHT_GRAY4 + }, + tree: { + selectedBackgroundColor: Colors.LIGHT_GRAY2, + hoverBackgroundColor: "transparent", + selectedTextColor: Colors.DARK_GRAY1, + selectedIconColor: Colors.DARK_GRAY5 + }, + entry: { + primaryContainer: Colors.LIGHT_GRAY4, + separatorTextColor: Colors.GRAY3, + separatorBorder: Colors.LIGHT_GRAY2, + fieldHoverBorder: Colors.LIGHT_GRAY1 + }, + attachment: { + dropBackground: Colors.LIGHT_GRAY5, + dropBorder: Colors.LIGHT_GRAY2, + dropText: Colors.GRAY4 + }, + tab: { + background: Colors.LIGHT_GRAY2, + backgroundSelected: Colors.LIGHT_GRAY3, + barBackground: Colors.LIGHT_GRAY4, + border: Colors.GRAY4, + close: Colors.GRAY1, + closeBackgroundHover: Colors.LIGHT_GRAY1, + dropBorder: Colors.GRAY5 + } + }, vaultChooser: { selectVaultAnchor: { color: Colors.GRAY2,