diff --git a/packages/decap-cms-core/src/components/Collection/CollectionSearch.js b/packages/decap-cms-core/src/components/Collection/CollectionSearch.js index 25c3d49a390c..2532921e1296 100644 --- 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 index 2d61e2037de4..830f7911de8c 100644 --- 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 index 1621c2cc838e..01e0027d7069 100644 --- 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 index 6224c71e6350..0cc9a068c870 100644 --- 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 index 096bf9ff7a93..78abcdebe4e7 100644 --- 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/packages/decap-cms-core/src/components/Collection/__tests__/__snapshots__/NestedCollection.spec.js.snap b/packages/decap-cms-core/src/components/Collection/__tests__/__snapshots__/NestedCollection.spec.js.snap index 5e5632715e40..dd3f5fcd55ac 100644 --- a/packages/decap-cms-core/src/components/Collection/__tests__/__snapshots__/NestedCollection.spec.js.snap +++ b/packages/decap-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/packages/decap-cms-core/src/components/Collection/__tests__/__snapshots__/Sidebar.spec.js.snap b/packages/decap-cms-core/src/components/Collection/__tests__/__snapshots__/Sidebar.spec.js.snap index 6e7ecd2607f1..accf2fd59286 100644 --- a/packages/decap-cms-core/src/components/Collection/__tests__/__snapshots__/Sidebar.spec.js.snap +++ b/packages/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;