formatting icons: refactor CSS/remove borders

MaxLeiter · Dec 26, 2022 · 0269534 · 0269534
1 parent 69a40df
commit 0269534
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 37 deletions.
diff --git a/src/app/(posts)/components/file-dropdown/dropdown.module.css b/src/app/(posts)/components/file-dropdown/dropdown.module.css
@@ -14,7 +14,6 @@
 
 .contentWrapper {
 	z-index: 1000;
-
 }
 
 .content {
@@ -42,9 +41,7 @@
 	justify-content: space-between;
 	color: var(--dark-gray);
 	text-decoration: none;
-	/* vertical alignment */
 	padding: var(--gap-quarter) 0;
-
 }
 
 .content li .fileIcon {
@@ -53,7 +50,6 @@
 }
 
 .content li .fileTitle {
-	/* from Geist */
 	font-size: calc(0.875 * 16px);
 }
 

diff --git a/src/app/(posts)/components/tabs/index.tsx b/src/app/(posts)/components/tabs/index.tsx
@@ -42,16 +42,23 @@ export default function DocumentTabs({
 			className={styles.root}
 			defaultValue={defaultTab}
 		>
-			<RadixTabs.List className={styles.list}>
-				<RadixTabs.Trigger value="edit" className={styles.trigger}>
-					{isEditing ? "Edit" : "Raw"}
-				</RadixTabs.Trigger>
-				<RadixTabs.Trigger value="preview" className={styles.trigger}>
-					{isEditing ? "Preview" : "Rendered"}
-				</RadixTabs.Trigger>
+			<RadixTabs.List className={styles.listWrapper}>
+				<div className={styles.list}>
+					<RadixTabs.Trigger value="edit" className={styles.trigger}>
+						{isEditing ? "Edit" : "Raw"}
+					</RadixTabs.Trigger>
+					<RadixTabs.Trigger value="preview" className={styles.trigger}>
+						{isEditing ? "Preview" : "Rendered"}
+					</RadixTabs.Trigger>
+				</div>
+				{isEditing && (
+					<FormattingIcons
+						className={styles.formattingIcons}
+						textareaRef={codeEditorRef}
+					/>
+				)}
 			</RadixTabs.List>
 			<RadixTabs.Content value="edit">
-				{isEditing && <FormattingIcons textareaRef={codeEditorRef} />}
 				<div
 					style={{
 						marginTop: 6,

diff --git a/src/app/(posts)/components/tabs/tabs.module.css b/src/app/(posts)/components/tabs/tabs.module.css
@@ -3,11 +3,22 @@
 	flex-direction: column;
 }
 
+.listWrapper {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+}
+
 .list {
 	flex-shrink: 0;
 	display: flex;
 }
 
+.list .formattingIcons {
+	margin-left: auto;
+}
+
 .trigger {
 	width: 80px;
 	height: 30px;
@@ -41,3 +52,11 @@
 	color: var(--darkest-gray);
 	box-shadow: inset 0 -1px 0 0 currentColor, 0 1px 0 0 currentColor;
 }
+
+@media (max-width: 600px) {
+	.listWrapper {
+		flex-direction: column;
+		justify-content: flex-start;
+
+	}
+}
diff --git a/.../components/edit-document-list/edit-document/formatting-icons/formatting-icons.module.css b/.../components/edit-document-list/edit-document/formatting-icons/formatting-icons.module.css
@@ -4,9 +4,7 @@
 }
 
 .actionWrapper .actions {
-	position: absolute;
-	right: 0;
-	top: -40px;
+
 }
 
 /* small screens, top: 0 */

diff --git a/src/app/(posts)/new/components/edit-document-list/edit-document/formatting-icons/index.tsx b/src/app/(posts)/new/components/edit-document-list/edit-document/formatting-icons/index.tsx
@@ -12,12 +12,15 @@ import { TextareaMarkdownRef } from "textarea-markdown-editor"
 import Tooltip from "@components/tooltip"
 import Button from "@components/button"
 import ButtonGroup from "@components/button-group"
+import clsx from "clsx"
 // TODO: clean up
 
 const FormattingIcons = ({
-	textareaRef
+	textareaRef,
+	className
 }: {
 	textareaRef?: RefObject<TextareaMarkdownRef>
+	className?: string
 }) => {
 	const formattingActions = useMemo(() => {
 		const handleBoldClick = () => textareaRef?.current?.trigger("bold")
@@ -62,22 +65,28 @@ const FormattingIcons = ({
 	}, [textareaRef])
 
 	return (
-		<div className={styles.actionWrapper}>
-			<ButtonGroup className={styles.actions}>
-				{formattingActions.map(({ icon, name, action }) => (
-					<Tooltip
-						content={name[0].toUpperCase() + name.slice(1).replace("-", " ")}
-						key={name}
-					>
-						<Button
-							aria-label={name}
-							iconRight={icon}
-							onMouseDown={(e) => e.preventDefault()}
-							onClick={action}
-						/>
-					</Tooltip>
-				))}
-			</ButtonGroup>
+		<div className={clsx(styles.actionWrapper, className)}>
+			{formattingActions.map(({ icon, name, action }) => (
+				<Tooltip
+					content={name[0].toUpperCase() + name.slice(1).replace("-", " ")}
+					key={name}
+				>
+					<Button
+						height={32}
+						style={{
+							fontSize: 14,
+							borderRight: "none",
+							borderLeft: "none",
+							borderTop: "none",
+							borderBottom: "none"
+						}}
+						aria-label={name}
+						iconRight={icon}
+						onMouseDown={(e) => e.preventDefault()}
+						onClick={action}
+					/>
+				</Tooltip>
+			))}
 		</div>
 	)
 }

diff --git a/src/app/(posts)/post/[id]/components/post-files/view-document/index.tsx b/src/app/(posts)/post/[id]/components/post-files/view-document/index.tsx
@@ -84,7 +84,7 @@ const Document = ({ skeleton, ...props }: Props) => {
 
 	// if the query has our title, we can use it to scroll to the file.
 	// we can't use the browsers implementation because the data isn't loaded yet
-	if (title) {
+	if (title && typeof window !== "undefined") {
 		const hash = window.location.hash
 		if (hash && hash === `#${title}`) {
 			const element = document.getElementById(title)

diff --git a/src/app/components/button-group/button-group.module.css b/src/app/components/button-group/button-group.module.css
@@ -14,12 +14,12 @@
 	border-radius: 0 !important;
 }
 
-.button-group > button:first-of-type {
+.button-group button:first-of-type {
 	border-top-left-radius: var(--radius) !important;
 	border-bottom-left-radius: var(--radius) !important;
 }
 
-.button-group > button:last-of-type {
+.button-group button:last-of-type {
 	border-top-right-radius: var(--radius) !important;
 	border-bottom-right-radius: var(--radius) !important;
 }
@@ -29,14 +29,14 @@
 		flex-direction: column !important;
 	}
 
-	.verticalIfMobile.button-group > button:first-of-type {
+	.verticalIfMobile.button-group button:first-of-type {
 		border-top-left-radius: var(--radius) !important;
 		border-top-right-radius: var(--radius) !important;
 		border-bottom-left-radius: 0 !important;
 		border-bottom-right-radius: 0 !important;
 	}
 
-	.verticalIfMobile.button-group > button:last-of-type {
+	.verticalIfMobile.button-group button:last-of-type {
 		border-top-left-radius: 0 !important;
 		border-top-right-radius: 0 !important;
 		border-bottom-left-radius: var(--radius) !important;