Fix styled import and component exports.

src/App.tsx

@@ -24,36 +24,36 @@ SOFTWARE.
 
 import * as React from "react";
 import "./App.css";
-import styled from "styled-components";
 import classNames from "classnames";
 import { appWindow } from "@tauri-apps/api/window";
 import notify from "devextreme/ui/notify";
 import { exit } from "@tauri-apps/api/process";
 import { ask } from "@tauri-apps/api/dialog";
 import dxTreeList, { Node } from "devextreme/ui/tree_list";
+import { styled } from "styled-components";
 import { Locales, setLocale, useLocalize } from "./i18n";
-import EditEntryPopup from "./components/software/popups/EditEntryPopup";
 import { DataEntry } from "./types/PasswordEntry";
 import { DialogButtons, DialogResult, FileQueryMode, ModifyType, PopupType } from "./types/Enums";
 import { deleteEntryOrCategory, newEntry, updateDataSource } from "./misc/DataUtils";
 import { setTheme } from "./utilities/ThemeUtils";
-import EntryEditor from "./components/software/EntryEditor";
-import EditCategoryPopup from "./components/software/popups/EditCategoryPopup";
 import { useSecureStorage } from "./utilities/hooks";
-import StyledTitle from "./components/app/WindowTitle";
 import { loadFile, saveFile } from "./utilities/app/Files";
-import AppMenuToolbar from "./components/app/AppMenuToolbar";
-import PasswordList from "./components/reusable/PasswordList";
-import OpenSaveFilePopup from "./components/software/popups/OpenSaveFilePopup";
-import ConfirmPopup from "./components/software/popups/ConfirmPopup";
-import PreferencesPopup from "./components/software/popups/PreferencesPopup";
 import { Settings, loadSettings, saveSettings } from "./types/Settings";
-import AboutPopup from "./components/software/popups/AboutPopup";
-import LockScreenOverlay from "./components/reusable/LockScreenOverlay";
-import QueryPasswordPopup from "./components/software/popups/QueryPasswordPopup";
-import useTimeout, { TimeInterval } from "./hooks/UseTimeout";
+import { TimeInterval, useTimeout } from "./hooks/UseTimeout";
 import { CommonProps } from "./components/Types";
 import { SearchMode, SearchTextBoxValue } from "./components/reusable/inputs/SearchTextBox";
+import { StyledOpenSaveFilePopup } from "./components/software/popups/OpenSaveFilePopup";
+import { StyledEditEntryPopup } from "./components/software/popups/EditEntryPopup";
+import { StyledAppMenuToolbar } from "./components/app/AppMenuToolbar";
+import { StyledTitle } from "./components/app/WindowTitle";
+import { StyledPasswordList } from "./components/reusable/PasswordList";
+import { StyledEntryEditor } from "./components/software/EntryEditor";
+import { StyledEditCategoryPopup } from "./components/software/popups/EditCategoryPopup";
+import { StyledConfirmPopup } from "./components/software/popups/ConfirmPopup";
+import { StyledPreferencesPopup } from "./components/software/popups/PreferencesPopup";
+import { StyledAboutPopup } from "./components/software/popups/AboutPopup";
+import { StyledLockScreenOverlay } from "./components/reusable/LockScreenOverlay";
+import { StyledQueryPasswordPopup } from "./components/software/popups/QueryPasswordPopup";
 
 /**
  * The props for the {@link App} component.
@@ -541,7 +541,7 @@ const App = ({ className }: AppProps) => {
                 onClose={fileSaveQueryAbortCloseCallback}
                 onUserInteraction={resetTimeOut}
             />
-            <AppMenuToolbar //
+            <StyledAppMenuToolbar //
                 entry={entry ?? undefined}
                 searchValue={searchTextBoxValue}
                 searchValueChanged={setSearchTextBoxValue}
@@ -570,15 +570,15 @@ const App = ({ className }: AppProps) => {
                 onKeyUp={resetTimeOut}
             >
                 <div id="mainView" className="App-itemsView">
-                    <PasswordList //
+                    <StyledPasswordList //
                         searchValue={searchTextBoxValue}
                         treeListRef={treeListRef}
                         dataSource={dataSource}
                         setDataSource={setDataSource}
                         className="App-itemsView-list"
                         setEntry={setEntry}
                     />
-                    <EntryEditor //
+                    <StyledEntryEditor //
                         className="App-PasswordEntryEditor"
                         entry={entry}
                         readOnly={true}
@@ -588,59 +588,59 @@ const App = ({ className }: AppProps) => {
                     />
                 </div>
                 {editEntry !== null && (
-                    <EditEntryPopup //
+                    <StyledEditEntryPopup //
                         entry={editEntry}
                         mode={entryEditMode}
                         visible={entryEditVisible}
                         onClose={onEditClose}
                     />
                 )}
                 {editEntry !== null && (
-                    <EditCategoryPopup //
+                    <StyledEditCategoryPopup //
                         entry={editEntry}
                         mode={categoryPopupMode}
                         visible={categoryEditVisible}
                         onClose={onCategoryEditClose}
                     />
                 )}
-                <OpenSaveFilePopup //
+                <StyledOpenSaveFilePopup //
                     visible={fileSaveOpenQueryOpen}
                     onClose={filePopupClose}
                     mode={filePopupMode}
                     currentFile={currentFile}
                 />
-                <ConfirmPopup //
+                <StyledConfirmPopup //
                     visible={dialogVisible}
                     mode={PopupType.Confirm}
                     message={deleteQueryMessage}
                     buttons={DialogButtons.Yes | DialogButtons.No}
                     onClose={deleteCategoryOrEntry}
                 />
-                <ConfirmPopup //
+                <StyledConfirmPopup //
                     visible={saveChangedFileQueryVisible}
                     mode={PopupType.Confirm}
                     message={lm("fileChangedSaveQuery", undefined, { file: currentFile })}
                     buttons={DialogButtons.Yes | DialogButtons.No | DialogButtons.Cancel}
                     onClose={queryFileChangesPopupClosed}
                 />
                 {settingsRef.current && (
-                    <PreferencesPopup //
+                    <StyledPreferencesPopup //
                         visible={preferencesVisible}
                         settings={settingsRef.current}
                         onClose={preferencesClose}
                     />
                 )}
-                <AboutPopup //
+                <StyledAboutPopup //
                     visible={aboutVisible}
                     onClose={aboutClose}
                 />
-                <LockScreenOverlay //
+                <StyledLockScreenOverlay //
                     lockText={lm("programLockedClickToUnlock")}
                     onClick={lockOverlayClick}
                     visible={viewLocked}
                 />
                 {lockPasswordQueryVisible && (
-                    <QueryPasswordPopup //
+                    <StyledQueryPasswordPopup //
                         showCloseButton={false}
                         verifyMode={false}
                         initialShowPassword={false}
@@ -671,7 +671,7 @@ const collapseTree = (tree: dxTreeList | undefined) => {
 
 const searchBoxValueEmpty: SearchTextBoxValue = { value: "", searchMode: SearchMode.Or };
 
-export default styled(App)`
+const StyledApp = styled(App)`
     height: 100%;
     width: 100%;
     display: contents;    
@@ -690,3 +690,5 @@ export default styled(App)`
         width: 40%;
     }    
 `;
+
+export { StyledApp };

src/components/app/AppMenu.tsx

@@ -25,7 +25,7 @@ SOFTWARE.
 import * as React from "react";
 import Menu from "devextreme-react/menu";
 import classNames from "classnames";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { ItemClickEvent } from "devextreme/ui/menu";
 import { useLocalize } from "../../i18n";
 import { DataEntry } from "../../types/PasswordEntry";
@@ -207,8 +207,10 @@ const AppMenu = ({
     );
 };
 
-export default styled(AppMenu)`
+const StyledAppMenu = styled(AppMenu)`
     // Add style(s) here
 `;
 
+export { StyledAppMenu };
+
 export type { MenuData };

src/components/app/AppMenuToolbar.tsx

@@ -24,10 +24,10 @@ SOFTWARE.
 
 import * as React from "react";
 import classNames from "classnames";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { ItemClickEvent } from "devextreme/ui/menu";
-import AppToolbar, { AppToolbarProps } from "./AppToolbar";
-import AppMenu, { AppMenuProps, MenuData } from "./AppMenu";
+import { AppToolbarProps, StyledAppToolbar } from "./AppToolbar";
+import { AppMenuProps, MenuData, StyledAppMenu } from "./AppMenu";
 
 /**
  * The props for the {@link AppMenuToolbar} component.
@@ -150,13 +150,13 @@ const AppMenuToolbar = ({
 
     return (
         <div className={classNames(AppMenuToolbar.name, className)}>
-            <AppMenu //
+            <StyledAppMenu //
                 onItemClick={onItemClick}
                 entry={entry}
                 isNewFile={isNewFile}
                 isfileChanged={isfileChanged}
             />
-            <AppToolbar //
+            <StyledAppToolbar //
                 entry={entry}
                 saveFileClick={saveFileClick}
                 saveFileAsClick={saveFileAsClick}
@@ -174,9 +174,11 @@ const AppMenuToolbar = ({
     );
 };
 
-export default styled(AppMenuToolbar)`
+const StyledAppMenuToolbar = styled(AppMenuToolbar)`
     display: flex;
     flex-direction: column;
     min-height: 0px;
     margin-bottom: 10px;
 `;
+
+export { StyledAppMenuToolbar };

src/components/app/AppToolbar.tsx

@@ -25,12 +25,12 @@ SOFTWARE.
 import * as React from "react";
 import { Button, Toolbar } from "devextreme-react";
 import { Item as ToolbarItem } from "devextreme-react/toolbar";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import classNames from "classnames";
 import { DataEntry } from "../../types/PasswordEntry";
 import { useLocalize } from "../../i18n";
 import { CommonProps } from "../Types";
-import SearchTextBox, { SearchTextBoxValue } from "../reusable/inputs/SearchTextBox";
+import { SearchTextBoxValue, StyledSearchTextBox } from "../reusable/inputs/SearchTextBox";
 
 /**
  * The props for the {@link AppToolbar} component.
@@ -145,7 +145,7 @@ const AppToolbar = ({
                 />
             </ToolbarItem>
             <ToolbarItem location="after">
-                <SearchTextBox value={searchValue} onValueChanged={searchValueChanged} className="AppToolbar-searchBox" />
+                <StyledSearchTextBox value={searchValue} onValueChanged={searchValueChanged} className="AppToolbar-searchBox" />
             </ToolbarItem>
             {testClick && (
                 <ToolbarItem location="before">
@@ -160,8 +160,10 @@ const AppToolbar = ({
     );
 };
 
-export default styled(AppToolbar)`
+const StyledAppToolbar = styled(AppToolbar)`
     .AppToolbar-searchBox {
         width: 450px;
     }
 `;
+
+export { StyledAppToolbar };

src/components/app/WindowTitle.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { appWindow } from "@tauri-apps/api/window";
 import classNames from "classnames";
 import { useLocalize } from "../../i18n";
@@ -219,4 +219,4 @@ const StyledTitle = styled(WindowTitle)`
     }
 `;
 
-export default StyledTitle;
+export { StyledTitle };

src/components/reusable/LockScreenOverlay.tsx

@@ -24,7 +24,7 @@ SOFTWARE.
 
 import * as React from "react";
 import classNames from "classnames";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { CommonProps } from "../Types";
 
 /**
@@ -103,7 +103,7 @@ const hexOpacityToRgba = (color: string, opacity: number) => {
     return `rgba(${Number.parseInt(r, 16)},${Number.parseInt(g, 16)},${Number.parseInt(b, 16)},${opacity})`;
 };
 
-export default styled(LockScreenOverlay)`
+const StyledLockScreenOverlay = styled(LockScreenOverlay)`
     // CSS Styling derived from: https://medium.com/before-semicolon/how-to-create-custom-modal-dialog-in-react-108b83e5a501
     position: fixed;
     z-index: 100;
@@ -120,3 +120,5 @@ export default styled(LockScreenOverlay)`
     justify-content: center;
     flex-wrap: wrap;
 `;
+
+export { StyledLockScreenOverlay };

src/components/reusable/PasswordList.tsx

@@ -5,7 +5,7 @@ import { Column, RowDragging, Selection } from "devextreme-react/tree-list";
 import dxTreeList, { Node, RowDraggingChangeEvent, RowDraggingReorderEvent, SelectionChangedEvent, SavingEvent, InitializedEvent } from "devextreme/ui/tree_list";
 import { Template } from "devextreme-react/core/template";
 import classNames from "classnames";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { useLocalize } from "../../i18n";
 import { DataEntry } from "../../types/PasswordEntry";
 import { CommonProps, DxFilter } from "../Types";
@@ -248,10 +248,12 @@ const reorderData = (e: RowDraggingReorderEvent, dataSource: Array<DataEntry>) =
     return newData;
 };
 
-export default styled(PasswordList)`
+const StyledPasswordList = styled(PasswordList)`
     .PasswordList-imageCell {
         display: flex;
         align-items: center;
         flex-flow: column;
     }
 `;
+
+export { StyledPasswordList };

src/components/reusable/inputs/PasswordTextBox.tsx

@@ -27,7 +27,7 @@ import Button from "devextreme-react/button";
 import TextBox from "devextreme-react/text-box";
 import dxTextBox, { InitializedEvent, KeyDownEvent, ValueChangedEvent } from "devextreme/ui/text_box";
 import * as React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import notify from "devextreme/ui/notify";
 import { useLocalize } from "../../../i18n";
 import { CommonProps } from "../../Types";
@@ -194,7 +194,7 @@ const generatePassword = (length = 12) => {
     return pass;
 };
 
-export default styled(PasswordTextBox)`
+const StyledPasswordTextBox = styled(PasswordTextBox)`
     display: flex;
     flex-direction: row;
     .PasswordTextBox-textBox {
@@ -204,3 +204,5 @@ export default styled(PasswordTextBox)`
         margin-left: 6px;
     }
 `;
+
+export { StyledPasswordTextBox };

src/components/reusable/inputs/SearchTextBox.tsx

@@ -27,7 +27,7 @@ import Button from "devextreme-react/button";
 import TextBox from "devextreme-react/text-box";
 import dxTextBox, { InitializedEvent, KeyDownEvent, ValueChangedEvent } from "devextreme/ui/text_box";
 import * as React from "react";
-import styled from "styled-components";
+import { styled } from "styled-components";
 import { useLocalize } from "../../../i18n";
 import { CommonProps } from "../../Types";
 
@@ -129,7 +129,7 @@ const SearchTextBox = ({
     );
 };
 
-export default styled(SearchTextBox)`
+const StyledSearchTextBox = styled(SearchTextBox)`
     display: flex;
     flex-direction: row;
     .SearchTextBox-textBox {
@@ -151,3 +151,5 @@ export default styled(SearchTextBox)`
         margin-right: 6px;
     }
 `;
+
+export { StyledSearchTextBox };