Merge branch 'master' into prod

Author: Magda-R-bit

src/components/MobileApps.tsx

@@ -25,9 +25,12 @@ const DownloadLinks = styled.div`
 
   @media ${Device.mobile} {
     flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
 
     a {
       padding: 0;
+      max-width: 100%;
     }
 
     gap: 0.5em;

src/components/SliderComponent.tsx

@@ -41,7 +41,7 @@ const SliderLink = styled(AnchorLink)`
   font-size: ${fontSize.small};
   position: relative;
   bottom: 0;
-  color: ${color.text.secondary};
+  color: ${color.text.primary};
   height: 100%;
   target: string;
 `;

src/friends/components/Friends.tsx

@@ -30,7 +30,7 @@ const Image = styled.div`
 `;
 
 const Element = styled.div`
-  opacity: 0.6;
+  opacity: 1;
 `;
 
 interface IFriends {

src/pages/friends.tsx

@@ -29,8 +29,9 @@ const BoldText = styled(Text)`
 `;
 
 const UlSection = styled.ul`
-  color: ${color.text.secondary};
+  color: ${color.text.primary};
   font-size: ${fontSize.small};
+  font-weight: 700;
   margin: ${margin.small};
   padding: ${padding.small};
 `;

src/posts/articles/ArticleImage.tsx

@@ -9,8 +9,14 @@ export type ArticleStyles = {
 };
 
 const ArticleCoverWrapper = styled.div<ArticleStyles>`
-  .gatsby-image-wrapper {
-    height: ${(p) => (p.fullSize ? undefined : '16em')};
+  width: 100%;
+  max-width: 700px;
+  margin-bottom: 2rem;
+
+  img {
+    width: 100%;
+    height: auto !important;
+    object-fit: contain !important;
   }
 `;
 
@@ -25,7 +31,13 @@ export const ArticleImage: React.FC<ArticleStyles & IResponsiveImage> = ({ image
             relativePath: url
             url
             id
-            gatsbyImageData(layout: CONSTRAINED, placeholder: BLURRED)
+            gatsbyImageData(
+              layout: CONSTRAINED
+              placeholder: BLURRED
+              width: 1200
+              quality: 85
+              formats: [AUTO, WEBP]
+            )
           }
         }
       }

src/posts/articles/ArticlePage.tsx

@@ -25,14 +25,24 @@ import { Script } from 'gatsby';
 
 const ContenttWrapper = styled.div`
   img {
-    max-width: 100%;
+  display: block;
+  max-width: 100% !important;
+  height: auto !important;
+  margin: 1.5rem auto !important;
   }
 
-  blockquote{
-    margin: 0;
-    border-left: 3px solid #d8152f;
-    padding-left: 1rem;
+  figure img {
+  max-width: 700px;
+  width: 100%;
   }
+
+  blockquote {
+  margin: 1.5rem 0;
+  padding-left: 1rem;
+  border-left: 4px solid #d8152f;
+  font-style: italic;
+  color: #444;
+ }
 `;
 
 const Content = (props: any) => {

src/styles/GlobalStyle.css.tsx

@@ -36,7 +36,7 @@ export const Text = styled.p<IText>`
   padding: 0;
   font-family: 'Merriweather';
   font-size: ${fontSize.small};
-  color: ${color.text.secondary};
+  color: ${color.text.primary};
   line-height: ${lineHeight.normal};
   max-width: ${({ styles }) => evalPx(styles?.maxWidth)};
 

src/styles/pola-web.css

@@ -26,13 +26,15 @@ body {
 }
 
 p {
-  line-height: 22px;
+  line-height: 1.6;
+  font-weight: 400;
+  text-rendering: optimizeLegibility;
+  word-break: break-word;
 }
 
 b,
 strong {
-  font-weight: inherit;
-  font-weight: bolder;
+  font-weight: 700;
 }
 
 dfn {

src/styles/theme.tsx

@@ -9,12 +9,12 @@ export const color = {
     red: '#D8152F',
     white: '#ffffff',
     search: '#E5E5E5',
-    transparencyGrey: '#e5e5e5d8',
+    transparencyGrey: '#eceaead0',
     transparencyRed: '#d8152fd8',
   },
   text: {
-    primary: '#333333',
-    secondary: '#5B5B5B',
+    primary: '#222222',
+    secondary: '#3A3A3A',
     light: '#ffffff',
     dark: '#000000',
     red: '#D8152F',