new logo

brand/Makefile

@@ -0,0 +1,17 @@
+images:
+	steam-run svgexport logo.svg ../desktop/build/linux/usr/share/icons/hicolor/512x512/apps/paisa.png 100% 512:512
+	steam-run svgexport logo.svg ../desktop/build/appicon.png 100% 256:256
+	steam-run svgexport logo.svg ../docs/images/favicon.png 100% 256:256
+	steam-run svgexport logo.svg ../docs/apple-touch-icon.png 100% 180:180
+	steam-run svgexport logo.svg ../docs/android-chrome-512x512.png 100% 512:512
+	steam-run svgexport logo.svg ../docs/android-chrome-192x192.png 100% 192:192
+	steam-run svgexport logo.svg ../docs/favicon-16x16.png 100% 16:16
+	steam-run svgexport logo.svg ../docs/favicon-32x32.png 100% 32:32
+	steam-run svgexport logo.svg ../docs/favicon-48x48.png 100% 48:48
+	steam-run svgexport logo.svg ../docs/favicon-64x64.png 100% 64:64
+	steam-run svgexport logo.svg ../docs/favicon-256x256.png 100% 256:256
+	nix-shell -p imagemagick --command 'convert ../docs/favicon-16x16.png ../docs/favicon-32x32.png ../docs/favicon-64x64.png ../docs/favicon.ico'
+	nix-shell -p imagemagick --command 'convert ../docs/favicon-16x16.png ../docs/favicon-32x32.png ../docs/favicon-48x48.png ../docs/favicon-64x64.png ../docs/favicon-256x256.png ../desktop/build/windows/icon.ico'
+	rm ../docs/favicon-48x48.png
+	rm ../docs/favicon-64x64.png
+	rm ../docs/favicon-256x256.png

mkdocs.yml

@@ -45,12 +45,14 @@ theme:
     repo: fontawesome/brands/github
   palette:
     - scheme: default
-      primary: hsl(229deg, 53%, 53%)
+      primary: indigo
+      accent: indigo
       toggle:
         icon: material/brightness-7
         name: Switch to dark mode
     - scheme: slate
-      primary: hsl(229deg, 53%, 53%)
+      primary: indigo
+      accent: indigo
       toggle:
         icon: material/brightness-4
         name: Switch to light mode

src/app.html

@@ -10,7 +10,7 @@
     />
     <link
       rel="icon"
-      href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22256%22%20height%3D%22256%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20transform%3D%22rotate(90%2012%2012)%22%3E%3Cstyle%3E%20path%20%7B%20fill%3A%20black%3B%20%7D%20%40media%20(prefers-color-scheme%3A%20dark)%20%7B%20path%20%7B%20fill%3A%20white%3B%20%7D%20%7D%20%3C%2Fstyle%3E%3Cpath%20d%3D%22M12%205C7.031%205%202%206.546%202%209.5S7.031%2014%2012%2014c4.97%200%2010-1.546%2010-4.5S16.97%205%2012%205zm-5%209.938v3c1.237.299%202.605.482%204%20.541v-3a21.166%2021.166%200%200%201-4-.541zm6%20.54v3a20.994%2020.994%200%200%200%204-.541v-3a20.994%2020.994%200%200%201-4%20.541zm6-1.181v3c1.801-.755%203-1.857%203-3.297v-3c0%201.44-1.199%202.542-3%203.297zm-14%203v-3C3.2%2013.542%202%2012.439%202%2011v3c0%201.439%201.2%202.542%203%203.297z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"
+      href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22256%22%20height%3D%22256%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%3E%3Cg%20transform%3D%22rotate%28360%29%22%20transform-origin%3D%2212%2012%22%3E%3Cpath%20d%3D%22M12%2012Z%22%20fill%3D%22none%22%20stroke%3D%22%23b388ff%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%3E%3Cg%20transform%3D%22rotate%280%29%22%20transform-origin%3D%2212%2012%22%3E%3Cpath%20d%3D%22M%2021.510565162951536%208.909830056250526%20A%2010%2010%200%200%200%2012%206%22%20fill%3D%22none%22%20stroke%3D%22%23aeea00%22%20stroke-width%3D%224%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%2872%29%22%20transform-origin%3D%2212%2012%22%3E%3Cpath%20d%3D%22M%2021.510565162951536%208.909830056250526%20A%2010%2010%200%200%200%2012%206%22%20fill%3D%22none%22%20stroke%3D%22%23ff1744%22%20stroke-width%3D%224%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%28144%29%22%20transform-origin%3D%2212%2012%22%3E%3Cpath%20d%3D%22M%2021.510565162951536%208.909830056250526%20A%2010%2010%200%200%200%2012%206%22%20fill%3D%22none%22%20stroke%3D%22%23d500f9%22%20stroke-width%3D%224%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%28216%29%22%20transform-origin%3D%2212%2012%22%3E%3Cpath%20d%3D%22M%2021.510565162951536%208.909830056250526%20A%2010%2010%200%200%200%2012%206%22%20fill%3D%22none%22%20stroke%3D%22%23ffab00%22%20stroke-width%3D%224%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%28288%29%22%20transform-origin%3D%2212%2012%22%3E%3Cpath%20d%3D%22M%2021.510565162951536%208.909830056250526%20A%2010%2010%200%200%200%2012%206%22%20fill%3D%22none%22%20stroke%3D%22%2300b0ff%22%20stroke-width%3D%224%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%2872%29%22%20transform-origin%3D%2212%2012%22%3E%3Cpath%20d%3D%22M12.59%205.88Z%22%20fill%3D%22none%22%20stroke%3D%22%23aeea00%22%20stroke-width%3D%224.2%22%20stroke-linecap%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%28144%29%22%20transform-origin%3D%2212%2012%22%3E%3Cpath%20d%3D%22M12.59%205.88Z%22%20fill%3D%22none%22%20stroke%3D%22%23ff1744%22%20stroke-width%3D%224.2%22%20stroke-linecap%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%28216%29%22%20transform-origin%3D%2212%2012%22%3E%3Cpath%20d%3D%22M12.59%205.88Z%22%20fill%3D%22none%22%20stroke%3D%22%23d500f9%22%20stroke-width%3D%224.2%22%20stroke-linecap%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%28288%29%22%20transform-origin%3D%2212%2012%22%3E%3Cpath%20d%3D%22M12.59%205.88Z%22%20fill%3D%22none%22%20stroke%3D%22%23ffab00%22%20stroke-width%3D%224.2%22%20stroke-linecap%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%20transform%3D%22rotate%28360%29%22%20transform-origin%3D%2212%2012%22%3E%3Cpath%20d%3D%22M12.59%205.88Z%22%20fill%3D%22none%22%20stroke%3D%22%2300b0ff%22%20stroke-width%3D%224.2%22%20stroke-linecap%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
     />
     <title>Paisa</title>
     %sveltekit.head%

src/app.scss

@@ -127,6 +127,15 @@ body {
   background: $white-bis;
 }
 
+.is-primary-color {
+  color: #b388ff;
+  font-weight: bold;
+
+  &:hover {
+    color: #b388ff;
+  }
+}
+
 .secondary-link {
   color: $grey-dark;
   &:hover {
@@ -837,23 +846,6 @@ span.progress-percent.less-than-10 {
   background: $white-ter;
 }
 
-.circle-container {
-  margin: auto;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  height: 48px;
-  width: 48px;
-
-  svg {
-    path {
-      fill: $black;
-    }
-  }
-}
-
 .transaction.bordered {
   border-bottom: 1px solid rgba($grey-lightest, 0.5);
   padding-bottom: 1px;

src/lib/components/Logo.svelte

@@ -1,6 +1,13 @@
 <script lang="ts">
+  import COLORS from "$lib/colors";
+  import _ from "lodash";
+
   export let size = 256;
+  export let thickness = 4;
   export let animation = false;
+
+  let colors = [COLORS.income, COLORS.expenses, COLORS.equity, COLORS.liabilities, COLORS.assets];
+  let dotColor = COLORS.primary;
 </script>
 
 <svg
@@ -9,54 +16,54 @@
   height={size}
   viewBox="0 0 24 24"
   class:animation
-  ><g transform="rotate(90 12 12)">
-    <path
-      fill="currentColor"
-      d="M 12 5 C 7.031 5 2 6.546 2 9.5 S 7.031 14 12 14 C 16.97 14 22 12.454 22 9.5 S 16.97 5 12 5 Z"
-    />
-
-    <path
-      fill="currentColor"
-      d="M 7 14.938 V 17.938 C 8.237 18.237 9.605 18.42 11 18.479 V 15.479 A 21.166 21.166 0 0 1 7 14.938 Z"
-    />
-    <path
-      fill="currentColor"
-      d="M 13 15.478 V 18.478 A 20.994 20.994 0 0 0 17 17.937 V 14.937 A 20.994 20.994 0 0 1 13 15.478 Z"
-    />
+>
+  <g>
+    <g>
+      <g transform="rotate(360, 12, 12)"
+        ><path
+          d="M12 12Z"
+          fill="none"
+          stroke={dotColor}
+          stroke-width={thickness}
+          stroke-linecap="round"
+        /></g
+      >
+    </g>
+    <g>
+      {#each colors as color, i}
+        <g transform="rotate({i * 72}, 12, 12)"
+          ><path
+            d="M 21.510565162951536 8.909830056250526 A 10 10 0 0 0 12 6"
+            fill="none"
+            stroke={color}
+            stroke-width={thickness}
+          /></g
+        >
+      {/each}
 
-    <path
-      fill="currentColor"
-      d="M 19 14.297 V 17.297 C 20.801 16.542 22 15.44 22 14 V 11 C 22 12.44 20.801 13.542 19 14.297 Z"
-    />
+      {#each colors as color, i}
+        <g transform="rotate({(i + 1) * 72}, 12, 12)"
+          ><path
+            d="M12.59 5.88Z"
+            fill="none"
+            stroke={color}
+            stroke-width={thickness * 1.05}
+            stroke-linecap="round"
+          /></g
+        >
+      {/each}
 
-    <path
-      fill="currentColor"
-      d="M 5 17.297 V 14.297 C 3.2 13.542 2 12.439 2 11 V 14 C 2 15.439 3.2 16.542 5 17.297 Z"
-    />
-  </g>
-
-  {#if animation}
-    <g
-      transform="translate(2.6,5.5),scale(0.8),rotate(120,12,12),matrix(0.16741001,-0.09665704,0.04832852,0.083705,7.3774358,11.493257)"
-    >
-      <path d="M 0,70 A 65,70 0 0 0 65,0 5,5 0 0 1 75,0 75,70 0 0 1 0,70 Z">
+      {#if animation}
         <animateTransform
           attributeName="transform"
+          attributeType="XML"
           type="rotate"
-          from="360 0 0"
-          to="0 0 0"
-          dur="0.6s"
+          from="0 12 12"
+          to="360 12 12"
+          dur="1s"
           repeatCount="indefinite"
         />
-      </path>
+      {/if}
     </g>
-  {/if}
+  </g>
 </svg>
-
-<style lang="scss">
-  @import "bulma/sass/utilities/_all.sass";
-
-  svg.animation {
-    filter: drop-shadow(-1px -1px 1px rgba($black, 0.4));
-  }
-</style>

src/lib/components/Navbar.svelte

@@ -195,9 +195,9 @@
       {#if $obscure}
         <span class="icon is-small is-size-5">
           <i class="fas fa-user-secret" />
-        </span><span class="ml-2">Paisa</span>
+        </span><span class="ml-2 is-primary-color">Paisa</span>
       {:else}
-        <Logo size={20} /> Paisa
+        <Logo size={22} /><span class="ml-1 is-primary-color">Paisa</span>
       {/if}
     </a>
     <a

src/lib/components/Spinner.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { delayedLoading, loading } from "../../store";
   import Logo from "./Logo.svelte";
-  let size = 48;
+  let size = 90;
 </script>
 
 <div>
@@ -14,3 +14,16 @@
     <slot />
   </div>
 </div>
+
+<style lang="scss">
+  .circle-container {
+    margin: auto;
+    position: absolute;
+    top: -45px;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    height: 90px;
+    width: 90px;
+  }
+</style>

src/routes/(app)/more/about/+page.svelte

@@ -40,8 +40,8 @@
     <div class="columns">
       <div class="column is-12">
         <div class="box has-text-centered px-3 mx-auto" style="max-width: 400px;">
-          <div><Logo size={64} /></div>
-          <div class="is-size-3">Paisa</div>
+          <div><Logo size={128} /></div>
+          <div class="is-size-3 is-primary-color">Paisa</div>
           <div>
             Version: <b>0.6.1</b>
           </div>

src/routes/login/+page.svelte

@@ -31,9 +31,9 @@
         <div class="flex justify-center items-center h-screen">
           <div class="box px-5 w-80">
             <div class="flex justify-center items-center mb-2">
-              <div class="mt-1"><Logo size={20} /></div>
-              <div class="is-size-4">
-                <a href="https://paisa.fyi" class="secondary-link">Paisa</a>
+              <div class="mt-1 mr-1"><Logo size={32} /></div>
+              <div class="is-size-3">
+                <a href="https://paisa.fyi" class="is-primary-color">Paisa</a>
               </div>
             </div>
             <form on:submit|preventDefault={tryLogin}>