From 991eb86adb502a258edc365c9471b15331731fd9 Mon Sep 17 00:00:00 2001
From: Andrea Simone Porceddu <andrea@vlkstudio.com>
Date: Fri, 15 Oct 2021 15:35:12 +0200
Subject: [PATCH] fix(devtool): fix back chevron and slice title

---
 .../components/Icon/icons/Chevrons.tsx        |  8 +++----
 .../components/Slices/Colors/index.tsx        | 22 ++++++++++++++++---
 devtool/src/_shared/template/Page/index.tsx   |  3 ++-
 devtool/src/devtool/pages/Slice/index.tsx     | 14 +++++++++++-
 4 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/devtool/src/_shared/components/Icon/icons/Chevrons.tsx b/devtool/src/_shared/components/Icon/icons/Chevrons.tsx
index 327e8168..f99604f2 100644
--- 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
index 0fcaba86..7903fe31 100644
--- 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
index 2c17d693..9f6b6a0f 100644
--- a/devtool/src/_shared/template/Page/index.tsx
+++ b/devtool/src/_shared/template/Page/index.tsx
@@ -1,5 +1,6 @@
 import styles from './page.module.css';
 import clsx from 'clsx';
+import { noCase, capitalCase } from 'change-case'
 
 type Props = {
   breadcrumb?: string[];
@@ -7,7 +8,7 @@ type Props = {
 };
 
 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
index 93f3cc43..4d36ae9d 100644
--- 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>