Merge pull request #2080 from viviicat/dark-read-hist-editions

Further dark theme fixes

bookwyrm/static/css/bookwyrm/utilities/_colors.scss

@@ -23,3 +23,8 @@
 .has-background-tertiary {
     background-color: $background-tertiary !important;
 }
+
+/* Workaround for dark theme as .has-text-black doesn't give desired effect. */
+.has-text-default {
+    color: $text !important;
+}

bookwyrm/static/css/themes/bookwyrm-dark.scss

@@ -53,6 +53,7 @@ $link-hover: $white-bis;
 $link-hover-border: #51595d;
 $link-focus: $white-bis;
 $link-active: $white-bis;
+$link-light: #0d1c26;
 
 /* bulma overrides */
 $background: $background-secondary;
@@ -83,6 +84,13 @@ $progress-value-background-color: $border-light;
 $family-primary: $family-sans-serif;
 $family-secondary: $family-sans-serif;
 
+.has-text-muted {
+    color: $grey-lighter !important;
+}
+
+.has-text-more-muted {
+    color: $grey-light !important;
+}
 
 @import "../bookwyrm.scss";
 @import "../vendor/icons.css";

bookwyrm/static/css/themes/bookwyrm-light.scss

@@ -57,5 +57,13 @@ $invisible-overlay-background-color: rgba($scheme-invert, 0.66);
 $family-primary: $family-sans-serif;
 $family-secondary: $family-sans-serif;
 
+.has-text-muted {
+    color: $grey-dark !important;
+}
+
+.has-text-more-muted {
+    color: $grey !important;
+}
+
 @import "../bookwyrm.scss";
 @import "../vendor/icons.css";

bookwyrm/templates/book/editions/editions.html

@@ -21,7 +21,7 @@
 
         <div class="column my-3-mobile ml-3-tablet mr-auto">
             <h2 class="title is-5 mb-1">
-                <a href="{{ book.local_path }}" class="has-text-black">
+                <a href="{{ book.local_path }}" class="has-text-default">
                     {{ book|book_title }}
                 </a>
             </h2>

bookwyrm/templates/groups/members.html

@@ -38,7 +38,7 @@
     {% for membership in group.memberships.all %}
     {% with member=membership.user %}
     <div class="box has-text-centered is-shadowless has-background-tertiary my-2 mx-2 member_{{ member.id }}">
-        <a href="{{ member.local_path }}" class="has-text-black">
+        <a href="{{ member.local_path }}" class="has-text-default">
             {% include 'snippets/avatar.html' with user=member large=True %}
             <span title="{{ member.display_name }}" class="is-block is-6 has-text-weight-bold">{{ member.display_name|truncatechars:10 }}</span>
             <span title="@{{ member|username }}" class="is-block pb-3">@{{ member|username|truncatechars:8 }}</span>

bookwyrm/templates/groups/suggested_users.html

@@ -9,7 +9,7 @@
     <div class="column is-flex is-flex-grow-0">
         {% for user in suggested_users %}
         <div class="box has-text-centered is-shadowless has-background-tertiary m-2">
-            <a href="{{ user.local_path }}" class="has-text-black">
+            <a href="{{ user.local_path }}" class="has-text-default">
                 {% include 'snippets/avatar.html' with user=user large=True %}
                 <span title="{{ user.display_name }}" class="is-block is-6 has-text-weight-bold">{{ user.display_name|truncatechars:10 }}</span>
                 <span title="@{{ user|username }}" class="is-block pb-3">@{{ user|username|truncatechars:8 }}</span>

bookwyrm/templates/notifications/items/boost.html

@@ -47,12 +47,12 @@
 
 
 {% block preview %}
-<div class="notification py-2 {% if notification.id in unread %}is-primary is-light{% else %}has-background-body has-text-grey-dark{% endif %}">
+<div class="notification py-2 {% if notification.id in unread %}is-primary is-light{% else %}has-background-body has-text-muted{% endif %}">
     <div class="columns">
         <div class="column is-clipped">
             {% include 'snippets/status_preview.html' with status=related_status %}
         </div>
-        <div class="column is-narrow has-grey-dark">
+        <div class="column is-narrow has-text-muted">
             {{ related_status.published_date|timesince }}
             {% include 'snippets/privacy-icons.html' with item=related_status %}
         </div>

bookwyrm/templates/notifications/items/fav.html

@@ -47,12 +47,12 @@
 
 
 {% block preview %}
-<div class="notification py-2 {% if notification.id in unread %}is-primary is-light{% else %}has-background-body has-text-grey-dark{% endif %}">
+<div class="notification py-2 {% if notification.id in unread %}is-primary is-light{% else %}has-background-body has-text-muted{% endif %}">
     <div class="columns">
         <div class="column is-clipped">
             {% include 'snippets/status_preview.html' with status=related_status %}
         </div>
-        <div class="column is-narrow has-grey-dark">
+        <div class="column is-narrow has-text-muted">
             {{ related_status.published_date|timesince }}
             {% include 'snippets/privacy-icons.html' with item=related_status %}
         </div>

bookwyrm/templates/notifications/items/layout.html

@@ -1,7 +1,7 @@
 {% load notification_page_tags %}
 {% related_status notification as related_status %}
 <div class="notification {% if notification.id in unread %}has-background-primary{% endif %}">
-    <div class="columns is-mobile {% if notification.id in unread %}has-text-white{% else %}has-text-grey{% endif %}">
+    <div class="columns is-mobile {% if notification.id in unread %}has-text-white{% else %}has-text-more-muted{% endif %}">
         <div class="column is-narrow is-size-3">
             <a class="icon" href="{% block primary_link %}{% endblock %}">
                 {% block icon %}{% endblock %}

bookwyrm/templates/notifications/items/mention.html

@@ -48,12 +48,12 @@
 
 
 {% block preview %}
-<div class="notification py-2 {% if notification.id in unread %}is-primary is-light{% else %}has-background-body has-text-black{% endif %}">
+<div class="notification py-2 {% if notification.id in unread %}is-primary is-light{% else %}has-background-body has-text-default{% endif %}">
     <div class="columns">
         <div class="column is-clipped">
             {% include 'snippets/status_preview.html' with status=related_status %}
         </div>
-        <div class="column is-narrow has-text-black">
+        <div class="column is-narrow has-text-default">
             {{ related_status.published_date|timesince }}
             {% include 'snippets/privacy-icons.html' with item=related_status %}
         </div>

bookwyrm/templates/notifications/items/reply.html

@@ -51,12 +51,12 @@
 
 
 {% block preview %}
-<div class="notification py-2 {% if notification.id in unread %}is-primary is-light{% else %}has-background-body has-text-black{% endif %}">
+<div class="notification py-2 {% if notification.id in unread %}is-primary is-light{% else %}has-background-body has-text-default{% endif %}">
     <div class="columns">
         <div class="column is-clipped">
             {% include 'snippets/status_preview.html' with status=related_status %}
         </div>
-        <div class="column is-narrow has-text-black">
+        <div class="column is-narrow has-text-default">
             {{ related_status.published_date|timesince }}
             {% include 'snippets/privacy-icons.html' with item=related_status %}
         </div>

bookwyrm/templates/snippets/suggested_users.html

@@ -5,7 +5,7 @@
     {% for user in suggested_users %}
     <div class="column is-flex is-flex-grow-0">
         <div class="box has-text-centered is-shadowless has-background-tertiary m-0">
-            <a href="{{ user.local_path }}" class="has-text-black">
+            <a href="{{ user.local_path }}" class="has-text-default">
                 {% include 'snippets/avatar.html' with user=user large=True %}
                 <span title="{{ user.display_name }}" class="is-block is-6 has-text-weight-bold">{{ user.display_name|truncatechars:10 }}</span>
                 <span title="@{{ user|username }}" class="is-block pb-3">@{{ user|username|truncatechars:8 }}</span>