fix: colori dei link, loghi e configurazione base (#119)

* fix: move from primary color to link-color where needed * fix: move from primary color to link-color where needed * fix: move from primary color to link-color where needed * fix: move from primary color to link-color where needed * fix: base logos and config * fix: changed image import for test purposes
RedTurtle · Mar 31, 2023 · 5d0796d · 5d0796d
1 parent 8230d56
commit 5d0796d
Show file tree

Hide file tree

Showing 28 changed files with 91 additions and 69 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/components/ItaliaTheme/Logo/Logo.jsx b/src/components/ItaliaTheme/Logo/Logo.jsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 /*
  * Customization with image
  *
@@ -13,20 +11,18 @@ import React from 'react';
  */
 
 /* SVG example */
-import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-const Logo = () => <Icon color="" icon="it-pa" padding={false} size="" />;
+// import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+// const Logo = () => <Icon color="" icon="it-pa" padding={false} size="" />;
 
 /* PNG example using https://www.npmjs.com/package/webpack-image-resize-loader *
  * works, but some issues with prettier and jest
- *
+ */
 // eslint-disable-next-line import/no-unresolved
-import logo from './it-pa-white.png?width=82';
+//import logo from './logo.png?width=164';
+import logo from './logo.png';
 
 const Logo = () => (
-  <figure className="icon">
-    <img src={logo} width="82" height="82" alt="Logo" />
-  </figure>
+  <img className="icon" src={logo} width="82" height="82" alt="Logo" />
 );
-*/
 
 export default Logo;
diff --git a/src/components/ItaliaTheme/Logo/it-pa-white.png b/src/components/ItaliaTheme/Logo/it-pa-white.png
diff --git a/src/components/ItaliaTheme/Logo/logo.png b/src/components/ItaliaTheme/Logo/logo.png
diff --git a/src/components/ItaliaTheme/LogoFooter/LogoFooter.jsx b/src/components/ItaliaTheme/LogoFooter/LogoFooter.jsx
@@ -1,6 +1,3 @@
-import React from 'react';
-import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-
 /*
  * Customization with image
  *
@@ -13,6 +10,11 @@ import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
  * Note the icon class.
  */
 
-const LogoFooter = () => <Icon color="" icon="it-pa" padding={false} size="" />;
+// eslint-disable-next-line import/no-unresolved
+import logo from '../Logo/logo.png';
+
+const LogoFooter = () => (
+  <img className="icon" src={logo} width="82" height="82" alt="Logo" />
+);
 
 export default LogoFooter;
diff --git a/src/config/italiaConfig.js b/src/config/italiaConfig.js
@@ -161,14 +161,14 @@ export default function applyConfig(voltoConfig) {
       // },
     },
     siteProperties: {
-      siteTitle: 'Nome del Comune', //può essere una stringa, o un oggetto nel caso di multilingua: {'it':'Nome del Comune', 'en':'Site name'}. Se multilingua il default è comunque la stringa.
-      siteSubtitle: "Uno dei tanti Comuni d'Italia", //può essere una stringa, o un oggetto nel caso di multilingua: {'it':'Uno dei tanti Comuni d'Italia', 'en':'Uno dei tanti Comuni d'Italia'}. Se multilingua il default è comunque la stringa.
-      parentSiteTitle: 'Nome della Regione', //può essere una stringa, o un oggetto nel caso di multilingua: {'it':'Nome della Regione', 'en':'Region name'}.Se multilingua il default è comunque la stringa.
-      parentSiteURL: 'https://www.governo.it', //può essere una stringa, o un oggetto nel caso di multilingua: {'it':'https://www.governo.it', 'en':'https://www.governo.it/en'}. Se multilingua il default è comunque la stringa.
-      subsiteParentSiteTitle: 'Nome del sito padre del sottosito', //può essere una stringa, o un oggetto nel caso di multilingua: {'it':'Nome del sito padre', 'en':'Parent site name'}. Se multilingua il default è comunque la stringa.
+      siteTitle: 'io-Comune', //può essere una stringa, o un oggetto nel caso di multilingua: {'it':'Nome del Comune', 'en':'Site name'}. Se multilingua il default è comunque la stringa.
+      siteSubtitle: '', //può essere una stringa, o un oggetto nel caso di multilingua: {'it':'Uno dei tanti Comuni d'Italia', 'en':'Uno dei tanti Comuni d'Italia'}. Se multilingua il default è comunque la stringa.
+      parentSiteTitle: 'Regione Emilia-Romagna', //può essere una stringa, o un oggetto nel caso di multilingua: {'it':'Nome della Regione', 'en':'Region name'}.Se multilingua il default è comunque la stringa.
+      parentSiteURL: 'https://www.regione.emilia-romagna.it', //può essere una stringa, o un oggetto nel caso di multilingua: {'it':'https://www.governo.it', 'en':'https://www.governo.it/en'}. Se multilingua il default è comunque la stringa.
+      subsiteParentSiteTitle: 'io-Comune', //può essere una stringa, o un oggetto nel caso di multilingua: {'it':'Nome del sito padre', 'en':'Parent site name'}. Se multilingua il default è comunque la stringa.
       amministrazioneTrasparenteUrl: '/amministrazione-trasparente',
-      //arLoginUrl: 'https://io-comune.agamar.redturtle.it/login',
-      // arLogoutUrl: 'https://io-comune.agamar.redturtle.it/logout',
+      // arLoginUrl: '/login',
+      // arLogoutUrl: '/logout',
       //spidLogin: true, //se true, nella pagina di errore Unauthorized, mostra il pulsante per il login a Spid.
       headerslimTertiaryMenu: {
         it: [

diff --git a/theme/ItaliaTheme/Blocks/_calendar.scss b/theme/ItaliaTheme/Blocks/_calendar.scss
@@ -33,7 +33,7 @@
 
     h3 {
       margin: 0 !important;
-      color: $white !important;
+      color: $primary-text !important;
     }
   }
 

diff --git a/theme/ItaliaTheme/Blocks/_form.scss b/theme/ItaliaTheme/Blocks/_form.scss
@@ -191,7 +191,7 @@
       .icon {
         width: 16px;
         height: 16px;
-        color: $primary;
+        color: $link-color;
       }
     }
   }

diff --git a/theme/ItaliaTheme/Blocks/_simpleCardTemplate.scss b/theme/ItaliaTheme/Blocks/_simpleCardTemplate.scss
@@ -70,7 +70,7 @@
             line-height: 1.313rem;
             letter-spacing: 1px;
             font-weight: 600 !important;
-            color: $primary;
+            color: $link-color;
           }
         }
       }

diff --git a/theme/ItaliaTheme/Blocks/_simpleListTemplate.scss b/theme/ItaliaTheme/Blocks/_simpleListTemplate.scss
@@ -13,7 +13,7 @@
 
   li {
     margin-bottom: 0.5rem;
-    color: $primary;
+    color: $link-color;
 
     a {
       text-decoration: none;

diff --git a/theme/ItaliaTheme/Blocks/_tableOfContents.scss b/theme/ItaliaTheme/Blocks/_tableOfContents.scss
@@ -23,8 +23,8 @@ $space-left: 1rem;
         min-width: 0.55rem;
         height: 0.55rem;
         min-height: 0.55rem;
-        border-top: 0.1rem solid $primary;
-        border-right: 0.1rem solid $primary;
+        border-top: 0.1rem solid $link-color;
+        border-right: 0.1rem solid $link-color;
         margin-right: 1rem;
         content: '' !important;
         list-style: none;
@@ -41,7 +41,7 @@ $space-left: 1rem;
           height: 0;
           border-top: 0.4rem solid transparent;
           border-bottom: 0.4rem solid transparent;
-          border-left: 0.5rem solid $primary;
+          border-left: 0.5rem solid $link-color;
           margin-right: 0.8rem;
           content: '' !important;
           list-style: none;

diff --git a/theme/ItaliaTheme/Components/_card.scss b/theme/ItaliaTheme/Components/_card.scss
@@ -24,7 +24,7 @@
   &.card-big {
     h5.card-title,
     .text.fw-bold {
-      color: $primary;
+      color: $link-color;
       font-weight: 600;
       a {
         @include rem-size(font-size, 24);
@@ -127,7 +127,7 @@
           font-size: 1.3rem;
           line-height: 1.75rem;
           font-weight: 700;
-          color: $primary;
+          color: $link-color;
         }
       }
 
@@ -150,7 +150,7 @@
         text-decoration: none;
       }
       svg {
-        fill: $primary;
+        fill: $link-color;
       }
     }
   }
@@ -160,7 +160,7 @@
   div.card {
     h2.card-title {
       a {
-        color: $primary;
+        color: $link-color;
         font-size: 1.7rem;
       }
     }

diff --git a/theme/ItaliaTheme/Components/_cmp-timeline.scss b/theme/ItaliaTheme/Components/_cmp-timeline.scss
@@ -25,7 +25,7 @@
 }
 
 .calendar-vertical {
-  color: $primary;
+  color: $link-color;
 
   &::after {
     display: block;
@@ -122,7 +122,7 @@
       right: 5px;
       width: 2px;
       height: 100%;
-      background-color: $primary;
+      background-color: $link-color;
       content: '';
     }
 
@@ -134,7 +134,7 @@
       z-index: 1;
       top: 1.875rem;
       right: 0.2px;
-      background-color: $primary;
+      background-color: $link-color;
       border-radius: 5px;
 
       @include media-breakpoint-down(md) {

diff --git a/theme/ItaliaTheme/Components/_subsiteHeader.scss b/theme/ItaliaTheme/Components/_subsiteHeader.scss
@@ -7,7 +7,7 @@
   .text {
     z-index: 2;
     width: 100%;
-    color: #fff;
+    color: $primary-text;
     font-size: 1.5em;
     font-style: italic;
     line-height: 1.5em;
@@ -18,7 +18,7 @@
     h3,
     h4,
     a {
-      color: #fff;
+      color: $primary-text;
       font-family: $font-family-sans-serif;
       font-style: normal;
     }

diff --git a/theme/ItaliaTheme/Print/_all_pages.scss b/theme/ItaliaTheme/Print/_all_pages.scss
@@ -30,12 +30,12 @@
           // incresed name of municipalitie
           a {
             .icon {
-              fill: $primary;
+              fill: $link-color;
             }
 
             .it-brand-text {
               .no_toc {
-                color: $primary;
+                color: $link-color;
                 font-size: 2rem !important;
               }
             }

diff --git a/theme/ItaliaTheme/Print/_blocks.scss b/theme/ItaliaTheme/Print/_blocks.scss
@@ -82,7 +82,7 @@
       }
 
       h2 {
-        color: $primary !important;
+        color: $link-color !important;
       }
 
       .grid {
@@ -104,7 +104,7 @@
         }
 
         h2.text-secondary {
-          color: $primary !important;
+          color: $link-color !important;
         }
 
         border: 1px solid $gray-border;

diff --git a/theme/ItaliaTheme/Subsites/bootstrap-italia/custom/_navigation.scss b/theme/ItaliaTheme/Subsites/bootstrap-italia/custom/_navigation.scss
@@ -121,7 +121,7 @@
             span,
             i,
             h3 {
-              color: $primary;
+              color: $link-color;
             }
           }
 

diff --git a/theme/ItaliaTheme/Views/_common.scss b/theme/ItaliaTheme/Views/_common.scss
@@ -118,7 +118,7 @@ picture.volto-image.responsive img.full-width {
       line-height: 1em;
 
       a {
-        color: $primary;
+        color: $link-color;
         font-size: 1.125rem;
         line-height: 1.625rem;
       }
@@ -129,13 +129,13 @@ picture.volto-image.responsive img.full-width {
     ul {
       li {
         button.btn-link {
-          color: $primary;
+          color: $link-color;
 
           &:hover {
-            color: $primary;
+            color: $link-color;
 
             .icon {
-              fill: $primary;
+              fill: $link-color;
             }
           }
         }
@@ -282,7 +282,7 @@ div.sticky-wrapper {
       }
     }
     svg {
-      fill: $primary;
+      fill: $link-color;
     }
   }
 }

diff --git a/theme/ItaliaTheme/Views/_servizio.scss b/theme/ItaliaTheme/Views/_servizio.scss
@@ -29,7 +29,7 @@
     .genericcard {
       h5.card-title {
         svg {
-          fill: $primary;
+          fill: $link-color;
           @include margin-size(margin-right, 20);
         }
         a {

diff --git a/theme/_cms-ui.scss b/theme/_cms-ui.scss
@@ -108,7 +108,7 @@ body.cms-ui {
 
   .public-ui {
     a {
-      color: $primary;
+      color: $link-color;
     }
   }
 
@@ -586,22 +586,22 @@ body.cms-ui {
   #page-login {
     .help {
       a {
-        color: $primary;
+        color: $link-color;
 
         &:hover,
         &:focus {
-          color: darken($primary, 10%);
+          color: darken($link-color, 10%);
           text-decoration: underline;
         }
       }
     }
 
     button#login-form-submit.ui.basic.button.primary {
-      color: $primary !important;
+      color: $link-color !important;
 
       &:hover,
       &:focus {
-        color: darken($primary, 10%) !important;
+        color: darken($link-color, 10%) !important;
       }
     }
 

diff --git a/theme/_site-variables.scss b/theme/_site-variables.scss
@@ -8,19 +8,18 @@ Questo file definisce alcune variabili aggiuntive per design-comuni-plone-theme
 $placeholder: #b8c6c9 !default;
 
 //site
-$primary-h: 210 !default;
-// $primary-s: 4 !default;
-// $primary-b: 99 !default;
+$primary-h: 229 !default;
+$primary-s: 72 !default;
+// $primary-b: 80 !default;
+
 $primary-text: #fff !default;
 $secondary-text: #fff !default;
 $tertiary: #be2816 !default;
 $tertiary-text: #fff !default;
-$highlight-search: #ff0;
-$font-family-monospace-light: Roboto Mono Light;
-
-$caption-text: #455b71;
+$highlight-search: #ff0 !default;
+$font-family-monospace-light: Roboto Mono Light !default;
 
-$bg-light: 236, 239, 241;
+$caption-text: #455b71 !default;
 
 $primary-a0: hsl($primary-h, 62%, 97%) !default;
 
@@ -30,5 +29,5 @@ $argument-icon-bg: #f5f6f7 !default;
 // $dvt-header-center-max-height: 166px;
 // $header-center-max-height-mob: 80px;
 
-$dvt-navigation-v-padding: 15px;
+$dvt-navigation-v-padding: 15px !default;
 // $navigation-h-padding: 24px;
diff --git a/theme/bootstrap-override/_bootstrap-italia-site.scss b/theme/bootstrap-override/_bootstrap-italia-site.scss
@@ -130,6 +130,7 @@
   @import './bootstrap-italia/megamenu';
   @import 'bootstrap-italia/src/scss/custom/bottomnav';
   @import 'bootstrap-italia/src/scss/custom/navscroll';
+  @import './bootstrap-italia/navscroll';
   @import 'bootstrap-italia/src/scss/custom/navscrolltheme';
   @import 'bootstrap-italia/src/scss/custom/callout';
   @import './bootstrap-italia/callout';

diff --git a/theme/bootstrap-override/_custom_variables.scss b/theme/bootstrap-override/_custom_variables.scss
@@ -1,2 +1,5 @@
+// Override here bootstrap-italia base variables
+$dropdown-custom-button-color: $link-color;
+
 // Potenzialmente da rimuovere quando il componente SideMenu sarà fatto con un accordion, senza l'h3 come titolo
 $sidebar-heading-bottom-margin: 0;
diff --git a/theme/bootstrap-override/bootstrap-italia/_linklist.scss b/theme/bootstrap-override/bootstrap-italia/_linklist.scss
@@ -1,3 +1,17 @@
+.link-list-wrapper ul li a {
+  span {
+    color: $link-color;
+  }
+  &:hover:not(.disabled) {
+    span {
+      color: $link-color;
+    }
+    .icon {
+      fill: $link-color;
+    }
+  }
+}
+
 // Rimuovere quando il componente SideMenu sarà fatto con un accordion, senza l'h3 come titolo
 @include media-breakpoint-up(lg) {
   .link-list-wrapper.menu-link-list {
-Original file line number
+Diff line change
@@ Expand Up / @@ -33,7 +33,7 @@ @@
         h3 {
           margin: 0 !important;
-          color: $white !important;
+          color: $primary-text !important;
         }
       }
@@ Expand Down @@