From 5ec71452033c1ac1f4e63c3dd5cab9bd60d6910d Mon Sep 17 00:00:00 2001
From: mauroerta <mauro.erta@gmail.com>
Date: Sat, 30 Oct 2021 19:17:50 +0200
Subject: [PATCH] feat: devtool style improvements for large screens

---
 devtool/public/_locales/en/messages.json      | 15 ++++++++---
 devtool/public/_locales/it/messages.json      |  9 +++++++
 .../_shared/components/CodeSnippets/index.tsx |  8 ++++--
 .../components/CodeSnippets/style.module.css  |  3 +--
 .../Slices/Fonts/Detail/style.module.css      |  2 +-
 .../components/Slices/Radii/Detail/index.tsx  |  1 +
 .../Slices/_shared/ListItemCard/index.tsx     |  2 ++
 devtool/src/_shared/css/dark-components.css   |  1 +
 devtool/src/_shared/css/dark-variables.css    |  2 +-
 devtool/src/_shared/css/light-components.css  |  1 +
 devtool/src/_shared/css/light-variables.css   |  2 +-
 .../src/_shared/styles/components/input.ts    |  1 +
 .../src/devtool/pages/Credits/PersonCard.tsx  |  2 +-
 .../devtool/pages/Credits/style.module.css    |  6 ++++-
 devtool/src/devtool/pages/Home/SliceCard.tsx  |  2 +-
 .../src/devtool/pages/Home/style.module.css   |  1 +
 devtool/src/devtool/pages/Slice/index.tsx     | 23 +++++++++-------
 .../src/devtool/pages/Slice/style.module.css  | 27 +++++++++++++++++++
 devtool/src/popup/Popup.css                   | 20 --------------
 devtool/src/popup/Popup.tsx                   |  7 ++---
 20 files changed, 90 insertions(+), 45 deletions(-)
 create mode 100644 devtool/src/devtool/pages/Slice/style.module.css

diff --git a/devtool/public/_locales/en/messages.json b/devtool/public/_locales/en/messages.json
index bc412590..6a66387d 100644
--- a/devtool/public/_locales/en/messages.json
+++ b/devtool/public/_locales/en/messages.json
@@ -11,10 +11,22 @@
     "message": "Visualize your design system built with Morfeo",
     "description": "The description of the web extension"
   },
+  "bigDescription": {
+    "message": "Morfeo it's a tool to build design systems based on a theme. It helps you to follow a design language and write consistent UIs, whatever it is the framework of your choice. It's easy to use and, with the browser extension, your theme and your components are automatically documented."
+  },
   "morfeoNotUsed": {
     "message": "Morfeo seems to not be used inside this website",
     "description": "Used when morfeo is not used inside the current website"
   },
+  "popup_morfeoUsed": {
+    "message": "✅ This page is using morfeo."
+  },
+  "popup_morfeoNotUsed": {
+    "message": "😢 This page doesn't appear to use morfeo."
+  },
+  "popup_CTA": {
+    "message": "Learn Morfeo"
+  },
   "copyAlias": {
     "message": "Copy alias"
   },
@@ -59,8 +71,5 @@
   },
   "fontsDetailInputLabel": {
     "message": "Test text"
-  },
-  "bigDescription": {
-    "message": "Morfeo it's a tool to build design systems based on a theme. It helps you to follow a design language and write consistent UIs, whatever it is the framework of your choice. It's easy to use and, with the browser extension, your theme and your components are automatically documented."
   }
 }
\ No newline at end of file
diff --git a/devtool/public/_locales/it/messages.json b/devtool/public/_locales/it/messages.json
index cb6015ef..80912893 100644
--- a/devtool/public/_locales/it/messages.json
+++ b/devtool/public/_locales/it/messages.json
@@ -18,6 +18,15 @@
     "message": "Questo sito non sembra utillizzare morfeo",
     "description": "Used when morfeo is not used inside the current website"
   },
+  "popup_morfeoUsed": {
+    "message": "✅ Questo sito utilizza Morfeo!"
+  },
+  "popup_morfeoNotUsed": {
+    "message": "😢 Questo sito non sembra utilizzare Morfeo."
+  },
+  "popup_CTA": {
+    "message": "Impara Morfeo"
+  },
   "copyAlias": {
     "message": "Copia alias"
   },
diff --git a/devtool/src/_shared/components/CodeSnippets/index.tsx b/devtool/src/_shared/components/CodeSnippets/index.tsx
index 13eb53c4..7ceb565e 100644
--- a/devtool/src/_shared/components/CodeSnippets/index.tsx
+++ b/devtool/src/_shared/components/CodeSnippets/index.tsx
@@ -29,10 +29,14 @@ export const CodeSnippets: React.FC<Props> = ({
         key={label}
         className={clsx(styles.tab, selected === label && styles.selected)}
         onClick={getOnSelectTab(label)}
+        style={{ maxWidth: `${100 / tabs.length}%` }}
       >
-        <h3 className={clsx('morfeo-typography-h4', styles.tabLabel)}>
+        <p
+          className={clsx('morfeo-typography-p1', styles.tabLabel)}
+          title={label}
+        >
           {label}
-        </h3>
+        </p>
       </div>
     ));
   }, [getOnSelectTab, selected, tabs]);
diff --git a/devtool/src/_shared/components/CodeSnippets/style.module.css b/devtool/src/_shared/components/CodeSnippets/style.module.css
index 4f7ac6cd..81f1ad61 100644
--- a/devtool/src/_shared/components/CodeSnippets/style.module.css
+++ b/devtool/src/_shared/components/CodeSnippets/style.module.css
@@ -1,6 +1,6 @@
 .header {
   display: flex;
-  height: var(--sizes-xl);
+  /* height: var(--sizes-xl); */
   overflow-x: scroll;
   align-items: flex-end;
   justify-content: flex-start;
@@ -13,7 +13,6 @@
 .tab {
   cursor: pointer;
   height: var(--sizes-m);
-  max-width: 150px;
   transition: var(--transitions-fast);
   padding-top: var(--spacings-xxs);
   padding-left: var(--spacings-xs);
diff --git a/devtool/src/_shared/components/Slices/Fonts/Detail/style.module.css b/devtool/src/_shared/components/Slices/Fonts/Detail/style.module.css
index 52670aa2..a53f6b78 100644
--- a/devtool/src/_shared/components/Slices/Fonts/Detail/style.module.css
+++ b/devtool/src/_shared/components/Slices/Fonts/Detail/style.module.css
@@ -8,7 +8,7 @@
 }
 
 .input {
-  width: 100%;
+  width: 50%;
 }
 
 .filtersContainer {
diff --git a/devtool/src/_shared/components/Slices/Radii/Detail/index.tsx b/devtool/src/_shared/components/Slices/Radii/Detail/index.tsx
index 9545716f..1226663a 100644
--- a/devtool/src/_shared/components/Slices/Radii/Detail/index.tsx
+++ b/devtool/src/_shared/components/Slices/Radii/Detail/index.tsx
@@ -19,6 +19,7 @@ export const Detail: React.FC = () => {
         style={
           {
             corner: detailKey as Radius,
+            size: '200px',
             bg: 'var(--colors-primary)',
           } as any
         }
diff --git a/devtool/src/_shared/components/Slices/_shared/ListItemCard/index.tsx b/devtool/src/_shared/components/Slices/_shared/ListItemCard/index.tsx
index 841ef925..59599ba3 100644
--- a/devtool/src/_shared/components/Slices/_shared/ListItemCard/index.tsx
+++ b/devtool/src/_shared/components/Slices/_shared/ListItemCard/index.tsx
@@ -11,6 +11,7 @@ type Props = {
 export const ListItemCard: React.FC<Props> = ({
   onClick,
   title,
+  className,
   children,
   clickable = true,
   mode,
@@ -20,6 +21,7 @@ export const ListItemCard: React.FC<Props> = ({
     <div className={styles.container} onClick={onClick}>
       <Card
         className={clsx(
+          className,
           clickable ? 'morfeo-card-primary-clickable' : 'morfeo-card-primary',
           mode === 'dark' && 'bg-black',
           mode === 'light' && 'bg-white',
diff --git a/devtool/src/_shared/css/dark-components.css b/devtool/src/_shared/css/dark-components.css
index cbf79e32..ac3058b3 100644
--- a/devtool/src/_shared/css/dark-components.css
+++ b/devtool/src/_shared/css/dark-components.css
@@ -33,6 +33,7 @@
 [data-morfeo-theme="dark"] .morfeo-input {
   border: var(--border-widths-m) var(--border-styles-solid) var(--colors-text-color);
   height: var(--sizes-m);
+  display: block;
   border-color: var(--colors-gray-lightest);
   padding-left: var(--spacings-xs);
   border-radius: var(--radii-xxs);
diff --git a/devtool/src/_shared/css/dark-variables.css b/devtool/src/_shared/css/dark-variables.css
index 3f43283d..c6a8ff6f 100644
--- a/devtool/src/_shared/css/dark-variables.css
+++ b/devtool/src/_shared/css/dark-variables.css
@@ -35,7 +35,7 @@
 	--gradients-primary: linear-gradient(180deg, #06f 0%, #db2494 100%);
 	--gradients-secondary: linear-gradient(180deg, #A3A3A3 0%, #ffffff 100%);
 	--letter-spacings-body: 0.01em;
-	--letter-spacings-heading: 0.05em;
+	--letter-spacings-heading: 0.02em;
 	--line-heights-body: 1.3em;
 	--line-heights-heading: 1.6em;
 	--opacities-none: 0;
diff --git a/devtool/src/_shared/css/light-components.css b/devtool/src/_shared/css/light-components.css
index 957b96e9..c1816846 100644
--- a/devtool/src/_shared/css/light-components.css
+++ b/devtool/src/_shared/css/light-components.css
@@ -33,6 +33,7 @@
 [data-morfeo-theme="light"] .morfeo-input {
   border: var(--border-widths-m) var(--border-styles-solid) var(--colors-text-color);
   height: var(--sizes-m);
+  display: block;
   border-color: var(--colors-gray-lightest);
   padding-left: var(--spacings-xs);
   border-radius: var(--radii-xxs);
diff --git a/devtool/src/_shared/css/light-variables.css b/devtool/src/_shared/css/light-variables.css
index 2c503da7..8972182d 100644
--- a/devtool/src/_shared/css/light-variables.css
+++ b/devtool/src/_shared/css/light-variables.css
@@ -35,7 +35,7 @@
 	--gradients-primary: linear-gradient(180deg, #06f 0%, #db2494 100%);
 	--gradients-secondary: linear-gradient(180deg, #A3A3A3 0%, #ffffff 100%);
 	--letter-spacings-body: 0.01em;
-	--letter-spacings-heading: 0.05em;
+	--letter-spacings-heading: 0.02em;
 	--line-heights-body: 1.3em;
 	--line-heights-heading: 1.6em;
 	--opacities-none: 0;
diff --git a/devtool/src/_shared/styles/components/input.ts b/devtool/src/_shared/styles/components/input.ts
index dbde336c..a625d3a1 100644
--- a/devtool/src/_shared/styles/components/input.ts
+++ b/devtool/src/_shared/styles/components/input.ts
@@ -3,6 +3,7 @@ import { ComponentConfig } from '@morfeo/react';
 export const Input: ComponentConfig = {
   tag: 'input',
   style: {
+    display: 'block',
     px: 'xs',
     bg: 'white',
     height: 'm',
diff --git a/devtool/src/devtool/pages/Credits/PersonCard.tsx b/devtool/src/devtool/pages/Credits/PersonCard.tsx
index 02e09d86..8d018641 100644
--- a/devtool/src/devtool/pages/Credits/PersonCard.tsx
+++ b/devtool/src/devtool/pages/Credits/PersonCard.tsx
@@ -37,7 +37,7 @@ export const PersonCard: React.FC<Props> = ({ person }) => {
   return (
     <div className={styles.cardContainer} onClick={onClick}>
       {cover}
-      <h3 className={clsx('morfeo-typography-h3', styles.name)}>{name}</h3>
+      <h4 className={clsx('morfeo-typography-h4', styles.name)}>{name}</h4>
       <div className={styles.contributionsContainer}>
         {contributions.map(contribution => (
           <span key={contribution}>{contribution}</span>
diff --git a/devtool/src/devtool/pages/Credits/style.module.css b/devtool/src/devtool/pages/Credits/style.module.css
index cc42ee0d..5574bc5f 100644
--- a/devtool/src/devtool/pages/Credits/style.module.css
+++ b/devtool/src/devtool/pages/Credits/style.module.css
@@ -17,6 +17,10 @@
   margin-bottom: var(--spacings-xs);
 }
 
+.name {
+  margin-bottom: var(--spacings-xxs);
+}
+
 .cardContainer:hover .name::after {
   margin-left: var(--spacings-xxs);
 }
@@ -27,7 +31,7 @@
   color: var(--colors-text-color);
   margin-left: calc(var(--spacings-xxs) / 2);
   transition: var(--transitions-fast);
-  font-size: var(--font-sizes-m);
+  font-size: var(--font-sizes-s);
   font-family: var(--fonts-regular);
   font-weight: var(--font-weights-bold);
   line-height: var(--line-heights-heading);
diff --git a/devtool/src/devtool/pages/Home/SliceCard.tsx b/devtool/src/devtool/pages/Home/SliceCard.tsx
index e2a77bed..6b796fac 100644
--- a/devtool/src/devtool/pages/Home/SliceCard.tsx
+++ b/devtool/src/devtool/pages/Home/SliceCard.tsx
@@ -72,6 +72,7 @@ export const SliceCard: React.FC<Props> = ({ name, values, status }) => {
       title={capitalCase(noCase(name))}
       clickable={!isEmpty}
       onClick={onClick}
+      className={styles.sliceContainer}
     >
       <div className={(isEmpty && styles.empty) || ''}>
         <div
@@ -86,7 +87,6 @@ export const SliceCard: React.FC<Props> = ({ name, values, status }) => {
         </div>
         <Icon name={`slice.${name}` as IconName} />
       </div>
-      
     </ListItemCard>
   );
 };
diff --git a/devtool/src/devtool/pages/Home/style.module.css b/devtool/src/devtool/pages/Home/style.module.css
index a439b208..acaceb7f 100644
--- a/devtool/src/devtool/pages/Home/style.module.css
+++ b/devtool/src/devtool/pages/Home/style.module.css
@@ -6,6 +6,7 @@
 .sliceContainer {
   width: 100%;
   position: relative;
+  overflow: hidden;
 }
 
 .valuesContainer {
diff --git a/devtool/src/devtool/pages/Slice/index.tsx b/devtool/src/devtool/pages/Slice/index.tsx
index bf67e90e..8d53a9af 100644
--- a/devtool/src/devtool/pages/Slice/index.tsx
+++ b/devtool/src/devtool/pages/Slice/index.tsx
@@ -3,6 +3,7 @@ import { Page } from '../../../_shared/template/Page';
 import { useRouter } from '../../../_shared/hooks/useRouter';
 import { CodeSnippets, slices, SliceConfig } from '../../../_shared/components';
 import { SliceName } from '../../../_shared/contexts/Routing/types';
+import styles from './style.module.css';
 
 export const Slice: React.FC = () => {
   const { route } = useRouter();
@@ -50,16 +51,20 @@ export const Slice: React.FC = () => {
 
   return (
     <Page breadcrumb={['slices', ...breadCrumb]} title={title}>
-      <Content />
-      {state && state.detailKey && (
-        <div className="my-s mx-xs">
-          <CodeSnippets
-            slice={state.slice}
-            value={state.detailKey}
-            componentVariant={state.componentVariant}
-          />
+      <div className={styles.container}>
+        <div className={styles.content}>
+          <Content />
         </div>
-      )}
+        {state && state.detailKey && (
+          <div className={styles.codeSnippet}>
+            <CodeSnippets
+              slice={state.slice}
+              value={state.detailKey}
+              componentVariant={state.componentVariant}
+            />
+          </div>
+        )}
+      </div>
     </Page>
   );
 };
diff --git a/devtool/src/devtool/pages/Slice/style.module.css b/devtool/src/devtool/pages/Slice/style.module.css
new file mode 100644
index 00000000..badedb4f
--- /dev/null
+++ b/devtool/src/devtool/pages/Slice/style.module.css
@@ -0,0 +1,27 @@
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.content {
+  flex: 1;
+}
+
+.codeSnippet {
+  flex: 1;
+  margin-top: var(--spacings-s);
+  margin-bottom: var(--spacings-s);
+  margin-left: var(--spacings-xs);
+  margin-right: var(--spacings-xs);
+}
+
+@media screen and (min-width: 1920px) {
+  .container {
+    flex-direction: row;
+  }
+
+  .codeSnippet {
+    margin-top: var(--spacings-none);
+    margin-bottom: var(--spacings-none);
+  }
+}
diff --git a/devtool/src/popup/Popup.css b/devtool/src/popup/Popup.css
index fe55aaf7..d8c2cf6f 100644
--- a/devtool/src/popup/Popup.css
+++ b/devtool/src/popup/Popup.css
@@ -2,17 +2,6 @@
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
 .App-header {
   background-color: #282c34;
   min-height: 150px;
@@ -29,12 +18,3 @@
 .App-link {
   color: #61dafb;
 }
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/devtool/src/popup/Popup.tsx b/devtool/src/popup/Popup.tsx
index 447df813..ded5f278 100644
--- a/devtool/src/popup/Popup.tsx
+++ b/devtool/src/popup/Popup.tsx
@@ -1,9 +1,10 @@
 import { useMemo } from 'react';
 import { useIsUsingMorfeo } from '../_shared/hooks';
+import { t } from '../_shared/utils';
 import './Popup.css';
 
-const IS_MORFEO_MESSAGE = '✅ This page is using morfeo.';
-const IS_NOT_MORFEO_MESSAGE = "😢 This page doesn't appear to use morfeo.";
+const IS_MORFEO_MESSAGE = t('popup_morfeoUsed');
+const IS_NOT_MORFEO_MESSAGE = t('popup_morfeoNotUsed');
 
 function Popup() {
   const isUsingMorfeo = useIsUsingMorfeo();
@@ -22,7 +23,7 @@ function Popup() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Learn Morfeo
+          {t('popup_CTA')}
         </a>
       </header>
     </div>