1.1.3 version bump and move css to assets

1 month ago · f023dcba8a
9 changed files with 37 additions and 97 deletions
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@ -0,0 +1,12 @@
+:root {
+    --bg-color: #ffffff;
+    --text-color: #2c3e50;
+    --button-color: #2980b9;
+    --top-nav-color: #16a085;
+}
+[data-theme="dark"] {
+    --bg-color: #2c3e50;
+    --text-color: #ffffff;
+    --button-color: #2980b9;
+    --top-nav-color: #16a085;
+}
--- a/assets/img/favicon.png
+++ b/assets/img/favicon.png
--- a/assets/img/logo.png
+++ b/assets/img/logo.png
--- a/build.sh
+++ b/build.sh
@ -1,6 +1,6 @@
 #!/bin/bash

-VERSION="1.1.1"
+VERSION="1.1.3"

 # build frontend
 cd ./frontend
@ -18,9 +18,8 @@ mkdir bin/$VERSION
 export GOOS=darwin
 export GOARCH=amd64
 mkdir bin/$VERSION/$(go env GOOS)-$(go env GOARCH)
-mkdir bin/$VERSION/$(go env GOOS)-$(go env GOARCH)/assets
 cp .env.example ./bin/$VERSION/$(go env GOOS)-$(go env GOARCH)/.env.example
-cp ./assets/* ./bin/$VERSION/$(go env GOOS)-$(go env GOARCH)/assets
+cp -r ./assets ./bin/$VERSION/$(go env GOOS)-$(go env GOARCH)
 go build -o ./bin/$VERSION/$(go env GOOS)-$(go env GOARCH)/eleutheriapay-$VERSION-$(go env GOOS)-$(go env GOARCH)
 $(go env GOPATH)/bin/rice append --exec ./bin/$VERSION/$(go env GOOS)-$(go env GOARCH)/eleutheriapay-$VERSION-$(go env GOOS)-$(go env GOARCH)
 tar -czvf ./bin/$VERSION/$VERSION-$(go env GOOS)-$(go env GOARCH).tar.gz ./bin/$VERSION/$(go env GOOS)-$(go env GOARCH)
@ -29,9 +28,8 @@ tar -czvf ./bin/$VERSION/$VERSION-$(go env GOOS)-$(go env GOARCH).tar.gz ./bin/$
 export GOOS=linux
 export GOARCH=amd64
 mkdir bin/$VERSION/$(go env GOOS)-$(go env GOARCH)
-mkdir bin/$VERSION/$(go env GOOS)-$(go env GOARCH)/assets
 cp .env.example ./bin/$VERSION/$(go env GOOS)-$(go env GOARCH)/.env.example
-cp ./assets/* ./bin/$VERSION/$(go env GOOS)-$(go env GOARCH)/assets
+cp -r ./assets ./bin/$VERSION/$(go env GOOS)-$(go env GOARCH)
 go build -o ./bin/$VERSION/$(go env GOOS)-$(go env GOARCH)/eleutheriapay-$VERSION-$(go env GOOS)-$(go env GOARCH)
 $(go env GOPATH)/bin/rice append --exec ./bin/$VERSION/$(go env GOOS)-$(go env GOARCH)/eleutheriapay-$VERSION-$(go env GOOS)-$(go env GOARCH)
 tar -czvf ./bin/$VERSION/$VERSION-$(go env GOOS)-$(go env GOARCH).tar.gz ./bin/$VERSION/$(go env GOOS)-$(go env GOARCH)
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -1,6 +1,6 @@
 {
  "name": "frontend",
-  "version": "1.1.0",
+  "version": "1.1.3",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
--- a/frontend/package.json
+++ b/frontend/package.json
@ -1,6 +1,6 @@
 {
  "name": "frontend",
-  "version": "1.1.0",
+  "version": "1.1.3",
  "private": true,
  "description": "EleutheriaPay Frontend",
  "scripts": {
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@ -4,7 +4,8 @@
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="shortcut icon" href="http://localhost:3000/assets/favicon.png">
+    <link rel="shortcut icon" href="http://localhost:3000/assets/img/favicon.png">
+    <link rel="stylesheet" type="text/css" href="http://localhost:3000/assets/css/styles.css">
    <title>EleutheriaPay</title>
  </head>
  <body>
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@ -1,7 +1,6 @@
 <template>
  <div
    id="app"
-    :style="cssVars"
  >
    <b-navbar
      id="top-nav"
@ -115,7 +114,6 @@
    />
  </div>
 </template>
-
 <script>
 import {
  SunIcon,
@ -166,20 +164,11 @@ export default {
    twitterLink: '',
    instagramLink: '',
    linkedinLink: '',
-    bgColor: '',
-    textColor: '',
-    buttonColor: '',
-    topNavColor: '',
-    bgColorDark: '',
-    textColorDark: '',
-    buttonColorDark: '',
-    topNavColorDark: '',
  }),
  mounted() {
    const htmlElement = document.documentElement;
    const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    const theme = localStorage.getItem('data-theme');
-
    if (userPrefersDark) {
      this.darkMode = true;
    } else if (theme === 'dark') {
@ -189,12 +178,10 @@ export default {
      htmlElement.setAttribute('data-theme', 'light');
      this.darkMode = false;
    }
-
    this.axios.get('/api/site/config').then((response) => {
      // Passed to the Index component
      this.title = response.data.Title;
      this.description = response.data.Description;
-
      // For this component
      this.metaTitle = response.data.MetaTitle;
      this.backLink = response.data.BackLink;
@ -206,31 +193,13 @@ export default {
      this.twitterLink = response.data.TwitterLink;
      this.instagramLink = response.data.InstagramLink;
      this.linkedinLink = response.data.LinkedinLink;
-      this.bgColor = response.data.BGColor;
-      this.textColor = response.data.TextColor;
-      this.buttonColor = response.data.ButtonColor;
-      this.topNavColor = response.data.TopNavColor;
-      this.bgColorDark = response.data.BGColorDark;
-      this.textColorDark = response.data.TextColorDark;
-      this.buttonColorDark = response.data.ButtonColorDark;
-      this.topNavColorDark = response.data.TopNavColorDark;
    }).then(() => {
      document.title = this.metaTitle;
-      document.querySelector(':root').style.setProperty('--bg-color', this.bgColor);
-      document.querySelector(':root').style.setProperty('--text-color', this.textColor);
-      document.querySelector(':root').style.setProperty('--button-color', this.buttonColor);
-      document.querySelector(':root').style.setProperty('--top-nav-color', this.topNavColor);
-
-      document.querySelector(':root').style.setProperty('--bg-color-dark', this.bgColorDark);
-      document.querySelector(':root').style.setProperty('--text-color-dark', this.textColorDark);
-      document.querySelector(':root').style.setProperty('--button-color-dark', this.buttonColorDark);
-      document.querySelector(':root').style.setProperty('--top-nav-color-dark', this.topNavColorDark);
    });
  },
  watch: {
    darkMode() {
      const htmlElement = document.documentElement;
-
      if (this.darkMode) {
        localStorage.setItem('data-theme', 'dark');
        htmlElement.setAttribute('data-theme', 'dark');
@ -240,82 +209,42 @@ export default {
      }
    },
  },
-  computed: {
-    cssVars() {
-      return {
-        '--stuff': 'red',
-        '--height': '2px',
-      };
-    },
-  },
 };
 </script>
-
 <style lang="scss">
 #app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
 }
-
-:root {
-  body {
+body {
    background-color: var(--bg-color);
-  }
-  legend,label,h1,h2,h3,h4,h5,h6,p {
+}
+legend,label,h1,h2,h3,h4,h5,h6,p {
    color: var(--text-color);
-  }
-  #top-nav {
+}
+.navIcons {
+  color: var(--text-color);
+}
+.navIcons:hover {
+  filter: invert(0.5);
+}
+#top-nav {
    border-top: 14px solid var(--top-nav-color);
-  }
-  .navIcons {
-    color: var(--text-color);
-  }
-  .radio.btn-theme {
+}
+.radio.btn-theme {
    background-color: #ffffff !important;
    border-color: var(--button-color) !important;
    color: var(--button-color) !important;
-  }
-  .radio.btn-theme.btn-sm.active {
+}
+.radio.btn-theme.btn-sm.active {
    background-color: var(--button-color) !important;
    border-color: var(--button-color) !important;
    color: #ffffff !important;
-  }
-  .btn-theme {
-    background-color: var(--button-color) !important;
-    color: #ffffff !important;
-  }
 }
-[data-theme="dark"] {
-  body {
-    background-color: var(--bg-color-dark);
-  }
-  legend,label,h1,h2,h3,h4,h5,h6,p {
-    color: var(--text-color-dark);
-  }
-  #top-nav {
-    border-top: 14px solid var(--top-nav-color-dark);
-  }
-  .navIcons {
-    color: var(--text-color-dark);
-  }
-  .radio.btn-theme {
-    background-color: #ffffff !important;
-    border-color: var(--button-color-dark) !important;
-    color: var(--button-color-dark) !important;
-  }
-  .radio.btn-theme.btn-sm.active {
-    background-color: var(--button-color-dark) !important;
-    border-color: var(--button-color-dark) !important;
-    color: #ffffff !important;
-  }
-  .btn-theme {
-    background-color: var(--button-color-dark) !important;
+.btn-theme {
+    background-color: var(--button-color) !important;
    color: #ffffff !important;
-  }
-}
-.navIcons:hover {
-  filter: invert(0.5);
 }
 .form-item {
  width: 75%;
--- a/frontend/src/components/Index.vue
+++ b/frontend/src/components/Index.vue
@ -1,6 +1,6 @@
 <template>
  <b-container>
-    <img alt="Vue logo" src="http://localhost:3000/assets/logo.png" width="200px">
+    <img alt="Vue logo" src="http://localhost:3000/assets/img/logo.png" width="200px">

    <h2>{{ title }}</h2>
    <p>{{ description }}</p>