Fix UI issues

buttercup · Jun 14, 2024 · 63000a1 · 63000a1
1 parent 96bb9ff
commit 63000a1
Show file tree

Hide file tree

Showing 9 changed files with 134 additions and 24 deletions.
diff --git 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
@@ -101,7 +101,7 @@ export const EntriesList = ({ className }: EntriesListProps) => {
                 {entries.length === 0 && trashSelected && (
                     <NonIdealState title={t("vault-ui.entries-list.trash-empty")} icon="trash" />
                 )}
-                {entries.length === 0 && filters.term && !trashSelected && (
+                {entries.length === 0 && !filters.term && !trashSelected && (
                     <NonIdealState
                         title={t("vault-ui.entries-list.no-entries")}
                         description={t("vault-ui.entries-list.create-one-cta")}

diff --git a/source/renderer/components/vault/Entry.tsx b/source/renderer/components/vault/Entry.tsx
@@ -114,7 +114,7 @@ const ContentWrapper = styled.div`
 export function Entry({ entry, selected, onClick, innerRef, ...props }) {
     const [contextMenuOpen, setContextMenuVisibility] = useState(false);
     const { groups, onMoveEntryToGroup, onMoveEntryToTrash, trashID } = useGroups();
-    const { iconsEnabled, iconsPath, readOnly } = useContext(VaultContext);
+    const { iconsEnabled, readOnly } = useContext(VaultContext);
     const mounted = useRef(false);
 
     useEffect(() => {
@@ -206,7 +206,6 @@ export function Entry({ entry, selected, onClick, innerRef, ...props }) {
             <ImageWrapper>
                 <SiteIcon
                     domain={iconsEnabled ? getEntryDomain(entry) : null}
-                    iconPath={iconsPath}
                     type={entry.type || DEFAULT_ENTRY_TYPE}
                 />
             </ImageWrapper>

diff --git 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<HTMLImageElement | null>(null);
     const [dynamicState, setDynamicState] = useState(DYNAMIC_STATE_LOADING);
     const onImgError = useMemo(
@@ -67,16 +66,12 @@ export function SiteIcon(props) {
     }, [imgRef.current]);
     return (
         <IconContainer className={className}>
-            {dynamicState === DYNAMIC_STATE_LOADED || dynamicState === DYNAMIC_STATE_LOADING && (
+            {(dynamicState === DYNAMIC_STATE_LOADED || dynamicState === DYNAMIC_STATE_LOADING) && (
                 <img ref={imgRef} loading="lazy" />
             )}
-            {dynamicState === DYNAMIC_STATE_FAILED || dynamicState === DYNAMIC_STATE_LOADING && (
+            {(dynamicState === DYNAMIC_STATE_FAILED || dynamicState === DYNAMIC_STATE_LOADING) && (
                 <FallbackIcon
-                    src={
-                        iconPath
-                            ? path.join(iconPath, path.basename(ICON_TYPES[type]))
-                            : ICON_TYPES[type]
-                    }
+                    src={ICON_TYPES[type]}
                     dynamicLoading={dynamicState === DYNAMIC_STATE_LOADING}
                 />
             )}

diff --git 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<string, string> | null,
     children?: React.ReactNode;
     icons?: boolean;
-    iconsPath?: string | null;
     onAddAttachments: (entryID: EntryID, files: Array<File>) => Promise<void>;
     onDeleteAttachment: (entryID: EntryID, attachmentID: string) => Promise<void>;
     onDownloadAttachment: (entryID: EntryID, attachmentID: string) => Promise<void>;
@@ -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
@@ -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 = () => {
                 <Allotment.Pane>
                     <GroupsList />
                 </Allotment.Pane>
-                <Allotment.Pane>
+                <Allotment.Pane className="split-pane-entries">
                     <EntriesList />
                 </Allotment.Pane>
-                <Allotment.Pane>
+                <Allotment.Pane className="split-pane-entry-details">
                     <EntryDetails />
                 </Allotment.Pane>
             </Allotment>

diff --git 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
@@ -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
@@ -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,