mirror/Vencord
1
0
Fork 0
mirror of https://github.com/Vendicated/Vencord.git synced 2025-02-24 15:35:11 +00:00
Code Issues Projects Releases Packages Wiki Activity

improve styles

Browse source
This commit is contained in:
Elvyra 2025-01-14 19:30:07 +01:00
parent e6188b7cc5
commit 9205b5d900
2 changed files with 20 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/SearchModal.css
View file

@ -50,3 +50,18 @@
display: flex; display: flex;
align-items: center align-items: center
} }
.vc-search-modal-header-text {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
margin-bottom: 8px;
}
.vc-search-modal-no-results-container {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}

16
src/components/SearchModal.tsx
View file

@ -637,7 +637,7 @@ export default function SearchModal({ modalProps, onSubmit, input, searchType =
else throw new Error("Unknown type " + type); else throw new Error("Unknown type " + type);
}, [results, selectedDestinationKeys, handleToggleDestination]); }, [results, selectedDestinationKeys, handleToggleDestination]);
const navRef = useRef(null); const navRef = useRef(null);
const nav = createNavigator(cl("search-modal"), navRef); const nav = createNavigator(cl("nav"), navRef);
return navigatorWrapper({ return navigatorWrapper({
navigator: nav, navigator: nav,
@ -684,20 +684,14 @@ export default function SearchModal({ modalProps, onSubmit, input, searchType =
return ( return (
<ModalRoot {...modalProps} size={ModalSize.SMALL} className={cl("search-modal")}> <ModalRoot {...modalProps} size={ModalSize.SMALL}>
<ModalHeader <ModalHeader
className={cl("search-modal-header")} className={cl("header")}
direction={Flex.Direction.VERTICAL} direction={Flex.Direction.VERTICAL}
align={Flex.Align.START} align={Flex.Align.START}
justify={Flex.Justify.BETWEEN} justify={Flex.Justify.BETWEEN}
> >
<div style={{ <div className={cl("header-text")}>
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
width: "100%",
marginBottom: "8px"
}}>
<div style={{ display: "flex", flexDirection: "column", gap: "4px" }}> <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
<Heading variant="heading-lg/semibold" <Heading variant="heading-lg/semibold"
style={{ flexGrow: 1 }}>{"Search for " + searchTypeToText(searchType)}</Heading> style={{ flexGrow: 1 }}>{"Search for " + searchTypeToText(searchType)}</Heading>
@ -728,7 +722,7 @@ export default function SearchModal({ modalProps, onSubmit, input, searchType =
rowData={results} rowData={results}
handleToggleDestination={setSelectedCallback} handleToggleDestination={setSelectedCallback}
/> : <ModalContent className={cl("no-results")}> /> : <ModalContent className={cl("no-results")}>
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: "20px" }}> <div className={cl("no-results-container")}>
<svg <svg
width="48" width="48"
height="48" height="48"