fix: remove double logos

- remove double nau logos - relocate the copyright text - add a container to maintain proportions with the header
fccn · Oct 28, 2024 · be68e8a · be68e8a
1 parent 1adca56
commit be68e8a
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 165 deletions.
diff --git a/src/_footer.scss b/src/_footer.scss
@@ -6,19 +6,10 @@ $logo-color: #4e4e4e !default;
 }
 
 .footer-copyright {
-  &__logo {
-    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' viewBox='0 0 1479 309' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(1,0,0,1,-4011,-451)'%3E%3Cg id='Artboard3' transform='matrix(1.37114,0,0,0.917279,-1488.81,36.619)'%3E%3Crect x='4011.14' y='451.75' width='1078.65' height='336.336' style='fill:none;'/%3E%3Cg transform='matrix(2.41263,0,0,3.60636,-2939.58,388.811)'%3E%3Cg transform='matrix(0.585513,0,0,0.585513,2835.42,-381.681)'%3E%3Cg transform='matrix(50,0,0,50,475.265,750.862)'%3E%3Cpath d='M0.315,0.009C0.477,0.009 0.577,-0.067 0.577,-0.192C0.577,-0.299 0.508,-0.366 0.378,-0.393L0.283,-0.413C0.209,-0.429 0.164,-0.46 0.164,-0.517C0.164,-0.596 0.224,-0.629 0.314,-0.629C0.422,-0.629 0.472,-0.577 0.476,-0.501L0.565,-0.501C0.564,-0.625 0.466,-0.709 0.316,-0.709C0.161,-0.709 0.073,-0.635 0.073,-0.517C0.073,-0.41 0.138,-0.354 0.259,-0.328L0.361,-0.306C0.437,-0.29 0.486,-0.26 0.486,-0.192C0.486,-0.11 0.426,-0.07 0.315,-0.07C0.205,-0.07 0.144,-0.123 0.139,-0.21L0.05,-0.21C0.054,-0.078 0.145,0.009 0.315,0.009Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,511.335,750.862)'%3E%3Cpath d='M0.1,-0L0.55,-0L0.55,-0.079L0.187,-0.079L0.187,-0.321L0.519,-0.321L0.519,-0.401L0.187,-0.401L0.187,-0.62L0.55,-0.62L0.55,-0.7L0.1,-0.7L0.1,-0Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,546.304,750.862)'%3E%3Cpath d='M0.1,-0L0.183,-0L0.183,-0.564L0.187,-0.564L0.435,-0.12L0.445,-0.12L0.693,-0.561L0.697,-0.561L0.697,-0L0.78,-0L0.78,-0.7L0.679,-0.7L0.443,-0.273L0.439,-0.273L0.203,-0.7L0.1,-0.7L0.1,-0Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,594.773,750.862)'%3E%3Cpath d='M0.1,-0L0.187,-0L0.187,-0.254L0.358,-0.254C0.499,-0.254 0.589,-0.345 0.589,-0.479C0.589,-0.609 0.501,-0.7 0.358,-0.7L0.1,-0.7L0.1,-0ZM0.187,-0.334L0.187,-0.621L0.347,-0.621C0.441,-0.621 0.499,-0.569 0.499,-0.479C0.499,-0.385 0.444,-0.334 0.347,-0.334L0.187,-0.334Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,631.693,750.862)'%3E%3Cpath d='M0.448,-0.288C0.539,-0.314 0.599,-0.386 0.599,-0.49C0.599,-0.609 0.52,-0.7 0.377,-0.7L0.1,-0.7L0.1,-0L0.187,-0L0.187,-0.277L0.357,-0.277L0.541,-0L0.636,-0L0.636,-0.01L0.448,-0.288ZM0.187,-0.62L0.372,-0.62C0.46,-0.62 0.508,-0.571 0.508,-0.489C0.508,-0.405 0.46,-0.357 0.372,-0.357L0.187,-0.357L0.187,-0.62Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,669.662,750.862)'%3E%3Cpath d='M0.1,-0L0.55,-0L0.55,-0.079L0.187,-0.079L0.187,-0.321L0.519,-0.321L0.519,-0.401L0.187,-0.401L0.187,-0.62L0.55,-0.62L0.55,-0.7L0.1,-0.7L0.1,-0Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,475.265,806.07)'%3E%3Cpath d='M0.394,-0.7L0.287,-0.7L0.03,-0.01L0.03,-0L0.121,-0L0.187,-0.183L0.493,-0.183L0.559,-0L0.652,-0L0.652,-0.01L0.394,-0.7ZM0.215,-0.261L0.338,-0.603L0.342,-0.603L0.465,-0.261L0.215,-0.261Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,528.835,806.07)'%3E%3Cpath d='M0.394,-0.7L0.287,-0.7L0.03,-0.01L0.03,-0L0.121,-0L0.187,-0.183L0.493,-0.183L0.559,-0L0.652,-0L0.652,-0.01L0.394,-0.7ZM0.215,-0.261L0.338,-0.603L0.342,-0.603L0.465,-0.261L0.215,-0.261Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,567.404,806.07)'%3E%3Cpath d='M0.1,-0L0.187,-0L0.187,-0.254L0.358,-0.254C0.499,-0.254 0.589,-0.345 0.589,-0.479C0.589,-0.609 0.501,-0.7 0.358,-0.7L0.1,-0.7L0.1,-0ZM0.187,-0.334L0.187,-0.621L0.347,-0.621C0.441,-0.621 0.499,-0.569 0.499,-0.479C0.499,-0.385 0.444,-0.334 0.347,-0.334L0.187,-0.334Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,604.323,806.07)'%3E%3Cpath d='M0.448,-0.288C0.539,-0.314 0.599,-0.386 0.599,-0.49C0.599,-0.609 0.52,-0.7 0.377,-0.7L0.1,-0.7L0.1,-0L0.187,-0L0.187,-0.277L0.357,-0.277L0.541,-0L0.636,-0L0.636,-0.01L0.448,-0.288ZM0.187,-0.62L0.372,-0.62C0.46,-0.62 0.508,-0.571 0.508,-0.489C0.508,-0.405 0.46,-0.357 0.372,-0.357L0.187,-0.357L0.187,-0.62Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,642.293,806.07)'%3E%3Cpath d='M0.1,-0L0.55,-0L0.55,-0.079L0.187,-0.079L0.187,-0.321L0.519,-0.321L0.519,-0.401L0.187,-0.401L0.187,-0.62L0.55,-0.62L0.55,-0.7L0.1,-0.7L0.1,-0Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,677.262,806.07)'%3E%3Cpath d='M0.1,-0L0.185,-0L0.185,-0.554L0.189,-0.554L0.547,-0L0.643,-0L0.643,-0.7L0.557,-0.7L0.557,-0.143L0.553,-0.143L0.195,-0.7L0.1,-0.7L0.1,-0Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,718.882,806.07)'%3E%3Cpath d='M0.1,-0L0.332,-0C0.541,-0 0.644,-0.155 0.644,-0.35C0.644,-0.56 0.531,-0.7 0.332,-0.7L0.1,-0.7L0.1,-0ZM0.187,-0.079L0.187,-0.62L0.323,-0.62C0.484,-0.62 0.554,-0.495 0.554,-0.35C0.554,-0.204 0.484,-0.079 0.323,-0.079L0.187,-0.079Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,758.551,806.07)'%3E%3Cpath d='M0.1,-0L0.55,-0L0.55,-0.079L0.187,-0.079L0.187,-0.321L0.519,-0.321L0.519,-0.401L0.187,-0.401L0.187,-0.62L0.55,-0.62L0.55,-0.7L0.1,-0.7L0.1,-0Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(50,0,0,50,793.52,806.07)'%3E%3Cpath d='M0.448,-0.288C0.539,-0.314 0.599,-0.386 0.599,-0.49C0.599,-0.609 0.52,-0.7 0.377,-0.7L0.1,-0.7L0.1,-0L0.187,-0L0.187,-0.277L0.357,-0.277L0.541,-0L0.636,-0L0.636,-0.01L0.448,-0.288ZM0.187,-0.62L0.372,-0.62C0.46,-0.62 0.508,-0.571 0.508,-0.489C0.508,-0.405 0.46,-0.357 0.372,-0.357L0.187,-0.357L0.187,-0.62Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3C/g%3E%3Cg transform='matrix(1.04521,0,0,1.04521,2811.99,-89.5631)'%3E%3Cpath d='M184.924,172.141C179.682,176.013 173.205,178.308 166.188,178.308C162.853,178.308 159.638,177.791 156.62,176.832C148.211,174.162 142.619,166.188 142.62,157.365L142.623,132.031L142.621,132.03C142.621,124.914 138.76,119.692 135.027,118.888L135.027,115.043L145.272,115.043C150.437,115.043 155.036,117.456 158.011,121.213C163.253,117.339 169.732,115.043 176.75,115.043C180.085,115.043 183.3,115.56 186.318,116.519C194.727,119.189 200.318,127.163 200.318,135.986L200.315,161.321L200.316,161.322C200.316,168.437 204.179,173.659 207.911,174.463L207.911,178.308L197.666,178.308C192.501,178.308 187.9,175.898 184.924,172.141ZM214.946,162.265C214.946,171.041 222.027,178.155 230.803,178.155L230.983,178.155C236.997,178.155 243.045,175.516 247.541,171.76L247.541,176.749L271.335,176.749L271.335,172.904L270.433,172.904C267.993,172.904 266.014,170.925 266.014,168.485L266.014,124.637C266.014,122.197 267.993,120.218 270.433,120.218L271.335,120.218L271.335,116.373L247.541,116.378L247.541,159.883C247.541,166.305 233.521,169.708 233.521,159.299L233.521,131.033C233.521,122.201 226.362,115.043 217.531,115.043L207.481,115.043L207.481,118.827C211.155,119.619 214.956,124.758 214.956,131.762L214.957,131.762L214.946,162.265ZM128.57,130.934L128.558,161.436L128.56,161.437C128.56,168.44 132.361,173.579 136.034,174.371L136.034,178.155L125.984,178.155C117.153,178.155 109.994,170.996 109.994,162.166L109.994,133.9C109.994,123.49 95.975,126.894 95.975,133.315L95.975,176.745L72.18,176.749L72.18,172.903L73.082,172.903C75.522,172.903 77.501,170.925 77.501,168.484L77.501,124.637C77.501,122.197 75.522,120.218 73.082,120.218L72.18,120.218L72.18,116.373L95.975,116.373L95.975,121.438C100.47,117.682 106.518,115.043 112.533,115.043L112.712,115.043C121.488,115.043 128.57,122.157 128.57,130.934ZM159.239,122.991L159.249,123.009C159.413,123.284 159.566,123.565 159.714,123.85C159.744,123.91 159.775,123.969 159.805,124.029C159.953,124.323 160.094,124.622 160.224,124.926C161.057,126.881 161.518,129.031 161.518,131.289L161.518,153.5L161.522,153.499C161.522,162.873 169.122,168.946 178.496,168.946C179.951,168.946 181.362,168.761 182.709,168.416C181.879,166.464 181.42,164.317 181.42,162.062L181.42,139.851L181.416,139.853C181.416,130.478 173.816,124.406 164.442,124.406C162.987,124.406 161.576,124.591 160.228,124.936C159.942,124.262 159.61,123.613 159.239,122.991Z' style='fill:rgb(78,78,78);fill-rule:nonzero;'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
-    background-repeat: no-repeat;
-    background-position: top left;
-    padding-left: 140px;
     color: $logo-color;
-  }
-
-  span {
     font-size: 0.7rem;
     display: block;
     line-height: 1.1;
-  }
 }
 
 .footer-links-navigation {
@@ -81,4 +72,4 @@ $logo-color: #4e4e4e !default;
       border: none;
     }
   }
-}
+}
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -43,14 +43,9 @@ const AdditionalLogosSection = () => {
 };
 
 const FooterCopyrightSection = ({ intl }) => (
-  <section className="footer-copyright py-3 px-4">
-    <div className="footer-copyright__logo">
-      <span>&copy; {new Date().getFullYear()} - FCT|FCCN
-        <br />
-        {intl.formatMessage(messages['footer.copyright.message'])}
-      </span>
-    </div>
-  </section>
+  <div className="footer-copyright">
+    &copy; {new Date().getFullYear()} - FCT|FCCN {intl.formatMessage(messages['footer.copyright.message'])}
+  </div>
 );
 
 FooterCopyrightSection.propTypes = {
@@ -87,32 +82,34 @@ class SiteFooter extends React.Component {
       <footer
         role="contentinfo"
       >
-        <section className="footer-navigation container-fluid d-md-flex justify-content-between py-3 px-4">
-          <div className="footer-navigation__brand d-flex flex-column justify-content-between">
-            <a
-              className="d-block"
-              href={config.LMS_BASE_URL}
-              aria-label={intl.formatMessage(messages['footer.logo.ariaLabel'])}
-            >
-              <img
-                style={{ maxHeight: 45 }}
-                src={logo || config.LOGO_TRADEMARK_URL}
-                alt={intl.formatMessage(messages['footer.logo.altText'])}
+        <section className="footer-navigation">
+          <div className="container d-md-flex justify-content-between py-3 px-4">
+            <div className="footer-navigation__brand d-flex flex-column justify-content-between">
+              <a
+                className="d-block"
+                href={config.LMS_BASE_URL}
+                aria-label={intl.formatMessage(messages['footer.logo.ariaLabel'])}
+              >
+                <img
+                  style={{ maxHeight: 45 }}
+                  src={logo || config.LOGO_TRADEMARK_URL}
+                  alt={intl.formatMessage(messages['footer.logo.altText'])}
+                />
+              </a>
+              <FooterCopyrightSection intl={intl} />
+              <FooterSocial intl={intl} />
+            </div>
+            <FooterLinks intl={intl} />
+
+            {showLanguageSelector && (
+              <LanguageSelector
+                options={supportedLanguages}
+                onSubmit={onLanguageSelected}
               />
-            </a>
-            <FooterSocial intl={intl} />
+            )}
           </div>
-          <FooterLinks intl={intl} />
-
-          {showLanguageSelector && (
-            <LanguageSelector
-              options={supportedLanguages}
-              onSubmit={onLanguageSelected}
-            />
-          )}
         </section>
         <AdditionalLogosSection />
-        <FooterCopyrightSection intl={intl} />
       </footer>
     );
   }

diff --git a/src/components/__snapshots__/Footer.test.jsx.snap b/src/components/__snapshots__/Footer.test.jsx.snap
@@ -5,80 +5,77 @@ exports[`<Footer /> renders correctly renders with a language selector 1`] = `
   role="contentinfo"
 >
   <section
-    className="footer-navigation container-fluid d-md-flex justify-content-between py-3 px-4"
+    className="footer-navigation"
   >
     <div
-      className="footer-navigation__brand d-flex flex-column justify-content-between"
-    >
-      <a
-        aria-label="edX Home"
-        className="d-block"
-        href="http://localhost:18000"
-      >
-        <img
-          alt="Powered by Open edX"
-          src="https://edx-cdn.org/v3/default/logo-trademark.svg"
-          style={
-            {
-              "maxHeight": 45,
-            }
-          }
-        />
-      </a>
-    </div>
-    <form
-      className="form-inline"
-      onSubmit={[Function]}
+      className="container d-md-flex justify-content-between py-3 px-4"
     >
       <div
-        className="form-group"
+        className="footer-navigation__brand d-flex flex-column justify-content-between"
       >
-        <label
-          className="d-inline-block m-0"
-          htmlFor="site-footer-language-select"
+        <a
+          aria-label="edX Home"
+          className="d-block"
+          href="http://localhost:18000"
         >
-          Choose Language
-        </label>
-        <select
-          className="form-control-sm mx-2"
-          defaultValue="en"
-          id="site-footer-language-select"
-          name="site-footer-language-select"
+          <img
+            alt="Powered by Open edX"
+            src="https://edx-cdn.org/v3/default/logo-trademark.svg"
+            style={
+              {
+                "maxHeight": 45,
+              }
+            }
+          />
+        </a>
+        <div
+          className="footer-copyright"
         >
-          <option
-            value="en"
+          © 
+          2024
+           - FCT|FCCN 
+          All rights reserved
+        </div>
+      </div>
+      <form
+        className="form-inline"
+        onSubmit={[Function]}
+      >
+        <div
+          className="form-group"
+        >
+          <label
+            className="d-inline-block m-0"
+            htmlFor="site-footer-language-select"
           >
-            English
-          </option>
-          <option
-            value="pt-pt"
+            Choose Language
+          </label>
+          <select
+            className="form-control-sm mx-2"
+            defaultValue="en"
+            id="site-footer-language-select"
+            name="site-footer-language-select"
           >
-            Português
-          </option>
-        </select>
-        <button
-          className="btn btn-outline-primary btn-sm"
-          data-testid="site-footer-submit-btn"
-          type="submit"
-        >
-          Apply
-        </button>
-      </div>
-    </form>
-  </section>
-  <section
-    className="footer-copyright py-3 px-4"
-  >
-    <div
-      className="footer-copyright__logo"
-    >
-      <span>
-        © 
-        2024
-         - FCT|FCCN
-        <br />
-        All rights reserved
-      </span>
+            <option
+              value="en"
+            >
+              English
+            </option>
+            <option
+              value="pt-pt"
+            >
+              Português
+            </option>
+          </select>
+          <button
+            className="btn btn-outline-primary btn-sm"
+            data-testid="site-footer-submit-btn"
+            type="submit"
+          >
+            Apply
+          </button>
+        </div>
+      </form>
     </div>
   </section>
 </footer>
@@ -89,41 +86,38 @@ exports[`<Footer /> renders correctly renders without a language selector 1`] =
   role="contentinfo"
 >
   <section
-    className="footer-navigation container-fluid d-md-flex justify-content-between py-3 px-4"
+    className="footer-navigation"
   >
     <div
-      className="footer-navigation__brand d-flex flex-column justify-content-between"
+      className="container d-md-flex justify-content-between py-3 px-4"
     >
-      <a
-        aria-label="edX Home"
-        className="d-block"
-        href="http://localhost:18000"
+      <div
+        className="footer-navigation__brand d-flex flex-column justify-content-between"
       >
-        <img
-          alt="Powered by Open edX"
-          src="https://edx-cdn.org/v3/default/logo-trademark.svg"
-          style={
-            {
-              "maxHeight": 45,
+        <a
+          aria-label="edX Home"
+          className="d-block"
+          href="http://localhost:18000"
+        >
+          <img
+            alt="Powered by Open edX"
+            src="https://edx-cdn.org/v3/default/logo-trademark.svg"
+            style={
+              {
+                "maxHeight": 45,
+              }
             }
-          }
-        />
-      </a>
-    </div>
-  </section>
-  <section
-    className="footer-copyright py-3 px-4"
-  >
-    <div
-      className="footer-copyright__logo"
-    >
-      <span>
-        © 
-        2024
-         - FCT|FCCN
-        <br />
-        All rights reserved
-      </span>
+          />
+        </a>
+        <div
+          className="footer-copyright"
+        >
+          © 
+          2024
+           - FCT|FCCN 
+          All rights reserved
+        </div>
+      </div>
     </div>
   </section>
 </footer>
@@ -134,41 +128,38 @@ exports[`<Footer /> renders correctly renders without a language selector in pt-
   role="contentinfo"
 >
   <section
-    className="footer-navigation container-fluid d-md-flex justify-content-between py-3 px-4"
+    className="footer-navigation"
   >
     <div
-      className="footer-navigation__brand d-flex flex-column justify-content-between"
+      className="container d-md-flex justify-content-between py-3 px-4"
     >
-      <a
-        aria-label="edX Home"
-        className="d-block"
-        href="http://localhost:18000"
+      <div
+        className="footer-navigation__brand d-flex flex-column justify-content-between"
       >
-        <img
-          alt="Powered by Open edX"
-          src="https://edx-cdn.org/v3/default/logo-trademark.svg"
-          style={
-            {
-              "maxHeight": 45,
+        <a
+          aria-label="edX Home"
+          className="d-block"
+          href="http://localhost:18000"
+        >
+          <img
+            alt="Powered by Open edX"
+            src="https://edx-cdn.org/v3/default/logo-trademark.svg"
+            style={
+              {
+                "maxHeight": 45,
+              }
             }
-          }
-        />
-      </a>
-    </div>
-  </section>
-  <section
-    className="footer-copyright py-3 px-4"
-  >
-    <div
-      className="footer-copyright__logo"
-    >
-      <span>
-        © 
-        2024
-         - FCT|FCCN
-        <br />
-        All rights reserved
-      </span>
+          />
+        </a>
+        <div
+          className="footer-copyright"
+        >
+          © 
+          2024
+           - FCT|FCCN 
+          All rights reserved
+        </div>
+      </div>
     </div>
   </section>
 </footer>