feat: devtool style improvements for large screens

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."
   }
 }

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"
   },

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]);

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);

devtool/src/_shared/components/Slices/Fonts/Detail/style.module.css

@@ -8,7 +8,7 @@
 }
 
 .input {
-  width: 100%;
+  width: 50%;
 }
 
 .filtersContainer {

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
         }

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',

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);

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;

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);

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;

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',

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>

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);

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>
   );
 };

devtool/src/devtool/pages/Home/style.module.css

@@ -6,6 +6,7 @@
 .sliceContainer {
   width: 100%;
   position: relative;
+  overflow: hidden;
 }
 
 .valuesContainer {

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>
   );
 };

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);
+  }
+}

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);
-  }
-}

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>