From 67c727716c0d93b9b351a12b291729fce160f3ed Mon Sep 17 00:00:00 2001
From: glyph <glyph@mycelial.technology>
Date: Mon, 7 Mar 2022 12:02:03 +0200
Subject: [PATCH] fix dark theme styling and button widths

---
 peach-web/static/css/_variables.css            | 18 ++++++++----------
 peach-web/static/css/peachcloud.css            | 14 ++++++++++----
 .../templates/scuttlebutt/inactive.html.tera   |  4 ++--
 .../templates/scuttlebutt/peers_list.html.tera |  4 ++--
 .../templates/scuttlebutt/profile.html.tera    |  2 +-
 .../scuttlebutt/update_profile.html.tera       |  4 ++--
 6 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/peach-web/static/css/_variables.css b/peach-web/static/css/_variables.css
index 3f5adc3..57411d8 100644
--- a/peach-web/static/css/_variables.css
+++ b/peach-web/static/css/_variables.css
@@ -170,6 +170,7 @@
 
   --background: var(--moon-gray);
   --button-background: var(--light-gray);
+  --button-border: var(--near-black);
   --circle-background: var(--light-gray);
   --circle-small-hover-background: var(--white);
 
@@ -180,6 +181,8 @@
 
   --capsule-background: var(--light-gray);
 
+  --list-background: var(--light-gray);
+
   --text-color-normal: var(--near-black);
   --text-color-gray: var(--mid-gray);
   --text-color-light-gray: var(--moon-gray);
@@ -191,20 +194,15 @@
 
   /* DARK THEME VARIABLES */
 
-  /*--background-dark: var(--dark-gray);*/
   --background-dark: #222;
+
   --button-background-dark: var(--mid-gray);
-  /*--capsule-background-dark: var(--light-gray);*/
+  --button-border-dark: var(--silver);
+ 
   --capsule-background-dark: #333;
+
   --circle-background-dark: var(--silver);
   --circle-small-hover-background-dark: var(--moon-gray);
 
+  --list-background-dark: #333;
 }
-/* we need to add shades for each accent colour
- *
- * --info-100
- * --info-200
- * --info-300 -> var(--blue)
- * --info-400
- * --info-500
- */
diff --git a/peach-web/static/css/peachcloud.css b/peach-web/static/css/peachcloud.css
index 5f5dfde..850bb00 100644
--- a/peach-web/static/css/peachcloud.css
+++ b/peach-web/static/css/peachcloud.css
@@ -186,7 +186,7 @@ body {
  */
 
 .button {
-    border: 1px solid var(--near-black);
+    border: 1px solid var(--button-border);
     border-radius: var(--border-radius-2);
     /* Needed to render inputs & buttons of equal width */
     -moz-box-sizing: border-box;
@@ -199,7 +199,8 @@ body {
     text-decoration: none;
     font-size: var(--font-size-5);
     font-family: var(--sans-serif);
-    width: 80%;
+    /* width: 80%; */
+    width: 16rem;
     margin-top: 5px;
     margin-bottom: 5px;
 }
@@ -344,7 +345,7 @@ body {
     color: var(--text-color);
     margin: 0;
     font-size: var(--font-size-5);
-    padding-bottom: 0.3rem;
+    padding-bottom: 0.5rem;
 }
 
 .container {
@@ -613,11 +614,13 @@ html {
 
   --background: var(--background);
   --button-background: var(--button-background);
+  --button-border: var(--button-border);
   --button-text-color: var(--text-color-normal);
   --button-text-hover-color: var(--text-color-normal);
   --circle-background: var(--circle-background);
   --circle-small-hover-background: var(--circle-small-hover-background);
   --icon-color: var(--icon-normal);
+  --list-background: var(--list-background);
   --nav-icon-color: var(--nav-icon-color);
   --text-color: var(--text-color-normal);
 }
@@ -625,12 +628,14 @@ html {
 html[data-theme='dark'] {
   --background: var(--background-dark);
   --button-background: var(--button-background-dark);
+  --button-border: var(--button-border-dark);
   --button-text-color: var(--text-color-light);
   --button-text-hover-color: var(--text-color-normal);
   --capsule-background: var(--capsule-background-dark);
   --circle-background: var(--circle-background-dark);
   --circle-small-hover-background: var(--circle-small-hover-background-dark);
   --icon-color: var(--icon-light);
+  --list-background: var(--list-background-dark);
   --nav-icon-color: var(--nav-icon-color-light);
   --text-color: var(--text-color-light);
   --text-color-gray: var(--text-color-light-gray);
@@ -802,7 +807,7 @@ form {
 
 .link {
     text-decoration: none;
-    /* color: var(--font-near-black); */
+    color: var(--text-color);
 }
 
 .link:hover {
@@ -841,6 +846,7 @@ form {
 }
 
 .list-item {
+    background-color: var(--list-background);
     display: grid;
     padding: 1rem;
     border-bottom-color: var(--light-silver);
diff --git a/peach-web/templates/scuttlebutt/inactive.html.tera b/peach-web/templates/scuttlebutt/inactive.html.tera
index a4ce398..beeb692 100644
--- a/peach-web/templates/scuttlebutt/inactive.html.tera
+++ b/peach-web/templates/scuttlebutt/inactive.html.tera
@@ -4,8 +4,8 @@
       <div class="card center">
         <div class="capsule capsule-container border-warning center-text">
           <p class="card-text" style="font-size: var(--font-size-4);">Sbot Inactive</p>
-          <p>{{ unavailable_msg }}</p>
-          <p class="card-text">Visit the <strong><a href="/settings/scuttlebutt" class="link font-near-black">Scuttlebutt settings menu</a></strong> to start the Sbot and then try again.</p>
+          <p class="card-text">{{ unavailable_msg }}</p>
+          <p class="card-text">Visit the <strong><a href="/settings/scuttlebutt" class="link">Scuttlebutt settings menu</a></strong> to start the Sbot and then try again.</p>
         </div>
       </div>
 {%- endblock card -%}
diff --git a/peach-web/templates/scuttlebutt/peers_list.html.tera b/peach-web/templates/scuttlebutt/peers_list.html.tera
index 32fcf60..0599b8c 100644
--- a/peach-web/templates/scuttlebutt/peers_list.html.tera
+++ b/peach-web/templates/scuttlebutt/peers_list.html.tera
@@ -11,11 +11,11 @@
             {%- set name = peer['name'] %}
           {%- endif %}
           <li>
-            <a class="list-item link light-bg" href="/scuttlebutt/profile?public_key={{ peer['id'] }}">
+            <a class="list-item link" href="/scuttlebutt/profile?public_key={{ peer['id'] }}">
               {%- if peer['blob_path'] and peer['blob_exists'] == "true" %}
               <img id="peerImage" class="icon list-icon" src="/blob/{{ peer['blob_path'] }}" alt="{{ name }}'s profile image">
               {%- else %}
-              <img id="peerImage" class="icon list-icon" src="/icons/user.svg" alt="Placeholder profile image">
+              <img id="peerImage" class="icon icon-active list-icon" src="/icons/user.svg" alt="Placeholder profile image">
               {%- endif %}
               <p id="peerName" class="font-normal list-text">{{ name }}</p>
               <label class="label-small label-ellipsis list-label font-gray" for="peerName" title="{{ name }}'s Public Key">{{ peer['id'] }}</label>
diff --git a/peach-web/templates/scuttlebutt/profile.html.tera b/peach-web/templates/scuttlebutt/profile.html.tera
index 3ac894a..8507de3 100644
--- a/peach-web/templates/scuttlebutt/profile.html.tera
+++ b/peach-web/templates/scuttlebutt/profile.html.tera
@@ -19,7 +19,7 @@
           <img id="profilePicture" class="icon-large" src="/blob/{{ blob_path }}" title="Profile picture" alt="Profile picture">
           {% else %}
           {# render a placeholder profile picture (icon) #}
-          <img id="profilePicture" class="icon" src="/icons/user.svg" title="Profile picture" alt="Profile picture">
+          <img id="profilePicture" class="icon icon-active" src="/icons/user.svg" title="Profile picture" alt="Profile picture">
           {% endif %}
           <!-- name, public key & description -->
           <p id="profileName" class="card-text" title="Name">{{ name }}</p>
diff --git a/peach-web/templates/scuttlebutt/update_profile.html.tera b/peach-web/templates/scuttlebutt/update_profile.html.tera
index 00c5199..3637c67 100644
--- a/peach-web/templates/scuttlebutt/update_profile.html.tera
+++ b/peach-web/templates/scuttlebutt/update_profile.html.tera
@@ -3,7 +3,7 @@
     {# ASSIGN VARIABLES #}
     {# ---------------- #}
       <!-- SSB PROFILE UPDATE FORM -->
-      <div class="card center">
+      <div class="card card-wide center">
         <form id="profileInfo" class="center" enctype="multipart/form-data" action="/scuttlebutt/profile/update" method="post">
           <div style="display: flex; flex-direction: column">
             <label for="name" class="label-small font-gray">NAME</label>
@@ -11,7 +11,7 @@
             <label for="description" class="label-small font-gray">DESCRIPTION</label>
             <textarea id="description" class="message-input" style="margin-bottom: 1rem;" name="new_description" placeholder="Write a description for your profile...">{{ description }}</textarea>
             <label for="image" class="label-small font-gray">IMAGE</label>
-            <input type="file" id="fileInput" name="image">
+            <input type="file" id="fileInput" class="font-normal" name="image">
           </div> 
           <input type="hidden" name="id" value="{{ id }}">
           <input type="hidden" name="current_name" value="{{ name }}">