fix(SLB-288): update styles

AmazeeLabs · May 14, 2024 · d8c5934 · d8c5934
1 parent 40fd77a
commit d8c5934
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 20 deletions.
diff --git a/packages/drupal/gutenberg_blocks/css/edit.css b/packages/drupal/gutenberg_blocks/css/edit.css
@@ -50,31 +50,35 @@
 .gutenberg__editor .list-style--question-marks li {
   list-style-type: none;
   position: relative;
+  padding-left: 0.625rem;
+  margin-left: 0;
+  line-height: 1.25rem !important;
 }
 
 .gutenberg__editor .list-style--arrows li::before {
   position: absolute;
   left: -1.25rem;
+  line-height: 1.25rem;
+  height: 1.25rem;
   vertical-align: middle;
-  line-height: 1.5rem;
-  margin-top: 2px;
-  content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='arrow-narrow-right'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M9.83401 4.23435C9.98403 4.08437 10.1875 4.00012 10.3996 4.00012C10.6117 4.00012 10.8152 4.08437 10.9652 4.23435L14.1652 7.43435C14.3152 7.58437 14.3994 7.78782 14.3994 7.99995C14.3994 8.21208 14.3152 8.41553 14.1652 8.56555L10.9652 11.7656C10.8143 11.9113 10.6122 11.9919 10.4025 11.9901C10.1927 11.9883 9.99208 11.9041 9.84375 11.7558C9.69543 11.6075 9.61129 11.4068 9.60947 11.1971C9.60765 10.9873 9.68828 10.7852 9.83401 10.6344L11.6684 8.79995H2.39961C2.18744 8.79995 1.98395 8.71567 1.83392 8.56564C1.68389 8.41561 1.59961 8.21212 1.59961 7.99995C1.59961 7.78778 1.68389 7.5843 1.83392 7.43427C1.98395 7.28424 2.18744 7.19995 2.39961 7.19995H11.6684L9.83401 5.36555C9.68403 5.21553 9.59978 5.01208 9.59978 4.79995C9.59978 4.58782 9.68403 4.38437 9.83401 4.23435Z' fill='%236B7280'/%3E%3C/g%3E%3C/svg%3E ");
+  content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%236B7280' %3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM6.75 9.25a.75.75 0 0 0 0 1.5h4.59l-2.1 1.95a.75.75 0 0 0 1.02 1.1l3.5-3.25a.75.75 0 0 0 0-1.1l-3.5-3.25a.75.75 0 1 0-1.02 1.1l2.1 1.95H6.75Z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
 }
 
 .gutenberg__editor .list-style--checkmarks li::before {
   position: absolute;
-  left: -1.25rem;
+  left: -1.125rem;
+  line-height: 1.25rem;
+  height: 1.25rem;
   vertical-align: middle;
-  line-height: 1.5rem;
-  margin-top: 2px;
-  content: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='0.5' width='18' height='18' rx='9' fill='%23DEF7EC'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.6947 6.20519C13.8259 6.33646 13.8996 6.51448 13.8996 6.70009C13.8996 6.88571 13.8259 7.06372 13.6947 7.19499L8.0947 12.795C7.96343 12.9262 7.78541 12.9999 7.5998 12.9999C7.41418 12.9999 7.23617 12.9262 7.1049 12.795L4.3049 9.99499C4.17739 9.86297 4.10683 9.68615 4.10842 9.50261C4.11002 9.31908 4.18364 9.14351 4.31342 9.01372C4.44321 8.88394 4.61878 8.81032 4.80232 8.80872C4.98585 8.80713 5.16268 8.87768 5.2947 9.00519L7.5998 11.3103L12.7049 6.20519C12.8362 6.07397 13.0142 6.00024 13.1998 6.00024C13.3854 6.00024 13.5634 6.07397 13.6947 6.20519Z' fill='%230E9F6E'/%3E%3C/svg%3E ");
+  margin-top: 0.5px;
+  content: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='0.5' width='18' height='18' rx='9' fill='%236B7280'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.6947 6.20507C13.8259 6.33634 13.8996 6.51436 13.8996 6.69997C13.8996 6.88559 13.8259 7.0636 13.6947 7.19487L8.0947 12.7949C7.96343 12.9261 7.78541 12.9998 7.5998 12.9998C7.41418 12.9998 7.23617 12.9261 7.1049 12.7949L4.3049 9.99487C4.17739 9.86285 4.10683 9.68603 4.10842 9.50249C4.11002 9.31895 4.18364 9.14339 4.31342 9.0136C4.44321 8.88381 4.61878 8.8102 4.80232 8.8086C4.98585 8.80701 5.16268 8.87756 5.2947 9.00507L7.5998 11.3102L12.7049 6.20507C12.8362 6.07384 13.0142 6.00012 13.1998 6.00012C13.3854 6.00012 13.5634 6.07384 13.6947 6.20507Z' fill='%23fff'/%3E%3C/svg%3E%0A");
 }
 
 .gutenberg__editor .list-style--question-marks li::before {
   position: absolute;
-  left: -1.25rem;
+  left: -1.125rem;
   vertical-align: middle;
-  line-height: 1.5rem;
-  margin-top: 2px;
-  content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='question-mark-circle'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10ZM10 7C9.8243 6.99983 9.65165 7.04595 9.49945 7.13373C9.34724 7.22151 9.22085 7.34784 9.133 7.5C9.06957 7.61788 8.98311 7.72182 8.87876 7.80566C8.77441 7.8895 8.65429 7.95154 8.52552 7.9881C8.39675 8.02466 8.26194 8.03499 8.12911 8.01849C7.99627 8.00198 7.86809 7.95897 7.75218 7.89201C7.63628 7.82505 7.53499 7.7355 7.45433 7.62867C7.37367 7.52184 7.31529 7.3999 7.28263 7.27008C7.24997 7.14027 7.24371 7.00522 7.26421 6.87294C7.28472 6.74065 7.33157 6.61384 7.402 6.5C7.73222 5.92811 8.24191 5.48116 8.85203 5.22846C9.46214 4.97576 10.1386 4.93144 10.7765 5.10236C11.4143 5.27328 11.978 5.64989 12.38 6.1738C12.782 6.6977 13 7.33962 13 8C13.0002 8.62062 12.8079 9.22603 12.4498 9.73285C12.0916 10.2397 11.5851 10.623 11 10.83V11C11 11.2652 10.8946 11.5196 10.7071 11.7071C10.5196 11.8946 10.2652 12 10 12C9.73478 12 9.48043 11.8946 9.29289 11.7071C9.10536 11.5196 9 11.2652 9 11V10C9 9.73478 9.10536 9.48043 9.29289 9.29289C9.48043 9.10536 9.73478 9 10 9C10.2652 9 10.5196 8.89464 10.7071 8.70711C10.8946 8.51957 11 8.26522 11 8C11 7.73478 10.8946 7.48043 10.7071 7.29289C10.5196 7.10536 10.2652 7 10 7ZM10 15C10.2652 15 10.5196 14.8946 10.7071 14.7071C10.8946 14.5196 11 14.2652 11 14C11 13.7348 10.8946 13.4804 10.7071 13.2929C10.5196 13.1054 10.2652 13 10 13C9.73478 13 9.48043 13.1054 9.29289 13.2929C9.10536 13.4804 9 13.7348 9 14C9 14.2652 9.10536 14.5196 9.29289 14.7071C9.48043 14.8946 9.73478 15 10 15Z' fill='%236B7280'/%3E%3C/g%3E%3C/svg%3E ");
+  line-height: 1.25rem;
+  height: 1.25rem;
+  content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%236B7280' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm9.008-3.018a1.502 1.502 0 0 1 2.522 1.159v.024a1.44 1.44 0 0 1-1.493 1.418 1 1 0 0 0-1.037.999V14a1 1 0 1 0 2 0v-.539a3.44 3.44 0 0 0 2.529-3.256 3.502 3.502 0 0 0-7-.255 1 1 0 0 0 2 .076c.014-.398.187-.774.48-1.044Zm.982 7.026a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2h-.01Z' clip-rule='evenodd'/%3E%3C/svg%3E%0A");
 }
diff --git a/packages/schema/src/fragments/PageContent/BlockImageWithText.gql b/packages/schema/src/fragments/PageContent/BlockImageWithText.gql
@@ -1,6 +1,6 @@
 fragment BlockImageWithText on BlockImageWithText {
   image {
-    source(width: 1536, sizes: [[768, 768], [1536, 1536]])
+    source(width: 1536, height: 1536)
     alt
   }
   textContent {

diff --git a/packages/ui/src/components/Atoms/List.css b/packages/ui/src/components/Atoms/List.css
@@ -16,15 +16,17 @@ ul {
   line-height: 1.25rem !important;
 }
 
+ul li::marker {
+  @apply !text-gray-500;
+}
+
 .list-style--arrows li::before {
   position: absolute;
-  left: -1rem;
-  line-height: 1rem;
-  height: 1rem;
-  margin-top: 2px;
+  left: -1.25rem;
+  line-height: 1.25rem;
+  height: 1.25rem;
   vertical-align: middle;
-  content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='arrow-narrow-right'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M9.83401 4.23435C9.98403 4.08437 10.1875 4.00012 10.3996 4.00012C10.6117 4.00012 10.8152 4.08437 10.9652 4.23435L14.1652 7.43435C14.3152 7.58437 14.3994 7.78782 14.3994 7.99995C14.3994 8.21208 14.3152 8.41553 14.1652 8.56555L10.9652 11.7656C10.8143 11.9113 10.6122 11.9919 10.4025 11.9901C10.1927 11.9883 9.99208 11.9041 9.84375 11.7558C9.69543 11.6075 9.61129 11.4068 9.60947 11.1971C9.60765 10.9873 9.68828 10.7852 9.83401 10.6344L11.6684 8.79995H2.39961C2.18744 8.79995 1.98395 8.71567 1.83392 8.56564C1.68389 8.41561 1.59961 8.21212 1.59961 7.99995C1.59961 7.78778 1.68389 7.5843 1.83392 7.43427C1.98395 7.28424 2.18744 7.19995 2.39961 7.19995H11.6684L9.83401 5.36555C9.68403 5.21553 9.59978 5.01208 9.59978 4.79995C9.59978 4.58782 9.68403 4.38437 9.83401 4.23435Z' fill='%236B7280'/%3E%3C/g%3E%3C/svg%3E ");
-  list-style-position: inside;
+  content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%236B7280' %3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM6.75 9.25a.75.75 0 0 0 0 1.5h4.59l-2.1 1.95a.75.75 0 0 0 1.02 1.1l3.5-3.25a.75.75 0 0 0 0-1.1l-3.5-3.25a.75.75 0 1 0-1.02 1.1l2.1 1.95H6.75Z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
 }
 
 .list-style--checkmarks li::before {
@@ -34,7 +36,7 @@ ul {
   height: 1.25rem;
   vertical-align: middle;
   margin-top: 0.5px;
-  content: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='0.5' width='18' height='18' rx='9' fill='%23DEF7EC'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.6947 6.20519C13.8259 6.33646 13.8996 6.51448 13.8996 6.70009C13.8996 6.88571 13.8259 7.06372 13.6947 7.19499L8.0947 12.795C7.96343 12.9262 7.78541 12.9999 7.5998 12.9999C7.41418 12.9999 7.23617 12.9262 7.1049 12.795L4.3049 9.99499C4.17739 9.86297 4.10683 9.68615 4.10842 9.50261C4.11002 9.31908 4.18364 9.14351 4.31342 9.01372C4.44321 8.88394 4.61878 8.81032 4.80232 8.80872C4.98585 8.80713 5.16268 8.87768 5.2947 9.00519L7.5998 11.3103L12.7049 6.20519C12.8362 6.07397 13.0142 6.00024 13.1998 6.00024C13.3854 6.00024 13.5634 6.07397 13.6947 6.20519Z' fill='%230E9F6E'/%3E%3C/svg%3E ");
+  content: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='0.5' width='18' height='18' rx='9' fill='%236B7280'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.6947 6.20507C13.8259 6.33634 13.8996 6.51436 13.8996 6.69997C13.8996 6.88559 13.8259 7.0636 13.6947 7.19487L8.0947 12.7949C7.96343 12.9261 7.78541 12.9998 7.5998 12.9998C7.41418 12.9998 7.23617 12.9261 7.1049 12.7949L4.3049 9.99487C4.17739 9.86285 4.10683 9.68603 4.10842 9.50249C4.11002 9.31895 4.18364 9.14339 4.31342 9.0136C4.44321 8.88381 4.61878 8.8102 4.80232 8.8086C4.98585 8.80701 5.16268 8.87756 5.2947 9.00507L7.5998 11.3102L12.7049 6.20507C12.8362 6.07384 13.0142 6.00012 13.1998 6.00012C13.3854 6.00012 13.5634 6.07384 13.6947 6.20507Z' fill='%23fff'/%3E%3C/svg%3E%0A");
 }
 
 .list-style--question-marks li::before {
@@ -43,5 +45,5 @@ ul {
   vertical-align: middle;
   line-height: 1.25rem;
   height: 1.25rem;
-  content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='question-mark-circle'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10ZM10 7C9.8243 6.99983 9.65165 7.04595 9.49945 7.13373C9.34724 7.22151 9.22085 7.34784 9.133 7.5C9.06957 7.61788 8.98311 7.72182 8.87876 7.80566C8.77441 7.8895 8.65429 7.95154 8.52552 7.9881C8.39675 8.02466 8.26194 8.03499 8.12911 8.01849C7.99627 8.00198 7.86809 7.95897 7.75218 7.89201C7.63628 7.82505 7.53499 7.7355 7.45433 7.62867C7.37367 7.52184 7.31529 7.3999 7.28263 7.27008C7.24997 7.14027 7.24371 7.00522 7.26421 6.87294C7.28472 6.74065 7.33157 6.61384 7.402 6.5C7.73222 5.92811 8.24191 5.48116 8.85203 5.22846C9.46214 4.97576 10.1386 4.93144 10.7765 5.10236C11.4143 5.27328 11.978 5.64989 12.38 6.1738C12.782 6.6977 13 7.33962 13 8C13.0002 8.62062 12.8079 9.22603 12.4498 9.73285C12.0916 10.2397 11.5851 10.623 11 10.83V11C11 11.2652 10.8946 11.5196 10.7071 11.7071C10.5196 11.8946 10.2652 12 10 12C9.73478 12 9.48043 11.8946 9.29289 11.7071C9.10536 11.5196 9 11.2652 9 11V10C9 9.73478 9.10536 9.48043 9.29289 9.29289C9.48043 9.10536 9.73478 9 10 9C10.2652 9 10.5196 8.89464 10.7071 8.70711C10.8946 8.51957 11 8.26522 11 8C11 7.73478 10.8946 7.48043 10.7071 7.29289C10.5196 7.10536 10.2652 7 10 7ZM10 15C10.2652 15 10.5196 14.8946 10.7071 14.7071C10.8946 14.5196 11 14.2652 11 14C11 13.7348 10.8946 13.4804 10.7071 13.2929C10.5196 13.1054 10.2652 13 10 13C9.73478 13 9.48043 13.1054 9.29289 13.2929C9.10536 13.4804 9 13.7348 9 14C9 14.2652 9.10536 14.5196 9.29289 14.7071C9.48043 14.8946 9.73478 15 10 15Z' fill='%236B7280'/%3E%3C/g%3E%3C/svg%3E ");
+  content: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%236B7280' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm9.008-3.018a1.502 1.502 0 0 1 2.522 1.159v.024a1.44 1.44 0 0 1-1.493 1.418 1 1 0 0 0-1.037.999V14a1 1 0 1 0 2 0v-.539a3.44 3.44 0 0 0 2.529-3.256 3.502 3.502 0 0 0-7-.255 1 1 0 0 0 2 .076c.014-.398.187-.774.48-1.044Zm.982 7.026a1 1 0 1 0 0 2H12a1 1 0 1 0 0-2h-.01Z' clip-rule='evenodd'/%3E%3C/svg%3E%0A");
 }