more colour changes related to the header - #533

impactoss · Feb 16, 2024 · ef44436 · ef44436
1 parent 68354c3
commit ef44436
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 40 deletions.
diff --git a/app/components/EntityListMain/EntityListGroups/EntityListGroupHeader.js b/app/components/EntityListMain/EntityListGroups/EntityListGroupHeader.js
@@ -7,14 +7,25 @@ import { palette } from 'styled-theme';
 import Link from 'containers/Link';
 import { ROUTES } from 'containers/App/constants';
 
+const ListEntitiesGroupHeaderWrapper = styled.div`
+padding: ${({ separated }) => separated ? '5px 0 10px' : '0'};
+background:  ${palette('secondary', 1)};
+margin-top: 10px;
+@media print {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  page-break-inside: avoid;
+  border-top: 1px solid ${palette('light', 1)};
+}
+`;
+
 const ListEntitiesGroupHeaderLink = styled(Link)`
   color: ${palette('link', 2)};
   &:hover {
     color: ${palette('linkHover', 2)};
   }
 `;
 
-
 const ListEntitiesGroupHeader = styled.h3`
   margin-top: 15px;
   margin-bottom: 5px;
@@ -40,6 +51,7 @@ export class EntityListGroupHeader extends React.PureComponent { // eslint-disab
     if (group.get('id') === 'without') {
       return level === 1
         ? (
+
           <ListEntitiesGroupHeader>
             {group.get('label')}
           </ListEntitiesGroupHeader>
@@ -52,18 +64,22 @@ export class EntityListGroupHeader extends React.PureComponent { // eslint-disab
     }
     return level === 1
       ? (
-        <ListEntitiesGroupHeaderLink to={`${ROUTES.CATEGORIES}/${group.get('id')}`}>
-          <ListEntitiesGroupHeader>
-            {group.get('label')}
-          </ListEntitiesGroupHeader>
-        </ListEntitiesGroupHeaderLink>
+        <ListEntitiesGroupHeaderWrapper>
+          <ListEntitiesGroupHeaderLink to={`${ROUTES.CATEGORIES}/${group.get('id')}`}>
+            <ListEntitiesGroupHeader>
+              {group.get('label')}
+            </ListEntitiesGroupHeader>
+          </ListEntitiesGroupHeaderLink>
+        </ListEntitiesGroupHeaderWrapper>
       )
       : (
-        <ListEntitiesGroupHeaderLink to={`${ROUTES.CATEGORIES}/${group.get('id')}`}>
-          <ListEntitiesSubgroupHeader>
-            {group.get('label')}
-          </ListEntitiesSubgroupHeader>
-        </ListEntitiesGroupHeaderLink>
+        <ListEntitiesGroupHeaderWrapper>
+          <ListEntitiesGroupHeaderLink to={`${ROUTES.CATEGORIES}/${group.get('id')}`}>
+            <ListEntitiesSubgroupHeader>
+              {group.get('label')}
+            </ListEntitiesSubgroupHeader>
+          </ListEntitiesGroupHeaderLink>
+        </ListEntitiesGroupHeaderWrapper>
       );
   }
 }

diff --git a/app/components/EntityListMain/EntityListGroups/EntityListHeader/index.js b/app/components/EntityListMain/EntityListGroups/EntityListHeader/index.js
@@ -16,7 +16,8 @@ import ColumnExpand from './ColumnExpand';
 
 const Styled = styled.div`
   width:100%;
-  background-color: ${palette('light', 1)};
+  color: ${palette('mainListHeader', 0)};
+  background-color: ${palette('mainListHeader', 1)};
   display: table;
 `;
 

diff --git a/app/components/Header/LinkAccount.js b/app/components/Header/LinkAccount.js
@@ -5,19 +5,10 @@ import LinkSecondary from './LinkSecondary';
 
 export default styled(LinkSecondary)`
   color: ${(props) => props.active ? palette('headerNavAccountItem', 1) : palette('headerNavAccountItem', 0)};
-  background-color: ${(props) => props.active ? palette('headerNavAccountItem', 3) : palette('headerNavAccountItem', 2)};
-  border-right: 1px solid ${palette('headerNavAccountItem', 4)};
-
+  background-color: ${palette('headerNavAccountItem', 2)};
   &:hover {
     color: ${(props) => props.active ? palette('headerNavAccountItemHover', 1) : palette('headerNavAccountItemHover', 0)};
-    background-color: ${(props) => props.active ? palette('headerNavAccountItemHover', 3) : palette('headerNavAccountItemHover', 2)};
-    border-right: 1px solid ${palette('headerNavAccountItemHover', 4)};
-  }
-
-  &:last-child {
-    border-right: none;
-    &:hover {
-      border-right: none;
-    }
+    text-decoration: ${(props) => props.active ? 'none' : 'underline'};
   }
+}
 `;
diff --git a/app/components/Header/LinkAdmin.js b/app/components/Header/LinkAdmin.js
@@ -3,5 +3,5 @@ import styled from 'styled-components';
 import LinkPage from './LinkPage';
 
 export default styled(LinkPage)`
-  font-weight: bold;
+  font-weight: normal;
 `;
diff --git a/app/components/Header/LinkPage.js b/app/components/Header/LinkPage.js
@@ -5,9 +5,9 @@ import LinkSecondary from './LinkSecondary';
 
 export default styled(LinkSecondary)`
   color:${(props) => props.active ? palette('headerNavPagesItem', 1) : palette('headerNavPagesItem', 0)};
-  background-color:${(props) => props.active ? palette('headerNavPagesItem', 3) : palette('headerNavPagesItem', 2)};
+  background-color: transparent;
   &:hover {
     color:${(props) => props.active ? palette('headerNavPagesItemHover', 1) : palette('headerNavPagesItemHover', 0)};
-    background-color:${(props) => props.active ? palette('headerNavPagesItemHover', 3) : palette('headerNavPagesItemHover', 2)};
+    text-decoration: ${(props) => props.active ? 'none' : 'underline'};
   }
 `;
diff --git a/app/themes/theme-base.js b/app/themes/theme-base.js
@@ -102,14 +102,14 @@ const primary = coolorsToHex('https://coolors.co/73018e-510064-360441-ffffff-fff
 // 2: secondary colour, main / white/placeholder
 // 3: white/placeholder
 // 4: white/placeholder
-const secondary = coolorsToHex('https://coolors.co/ffffff-ffffff-ffffff-ffffff-ffffff');
+const secondary = coolorsToHex('https://coolors.co/ba5d03-ffffff-ffffff-ffffff-ffffff');
 // dark grayscale: dark to light
 // 0:  darkest (AA)
 // 1:  darker (AA)
 // 2:  dark (AA)
 // 3:  medium gray 1 (AA) --- !!! AA compatible with light[0]
 // 4:  medium gray 2 (AA large)
-const dark = coolorsToHex('https://coolors.co/1c2121-232b2b-323e3e-687271-8d9696');
+const dark = coolorsToHex('https://coolors.co/1e1f1f-6b6f73-73777b-cfd0d1-dfe1e3');
 // light grayscale: light to dark
 // 0:  lightest gray (background colour) - also used in global-styles.js !!! AA compatible with dark[3]
 // 1:  light gray (light lines, navigation filter panel)
@@ -198,7 +198,7 @@ theme.palette = {
 
   // text
   // [#primaryFont, #secondaryFont, #inverse]
-  text: [dark[0], dark[3], primary[4]],
+  text: [dark[0], dark[1], primary[4]],
   background: [primary[4], light[0], secondary[0]],
 
   // links
@@ -224,16 +224,16 @@ theme.palette = {
   headerBrandHover: [dark[1], dark[3]], // WARNING component sets opacity
 
   // headerNavPages: [ '#bg' ],
-  headerNavPages: [light[0]],
+  headerNavPages: [secondary[2]],
   // headerNavPagesItem: [ '#color', '#colorActive', '#bg', '#bgActive' ],
-  headerNavPagesItem: [dark[3], primary[4], 'transparent', primary[2]],
-  headerNavPagesItemHover: [dark[2], primary[4], 'transparent', primary[0]],
+  headerNavPagesItem: [dark[0], secondary[0], 'transparent', 'transparent'],
+  headerNavPagesItemHover: [dark[0], secondary[0], 'transparent', 'transparent'],
 
   // headerNavAccount: [ '#bg' ],
   headerNavAccount: ['transparent'],
   // headerNavAccountItem: ['#color', '#colorActive', '#bg', '#bgActive', '#border' ]
-  headerNavAccountItem: [primary[4], primary[4], dark[2], primary[2], dark[0]],
-  headerNavAccountItemHover: [primary[4], primary[4], dark[1], primary[2], dark[2]],
+  headerNavAccountItem: [dark[0], secondary[0], 'transparent', 'transparent', dark[0]],
+  headerNavAccountItemHover: [dark[0], secondary[0], 'transparent', 'transparent', dark[0]],
 
   // headerNavMain: [ '#bg', '#border'  ],
   headerNavMain: [secondary[4], secondary[4]],
@@ -256,12 +256,15 @@ theme.palette = {
 
   // ENTITYLIST SIDEBAR "PALETTES" //////////////////////////////////////////////////////////////
   // asideCatNavItem: ['#color', '#active', '#bg', '#bgactive', '#border'],
-  asideListItem: [dark[2], primary[4], primary[4], dark[2], light[0]],
-  asideListItemHover: [dark[1], primary[4], primary[4], dark[2], light[0]],
+  asideListItem: [dark[0], dark[0], primary[4], light[0], light[0]],
+  asideListItemHover: [dark[0], dark[0], light[2], light[2], light[0]],
 
   // asideHeader: [#color, '#bg',]
-  asideListGroup: [dark[2], light[1]],
-  asideListGroupHover: [dark[3], light[0]],
+  asideListGroup: [dark[1], light[0]],
+  asideListGroupHover: [dark[1], light[0]],
+
+  // mainListHeader
+  mainListHeader: [dark[2], primary[4]],
 
   // mainListItem: [#color, '#bg',], eg category and entity list items
   mainListItem: [dark[0], primary[4]],
@@ -276,7 +279,7 @@ theme.palette = {
   // BUTTONS / LINKS
   //
   // button: ['#colorPrimary', '#colorSecondary', #disabled],
-  buttonFlat: [primary[1], dark[3], light[4]], // aka ghost button
+  buttonFlat: [primary[1], dark[1], light[4]], // aka ghost button
   buttonFlatHover: [primary[0], primary[1]],
   buttonCancel: [dark[3]], // form footer cancel
   buttonCancelHover: [primary[1]],
@@ -296,6 +299,9 @@ theme.palette = {
   // ButtonInverse: ['#color', '#bg'],
   buttonInverse: [primary[2], primary[4]], // used for taxonomy tags, background only
   buttonInverseHover: [primary[0], primary[4]],
+
+  // checkbox
+  checkbox: [dark[2]],
 };
 
 // fonts