fix(devtool): fix back chevron and slice title

morfeojs · Oct 15, 2021 · 991eb86 · 991eb86
1 parent 358240e
commit 991eb86
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 9 deletions.
diff --git a/devtool/src/_shared/components/Icon/icons/Chevrons.tsx b/devtool/src/_shared/components/Icon/icons/Chevrons.tsx
@@ -8,7 +8,7 @@ export const RightChevron: React.FC<IconProps> = props => {
       width="50"
       height="50"
       fill="none"
-      viewBox="0 0 75 75"
+      viewBox="0 0 50 75"
       {...props}
     >
       <path
@@ -26,7 +26,7 @@ export const LeftChevron: React.FC<IconProps> = props => {
   return (
     <RightChevron
       {...props}
-      style={{ ...props.style, transform: 'rotate(180deg)' }}
+      style={{ ...props.style, transform: 'rotate(180deg)', transformOrigin: 'center center' }}
     />
   );
 };
@@ -35,7 +35,7 @@ export const UpChevron: React.FC<IconProps> = props => {
   return (
     <RightChevron
       {...props}
-      style={{ ...props.style, transform: 'rotate(270deg)' }}
+      style={{ ...props.style, transform: 'rotate(270deg)', transformOrigin: 'center center' }}
     />
   );
 };
@@ -44,7 +44,7 @@ export const DownChevron: React.FC<IconProps> = props => {
   return (
     <RightChevron
       {...props}
-      style={{ ...props.style, transform: 'rotate(90deg)' }}
+      style={{ ...props.style, transform: 'rotate(90deg)', transformOrigin: 'center center' }}
     />
   );
 };
diff --git a/devtool/src/_shared/components/Slices/Colors/index.tsx b/devtool/src/_shared/components/Slices/Colors/index.tsx
@@ -7,6 +7,8 @@ import { useRouter } from '../../../hooks/useRouter';
 import { RouteName } from '../../../contexts';
 import { SliceName } from '../../../contexts/Routing/types';
 
+const whites = ['#fff', '#ffffff', 'white', 'rgb(255,255,255)'];
+
 export const Colors: React.FC = () => {
   const theme = useTheme();
   const slice = useMemo(() => (theme || {})['colors'] || {}, [theme]);
@@ -26,9 +28,23 @@ export const Colors: React.FC = () => {
         <div
           key={`colors-${key}`}
           className={styles.colorContainer}
-          onClick={() => navigate(RouteName.SLICE, { slice: SliceName.COLORS, detailKey: key})}
+          onClick={() =>
+            navigate(RouteName.SLICE, {
+              slice: SliceName.COLORS,
+              detailKey: key,
+            })
+          }
         >
-          <Card copyText={key} style={{ bg: key }} />
+          <Card
+            copyText={key}
+            style={{
+              bg: key,
+              outline: 'var(--borders-primary)',
+              outlineColor: whites.includes(slice[key])
+                ? ('var(--colors-gray-lightest)' as Color)
+                : ('transparent' as Color),
+            }}
+          />
           <h3
             className={clsx('morfeo-typography-h2', styles.colorName)}
             title={key}
@@ -38,7 +54,7 @@ export const Colors: React.FC = () => {
         </div>
       );
     });
-  }, [navigate, sliceKeys]);
+  }, [navigate, slice, sliceKeys]);
 
   return <>{section}</>;
 };
diff --git a/devtool/src/_shared/template/Page/index.tsx b/devtool/src/_shared/template/Page/index.tsx
@@ -1,13 +1,14 @@
 import styles from './page.module.css';
 import clsx from 'clsx';
+import { noCase, capitalCase } from 'change-case'
 
 type Props = {
   breadcrumb?: string[];
   title?: string;
 };
 
 function capitalize(string: string) {
-  return string[0].toUpperCase() + string.slice(1, string.length);
+  return capitalCase(noCase(string))
 }
 
 export const Page: React.FC<Props> = ({ children, title, breadcrumb }) => {

diff --git a/devtool/src/devtool/pages/Slice/index.tsx b/devtool/src/devtool/pages/Slice/index.tsx
@@ -25,10 +25,22 @@ export const Slice: React.FC = () => {
     return <></>;
   }, [state?.detailKey, state?.slice]);
 
+  const title = useMemo(() => {
+    if (state?.detailKey) {
+      return state.detailKey;
+    }
+
+    if (state?.slice) {
+      return slices[state.slice]?.displayName
+    }
+
+    return ''
+  }, [state?.detailKey, state?.slice]);
+
   return (
     <Page
       breadcrumb={['slices', ...breadCrumb]}
-      title={(state && slices[state.slice]?.displayName) || ''}
+      title={title}
     >
       {renderContent}
     </Page>