Merge pull request #938 from AppQuality/insights-card-fixes

fixed observation cards UI

Author: marcbon

src/locales/en/translation.json

@@ -768,7 +768,7 @@
   "__INSIGHTS_COLLECTION_OBSERVATION_CARD_LIGHTBOX_QUOTES_LABEL": "Quotes",
   "__INSIGHTS_COLLECTION_OBSERVATION_CARD_LIGHTBOX_SELECT_BUTTON_LABEL": "Select observation",
   "__INSIGHTS_COLLECTION_OBSERVATION_CARD_LIGHTBOX_TAGS_LABEL": "Extra tags",
-  "__INSIGHTS_COLLECTION_OBSERVATION_CARD_VIEW_DETAILS": "View details",
+  "__INSIGHTS_COLLECTION_OBSERVATION_CARD_VIEW_DETAILS": "View more",
   "__INSIGHTS_PAGE_ACTION_BAR_BUTTON_CANCEL": "Cancel",
   "__INSIGHTS_PAGE_ACTION_BAR_BUTTON_CREATE_INSIGHT": "Create insight",
   "__INSIGHTS_PAGE_ACTION_BAR_BUTTON_EDIT_INSIGHT": "Update insight",

src/locales/it/translation.json

@@ -795,7 +795,7 @@
   "__INSIGHTS_COLLECTION_OBSERVATION_CARD_LIGHTBOX_QUOTES_LABEL": "",
   "__INSIGHTS_COLLECTION_OBSERVATION_CARD_LIGHTBOX_SELECT_BUTTON_LABEL": "",
   "__INSIGHTS_COLLECTION_OBSERVATION_CARD_LIGHTBOX_TAGS_LABEL": "",
-  "__INSIGHTS_COLLECTION_OBSERVATION_CARD_VIEW_DETAILS": "",
+  "__INSIGHTS_COLLECTION_OBSERVATION_CARD_VIEW_DETAILS": "Vedi di più",
   "__INSIGHTS_PAGE_ACTION_BAR_BUTTON_CANCEL": "Annulla",
   "__INSIGHTS_PAGE_ACTION_BAR_BUTTON_CREATE_INSIGHT": "",
   "__INSIGHTS_PAGE_ACTION_BAR_BUTTON_EDIT_INSIGHT": "",

src/pages/Campaign/pageHeader/Meta/index.tsx

@@ -79,7 +79,11 @@ export const Metas = ({ campaign }: { campaign: CampaignWithOutput }) => {
 
   const { start_date, end_date, type, status, outputs, family } = campaign;
   const { t } = useTranslation();
-  const { sorted: videos } = useVideo(campaign.id.toString() ?? '');
+  const {
+    sorted: videos,
+    isLoading: isLoadingVideos,
+    isFetching: isFetchingVideos,
+  } = useVideo(campaign.id.toString() ?? '');
   const { hasFeatureFlag } = useFeatureFlag();
   const hasTaggingToolFeature = hasFeatureFlag(FEATURE_FLAG_TAGGING_TOOL);
 
@@ -101,7 +105,8 @@ export const Metas = ({ campaign }: { campaign: CampaignWithOutput }) => {
     }
   }, [videos]);
 
-  if (isLoading || isFetching) return <Skeleton width="200px" height="20px" />;
+  if (isLoading || isFetching || isLoadingVideos || isFetchingVideos)
+    return <Skeleton width="500px" height="20px" />;
 
   return (
     <FooterContainer>

src/pages/Insights/Collection/ObservationCard.tsx

@@ -9,18 +9,18 @@ import {
   SpecialCard,
   Tag,
 } from '@appquality/unguess-design-system';
+import { FieldArray, FieldArrayRenderProps, useFormikContext } from 'formik';
+import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { appTheme } from 'src/app/theme';
-import { Grape, VideoTag } from 'src/features/api';
+import { ReactComponent as TrashIcon } from 'src/assets/icons/trash-stroke.svg';
+import { getDeviceIcon } from 'src/common/components/BugDetail/Meta';
 import { Pipe } from 'src/common/components/Pipe';
-import { useMemo, useState } from 'react';
 import { getColorWithAlpha } from 'src/common/utils';
+import { Grape, VideoTag } from 'src/features/api';
 import { styled } from 'styled-components';
-import { FieldArray, FieldArrayRenderProps, useFormikContext } from 'formik';
-import { getDeviceIcon } from 'src/common/components/BugDetail/Meta';
-import { ReactComponent as TrashIcon } from 'src/assets/icons/trash-stroke.svg';
-import { LightboxContainer } from './Lightbox';
 import { InsightFormValues } from '../FormProvider';
+import { LightboxContainer } from './Lightbox';
 
 const StyledTag = styled(Tag)`
   user-select: none;
@@ -29,6 +29,7 @@ const StyledTag = styled(Tag)`
 
 const StyledAnchor = styled(Anchor)`
   user-select: none;
+  font-size: ${appTheme.fontSizes.sm};
 `;
 
 const StyledSpecialCard = styled(SpecialCard)<{
@@ -41,11 +42,6 @@ const StyledSpecialCard = styled(SpecialCard)<{
     `
     border-color: ${severity.tag.style};
   `}
-  ${({ isChecked }) =>
-    isChecked &&
-    `
-    border-color: ${appTheme.palette.blue[600]};
-  `}
   border-width: 2px;
 `;
 
@@ -54,8 +50,9 @@ const Quotes = styled.span<{ isChecked: boolean }>`
   cursor: text;
   ${({ isChecked }) =>
     `color: ${
-      isChecked ? appTheme.palette.blue[600] : appTheme.palette.grey[700]
+      isChecked ? appTheme.palette.blue[600] : appTheme.palette.grey[800]
     };`}
+  font-size: ${appTheme.fontSizes.md};
 `;
 
 export const ObservationCard = ({
@@ -68,7 +65,7 @@ export const ObservationCard = ({
   const { t } = useTranslation();
   const [isLightboxOpen, setIsLightboxOpen] = useState(false);
   const { values, setFieldValue } = useFormikContext<InsightFormValues>();
-  const quotesMaxChars = 50;
+  const quotesMaxChars = 250;
 
   const severity = observation.tags.find(
     (tag) => tag.group.name === 'severity'
@@ -152,7 +149,9 @@ export const ObservationCard = ({
                 {observation.deviceType && (
                   <>
                     {!hideCheckbox && <Pipe />}
-                    {getDeviceIcon(observation.deviceType)}
+                    <Tag size="large" isRound>
+                      {getDeviceIcon(observation.deviceType)}
+                    </Tag>
                   </>
                 )}
                 {observation.usecaseTitle && (
@@ -173,7 +172,12 @@ export const ObservationCard = ({
             </SpecialCard.Meta>
 
             <SpecialCard.Header>
-              <SpecialCard.Header.Label style={{ userSelect: 'none' }}>
+              <SpecialCard.Header.Label
+                style={{
+                  userSelect: 'none',
+                  color: appTheme.palette.grey[600],
+                }}
+              >
                 {title}
               </SpecialCard.Header.Label>
               <SpecialCard.Header.Title
@@ -201,7 +205,7 @@ export const ObservationCard = ({
                 {observation.uploaderId > 0 && (
                   <SM
                     style={{
-                      color: appTheme.palette.grey[600],
+                      color: appTheme.palette.grey[700],
                       marginBottom: appTheme.space.xs,
                     }}
                   >
@@ -211,7 +215,7 @@ export const ObservationCard = ({
                 <div style={{ display: 'flex', alignItems: 'center' }}>
                   {severity && (
                     <StyledTag
-                      size="small"
+                      size="medium"
                       color={severity.tag.style}
                       style={{
                         backgroundColor: getColorWithAlpha(
@@ -252,7 +256,6 @@ export const ObservationCard = ({
 
             <SpecialCard.Footer>
               <StyledAnchor
-                isExternal
                 onClick={(e) => {
                   e.stopPropagation();
                   setIsLightboxOpen(true);