Merge pull request #872 from AppQuality/UI-fixes-design

UI fixes design

Author: marcbon

src/pages/Video/components/Observation.tsx

@@ -13,7 +13,7 @@ import {
   GetVideosByVidObservationsApiResponse,
 } from 'src/features/api';
 import { ReactComponent as TagIcon } from 'src/assets/icons/tag-icon.svg';
-import { ReactComponent as ShareIcon } from 'src/assets/icons/share-stroke.svg';
+import { ReactComponent as LinkIcon } from 'src/assets/icons/link-stroke.svg';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { useCallback, useEffect, useState } from 'react';
@@ -209,7 +209,7 @@ const Observation = ({
                       copyLink(`observation-${observation.id}`, event)
                     }
                   >
-                    <ShareIcon />
+                    <LinkIcon />
                   </IconButton>
                 </Tooltip>
               </Container>

src/pages/Videos/PageHeader.tsx

@@ -32,9 +32,7 @@ const VideosPageHeader = () => {
           </Link>
         </PageHeader.Breadcrumbs>
         <PageHeader.Main mainTitle={t('__VIDEOS_PAGE_TITLE')}>
-          <PageHeader.Title>
-            <PageTitle>{t('__VIDEOS_PAGE_TITLE')}</PageTitle>
-          </PageHeader.Title>
+          <PageHeader.Title>{t('__VIDEOS_PAGE_TITLE')}</PageHeader.Title>
           <PageHeader.Meta>
             <Metas campaign={campaign} />
           </PageHeader.Meta>

src/pages/Videos/parts/VideoContainer.tsx

@@ -21,11 +21,11 @@ const StyledSM = styled(SM)`
 const StyledCard = styled(ContainerCard)`
   padding: 0;
   border-radius: ${({ theme }) => theme.borderRadii.lg};
-  border-color: ${({ theme }) => theme.palette.grey[300]};
+  border-color: ${({ theme }) => theme.palette.grey[200]};
 `;
 
 const StyledTitle = styled(Title)`
-  border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-bottom: 1px solid ${({ theme }) => theme.palette.grey[200]};
 `;
 
 export const VideoContainer = ({

src/pages/Videos/parts/VideoItem.tsx

@@ -14,7 +14,7 @@ const Container = styled.div`
   padding: ${({ theme }) => `${theme.space.xs} ${theme.space.sm}`};
   display: flex;
   gap: ${({ theme }) => theme.space.md};
-  border-bottom: 2px solid ${({ theme }) => theme.palette.grey[300]};
+  border-bottom: 2px solid ${({ theme }) => theme.palette.grey[200]};
 
   &:hover {
     box-shadow: ${({ theme }) => theme.shadows.boxShadow(theme)};
@@ -97,7 +97,7 @@ const Video = ({
             isBold
             style={{ marginTop: appTheme.space.xxs }}
           >
-            T{video.tester.id}
+            Tester ID: T{video.tester.id}
           </SM>
           <ObservationsTotalContainer>
             <TagsContainer>