Styling of home

components/home/GroupBox/GroupBox.module.css

@@ -1,24 +1,53 @@
 .root {
     position: relative;
-    border: 2px solid black;
     padding: 1em 0.5em;
+    border: 1px solid var(--md-sys-color-outline);
+    background-color: var(--md-sys-color-surface);
+    border-radius: 4px;
+}
+
+.heading {
+    display: inline-block;
+    margin-block-start: 0;
+}
+
+.heading:not(:focus-visible)::after {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background-color: var(--md-sys-color-on-background);
+    content: "";
+    mask: url("/factorio/pencil.svg") no-repeat 50% 50%;
+    opacity: 0.8;
+    padding-inline-start: 0.5em;
 }
 
 .quit {
-    --color: darkred;
+    --color: var(--md-sys-color-error);
+
     position: absolute;
-    right: 1em;
-    top: 1em;
-    border-radius: 999999px;
-    background: transparent;
     border: 1px solid var(--color);
+    background: transparent;
+    border-radius: 999999px;
     color: var(--color);
-    font-weight: 700;
+    font-weight: 500;
+    inset-block-start: 1em;
+    inset-inline-end: 1em;
 }
 
 .quit:is(:focus, :hover) {
-    --color: red;
-    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5));
+    --color: var(--md-ref-palette-error60);
+
+    filter: drop-shadow(0 0 2px var(--md-ref-palette-neutral-variant70));
+}
+
+.label {
+    display: block;
+}
+
+.marginTop {
+    display: block;
+    margin-block-start: 1em;
 }
 
 .flex {
@@ -30,18 +59,3 @@
 .flex > * {
     width: max-content;
 }
-
-@media (prefers-color-scheme: dark) {
-    .root {
-        border-color: gray;
-    }
-
-    .quit {
-        --color: indianred;
-    }
-
-    .quit:is(:focus, :hover) {
-        --color: red;
-        filter: drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.5));
-    }
-}

components/home/GroupBox/GroupBox.tsx

@@ -5,13 +5,14 @@ import styles from './GroupBox.module.css'
 import { EntitySpan } from '../EntitySpan/EntitySpan'
 import { useGroups } from '../../contexts/GroupProvider'
 import { calculateInputs } from '../../../src/calculateInputs'
-import { fixedEncodeURIComponent, uniquify } from '../../../src/utils'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
+import { uniquify } from '../../../src/utils'
 import { useFactories } from '../../contexts/FactoryProvider'
 import { i18n, I18n } from '../../shared/I18n/I18n'
 import { useIntl } from 'react-intl'
-import { GraphIcon } from '../../icons/GraphIcon'
+import { ButtonVisualize } from '../../shared/ButtonVisualize/ButtonVisualize'
+import { Heading } from '../../shared/Heading'
+import typography from '../../../styles/typography.module.css'
+import cx from 'classnames'
 
 interface Props {
   group: Group
@@ -19,7 +20,6 @@ interface Props {
 
 const GroupBoxBase: FC<Props> = ({ group }) => {
   const intl = useIntl()
-  const { query } = useRouter()
   const { factories, findFactory } = useFactories()
   const {
     doNotSuggest,
@@ -33,6 +33,7 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
     getInputType
   } = useGroups()
   const { name, exports, malls } = group
+  const nameForId = useMemo(() => name.replace(/[^a-z\d_-]/gi, ''), [name])
 
   const [isDeleteConfirm, setDeleteConfirm] = useState(false)
 
@@ -79,26 +80,30 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
 
   return (
     <div className={styles.root}>
-      <h3
+      <ButtonVisualize groupId={group.name} />
+      <Heading
+        type={'subsection'}
+        className={styles.heading}
         contentEditable={true}
         suppressContentEditableWarning={true}
         onBlur={event => {
           event.currentTarget.innerText = event.currentTarget.innerText.trim()
           renameGroup(name, event.currentTarget.innerText)
         }}
-      >
-        {name}
-      </h3>
-      <Link
-        href={{
-          pathname: `/visualize/${fixedEncodeURIComponent(group.name)}`,
-          query
+        onKeyDown={event => {
+          if (event.key === 'Enter') {
+            event.preventDefault()
+            event.currentTarget.blur()
+          }
+          if (event.key === 'Escape') {
+            event.preventDefault()
+            event.currentTarget.innerText = name
+            event.currentTarget.blur()
+          }
         }}
       >
-        <a>
-          <GraphIcon />
-        </a>
-      </Link>
+        {name}
+      </Heading>
       <button
         className={styles.quit}
         onBlur={() => setDeleteConfirm(false)}
@@ -107,23 +112,31 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
       >
         {isDeleteConfirm ? i18n(intl, 'page.home.group.delete.confirmation') : 'X'}
       </button>
-      <h4>
-        <I18n id={'page.home.group.item.export'} />
-      </h4>
-      <FactorySelect
-        id={name + '-exports'}
-        factories={exports}
-        onSetFactories={setExportFactories}
-      />
-      <h4>
-        <I18n id={'page.home.group.item.mall'} />
-      </h4>
-      <FactorySelect id={name + '-malls'} factories={malls} onSetFactories={setMallFactories} />
+      <label htmlFor={nameForId + '-exports'} className={styles.label}>
+        <span className={typography.titleMedium}>
+          <I18n id={'page.home.group.item.export'} />
+        </span>
+        <FactorySelect
+          id={nameForId + '-exports'}
+          factories={exports}
+          onSetFactories={setExportFactories}
+        />
+      </label>
+      <label htmlFor={nameForId + '-exports'} className={cx(styles.label, styles.marginTop)}>
+        <span className={typography.titleMedium}>
+          <I18n id={'page.home.group.item.mall'} />
+        </span>
+        <FactorySelect
+          id={nameForId + '-malls'}
+          factories={malls}
+          onSetFactories={setMallFactories}
+        />
+      </label>
       {inputs.length ? (
         <>
-          <h4>
+          <span className={cx(typography.titleMedium, styles.marginTop)}>
             <I18n id={'page.home.group.item.input'} values={{ amount: inputs.length }} />
-          </h4>
+          </span>
           <div className={styles.flex}>
             {inputs.map(input => (
               <EntitySpan
@@ -142,12 +155,12 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
       ) : null}
       {intermediates.length ? (
         <>
-          <h4>
+          <span className={cx(typography.titleMedium, styles.marginTop)}>
             <I18n
               id={'page.home.group.item.intermediate'}
               values={{ amount: intermediates.length }}
             />
-          </h4>
+          </span>
           <div className={styles.flex}>
             {intermediates.map(intermediate => (
               <EntitySpan
@@ -161,9 +174,9 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
       ) : null}
       {suggestionsExport.length ? (
         <>
-          <h4>
+          <span className={cx(typography.titleMedium, styles.marginTop)}>
             <I18n id={'page.home.group.item.suggestion.export'} />
-          </h4>
+          </span>
           <div className={styles.flex}>
             {suggestionsExport.map(suggestion => (
               <EntitySpan
@@ -183,9 +196,9 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
       ) : null}
       {suggestionMall.length ? (
         <>
-          <h4>
+          <span className={cx(typography.titleMedium, styles.marginTop)}>
             <I18n id={'page.home.group.item.suggestion.mall'} />
-          </h4>
+          </span>
           <div className={styles.flex}>
             {suggestionMall.map(suggestion => (
               <EntitySpan