Family & friends and ux dashboard fixes

package.json

@@ -18,7 +18,6 @@
     "i18n-iso-countries": "^7.3.0",
     "i18next": "^21.6.14",
     "i18next-browser-languagedetector": "^6.1.3",
-    "iframe-resizer-react": "^1.1.0",
     "prosemirror-commands": "^1.5.0",
     "prosemirror-dropcursor": "^1.6.1",
     "prosemirror-gapcursor": "^1.3.1",

src/locales/en/translation.json

@@ -264,7 +264,7 @@
   "__CAMPAIGN_PAGE_METHODOLOGY_CARD_TITLE": "The methodology used",
   "__CAMPAIGN_PAGE_METHODOLOGY_SECTION_SUBTITLE": "The purpose of this test and the methodology we used",
   "__CAMPAIGN_PAGE_METHODOLOGY_SECTION_TITLE": "Campaign",
-  "__CAMPAIGN_PAGE_METHODOLOGY_SERVICES_LINK": "Discover other services",
+  "__CAMPAIGN_PAGE_METHODOLOGY_SERVICES_LINK": "Browse all of UNGUESS's tests",
   "__CAMPAIGN_PAGE_METHODOLOGY_SHOW_LESS": "Show less",
   "__CAMPAIGN_PAGE_METHODOLOGY_SHOW_MORE": "Show more",
   "__CAMPAIGN_PAGE_METHODOLOGY_USERS_NUMBER_one": "{{count}} User",

src/locales/it/translation.json

@@ -264,7 +264,7 @@
   "__CAMPAIGN_PAGE_METHODOLOGY_CARD_TITLE": "La metodologia usata",
   "__CAMPAIGN_PAGE_METHODOLOGY_SECTION_SUBTITLE": "Cosa volevamo scoprire con questo test e quale metodologia abbiamo usato per farlo",
   "__CAMPAIGN_PAGE_METHODOLOGY_SECTION_TITLE": "Sulla campagna",
-  "__CAMPAIGN_PAGE_METHODOLOGY_SERVICES_LINK": "Vedi i servizi",
+  "__CAMPAIGN_PAGE_METHODOLOGY_SERVICES_LINK": "Scopri tutti i test di UNGUESS",
   "__CAMPAIGN_PAGE_METHODOLOGY_SHOW_LESS": "Mostra meno",
   "__CAMPAIGN_PAGE_METHODOLOGY_SHOW_MORE": "Leggi di più",
   "__CAMPAIGN_PAGE_METHODOLOGY_USERS_NUMBER_one": "{{count}} Utente",

src/pages/Bugform/index.tsx

@@ -1,24 +1,55 @@
-import IframeResizer from 'iframe-resizer-react';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { Header } from 'src/common/components/navigation/header/header';
 import { isDev } from 'src/common/isDevEnvironment';
 import i18n from 'src/i18n';
+import styled from 'styled-components';
+
+const StyledHeader = styled(Header)`
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2;
+`;
+
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  min-height: 100%;
+  max-width: 100%;
+  min-width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+
+const StyledIframe = styled.iframe`
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  min-height: 100%;
+  max-width: 100%;
+  min-width: 100%;
+  border: none;
+  margin: 0;
+`;
 
 const BugForm = () => {
   const { campaignId } = useParams<{ campaignId: string }>();
   const [query] = useSearchParams();
   const token = query.get('token') || '';
   const tryberUrl = isDev() ? 'https://dev.tryber.me' : 'https://tryber.me';
   const lang = i18n.language !== 'en' ? `/${i18n.language}` : '';
+
   return (
-    <div>
-      <Header logo="full" loggedIn={false} />
-      <IframeResizer
-        heightCalculationMethod="lowestElement"
+    <Container id="container">
+      <StyledHeader logo="full" loggedIn={false} />
+      <StyledIframe
+        id="bug-form"
+        title="Bug Form"
         src={`${tryberUrl}${lang}/vdp/${campaignId}/${token}`}
-        style={{ width: '1px', minWidth: '100%', height: 0 }}
       />
-    </div>
+    </Container>
   );
 };
 

src/pages/Campaign/useWidgets/Experience/widgets/Insights/HighlightCard.tsx

@@ -7,41 +7,11 @@ import { CardFooter } from './InsightCard';
 import { getClusterTag, getSeverityTag } from './utils';
 
 const CardThumb = styled(SpecialCard.Thumb)`
-  width: 100%;
-  height: auto;
   max-width: 100%;
   max-height: 100%;
-  border-radius: ${({ theme }) => theme.borderRadii.lg};
-  overflow: hidden;
-  position: relative;
-  padding: 0;
-  border: 1px solid ${({ theme }) => theme.palette.grey[600]};
-  margin-bottom: ${({ theme }) => theme.space.sm};
-
-  &:after {
-    content: '';
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 2;
-    overflow: hidden;
-  }
-
-  > svg {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    max-width: 100%;
-    max-height: 100%;
-    width: ${({ theme }) => theme.space.base * 14}px;
-    height: auto;
-    z-index: 3;
-  }
+  width: 100%;
+  display: flex;
+  justify-content: center;
 `;
 
 const Player = styled.div`
@@ -55,6 +25,50 @@ const Player = styled.div`
     height: 200px;
   }
 `;
+const ImageContainer = styled.div`
+width: 100%;
+height: 200px;
+max-height: 100%;
+display: flex;
+justify-content: center;
+align-items: center;
+border-radius: ${({ theme }) => theme.borderRadii.lg};
+overflow: hidden;
+position: relative;
+padding: 0;
+border: 1px solid ${({ theme }) => theme.palette.grey[600]};
+margin-bottom: ${({ theme }) => theme.space.sm};
+
+&:after {
+  content: '';
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 2;
+  overflow: hidden;
+}
+> img {
+  width: auto;
+  max-height: 100%;
+}
+> svg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 100%;
+  max-height: 100%;
+  width: ${({ theme }) => theme.space.base * 14}px;
+  height: auto;
+  z-index: 3;
+}
+}
+
+`;
 
 const HighlightCard = ({
   video,
@@ -79,16 +93,18 @@ const HighlightCard = ({
     <SpecialCard title={video.description} onClick={onClick}>
       <SpecialCard.Header>
         <CardThumb>
-          <VideoPlayIcon />
-          {poster && poster !== '' ? (
-            <img src={poster} alt={video.description} />
-          ) : (
-            <Player>
-              <video src={`${video.url}#t=0.5`}>
-                <track kind="captions" />
-              </video>
-            </Player>
-          )}
+          <ImageContainer>
+            <VideoPlayIcon />
+            {poster && poster !== '' ? (
+              <img src={poster} alt={video.description} />
+            ) : (
+              <Player>
+                <video src={`${video.url}#t=0.5`}>
+                  <track kind="captions" />
+                </video>
+              </Player>
+            )}
+          </ImageContainer>
         </CardThumb>
         <SpecialCard.Header.Label>
           <Trans i18nKey="__CAMPAIGN_PAGE_INSIGHTS_VIDEO_PART_NUMBER_LABEL">

yarn.lock

@@ -8303,19 +8303,6 @@ iferr@^0.1.5:
   resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
   integrity sha512-DUNFN5j7Tln0D+TxzloUjKB+CtVu6myn0JEFak6dG18mNt9YkQ6lzGCdafwofISZ1lLF3xRHJ98VKy9ynkcFaA==
 
-iframe-resizer-react@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/iframe-resizer-react/-/iframe-resizer-react-1.1.0.tgz#5009e019b7a5c7f1c009bff5bcdf0dbf33557465"
-  integrity sha512-FrytSq91AIJaDgE+6uK/Vdd6IR8CrwLoZ6eGmL2qQMPTzF0xlSV2jaSzRRUh5V2fttD7vzl21jvBl97bV40eBw==
-  dependencies:
-    iframe-resizer "^4.3.0"
-    warning "^4.0.3"
-
-iframe-resizer@^4.3.0:
-  version "4.3.6"
-  resolved "https://registry.yarnpkg.com/iframe-resizer/-/iframe-resizer-4.3.6.tgz#61d92c1adefe5d416bff4fbf80c7f1f74be70ec0"
-  integrity sha512-wz0WodRIF6eP0oGQa5NIP1yrITAZ59ZJvVaVJqJRjaeCtfm461vy2C3us6CKx0e7pooqpIGLpVMSTzrfAjX9Sg==
-
 ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"