fix: Improve Setting panel styling

thien-do · Aug 10, 2022 · 1df5b25 · 1df5b25
1 parent b4b7845
commit 1df5b25
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 115 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,14 +18,14 @@
     "typescript-plugin-css-modules": "^3.4.0"
   },
   "dependencies": {
+    "@floating-ui/react-dom": "^1.0.0",
     "@headlessui/react": "^1.6.6",
     "@primer/octicons-react": "^17.4.0",
     "@rose-pine/palette": "^3.0.1",
     "monaco-editor": "^0.31.0",
     "monaco-vim": "^0.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-popper": "^2.3.0",
     "rehype-dom-stringify": "^3.0.1",
     "rehype-source-map": "^1.0.1",
     "remark-gfm": "^3.0.1",

diff --git a/src/web/settings/panel.module.css b/src/web/settings/panel.module.css
@@ -1,22 +1,24 @@
 .wrapper {
   /* Reliable offset to anchor and screen */
-  padding: 8px;
+  padding: 6px;
 }
 
 .container {
   width: 320px;
-  max-height: 80vh;
+  max-height: 70vh;
   overflow: auto;
 
+  padding: 18px;
+  /* inner radius + padding / 2 */
+  border-radius: calc(6px + 18px / 2);
+
   background-color: rgba(var(--color-surface-rgb), 0.7);
   backdrop-filter: blur(20px);
-  border-radius: calc(12px + 16px / 2);
   border: solid 1px var(--color-highlightHigh);
 
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  padding: 16px;
+  gap: 18px;
 
   box-shadow: 0 1px 2px rgba(0, 0, 0, var(--shadow-opacity)),
     0 2px 4px rgba(0, 0, 0, var(--shadow-opacity)),
@@ -26,17 +28,7 @@
     0 32px 64px rgba(0, 0, 0, var(--shadow-opacity));
 }
 
-.group {
-  padding: 6px;
-  /* background-color: var(--color-surface); */
-  border-radius: calc(9px + 6px / 2);
-
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.line {
-  border: none;
-  border-bottom: solid 1px var(--color-highlightMed);
+.item + .item {
+  border-top: solid 1px var(--color-highlightMed);
+  padding-top: 18px;
 }
diff --git a/src/web/settings/panel.tsx b/src/web/settings/panel.tsx
@@ -13,19 +13,17 @@ export const SettingsPanel = (props: Props): JSX.Element => {
   return (
     <div className={s.wrapper}>
       <div className={s.container}>
-        <div className={s.group}>
-          <SettingsTheme {...props} />
-        </div>
-        <div className={s.group}>
-          <SettingsPreview {...props} />
-        </div>
-        <div className={s.group}>
-          <SettingsVim {...props} />
-          <hr className={s.line} />
-          <SettingsWrapColumn {...props} />
-          <hr className={s.line} />
-          <SettingsFontSize {...props} />
-        </div>
+        {[
+          <SettingsTheme {...props} />,
+          <SettingsPreview {...props} />,
+          <SettingsVim {...props} />,
+          <SettingsWrapColumn {...props} />,
+          <SettingsFontSize {...props} />,
+        ].map((element, index) => (
+          <div className={s.item} key={index}>
+            {element}
+          </div>
+        ))}
       </div>
     </div>
   );

diff --git a/src/web/settings/preview/icon.module.css b/src/web/settings/preview/icon.module.css
@@ -1,7 +1,6 @@
 .container {
   padding: 12px 0;
-  background-color: var(--color-surface);
-  border-radius: 6px;
+  background-color: var(--color-base);
   display: flex;
   width: 72px;
   justify-content: center;

diff --git a/src/web/settings/radio/group.module.css b/src/web/settings/radio/group.module.css
@@ -9,5 +9,4 @@
 }
 
 .label {
-  padding: 6px;
 }
diff --git a/src/web/settings/radio/option.module.css b/src/web/settings/radio/option.module.css
@@ -2,10 +2,9 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
-
+  gap: 6px;
   padding: 6px;
-  border-radius: calc(6px + 6px / 2);
+  border-radius: 6px;
 }
 
 .label {
@@ -20,8 +19,9 @@
 }
 
 .icon {
-  border-radius: 6px;
   overflow: hidden;
+  /* outer radius - padding / 2 */
+  border-radius: calc(6px - 6px / 2);
 }
 
 .selected {

diff --git a/src/web/toolbar/button/button.module.css b/src/web/toolbar/button/button.module.css
@@ -1,7 +1,7 @@
 .button {
   background: none;
   border: none;
-  padding: 8px;
+  padding: 8px 9px;
   border-radius: 6px;
   color: var(--color-subtle);
 }

diff --git a/src/web/toolbar/settings/settings.tsx b/src/web/toolbar/settings/settings.tsx
@@ -1,7 +1,6 @@
+import { shift, useFloating } from "@floating-ui/react-dom";
 import { Popover } from "@headlessui/react";
 import { GearIcon } from "@primer/octicons-react";
-import { useState } from "react";
-import { usePopper } from "react-popper";
 import { LayoutState } from "../../layout/type";
 import { SettingsPanel } from "../../settings/panel";
 import { SettingsState } from "../../settings/type";
@@ -10,25 +9,26 @@ import { ToolbarButton } from "./../button/button";
 interface Props extends SettingsState, LayoutState {}
 
 export const ToolbarSettings = (props: Props): JSX.Element => {
-  const [button, setButton] = useState<HTMLElement | null>(null);
-  const [popover, setPopover] = useState<HTMLElement | null>(null);
-  const { styles, attributes } = usePopper(button, popover);
+  const float = useFloating({ middleware: [shift()] });
 
   return (
     <Popover>
       {({ open }) => (
         <>
           <ToolbarButton
-            ref={setButton}
+            ref={float.reference}
             as={Popover.Button}
             Icon={GearIcon}
             label="Settings"
             selected={open}
           />
           <Popover.Panel
-            ref={setPopover}
-            style={styles.popper}
-            {...attributes.popper}
+            ref={float.floating}
+            style={{
+              position: float.strategy,
+              top: float.y ?? 0,
+              left: float.x ?? 0,
+            }}
           >
             <SettingsPanel {...props} />
           </Popover.Panel>
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,5 +9,4 @@ @@
     }
     .label {
-      padding: 6px;
     }