From f92288f858ab88406b8fc142203ad432c2d4ac34 Mon Sep 17 00:00:00 2001
From: Tudor Amariei <tudor.amariei@commitglobal.org>
Date: Thu, 4 Jul 2024 12:49:37 +0300
Subject: [PATCH] Update the header

---
 backend/hub/templates/base.html      |   1 +
 backend/hub/templates/header.html    | 240 +++++++++++++++------------
 backend/static_extras/css/header.css |  19 +++
 3 files changed, 151 insertions(+), 109 deletions(-)
 create mode 100644 backend/static_extras/css/header.css

diff --git a/backend/hub/templates/base.html b/backend/hub/templates/base.html
index 16ca00f4..766f0d00 100644
--- a/backend/hub/templates/base.html
+++ b/backend/hub/templates/base.html
@@ -24,6 +24,7 @@
     <link rel="stylesheet" href="{% static "css/colors.css" %}">
     <link rel="stylesheet" href="{% static "css/sizing.css" %}">
     <link rel="stylesheet" href="{% static "css/footer.css" %}">
+    <link rel="stylesheet" href="{% static "css/header.css" %}">
     <link rel="stylesheet" href="{% static "css/hub.css" %}">
 
     {% block styles %}{% endblock %}
diff --git a/backend/hub/templates/header.html b/backend/hub/templates/header.html
index 26955697..38378855 100644
--- a/backend/hub/templates/header.html
+++ b/backend/hub/templates/header.html
@@ -3,122 +3,144 @@
 {% load hub_tags %}
 
 <div class="navbar-container">
-    <div class="h-padded-wrapper columns has-background-grey-lighter pt-3 mr-0">
-        <div class="container column is-12 is-flex is-align-content-center">
-            <img src="{% static "images/code4romania-black.svg" %}" alt="code-4-ro" width="80"/>
-            <strong class="px-5">
-                O soluție Code for Romania.
-                <a href="https://code4.ro/ro/putem">Află mai multe</a>
-            </strong>
-        </div>
+  <div class="h-padded-wrapper columns pt-3 mr-0 banner">
+    <div class="container column is-12 is-flex is-align-content-center">
+      <a
+        href="https://www.commitglobal.org"
+        target="_blank"
+        aria-label="Link către site-ul Commit Global">
+        <svg
+          style="height: 32px; min-width: 80px; float: left; margin: 0 1em 0 0; display: block;"
+          viewBox="0 0 401.5 114.5" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="m87.4 2.4 16.2 2.4 29.6 52.4-29.6 52.5-16.2 2.4 21.4-54.9zm-41.6 0-16.2 2.4-29.6 52.4 29.6 52.5 16.2 2.4-17.5-54.9z"></path>
+          <path d="m45.8 2.4 20.8-2.4 7.5 31.7-7.5 25.5-24 6.2-28.3-6.2z" fill="#fff8da"></path>
+          <path d="m45.8 112.1 20.8 2.4 12.2-28.6-12.2-28.7h-52.3z" fill="#ffe46b"></path>
+          <path d="m87.4 2.4-20.8-2.4v57.2l21.6 6.2 30.6-6.2z" fill="#fff1b5"></path>
+          <path
+            d="m376.2 15.6h-8.9v-7.1h8.9zm-143 23.4c0-4.3-.7-7.1-2-8.5a5.6 5.6 0 0 0 -4.1-1.5 5.4 5.4 0 0 0 -4 1.5c-1.4 1.4-2 4.2-2 8.5s.6 7.1 2 8.5a5.4 5.4 0 0 0 4 1.5 5.6 5.6 0 0 0 4.1-1.5c1.3-1.4 2-4.2 2-8.5zm124.9 17.4h-8.7v-21a6.6 6.6 0 0 0 -1.7-4.9 6.1 6.1 0 0 0 -4.1-1.5 6.3 6.3 0 0 0 -4.1 1.5 6.1 6.1 0 0 0 -1.7 4.7v21.2h-8.7v-21a6.6 6.6 0 0 0 -1.7-4.9 6.4 6.4 0 0 0 -8.2 0 6.6 6.6 0 0 0 -1.7 4.9v21h-8.7v-34.8h8.5v3.2a11.5 11.5 0 0 1 8.7-3.6c4 0 7.1 1.4 9.2 4.4a13.8 13.8 0 0 1 10.5-4.4c3.6 0 6.5 1 8.6 3a13.8 13.8 0 0 1 3.8 10zm-58.7 0h-8.7v-21c0-2.2-.5-3.8-1.7-4.9a5.7 5.7 0 0 0 -4-1.5 6.1 6.1 0 0 0 -4.1 1.5c-1.2 1-1.7 2.6-1.7 4.7v21.2h-8.7v-21a6.6 6.6 0 0 0 -1.7-4.9 6.1 6.1 0 0 0 -4.1-1.5 5.9 5.9 0 0 0 -4.1 1.5 6.6 6.6 0 0 0 -1.7 4.9v21h-8.7v-34.8h8.5v3.2a11.5 11.5 0 0 1 8.7-3.6c4 0 7.1 1.4 9.2 4.4a13.7 13.7 0 0 1 10.5-4.4c3.6 0 6.5 1 8.5 3a13.4 13.4 0 0 1 3.8 10zm102.1 0h-4.7c-3.3 0-5.9-.9-7.6-2.9a10.5 10.5 0 0 1 -2.6-7v-17.3h-3.6v-6.6h3.6v-10.3h8.7v10.3h6.2v6.6h-6.2v16.7c0 2.1 1.1 3.2 3.1 3.2h3.1zm-25.4 0h-8.7v-34.8h8.7zm-134.2-17.4a35.6 35.6 0 0 1 -.8 8.1 12.3 12.3 0 0 1 -3.2 5.5q-3.9 4.2-10.8 4.2t-10.8-4.2a13.1 13.1 0 0 1 -3.1-5.5 35.6 35.6 0 0 1 -.8-8.1 35.6 35.6 0 0 1 .8-8.1 12.2 12.2 0 0 1 3.1-5.4c2.7-2.9 6.3-4.3 10.8-4.3s8.2 1.4 10.8 4.3a11.5 11.5 0 0 1 3.2 5.4 35.6 35.6 0 0 1 .8 8.1zm-35.4 2.8a17.7 17.7 0 0 1 -5.9 11.1 18.9 18.9 0 0 1 -24.5-1.3 14.3 14.3 0 0 1 -3.9-7.1 69.6 69.6 0 0 1 -.8-11.9 67.4 67.4 0 0 1 .8-11.8 14.6 14.6 0 0 1 3.9-7.2 18.9 18.9 0 0 1 24.5-1.3 18.3 18.3 0 0 1 5.9 11.1h-9.4c-1.2-4.5-3.8-6.7-8.1-6.7-2.6 0-4.6.8-5.9 2.5a6.6 6.6 0 0 0 -1.9 4 61.8 61.8 0 0 0 -.5 9.4 61.8 61.8 0 0 0 .5 9.4 7.4 7.4 0 0 0 7.8 6.5c4.3 0 6.9-2.2 8.1-6.7z"></path>
+          <path
+            d="m241.8 83.2a2.4 2.4 0 0 0 .7-1.8 2.1 2.1 0 0 0 -.7-1.8 2.7 2.7 0 0 0 -2-.7h-4.1v4.9h4.1a3.2 3.2 0 0 0 2-.6zm20.7 6.1-2.6-7.8-2.7 7.8zm-20.4 2.8a2.6 2.6 0 0 0 .7-1.9 2.5 2.5 0 0 0 -.7-1.9 2.8 2.8 0 0 0 -2.1-.7h-4.3v5.2h4.3a2.8 2.8 0 0 0 2.1-.7zm-20.7-2.1a33.8 33.8 0 0 0 .2-4.1 35.9 35.9 0 0 0 -.2-4.2 3.7 3.7 0 0 0 -3.5-3 3.2 3.2 0 0 0 -2.7 1.2 3.1 3.1 0 0 0 -.9 1.8c-.1.8-.1 2.1-.1 4.2a40.2 40.2 0 0 0 .1 4.1 3.8 3.8 0 0 0 .9 1.9 3.4 3.4 0 0 0 2.7 1.1 3.3 3.3 0 0 0 2.6-1.1 3.8 3.8 0 0 0 .9-1.9zm47.8 6.5h-4.3l-1.3-3.7h-7.6l-1.2 3.7h-4.4l7.8-21.3h3.2zm-22.2-6.1a5.8 5.8 0 0 1 -1.8 4.5 6.8 6.8 0 0 1 -4.8 1.6h-8.9v-21.3h8.6a6.6 6.6 0 0 1 4.8 1.6 5.6 5.6 0 0 1 1.8 4.4 5.1 5.1 0 0 1 -.8 2.8 5.6 5.6 0 0 1 -1.9 1.6 4.8 4.8 0 0 1 3 4.8zm-40.4 6.1h-13.9v-21.3h4.2v17.6h9.7zm80.6 0h-13.8v-21.3h4.1v17.6h9.7zm-61.5-13.3c0 .6.1 1.4.1 2.7s-.1 2.1-.1 2.6a18.3 18.3 0 0 1 -.2 2.1 5.8 5.8 0 0 1 -.6 2.1 7 7 0 0 1 -1.3 1.7 8.3 8.3 0 0 1 -11.5 0 6.6 6.6 0 0 1 -1.2-1.7 5.2 5.2 0 0 1 -.7-2.1 20.6 20.6 0 0 1 -.2-2.1v-5.3c0-.5.1-1.2.2-2.1a6.5 6.5 0 0 1 .7-2.1 6.1 6.1 0 0 1 1.2-1.6 8.1 8.1 0 0 1 11.5 0 6.5 6.5 0 0 1 1.3 1.6 6.5 6.5 0 0 1 .6 2.1 18.3 18.3 0 0 1 .2 2.1zm-38.4 4.6a13.8 13.8 0 0 1 -.4 3.8 7.4 7.4 0 0 1 -1.6 2.7 8.6 8.6 0 0 1 -11.8.1 5.9 5.9 0 0 1 -1.7-3.2 24.2 24.2 0 0 1 -.4-5.3 23.6 23.6 0 0 1 .4-5.3 5.6 5.6 0 0 1 1.7-3.2 7.8 7.8 0 0 1 5.8-2.4 8.1 8.1 0 0 1 5.5 1.9 8 8 0 0 1 2.5 4.9h-4.2a3.7 3.7 0 0 0 -3.8-3.1 3.4 3.4 0 0 0 -2.7 1.2 3.7 3.7 0 0 0 -.8 1.8 34.5 34.5 0 0 0 -.2 4.2 32.5 32.5 0 0 0 .2 4.1 3.7 3.7 0 0 0 .8 1.9 3.4 3.4 0 0 0 2.7 1.1 3.7 3.7 0 0 0 2.9-1.2 3.9 3.9 0 0 0 1-2.8v-.9h-3.9v-3.4h8z"></path>
+          <path d="m87.4 112.1-20.8 2.4v-57.3h52.2z" fill="#ffd209"></path>
+        </svg>
+      </a>
+
+      <strong class="px-4">
+        <a href="https://www.commitglobal.org" class="subtle-link" target="_blank">
+          O soluție Commit Global.
+        </a>
+      </strong>
     </div>
-    <div class="h-padded-wrapper">
-        <div class="container border-b">
-            <nav class="navbar" role="navigation" aria-label="main navigation">
-                <div class="navbar-brand">
-                    <a class="navbar-item" href="{% url 'home' %}">
-                        <img src="{% static "images/votong_by_c4ro.svg" %}" alt="VotONg logo" width="200">
-                    </a>
-
-                    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
-                       data-target="navbarBasicExample">
-                        <span aria-hidden="true"></span>
-                        <span aria-hidden="true"></span>
-                        <span aria-hidden="true"></span>
-                    </a>
-                </div>
-                <div id="navbarBasicExample" class="navbar-menu">
-                    <div class="navbar-end has-text-centered-touch">
-                        <a href="{% url 'home' %}" class="navbar-item">
-                            {% trans "Home" %}
-                        </a>
-
-                        <a href="{% url 'about' %}" class="navbar-item">
-                            {% trans "About the platform" %}
-                        </a>
-
-                        <a href="{% url 'blog-list' %}" class="navbar-item">Blog</a>
-
-                        <a href="{% url 'ngos' %}" class="navbar-item">
-                            {% trans "Organizations" %}
-                        </a>
-
-                        <a href="{% url 'candidates' %}" class="navbar-item">
-                            {% trans "VotONG Elections" %}
-                        </a>
-
-                        <a href="{% url 'history' %}" class="navbar-item">
-                            {% trans "History" %}
-                        </a>
-
-                        {% if ORG_REGISTRATION_ENABLED %}
-                        <a href="{% url 'ngos-register-request' %}" class="navbar-item">
-                            {% trans "Register your organization" %}
-                        </a>
-                        {% endif %}
-
-                        <!-- <a href="{% url 'candidates' %}" class="navbar-item">
+  </div>
+
+  <div class="h-padded-wrapper">
+    <div class="container border-b">
+      <nav class="navbar" role="navigation" aria-label="main navigation">
+        <div class="navbar-brand">
+          <a class="navbar-item" href="{% url 'home' %}">
+            <img src="{% static "images/votong_by_c4ro.svg" %}" alt="VotONG logo" width="200">
+          </a>
+
+          <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
+             data-target="navbarBasicExample">
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+          </a>
+        </div>
+        <div id="navbarBasicExample" class="navbar-menu">
+          <div class="navbar-end has-text-centered-touch">
+            <a href="{% url 'home' %}" class="navbar-item">
+              {% trans "Home" %}
+            </a>
+
+            <a href="{% url 'about' %}" class="navbar-item">
+              {% trans "About the platform" %}
+            </a>
+
+            <a href="{% url 'blog-list' %}" class="navbar-item">Blog</a>
+
+            <a href="{% url 'ngos' %}" class="navbar-item">
+              {% trans "Organizations" %}
+            </a>
+
+            <a href="{% url 'candidates' %}" class="navbar-item">
+              {% trans "VotONG Elections" %}
+            </a>
+
+            <a href="{% url 'history' %}" class="navbar-item">
+              {% trans "History" %}
+            </a>
+
+            {% if ORG_REGISTRATION_ENABLED %}
+              <a href="{% url 'ngos-register-request' %}" class="navbar-item">
+                {% trans "Register your organization" %}
+              </a>
+            {% endif %}
+
+            <!-- <a href="{% url 'candidates' %}" class="navbar-item">
                             {% trans "Candidates" %}
                         </a> -->
 
-                        <!-- <a href="{% url 'rules' %}" class="navbar-item">
+            <!-- <a href="{% url 'rules' %}" class="navbar-item">
                             {% trans "Metodology" %}
                         </a> -->
 
-                        <div class="navbar-item">|</div>
-
-                        {% if request.user.is_authenticated %}
-
-                        {% avatar user 50 class="img-circle img-responsive nav-avatar" id="user_avatar" %}
-
-                        {% if user|in_committee_or_staff_groups %}
-                        <a href="{% url 'committee-ngos' %}" class="navbar-item">
-                        {% elif user.orgs.exists %}
-                        <a href="{% url 'ngo-update' user.orgs.first.id %}" class="navbar-item">
-                        {% else %}
-                        <a href="{% url 'account-password-reset' %}" class="navbar-item">
-                        {% endif %}
-                            {{ user.email|truncatechars:24 }}
-                        </a>
-
-                        <a href="{% url 'account_logout' %}" class="navbar-item">{% trans "Logout" %}</a>
-
-                        {% if user.is_impersonate %}
-                        <a  href="{% url 'impersonate-stop' %}" class="navbar-item" style="color:red; text-align:center;">
-                            {% trans "STOP IMPERSONATING" %}<br>{{ request.user.email }}
-                        </a>
-                        {% endif %}
-
-                        {% else %}
-
-                        {# <a  href="{% url 'account_login'%}" class="navbar-item"> #}
-                        <a  href="/allauth/amazon-cognito/login/?process=login" class="navbar-item">
-                            {% trans "Login" %}
-                        </a>
-                        {% endif %}
-
-
-                        {% comment %}
-                        {% get_available_languages as LANGUAGES %}
-                        {% get_current_language as LANGUAGE_CODE %}
-                        <div class="navbar-item">
-                            <form class="d-inline" action="{% url 'set_language' %}" method="post">
-                                {% csrf_token %}
-                                <input name="next" type="hidden" value="{{ redirect_to }}"/>
-                                <div class="select">
-                                    <select id="language" name="language" onchange="this.form.submit()">
-                                        {% for language in LANGUAGES %}
-                                        <option {% if language.0 == LANGUAGE_CODE %} selected {% endif %} name="language" value="{{language.0}}">{{language.0 | upper}}</option>
-                                        {% endfor %}
-                                    </select>
-                                </div>
-                            </form>
-                        </div>
-                        {% endcomment %}
-
-                    </div>
-                </div>
-            </nav>
+            <div class="navbar-item">|</div>
+
+            {% if request.user.is_authenticated %}
+
+              {% avatar user 50 class="img-circle img-responsive nav-avatar" id="user_avatar" %}
+
+              {% if user|in_committee_or_staff_groups %}
+                <a href="{% url 'committee-ngos' %}" class="navbar-item">
+              {% elif user.orgs.exists %}
+                <a href="{% url 'ngo-update' user.orgs.first.id %}" class="navbar-item">
+              {% else %}
+                <a href="{% url 'account-password-reset' %}" class="navbar-item">
+              {% endif %}
+            {{ user.email|truncatechars:24 }}
+            </a>
+
+              <a href="{% url 'account_logout' %}" class="navbar-item">{% trans "Logout" %}</a>
+
+              {% if user.is_impersonate %}
+                <a href="{% url 'impersonate-stop' %}" class="navbar-item" style="color:red; text-align:center;">
+                  {% trans "STOP IMPERSONATING" %}<br>{{ request.user.email }}
+                </a>
+              {% endif %}
+
+            {% else %}
+
+              {# <a  href="{% url 'account_login'%}" class="navbar-item"> #}
+              <a href="/allauth/amazon-cognito/login/?process=login" class="navbar-item">
+                {% trans "Login" %}
+              </a>
+            {% endif %}
+
+
+            {% comment %}
+              {% get_available_languages as LANGUAGES %}
+              {% get_current_language as LANGUAGE_CODE %}
+              <div class="navbar-item">
+                <form class="d-inline" action="{% url 'set_language' %}" method="post">
+                  {% csrf_token %}
+                  <input name="next" type="hidden" value="{{ redirect_to }}"/>
+                  <div class="select">
+                    <select id="language" name="language" onchange="this.form.submit()">
+                      {% for language in LANGUAGES %}
+                        <option {% if language.0 == LANGUAGE_CODE %} selected {% endif %} name="language"
+                                                                     value="{{ language.0 }}">{{ language.0 | upper }}</option>
+                      {% endfor %}
+                    </select>
+                  </div>
+                </form>
+              </div>
+            {% endcomment %}
+
+          </div>
         </div>
+      </nav>
     </div>
+  </div>
 </div>
diff --git a/backend/static_extras/css/header.css b/backend/static_extras/css/header.css
new file mode 100644
index 00000000..ba54b6ed
--- /dev/null
+++ b/backend/static_extras/css/header.css
@@ -0,0 +1,19 @@
+.subtle-link {
+    color: #000;
+
+    &:hover {
+        color: #165ccc;
+    }
+}
+
+.banner {
+    background-color: #f3f4f6;
+}
+
+.banner-content {
+    padding: 12px 0;
+    font-size: 14px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+}