From 165d663491e26671e9915cd91f184c1762e9a382 Mon Sep 17 00:00:00 2001
From: benarc <ben@arc.wales>
Date: Wed, 20 Apr 2022 00:36:11 +0100
Subject: [PATCH] Added freedom forum theme

---
 lnbits/static/scss/base.scss | 221 ++++++++++++++---------------------
 lnbits/templates/base.html   |  70 +++++------
 2 files changed, 121 insertions(+), 170 deletions(-)

diff --git a/lnbits/static/scss/base.scss b/lnbits/static/scss/base.scss
index afafd50d1..3668e7736 100644
--- a/lnbits/static/scss/base.scss
+++ b/lnbits/static/scss/base.scss
@@ -1,186 +1,143 @@
-$themes: (
-  'classic': (
-    primary: #673ab7,
-    secondary: #9c27b0,
-    dark: #1f2234,
-    info: #333646,
-    marginal-bg: #1f2234,
-    marginal-text: #fff
-  ),
-  'bitcoin': (
-    primary: #ff9853,
-    secondary: #ff7353,
-    dark: #2d293b,
-    info: #333646,
-    marginal-bg: #2d293b,
-    marginal-text: #fff
-  ),
-  'mint': (
-    primary: #3ab77d,
-    secondary: #27b065,
-    dark: #1f342b,
-    info: #334642,
-    marginal-bg: #1f342b,
-    marginal-text: #fff
-  ),
-  'autumn': (
-    primary: #b7763a,
-    secondary: #b07927,
-    dark: #34291f,
-    info: #463f33,
-    marginal-bg: #342a1f,
-    marginal-text: rgb(255, 255, 255)
-  ),
-  'flamingo': (
-    primary: #d11d53,
-    secondary: #db3e6d,
-    dark: #803a45,
-    info: #ec7599,
-    marginal-bg: #803a45,
-    marginal-text: rgb(255, 255, 255)
-  ),
-  'monochrome': (
-    primary: #494949,
-    secondary: #6b6b6b,
-    dark: #000,
-    info: rgb(39, 39, 39),
-    marginal-bg: #000,
-    marginal-text: rgb(255, 255, 255)
-  )
-);
-
-@each $theme, $colors in $themes {
-  @each $name, $color in $colors {
-    @if $name == 'dark' {
-      [data-theme='#{$theme}'] .q-drawer--dark,
-      body[data-theme='#{$theme}'].body--dark,
-      [data-theme='#{$theme}'] .q-menu--dark {
-        background: $color !important;
-      }
-
-      /* IF WANTING TO SET A DARKER BG COLOR IN THE FUTURE
+$themes: ( 'classic': ( primary: #673ab7, secondary: #9c27b0, dark: #1f2234, info: #333646, marginal-bg: #1f2234, marginal-text: #fff), 'bitcoin': ( primary: #ff9853, secondary: #ff7353, dark: #2d293b, info: #333646, marginal-bg: #2d293b, marginal-text: #fff), 'freedom': ( primary: #e22156, secondary: #b91a45, dark: #0a0a0a, info: #1b1b1b, marginal-bg: #2d293b, marginal-text: #fff), 'mint': ( primary: #3ab77d, secondary: #27b065, dark: #1f342b, info: #334642, marginal-bg: #1f342b, marginal-text: #fff), 'autumn': ( primary: #b7763a, secondary: #b07927, dark: #34291f, info: #463f33, marginal-bg: #342a1f, marginal-text: rgb(255, 255, 255)), 'flamingo': ( primary: #d11d53, secondary: #db3e6d, dark: #803a45, info: #ec7599, marginal-bg: #803a45, marginal-text: rgb(255, 255, 255)), 'monochrome': ( primary: #494949, secondary: #6b6b6b, dark: #000, info: rgb(39, 39, 39), marginal-bg: #000, marginal-text: rgb(255, 255, 255)));
+@each $theme,
+$colors in $themes {
+    @each $name,
+    $color in $colors {
+        @if $name=='dark' {
+            [data-theme='#{$theme}'] .q-drawer--dark,
+            body[data-theme='#{$theme}'].body--dark,
+            [data-theme='#{$theme}'] .q-menu--dark {
+                background: $color !important;
+            }
+            /* IF WANTING TO SET A DARKER BG COLOR IN THE FUTURE
       // set a darker body bg for all themes, when in "dark mode"
       body[data-theme='#{$theme}'].body--dark {
         background: scale-color($color, $lightness: -60%);
       }
       */
+        }
+        @if $name=='info' {
+            [data-theme='#{$theme}'] .q-card--dark,
+            [data-theme='#{$theme}'] .q-stepper--dark {
+                background: $color !important;
+            }
+        }
     }
-    @if $name == 'info' {
-      [data-theme='#{$theme}'] .q-card--dark,
-      [data-theme='#{$theme}'] .q-stepper--dark {
-        background: $color !important;
-      }
+    [data-theme='#{$theme}'] {
+        @each $name,
+        $color in $colors {
+            .bg-#{$name} {
+                background: $color !important;
+            }
+            .text-#{$name} {
+                color: $color !important;
+            }
+        }
     }
-  }
-  [data-theme='#{$theme}'] {
-    @each $name, $color in $colors {
-      .bg-#{$name} {
-        background: $color !important;
-      }
-      .text-#{$name} {
-        color: $color !important;
-      }
-    }
-  }
 }
+
+[data-theme='freedom'] .q-drawer--dark {
+    background: #0a0a0a !important;
+}
+
+[data-theme='freedom'] .q-header {
+    background: #0a0a0a !important;
+}
+
 [data-theme='salvador'] .q-drawer--dark {
-  background: #242424 !important;
+    background: #242424 !important;
 }
 
 [data-theme='salvador'] .q-header {
-  background: #0f47af !important;
+    background: #0f47af !important;
 }
 
 [data-theme='flamingo'] .q-drawer--dark {
-  background: #e75480 !important;
+    background: #e75480 !important;
 }
 
 [data-theme='flamingo'] .q-header {
-  background: #e75480 !important;
+    background: #e75480 !important;
 }
 
 [v-cloak] {
-  display: none;
+    display: none;
 }
 
 body.body--dark .q-table--dark {
-  background: transparent;
+    background: transparent;
 }
 
 body.body--dark .q-field--error {
-  .text-negative,
-  .q-field__messages {
-    color: yellow !important;
-  }
+    .text-negative,
+    .q-field__messages {
+        color: yellow !important;
+    }
 }
 
 .lnbits-drawer__q-list .q-item {
-  padding-top: 5px !important;
-  padding-bottom: 5px !important;
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-
-  &.q-item--active {
-    color: inherit;
-    font-weight: bold;
-  }
+    padding-top: 5px !important;
+    padding-bottom: 5px !important;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    &.q-item--active {
+        color: inherit;
+        font-weight: bold;
+    }
 }
 
 .lnbits__dialog-card {
-  width: 500px;
+    width: 500px;
 }
 
 .q-table--dense {
-  th:first-child,
-  td:first-child,
-  .q-table__bottom {
-    padding-left: 6px !important;
-  }
-
-  th:last-child,
-  td:last-child,
-  .q-table__bottom {
-    padding-right: 6px !important;
-  }
+    th:first-child,
+    td:first-child,
+    .q-table__bottom {
+        padding-left: 6px !important;
+    }
+    th:last-child,
+    td:last-child,
+    .q-table__bottom {
+        padding-right: 6px !important;
+    }
 }
 
 a.inherit {
-  color: inherit;
-  text-decoration: none;
+    color: inherit;
+    text-decoration: none;
 }
 
 // QR video
-
 video {
-  border-radius: 3px;
+    border-radius: 3px;
 }
 
 // Material icons font
-
 @font-face {
-  font-family: 'Material Icons';
-  font-style: normal;
-  font-weight: 400;
-  src: url(../fonts/material-icons-v50.woff2) format('woff2');
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url(../fonts/material-icons-v50.woff2) format('woff2');
 }
 
 .material-icons {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -moz-font-feature-settings: 'liga';
-  -moz-osx-font-smoothing: grayscale;
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -moz-font-feature-settings: 'liga';
+    -moz-osx-font-smoothing: grayscale;
 }
 
 // text-wrap
 .text-wrap {
-  word-break: break-word;
-}
+    word-break: break-word;
+}
\ No newline at end of file
diff --git a/lnbits/templates/base.html b/lnbits/templates/base.html
index 965d5336e..610b2a75d 100644
--- a/lnbits/templates/base.html
+++ b/lnbits/templates/base.html
@@ -1,49 +1,33 @@
 <!DOCTYPE html>
 
 <html lang="en">
-  <head>
-    {% for url in VENDORED_CSS %}
-    <link rel="stylesheet" type="text/css" href="{{ url }}" />
-    {% endfor %}
-    <!---->
-    <link rel="stylesheet" type="text/css" href="/static/css/base.css" />
 
-    {% block styles %}{% endblock %}
+<head>
+    {% for url in VENDORED_CSS %}
+    <link rel="stylesheet" type="text/css" href="{{ url }}" /> {% endfor %}
+    <!---->
+    <link rel="stylesheet" type="text/css" href="/static/css/base.css" /> {% block styles %}{% endblock %}
     <title>{% block title %}{{ SITE_TITLE }}{% endblock %}</title>
     <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    {% block head_scripts %}{% endblock %}
-  </head>
+    <meta name="apple-mobile-web-app-capable" content="yes" /> {% block head_scripts %}{% endblock %}
+</head>
 
-  <body data-theme="bitcoin">
+<body data-theme="bitcoin">
     <q-layout id="vue" view="hHh lpR lfr" v-cloak>
-      <q-header bordered class="bg-marginal-bg">
-        <q-toolbar>
-          {% block drawer_toggle %}
-          <q-btn
-            dense
-            flat
-            round
-            icon="menu"
-            @click="g.visibleDrawer = !g.visibleDrawer"
-          ></q-btn>
-          {% endblock %}
-          <q-toolbar-title>
-            <q-btn flat no-caps dense size="lg" type="a" href="/">
-              {% block toolbar_title %} {% if SITE_TITLE != 'LNbits' %} {{
-              SITE_TITLE }} {% else %} <strong>LN</strong>bits {% endif %} {%
-              endblock %}</q-btn
-            >
-          </q-toolbar-title>
-          {% block beta %}
-          <q-badge color="yellow" text-color="black" class="q-mr-md">
-            <span
-              ><span v-show="$q.screen.gt.sm"
+        <q-header bordered class="bg-marginal-bg">
+            <q-toolbar>
+                {% block drawer_toggle %}
+                <q-btn dense flat round icon="menu" @click="g.visibleDrawer = !g.visibleDrawer"></q-btn>
+                {% endblock %}
+                <q-toolbar-title>
+                    <q-btn flat no-caps dense size="lg" type="a" href="/">
+                        {% block toolbar_title %} {% if SITE_TITLE != 'LNbits' %} {{ SITE_TITLE }} {% else %} <strong>LN</strong>bits {% endif %} {% endblock %}</q-btn>
+                </q-toolbar-title>
+                {% block beta %}
+                <q-badge color="yellow" text-color="black" class="q-mr-md">
+                    <span><span v-show="$q.screen.gt.sm"
                 >USE WITH CAUTION - {{SITE_TITLE}} wallet is still in </span
               >BETA</span
             >
@@ -118,6 +102,16 @@
                 size="md"
                 ><q-tooltip>elSalvador</q-tooltip>
               </q-btn>
+              <q-btn
+                v-if="g.allowedThemes.includes('freedom')"
+                dense
+                flat
+                @click="changeColor('freedom')"
+                icon="format_color_fill"
+                color="pink-1"
+                size="md"
+                ><q-tooltip>Freedom</q-tooltip>
+              </q-btn>
               <q-btn
                 v-if="g.allowedThemes.includes('flamingo')"
                 dense
@@ -213,4 +207,4 @@
     </script>
     {% block scripts %}{% endblock %}
   </body>
-</html>
+</html>
\ No newline at end of file