message hover effect

spacebarchat · Aug 12, 2023 · d7bd977 · d7bd977
1 parent 0648dd9
commit d7bd977
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/src/components/Message.tsx b/src/components/Message.tsx
@@ -12,9 +12,13 @@ const MessageListItem = styled.li``;
 const Container = styled.div<{ isHeader?: boolean }>`
 	display: flex;
 	flex-direction: row;
-	padding: 2px 12px;
+	padding: ${(props) => (props.isHeader ? "4" : "2")}px 12px;
 	align-items: center;
 	margin-top: ${(props) => (props.isHeader ? "20px" : undefined)};
+
+	&:hover {
+		background-color: var(--background-primary-highlight);
+	}
 `;
 
 const MessageContentContainer = styled.div<{ isHeader?: boolean }>`

diff --git a/src/contexts/Theme.tsx b/src/contexts/Theme.tsx
@@ -5,6 +5,7 @@ import { useAppStore } from "../stores/AppStore";
 export type ThemeVariables =
 	| "backgroundPrimary"
 	| "backgroundPrimaryAlt"
+	| "backgroundPrimaryHighlight"
 	| "backgroundSecondary"
 	| "backgroundSecondaryAlt"
 	| "backgroundSecondaryHighlight"
@@ -52,6 +53,7 @@ export const ThemePresets: Record<string, Theme> = {
 	light: {
 		backgroundPrimary: "#ffffff",
 		backgroundPrimaryAlt: "",
+		backgroundPrimaryHighlight: "",
 		backgroundSecondary: "#ebe5e4",
 		backgroundSecondaryAlt: "#ebe5e4",
 		backgroundSecondaryHighlight: "#ebe5e4",
@@ -90,6 +92,7 @@ export const ThemePresets: Record<string, Theme> = {
 	dark: {
 		backgroundPrimary: "#2e2e2e",
 		backgroundPrimaryAlt: "#2a2a2a",
+		backgroundPrimaryHighlight: "#262626",
 		backgroundSecondary: "#232323",
 		backgroundSecondaryAlt: "#1e1e1e",
 		backgroundSecondaryHighlight: "#383838",