Logo enhancement and new iconi (#19)

gilesv · Sep 12, 2019 · 536c284 · 536c284
1 parent ca89839
commit 536c284
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 31 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -3,9 +3,9 @@
 
 <head>
  <meta charset="utf-8" />
- <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+ <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
- <meta name="theme-color" content="#000000" />
+ <meta name="theme-color" content="#cfd0d1" />
  <!--
  manifest.json provides metadata used when your web app is installed on a
  user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,15 +1,15 @@
 {
- "short_name": "React App",
- "name": "Create React App Sample",
+ "short_name": "Pardal",
+ "name": "Pardal: Painless Planning Sessions",
  "icons": [
  {
  "src": "favicon.ico",
  "sizes": "64x64 32x32 24x24 16x16",
- "type": "image/x-icon"
+ "type": "image/png"
  }
  ],
  "start_url": ".",
  "display": "standalone",
- "theme_color": "#000000",
+ "theme_color": "#cfd0d1",
  "background_color": "#ffffff"
-}
+}
diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
@@ -11,7 +11,7 @@ import IEntityMap from "../redux/utils/entity-map.interface";
 import NotifyDock from "./NotifyDock";
 import { setStateClean } from "../redux/actions";
 import { importFromStorage, exportToStorage } from "../services/localStorage.service";
-import SaveInfo from "./SaveInfo";
+import Header from "./Header";
 
 interface Props {
  selectedStory: number,
@@ -103,10 +103,7 @@ class Dashboard extends React.Component<Props> {
  <div className="app">
  <div className="dashboard">
  <aside>
- <header>
- <div className="app-title"> >=pardal<span>v{appVersion}</span></div>
- </header>
-
+ <Header appVersion={appVersion} />
  <StoryList importStory={this.importStory} />
  </aside>
 

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+const Header = (props: any) => {
+ const { appVersion } = props;
+
+ return (
+ <header className="header">
+ <div className="app-logo">
+ <span className="app-logo__icon"> >=</span>
+ <span className="app-logo__name">Pardal</span>
+
+ <span className="app-logo__version">
+ <a href="https://github.com/gilesv/pardal" target="_blank">v{appVersion}</a>
+ </span>
+ </div>
+ </header>
+ );
+}
+
+export default Header;
diff --git a/src/styles/components/app.scss b/src/styles/components/app.scss
@@ -8,22 +8,4 @@
  padding: 0 20px 20px 20px;
  width: 100%;
  }
-
- header {
- margin-bottom: 20px;
-
- .app-title {
- font-size: 26px;
- margin: 0;
- color: $primary;
- font-family: FiraCode;
-
- span {
- font-size: 10px;
- color: $lightpurple;
- vertical-align: super;
- margin-left: 2px;
- }
- }
- }
-}
+}
diff --git a/src/styles/components/header.scss b/src/styles/components/header.scss
@@ -0,0 +1,28 @@
+header.header {
+ margin-bottom: 20px;
+
+ .app-logo {
+ font-size: 26px;
+ margin: 0;
+ font-family: FiraCode;
+
+ &__icon {
+ color: $primary;
+ font-weight: bold;
+ }
+
+ &__name {
+ margin-left: 6px;
+ }
+
+ &__version {
+ font-size: 11px;
+ vertical-align: super;
+ margin-left: 4px;
+ }
+
+ a, a:hover {
+ color: $lesslightergray;
+ }
+ }
+}
diff --git a/src/styles/root.scss b/src/styles/root.scss
@@ -7,6 +7,7 @@ html, body {
 $primary: #6600ff;
 
 $lightgray: #cfd0d1;
+$lesslightergray: #bbbdbd;
 $lightpurple: #d8c1fb;
 $darkpurple: #5107bf;
 
@@ -20,6 +21,7 @@ $darkpurple: #5107bf;
 @import "./components/task-item";
 @import "./components/task-form";
 @import "./components/save-info";
+@import "./components/header";
 
 // Fonts
 @font-face {