feat(tile-inspector): show original texture

src/components/modal-dialog/modal-dialog.tsx

@@ -79,7 +79,7 @@ const ButtonsContainer = styled.div<ButtonsContainerProps>`
   display: flex;
   flex-direction: row;
   justify-content: ${(props) => props.justify};
-  margin: 32px;
+  margin: 32px 32px 0 32px;
   column-gap: 18px;
    {
     > * {
@@ -88,6 +88,10 @@ const ButtonsContainer = styled.div<ButtonsContainerProps>`
   }
 `;
 
+const AfterButtonsContainer = styled.div`
+  margin: 0 32px 32px 32px;
+`;
+
 type LogoutPanelProps = {
   title: string;
   children: JSX.Element | JSX.Element[];
@@ -125,17 +129,22 @@ export const ModalDialog = ({
             <Title>{title}</Title>
             {children}
           </ContentContainer>
-          <ButtonsContainer justify={!cancelButtonText ? "end" : "center"}>
-            {cancelButtonText && (
-              <ActionButton
-                variant={ActionButtonVariant.secondary}
-                onClick={onCancel}
-              >
-                {cancelButtonText}
-              </ActionButton>
-            )}
-            <ActionButton onClick={onConfirm}>{okButtonText}</ActionButton>
-          </ButtonsContainer>
+          {(cancelButtonText || okButtonText) && (
+            <ButtonsContainer justify={!cancelButtonText ? "end" : "center"}>
+              {cancelButtonText && (
+                <ActionButton
+                  variant={ActionButtonVariant.secondary}
+                  onClick={onCancel}
+                >
+                  {cancelButtonText}
+                </ActionButton>
+              )}
+              {okButtonText && (
+                <ActionButton onClick={onConfirm}>{okButtonText}</ActionButton>
+              )}
+            </ButtonsContainer>
+          )}
+          <AfterButtonsContainer />
         </Container>
       </WrapperContainer>
     </>

src/components/tile-details-panel/texture-section.spec.tsx

@@ -0,0 +1,30 @@
+import { renderWithTheme } from "../../utils/testing-utils/render-with-theme";
+import { TextureSection } from "./texture-section";
+import { getTile3d } from "../../test/tile-stub";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+let tile3d;
+beforeEach(() => {
+  tile3d = getTile3d();
+});
+
+const callRender = (renderFunc, props = {}) => {
+  return renderFunc(<TextureSection tile={tile3d} {...props} />);
+};
+
+describe("Texture Section", () => {
+  it("Should render texture section", async () => {
+    const { container } = callRender(renderWithTheme);
+    expect(container.firstChild).toBeInTheDocument();
+
+    const texturePanel = await screen.findByText("Texture:");
+    expect(texturePanel).toBeInTheDocument();
+
+    const texture = texturePanel?.nextSibling as Element;
+    texture && userEvent.click(texture);
+
+    const texturePreview = await screen.findByText("Preview texture");
+    expect(texturePreview).toBeInTheDocument();
+  });
+});