Styling of home

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