style: align Heading and Items (decaporg#6988)

* style: align SidebarHeading with TopHeading * style: bring to shorthand property * style: fix guides * style: update after testing * style: align items in sidebar * style: update after testing * Update config.yml
sproott · Feb 1, 2024 · 84ea660 · 84ea660
1 parent 80fb16f
commit 84ea660
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 43 deletions.
diff --git a/packages/decap-cms-core/src/components/Collection/CollectionSearch.js b/packages/decap-cms-core/src/components/Collection/CollectionSearch.js
@@ -31,7 +31,7 @@ const SearchInput = styled.input`
   background-color: #eff0f4;
   border-radius: ${lengths.borderRadius};
   font-size: 14px;
-  padding: 10px 6px 10px 32px;
+  padding: 10px 6px 10px 34px;
   width: 100%;
   position: relative;
   z-index: ${zIndex.zIndex1};
@@ -62,7 +62,7 @@ const Suggestions = styled.ul`
 `;
 
 const SuggestionHeader = styled.li`
-  padding: 0 6px 6px 32px;
+  padding: 0 6px 6px 34px;
   font-size: 12px;
   color: ${colors.text};
 `;
@@ -71,7 +71,7 @@ const SuggestionItem = styled.li(
   ({ isActive }) => `
   color: ${isActive ? colors.active : colorsRaw.grayDark};
   background-color: ${isActive ? colors.activeBackground : 'inherit'};
-  padding: 6px 6px 6px 32px;
+  padding: 6px 6px 6px 34px;
   cursor: pointer;
   position: relative;
 

diff --git a/packages/decap-cms-core/src/components/Collection/Entries/EntriesCollection.js b/packages/decap-cms-core/src/components/Collection/Entries/EntriesCollection.js
@@ -22,8 +22,10 @@ import { selectCollectionEntriesCursor } from '../../../reducers/cursors';
 import Entries from './Entries';
 
 const GroupHeading = styled.h2`
-  font-size: 23px;
+  font-size: 22px;
   font-weight: 600;
+  line-height: 37px;
+  padding-inline-start: 20px;
   color: ${colors.textLead};
 `;
 

diff --git a/packages/decap-cms-core/src/components/Collection/Entries/EntryCard.js b/packages/decap-cms-core/src/components/Collection/Entries/EntryCard.js
@@ -20,7 +20,7 @@ const ListCard = styled.li`
 const ListCardLink = styled(Link)`
   display: block;
   max-width: 100%;
-  padding: 16px 22px;
+  padding: 16px 20px;
 
   &:hover {
     background-color: ${colors.foreground};
@@ -63,7 +63,7 @@ const CardHeading = styled.h2`
 `;
 
 const CardBody = styled.div`
-  padding: 16px 22px;
+  padding: 16px 20px;
   height: 90px;
   position: relative;
   margin-bottom: ${props => props.hasImage && 0};

diff --git a/packages/decap-cms-core/src/components/Collection/NestedCollection.js b/packages/decap-cms-core/src/components/Collection/NestedCollection.js
@@ -48,11 +48,11 @@ const TreeNavLink = styled(NavLink)`
   font-weight: 500;
   align-items: center;
   padding: 8px;
-  padding-left: ${props => props.depth * 20 + 12}px;
+  padding-left: ${props => props.depth * 16 + 18}px;
   border-left: 2px solid #fff;
 
   ${Icon} {
-    margin-right: 8px;
+    margin-right: 4px;
     flex-shrink: 0;
   }
 

diff --git a/packages/decap-cms-core/src/components/Collection/Sidebar.js b/packages/decap-cms-core/src/components/Collection/Sidebar.js
@@ -30,15 +30,16 @@ const SidebarContainer = styled.aside`
 `;
 
 const SidebarHeading = styled.h2`
-  font-size: 23px;
+  font-size: 22px;
   font-weight: 600;
+  line-height: 37px;
   padding: 0;
-  margin: 18px 12px 12px;
+  margin: 10px 20px;
   color: ${colors.textLead};
 `;
 
 const SidebarNavList = styled.ul`
-  margin: 16px 0 0;
+  margin: 12px 0 0;
   list-style: none;
   overflow: auto;
 `;
@@ -48,12 +49,12 @@ const SidebarNavLink = styled(NavLink)`
   font-size: 14px;
   font-weight: 500;
   align-items: center;
-  padding: 8px 12px;
+  padding: 8px 18px;
   border-left: 2px solid #fff;
   z-index: -1;
 
   ${Icon} {
-    margin-right: 8px;
+    margin-right: 4px;
     flex-shrink: 0;
   }
 

diff --git a/...-cms-core/src/components/Collection/__tests__/__snapshots__/NestedCollection.spec.js.snap b/...-cms-core/src/components/Collection/__tests__/__snapshots__/NestedCollection.spec.js.snap
@@ -14,12 +14,12 @@ exports[`NestedCollection should render connected component 1`] = `
   -ms-flex-align: center;
   align-items: center;
   padding: 8px;
-  padding-left: 12px;
+  padding-left: 18px;
   border-left: 2px solid #fff;
 }
 
 .emotion-0 mocked-icon {
-  margin-right: 8px;
+  margin-right: 4px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -100,12 +100,12 @@ exports[`NestedCollection should render connected component 1`] = `
   -ms-flex-align: center;
   align-items: center;
   padding: 8px;
-  padding-left: 32px;
+  padding-left: 34px;
   border-left: 2px solid #fff;
 }
 
 .emotion-0 mocked-icon {
-  margin-right: 8px;
+  margin-right: 4px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -169,12 +169,12 @@ exports[`NestedCollection should render connected component 1`] = `
   -ms-flex-align: center;
   align-items: center;
   padding: 8px;
-  padding-left: 32px;
+  padding-left: 34px;
   border-left: 2px solid #fff;
 }
 
 .emotion-0 mocked-icon {
-  margin-right: 8px;
+  margin-right: 4px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -243,12 +243,12 @@ exports[`NestedCollection should render correctly with nested entries 1`] = `
   -ms-flex-align: center;
   align-items: center;
   padding: 8px;
-  padding-left: 12px;
+  padding-left: 18px;
   border-left: 2px solid #fff;
 }
 
 .emotion-0 mocked-icon {
-  margin-right: 8px;
+  margin-right: 4px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -329,12 +329,12 @@ exports[`NestedCollection should render correctly with nested entries 1`] = `
   -ms-flex-align: center;
   align-items: center;
   padding: 8px;
-  padding-left: 32px;
+  padding-left: 34px;
   border-left: 2px solid #fff;
 }
 
 .emotion-0 mocked-icon {
-  margin-right: 8px;
+  margin-right: 4px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -398,12 +398,12 @@ exports[`NestedCollection should render correctly with nested entries 1`] = `
   -ms-flex-align: center;
   align-items: center;
   padding: 8px;
-  padding-left: 32px;
+  padding-left: 34px;
   border-left: 2px solid #fff;
 }
 
 .emotion-0 mocked-icon {
-  margin-right: 8px;
+  margin-right: 4px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -472,12 +472,12 @@ exports[`NestedCollection should render correctly with no entries 1`] = `
   -ms-flex-align: center;
   align-items: center;
   padding: 8px;
-  padding-left: 12px;
+  padding-left: 18px;
   border-left: 2px solid #fff;
 }
 
 .emotion-0 mocked-icon {
-  margin-right: 8px;
+  margin-right: 4px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;

diff --git a/...ges/decap-cms-core/src/components/Collection/__tests__/__snapshots__/Sidebar.spec.js.snap b/...ges/decap-cms-core/src/components/Collection/__tests__/__snapshots__/Sidebar.spec.js.snap
@@ -20,15 +20,16 @@ exports[`Sidebar should render nested collection with filterTerm 1`] = `
 }
 
 .emotion-2 {
-  font-size: 23px;
+  font-size: 22px;
   font-weight: 600;
+  line-height: 37px;
   padding: 0;
-  margin: 18px 12px 12px;
+  margin: 10px 20px;
   color: #313d3e;
 }
 
 .emotion-4 {
-  margin: 16px 0 0;
+  margin: 12px 0 0;
   list-style: none;
   overflow: auto;
 }
@@ -80,15 +81,16 @@ exports[`Sidebar should render sidebar with a nested collection 1`] = `
 }
 
 .emotion-2 {
-  font-size: 23px;
+  font-size: 22px;
   font-weight: 600;
+  line-height: 37px;
   padding: 0;
-  margin: 18px 12px 12px;
+  margin: 10px 20px;
   color: #313d3e;
 }
 
 .emotion-4 {
-  margin: 16px 0 0;
+  margin: 12px 0 0;
   list-style: none;
   overflow: auto;
 }
@@ -139,15 +141,16 @@ exports[`Sidebar should render sidebar with a simple collection 1`] = `
 }
 
 .emotion-2 {
-  font-size: 23px;
+  font-size: 22px;
   font-weight: 600;
+  line-height: 37px;
   padding: 0;
-  margin: 18px 12px 12px;
+  margin: 10px 20px;
   color: #313d3e;
 }
 
 .emotion-4 {
-  margin: 16px 0 0;
+  margin: 12px 0 0;
   list-style: none;
   overflow: auto;
 }
@@ -163,13 +166,13 @@ exports[`Sidebar should render sidebar with a simple collection 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding: 8px 12px;
+  padding: 8px 18px;
   border-left: 2px solid #fff;
   z-index: -1;
 }
 
 .emotion-6 mocked-icon {
-  margin-right: 8px;
+  margin-right: 4px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -235,15 +238,16 @@ exports[`Sidebar should render sidebar without search 1`] = `
 }
 
 .emotion-2 {
-  font-size: 23px;
+  font-size: 22px;
   font-weight: 600;
+  line-height: 37px;
   padding: 0;
-  margin: 18px 12px 12px;
+  margin: 10px 20px;
   color: #313d3e;
 }
 
 .emotion-4 {
-  margin: 16px 0 0;
+  margin: 12px 0 0;
   list-style: none;
   overflow: auto;
 }
@@ -259,13 +263,13 @@ exports[`Sidebar should render sidebar without search 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding: 8px 12px;
+  padding: 8px 18px;
   border-left: 2px solid #fff;
   z-index: -1;
 }
 
 .emotion-6 mocked-icon {
-  margin-right: 8px;
+  margin-right: 4px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;