apps/userdashboard/*: small styling fixes fixes #2392

liqd · Jul 17, 2023 · 1dc7b9c · 1dc7b9c
1 parent 6e771fb
commit 1dc7b9c
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 50 deletions.
diff --git a/adhocracy-plus/assets/scss/_utility.scss b/adhocracy-plus/assets/scss/_utility.scss
@@ -137,6 +137,10 @@
     color: $brand-tertiary;
 }
 
+.u-text--gray {
+    color: $gray;
+}
+
 .u-no-transition {
     transition: none;
 }

diff --git a/adhocracy-plus/assets/scss/components/_action.scss b/adhocracy-plus/assets/scss/components/_action.scss
@@ -25,7 +25,8 @@
     color: $brand-primary;
     text-align: center;
     float: left;
-    padding: 0 0.2 * $padding;
+    padding: 0 0.5 * $padding;
+    min-width: 40px;
 }
 
 .action__main {

diff --git a/adhocracy-plus/assets/scss/components/_userdashboard.scss b/adhocracy-plus/assets/scss/components/_userdashboard.scss
@@ -17,8 +17,10 @@
 }
 
 .userdashboard-profile__name {
+    font-family: $font-family-base;
+    font-size: $font-size-md;
+    font-weight: $demi-bold;
     overflow-wrap: break-word;
-    text-transform: none;
     margin-top: 0;
 }
 

diff --git a/adhocracy-plus/assets/scss/icons/style.css b/adhocracy-plus/assets/scss/icons/style.css
@@ -1,80 +1,95 @@
 @font-face {
-  font-family: 'icomoon';
-  src:  url('../fonts/icomoon.eot?jd0zuw');
-  src:  url('../fonts/icomoon.eot?jd0zuw#iefix') format('embedded-opentype'),
-    url('../fonts/icomoon.ttf?jd0zuw') format('truetype'),
-    url('../fonts/icomoon.woff?jd0zuw') format('woff'),
-    url('../fonts/icomoon.svg?jd0zuw#icomoon') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-
-[class^="icon-"], [class*=" icon-"] {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'icomoon' !important;
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    font-family: "icomoon";
+    src: url("../fonts/icomoon.eot?jd0zuw");
+    src: url("../fonts/icomoon.eot?jd0zuw#iefix") format("embedded-opentype"),
+        url("../fonts/icomoon.ttf?jd0zuw") format("truetype"),
+        url("../fonts/icomoon.woff?jd0zuw") format("woff"),
+        url("../fonts/icomoon.svg?jd0zuw#icomoon") format("svg");
+    font-weight: normal;
+    font-style: normal;
+}
+
+[class^="icon-"],
+[class*=" icon-"] {
+    /* use !important to prevent issues with browser extensions that change fonts */
+    font-family: "icomoon" !important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 .icon-answered:before {
-  content: "\e900";
-  font-size: 0.9rem;
+    content: "\e900";
+    font-size: 0.9rem;
 }
+
 /* not used */
 .icon-arrow-down:before {
-  content: "\e901";
+    content: "\e901";
 }
+
 /* not used */
 .icon-arrow-right:before {
-  content: "\e902";
+    content: "\e902";
 }
+
 /* not used */
 .icon-clear:before {
-  content: "\e903";
+    content: "\e903";
 }
+
 .icon-in-list:before {
-  content: "\e904";
-  font-size: 1.1rem;
-  vertical-align: bottom;
+    content: "\e904";
+    font-size: 1.1rem;
+    vertical-align: bottom;
 }
+
 .icon-like:before {
-  content: "\e905";
+    content: "\e905";
 }
+
 /* not used */
 .icon-list:before {
-  content: "\e906";
-  font-size: 1.1rem;
+    content: "\e906";
+    font-size: 1.1rem;
 }
+
 .icon-push-in-list:before {
-  content: "\e907";
-  font-size: 1.1rem;
-  vertical-align: bottom;
+    content: "\e907";
+    font-size: 1.1rem;
+    vertical-align: bottom;
 }
+
 /* not used */
 .icon-screen-view:before {
-  content: "\e908";
+    content: "\e908";
 }
+
 /* not used */
 .icon-sort-list:before {
-  content: "\e909";
+    content: "\e909";
 }
+
 /* not used */
 .icon-talking-desired:before {
-  content: "\e90a";
+    content: "\e90a";
+}
+
+.icon__img {
+    width: 32px;
 }
 
 .fa-stack {
-  font-size: 0.5rem;
+    font-size: 0.5rem;
 }
 
 .fa-eye {
-  font-size: 1.05rem;
+    font-size: 1.05rem;
 }
diff --git a/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationNotificationList.jsx b/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationNotificationList.jsx
@@ -184,7 +184,7 @@ export default class ModerationNotificationList extends Component {
             <h2 className="mt-2">
               <a href={projectUrl}>{projectTitle}</a>
             </h2>
-            <span className="text-muted">
+            <span className="u-text--gray">
               {byText}
               {organisation}
             </span>

diff --git a/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationProjects.jsx b/apps/userdashboard/assets/js/a4_candy_userdashboard/ModerationProjects.jsx
@@ -121,15 +121,15 @@ export default class ModerationProjects extends Component {
                   </div>
                   <div className="tile__body">
                     <div>
-                      <span className="text-muted">{byText}{item.organisation}</span>
+                      <span className="u-text--gray">{byText}{item.organisation}</span>
                       <h3 className="tile__title mb-2">
                         {item.title}
                       </h3>
                       {item.access === 1 && <span className="badge badge--dark">{publicText}</span>}
                       {item.access === 2 && <span className="badge badge--dark">{semiPrivateText}</span>}
                       {item.access === 3 && <span className="badge badge--dark">{privateText}</span>}
                     </div>
-                    <div className="row text-muted mt-3">
+                    <div className="row u-text--gray mt-3">
                       {item.num_reported_unread_comments > 0 && <div className="col-4"><i className="fas fa-exclamation-circle me-1" aria-hidden="true" /> {item.num_reported_unread_comments} <span className="d-none d-lg-inline-block">{reportCountText}</span></div>}
                       {item.comment_count > 0 && <div className="col-4"><i className="far fa-comment" aria-hidden="true" /> {item.comment_count} <span className="d-none d-lg-inline-block">{commentCountText}</span></div>}
                       {item.future_phase && !item.active_phase && <div className="col-4"><i className="far fa-clock" aria-hidden="true" /> {item.participation_string}</div>}

diff --git a/apps/userdashboard/templates/a4_candy_userdashboard/base_userdashboard.html b/apps/userdashboard/templates/a4_candy_userdashboard/base_userdashboard.html
@@ -59,7 +59,7 @@ <h2 class="userdashboard-profile__name">
                             {{ user.username }}
                             </h2>
                         </a>
-                        <div>
+                        <div class="u-text--gray">
                             {% trans 'Since' %} {{ request.user.date_joined|date:"d M Y" }}
                         </div>
                     </div>
@@ -76,9 +76,10 @@ <h2 class="userdashboard-profile__name">
                       <h2 class="fs-6">{% trans 'Initiator Organisations' %}</h2>
                       {% for organisation in request.user.organisations %}
                       <div>
-                          <a class="btn btn--link text-decoration-none text-muted d-flex align-items-center" href="{% url 'a4dashboard:project-list' organisation_slug=organisation.slug %}">
+                          <a class="btn btn--link text-decoration-none u-text--gray d-flex align-items-center" href="{% url 'a4dashboard:project-list' organisation_slug=organisation.slug %}">
                             {% if organisation.logo %}
                               <img
+                                class="icon__img"
                                 src="{% thumbnail organisation.logo '0x40' %}"
                                 alt="{% if organisation.title %}{{ organisation.title }}{% else %}{{ organisation.name}}{% endif %}"
                               />
@@ -115,6 +116,7 @@ <h2 class="fs-6">
                                       class="text-decoration-none text-muted d-flex align-items-center mb-2" >
                                      {% if organisation.logo %}
                                        <img
+                                        class="icon__img"
                                         src="{% thumbnail organisation.logo '0x40' %}"
                                         alt="{% if organisation.title %}{{ organisation.title }}{% else %}{{ organisation.name}}{% endif %}"
                                       />
@@ -140,7 +142,7 @@ <h2 class="fs-6">
                         <h2 class="fs-6">{% trans 'Organisations' %}</h2>
                         {% if view.organisations %}
                         {% for organisation in view.organisations %}
-                        <a class="btn btn--link text-decoration-none text-muted d-flex align-items-center" href="{% url 'organisation' organisation_slug=organisation.slug %}">
+                        <a class="btn btn--link text-decoration-none u-text--gray d-flex align-items-center" href="{% url 'organisation' organisation_slug=organisation.slug %}">
                           {% if organisation.logo %}
                             <img
                               src="{% thumbnail organisation.logo '0x40' %}"