use mixin flex-list-with-gap for a gap

daostack · Dec 19, 2023 · 485c7b8 · 485c7b8
1 parent 46f98db
commit 485c7b8
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/...common/components/FeedCard/components/FeedItemBaseContent/FeedItemBaseContent.module.scss b/...common/components/FeedCard/components/FeedItemBaseContent/FeedItemBaseContent.module.scss
@@ -1,5 +1,6 @@
 @import "../../../../../../constants";
 @import "../../../../../../styles/sizes";
+@import "../../../../../../styles/mixins";
 
 .container {
   --title-color: var(--primary-text);
@@ -89,9 +90,9 @@
 }
 
 .title {
-  display: flex;
+  @include flex-list-with-gap(0.5rem);
+
   align-items: center;
-  gap: 8px;
   color: var(--title-color);
   font-size: $moderate-xsmall;
   line-height: 1.5rem;

diff --git a/src/pages/common/components/FeedCard/components/FeedNotionInfo/FeedNotionInfo.module.scss b/src/pages/common/components/FeedCard/components/FeedNotionInfo/FeedNotionInfo.module.scss
@@ -1,6 +1,7 @@
+@import "../../../../../../styles/mixins";
+
 .notionInfo {
-  display: flex;
-  gap: 10px;
+  @include flex-list-with-gap(0.5rem);
 }
 
 .link {

diff --git a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.module.scss b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.module.scss
@@ -1,5 +1,6 @@
 @import "../../../../constants";
 @import "../../../../styles/sizes";
+@import "../../../../styles/mixins.scss";
 
 .container {
   min-height: 3.0625rem;
@@ -106,9 +107,9 @@
 }
 
 .title {
-  display: flex;
+  @include flex-list-with-gap(0.5rem);
+
   align-items: center;
-  gap: 8px;
   color: var(--primary-text);
   font-size: $moderate-xsmall;
   line-height: 1.5rem;