adds "Made with ❤️ by Kong" to footer of dashboard (#4498)

packages/insomnia-app/app/ui/components/wrapper-home.tsx

@@ -7,6 +7,7 @@ import {
   Dropdown,
   DropdownDivider,
   DropdownItem,
+  SvgIcon,
 } from 'insomnia-components';
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
@@ -22,7 +23,6 @@ import { hotKeyRefs } from '../../common/hotkeys';
 import { executeHotKey } from '../../common/hotkeys-listener';
 import { isNotNullOrUndefined } from '../../common/misc';
 import { descendingNumberSort, sortMethodMap } from '../../common/sorting';
-import { strings } from '../../common/strings';
 import { ApiSpec } from '../../models/api-spec';
 import { isRemoteProject } from '../../models/project';
 import { isDesign, Workspace, WorkspaceScopeKeys } from '../../models/workspace';
@@ -342,8 +342,6 @@ class WrapperHome extends PureComponent<Props, State> {
         />
       ));
 
-    const countLabel =
-      cards.length === 1 ? strings.document.singular : strings.document.plural;
     return (
       <PageLayout
         wrapperProps={this.props.wrapperProps}
@@ -375,9 +373,9 @@ class WrapperHome extends PureComponent<Props, State> {
               )}
             </div>
             <div className="document-listing__footer vertically-center">
-              <span>
-                {cards.length} {countLabel}
-              </span>
+              <a className="made-with-love" href="https://github.com/Kong/insomnia">
+                Made with&nbsp;<SvgIcon icon="heart" />&nbsp;by Kong
+              </a>
             </div>
           </div>
         )}

packages/insomnia-app/app/ui/css/components/document-listing.less

@@ -17,8 +17,16 @@
 
   &__footer {
     height: var(--line-height-xs);
-    border-top: 1px solid var(--hl-md);
-    width: 100%;
+    padding: 0 var(--padding-md);
+    justify-content: flex-end;
+    box-sizing: border-box;
+
+    .made-with-love {
+      color: unset;
+      font-weight: 400 !important; // unfortunately, need to fight against anchor tag important set at root
+      display: flex;
+      font-size: var(--font-size-xs);
+    }
   }
 
   &__header {

packages/insomnia-components/src/assets/icn-heart.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24">
+  <path d="m12 21.35-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+</svg>

packages/insomnia-components/src/svg-icon.tsx

@@ -28,6 +28,7 @@ import { SvgIcnGithubLogo } from './assets/svgr/IcnGithubLogo';
 import { SvgIcnGitlabLogo } from './assets/svgr/IcnGitlabLogo';
 import { SvgIcnGlobe } from './assets/svgr/IcnGlobe';
 import { SvgIcnGui } from './assets/svgr/IcnGui';
+import { SvgIcnHeart } from './assets/svgr/IcnHeart';
 import { SvgIcnHome } from './assets/svgr/IcnHome';
 import { SvgIcnIndentation } from './assets/svgr/IcnIndentation';
 import { SvgIcnInfo } from './assets/svgr/IcnInfo';
@@ -98,6 +99,7 @@ export const IconEnum = {
   indentation: 'indentation',
   info: 'info',
   jump: 'jump',
+  heart: 'heart',
   home: 'home',
   key: 'key',
   laptop: 'laptop',
@@ -196,6 +198,7 @@ export class SvgIcon extends Component<SvgIconProps> {
     [IconEnum.gitlabLogo]: [ThemeEnum.default, SvgIcnGitlabLogo],
     [IconEnum.globe]: [ThemeEnum.default, SvgIcnGlobe],
     [IconEnum.gui]: [ThemeEnum.default, SvgIcnGui],
+    [IconEnum.heart]: [ThemeEnum.surprise, SvgIcnHeart],
     [IconEnum.home]: [ThemeEnum.default, SvgIcnHome],
     [IconEnum.indentation]: [ThemeEnum.default, SvgIcnIndentation],
     [IconEnum.info]: [ThemeEnum.highlight, SvgIcnInfo],