From 3d98c93714f7565e7ab1e9b4e6e34e5f52de9d75 Mon Sep 17 00:00:00 2001
From: rtritto <r.tritto5@studenti.uniba.it>
Date: Fri, 13 Jan 2023 02:21:28 +0100
Subject: [PATCH] Replace triple dots

---
 src/components/DataTypes/Function.tsx |  5 +++--
 src/components/DataTypes/Object.tsx   |  9 +++++----
 src/stores/typeRegistry.tsx           |  2 +-
 tests/index.test.tsx                  | 10 +++++-----
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/DataTypes/Function.tsx b/src/components/DataTypes/Function.tsx
index 54153a36..81fd8dd8 100644
--- a/src/components/DataTypes/Function.tsx
+++ b/src/components/DataTypes/Function.tsx
@@ -86,10 +86,11 @@ export const FunctionType: React.FC<DataItemProps<Function>> = (props) => {
             <Box component='span' className='data-function-body'
                  onClick={() => props.setInspect(true)}
                  sx={{
-                   '&:hover': { cursor: 'pointer' }
+                   '&:hover': { cursor: 'pointer' },
+                   padding: 0.5
                  }}
             >
-              ...
+              …
             </Box>
             )
         }
diff --git a/src/components/DataTypes/Object.tsx b/src/components/DataTypes/Object.tsx
index 3d929969..a4da1cbf 100644
--- a/src/components/DataTypes/Object.tsx
+++ b/src/components/DataTypes/Object.tsx
@@ -169,7 +169,7 @@ export const ObjectType: React.FC<DataItemProps<object>> = (props) => {
               key='last'
               onClick={() => setDisplayLength(length => length * 2)}
             >
-              hidden {rest} items...
+              hidden {rest} items…
             </DataBox>
           )
         }
@@ -215,7 +215,7 @@ export const ObjectType: React.FC<DataItemProps<object>> = (props) => {
           key='last'
           onClick={() => setDisplayLength(length => length * 2)}
         >
-          hidden {rest} items...
+          hidden {rest} items…
         </DataBox>
       )
     }
@@ -255,10 +255,11 @@ export const ObjectType: React.FC<DataItemProps<object>> = (props) => {
               <Box component='span' className='data-object-body'
                  onClick={() => props.setInspect(true)}
                  sx={{
-                   '&:hover': { cursor: 'pointer' }
+                   '&:hover': { cursor: 'pointer' },
+                   padding: 0.5
                  }}
               >
-                ...
+                …
               </Box>
                 )
               : null
diff --git a/src/stores/typeRegistry.tsx b/src/stores/typeRegistry.tsx
index e97e2a52..93872f14 100644
--- a/src/stores/typeRegistry.tsx
+++ b/src/stores/typeRegistry.tsx
@@ -224,7 +224,7 @@ export function predefined (): DataType<any>[] {
             >
               &quot;
               {value}
-              {hasRest && !showRest && (<Box component='span'>...</Box>)}
+              {hasRest && !showRest && (<Box component='span' sx={{ padding: 0.5 }}>…</Box>)}
               &quot;
             </Box>
           )
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index dbd74db0..213efe73 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -269,7 +269,7 @@ describe('Expand elements by click on dots', () => {
 
     let elements = container.getElementsByClassName('data-object-body')
     expect(elements.length).eq(1)
-    expect(elements[0].textContent).eq('...')
+    expect(elements[0].textContent).eq('…')
     fireEvent.click(elements[0])
 
     rerender(
@@ -425,7 +425,7 @@ describe('Expand function by click on dots', () => {
 
     let elements = container.getElementsByClassName('data-function-body')
     expect(elements.length).eq(1)
-    expect(elements[0].textContent).eq('...')
+    expect(elements[0].textContent).eq('…')
     fireEvent.click(elements[0])
 
     rerender(
@@ -441,7 +441,7 @@ describe('Expand function by click on dots', () => {
     elements = container.getElementsByClassName('data-function')
     expect(elements.length).eq(1)
     expect(elements[0].children.length).eq(0)
-    expect(elements[0].textContent).not.eq('...')
+    expect(elements[0].textContent).not.eq('…')
   })
 })
 
@@ -631,7 +631,7 @@ describe('Show three dots after string collapsing', () => {
     let elements = container.getElementsByClassName('string-value')
     expect(elements.length).eq(1)
     expect(elements[0].children.length).eq(1)
-    expect(elements[0].textContent).eq('"string..."')
+    expect(elements[0].textContent).eq('"string…"')
     fireEvent.click(elements[0].children[0])
 
     rerender(<Component />)
@@ -645,6 +645,6 @@ describe('Show three dots after string collapsing', () => {
     elements = container.getElementsByClassName('string-value')
     expect(elements.length).eq(1)
     expect(elements[0].children.length).eq(1)
-    expect(elements[0].textContent).eq('"string..."')
+    expect(elements[0].textContent).eq('"string…"')
   })
 })