fix: feeback ui alignment (#74)

Author: fpasquet

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eleven-labs/design-system",
   "description": "Design System for Eleven Labs",
-  "version": "0.30.4",
+  "version": "0.30.5",
   "repository": {
     "type": "git",
     "url": "https://github.com/eleven-labs/design-system.git"

public/imgs/default-cover.jpg

@@ -60,7 +60,7 @@
 
   input[type="checkbox"] {
     appearance: none;
-    margin: 0;
+    margin: calc(0.15em * 2) 0 0;
     font: inherit;
     color: currentcolor;
     width: 1.15em;

src/components/Molecules/Cards/NewsletterCard/webmecanik.scss

@@ -21,7 +21,7 @@ Overview.args = {
   slug: 'slug',
   cover: {
     img: {
-      src: 'https://i.ibb.co/gPtFC17/pexels-matheus-bertelli-1830252.jpg',
+      src: '/imgs/default-cover.jpg',
       alt: 'cover',
     },
   },

src/components/Molecules/Cards/PostCard/PostCard.stories.tsx

@@ -41,7 +41,7 @@ export const Footer: React.FC<FooterProps> = ({
     <Flex
       flexDirection={{ xs: 'column', md: 'row' }}
       justifyContent="center"
-      alignItems="center"
+      alignItems="end"
       py="m"
       bg="primary-very-dark"
       className="footer__intro"

src/components/Organisms/Footer/Footer.tsx

@@ -2,6 +2,7 @@
 @use '@/styles/abstracts' as *;
 
 .container-content {
+  width: calc(100vw - #{map-get-strict($token-variables, 'spacing', 's')} * 2);
   margin-left: #{map-get-strict($token-variables, 'spacing', 's')};
   margin-right: #{map-get-strict($token-variables, 'spacing', 's')};
 

src/styles/utilities/_container.scss

@@ -3,7 +3,7 @@
 .layout-content-with-sidebar {
   @include create-media-queries('md') {
     &__content {
-      width: 70%;
+      width: calc(70% - #{map-get-strict($token-variables, 'spacing', 'xl')});
     }
 
     &__sidebar {