feat: add new logo

lexis-solutions · Feb 3, 2022 · 5a49ab7 · 5a49ab7
1 parent 9eea4a0
commit 5a49ab7
Show file tree

Hide file tree

Showing 13 changed files with 93 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,7 @@
 # Agenda Admin
+
+![logo](/client/public/logo128.png)
+
 A Dashboard for [Agenda](https://github.com/agenda/agenda)
 
 ---
@@ -21,7 +24,9 @@ Required version of MongoDB: >2.6.0
 ---
 
 ### Middleware usage
+
 Agenda Admin can be used as express middleware, using the `mountAgendaAdmin` function. As an argument, it takes an object with the following fields:
+
 - `publicUrl` - the URL at which the the middleware should be mounted
 - `expressApp` - the express app
 - `agenda` - an agenda instance
@@ -39,9 +44,9 @@ const app = express();
 
 const agenda = new Agenda({ db: { address: 'mongodb://127.0.0.1/agendaDb' } });
 
-mountAgendaAdmin({ 
+mountAgendaAdmin({
   publicUrl: 'http://localhost:4000/agenda-admin',
-  expressApp: app, 
+  expressApp: app,
   agenda
 });
 
@@ -51,8 +56,9 @@ app.listen(4000);
 ---
 
 ### Docker usage
+
 ```
-docker run -p 4000:4000 \ 
+docker run -p 4000:4000 \
 --env CONNECTION_STRING=mongo://username:password@host/database \
 --env COLLECTION=collection
 ```
@@ -62,7 +68,7 @@ docker run -p 4000:4000 \
 ### Environment configuration
 
 | name              | description                                                         | required | default value |
-|-------------------|---------------------------------------------------------------------|----------|---------------|
+| ----------------- | ------------------------------------------------------------------- | -------- | ------------- |
 | CONNECTION_STRING | MongoDB connection string                                           | yes      |               |
 | COLLECTION        | MongoDB collection of jobs                                          | no       | agendaJobs    |
 | ITEMS_PER_PAGE    | Number of jobs per page                                             | no       | 20            |
@@ -82,11 +88,10 @@ docker run -p 4000:4000 \
 Inside the `api` directory create an `.env.development` file with `CONNECTION_STRING` and `COLLECTION` variables, then run `yarn dev`. \
 You can also run `yarn start` in the `api` and `client` directories.
 
-
 #### Running tests
 
 Inside the `api` directory create an `.env.testing` file with `CONNECTION_STRING` and `COLLECTION` variables, then run `yarn test`.
 
 #### Commit messages
 
-Agenda Admin uses [conventional commits format](https://www.conventionalcommits.org/en/v1.0.0/).
+Agenda Admin uses [conventional commits format](https://www.conventionalcommits.org/en/v1.0.0/).
diff --git a/client/public/favicon.ico b/client/public/favicon.ico
diff --git a/client/public/index.html b/client/public/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Admin interface for Agenda"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Agenda Admin</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/client/public/logo128.png b/client/public/logo128.png
diff --git a/client/public/logo192.png b/client/public/logo192.png
diff --git a/client/public/logo512.png b/client/public/logo512.png
diff --git a/client/public/manifest.json b/client/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Agenda Admin",
+  "name": "Agenda Admin",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -1,14 +1,19 @@
-import JobsTable from 'src/components/JobsTable';
 import Footer from 'src/components/Footer';
-import { useJobsListContext } from 'src/hooks/useJobsListContext';
 import Header from 'src/components/Header';
+import JobsTable from 'src/components/JobsTable';
+import Logo from './svgs/Logo';
+import { useJobsListContext } from 'src/hooks/useJobsListContext';
 
 const App = () => {
   const { data } = useJobsListContext();
 
   return (
     <div className="max-w-screen-xl mx-auto">
       <div className="flex flex-col items-center justify-between py-8 mb-16 space-y-4">
+        <a href="/" className="flex items-center self-start space-x-2 ">
+          <Logo className="h-16 w-16" />
+          <h1 className="text-3xl select-none font-bold">Agenda Admin</h1>
+        </a>
         <Header />
         <JobsTable />
         {data && data[0].jobs.length === 0 && (

diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
@@ -1,14 +1,14 @@
-import { useState } from 'react';
-import { useFormik } from 'formik';
 import * as Yup from 'yup';
-import humanInterval from 'human-interval';
+
 import JobFilters from 'src/components/JobFilters';
+import JobNamesAutocomplete from 'src/components/JobNamesAutocomplete';
 import Modal from 'src/components/Modal';
+import Plus from 'src/svgs/Plus';
 import { createNewJob } from 'src/api';
+import humanInterval from 'human-interval';
 import { isUndefined } from 'lodash';
-import Plus from 'src/svgs/Plus';
-import JobNamesAutocomplete from 'src/components/JobNamesAutocomplete';
-import { LOGO_URL } from 'src/constants';
+import { useFormik } from 'formik';
+import { useState } from 'react';
 
 interface FormValuesType {
   name: string;
@@ -92,10 +92,6 @@ const Header: React.FC = () => {
 
   return (
     <div className="relative flex flex-col w-full">
-      <div className="flex items-center mb-2 space-x-2">
-        <img src={LOGO_URL} width={50} height={50} />
-        <span className="text-xl">Agenda Admin</span>
-      </div>
       <JobFilters />
       <div className="flex justify-end w-full">
         <a

diff --git a/client/src/components/JobFilters.tsx b/client/src/components/JobFilters.tsx
@@ -1,13 +1,14 @@
-import cx from 'classnames';
-import { debounce } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+import InputField from './InputField';
 import { JOB_COLORS } from 'src/constants';
-import { useJobsListContext } from 'src/hooks/useJobsListContext';
-import { useJobsOverview } from 'src/hooks/useJobsOverview';
+import JobNamesAutocomplete from './JobNamesAutocomplete';
 import { StatusType } from 'src/types';
 import { abbreviateNumber } from 'src/utils/formatter';
-import InputField from './InputField';
-import JobNamesAutocomplete from './JobNamesAutocomplete';
+import cx from 'classnames';
+import { debounce } from 'lodash';
+import { useJobsListContext } from 'src/hooks/useJobsListContext';
+import { useJobsOverview } from 'src/hooks/useJobsOverview';
 
 const DEBOUNCE_DELAY = 500;
 
@@ -175,7 +176,7 @@ const JobFilters: React.FC = () => {
             onClear={() => null}
             inputProps={{
               type: 'number',
-              min: 0,
+              min: 1,
               value: +refreshRate / 1000,
               onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
                 handleRefreshIntervalChange(+e.target.value * 1000),

diff --git a/client/src/constants.ts b/client/src/constants.ts
@@ -1,8 +1,5 @@
 export const API_URL = 'http://localhost:4000/api';
 export const DEFAULT_REFRESH_INTERVAL = 15000;
-export const LOGO_URL =
-  process.env.REACT_APP_LOGO_URL ||
-  'https://cdn.icon-icons.com/icons2/2506/PNG/512/user_icon_150670.png';
 
 export const JOB_COLORS = {
   scheduled: 'bg-black',

diff --git a/client/src/context/JobsListContext.tsx b/client/src/context/JobsListContext.tsx
@@ -1,16 +1,17 @@
 import {
-  createContext,
   Dispatch,
   SetStateAction,
+  createContext,
   useCallback,
   useEffect,
   useState,
 } from 'react';
+import { GetJobsResponseType, SortType, StatusType } from 'src/types';
 import { deleteJobsById, requeueJobsById } from 'src/api';
+
 import { DEFAULT_REFRESH_INTERVAL } from 'src/constants';
-import { useJobsList } from 'src/hooks/useJobsList';
-import { SortType, StatusType, GetJobsResponseType } from 'src/types';
 import { KeyedMutator } from 'swr';
+import { useJobsList } from 'src/hooks/useJobsList';
 
 interface JobsListContextType {
   data: GetJobsResponseType | null;

diff --git a/client/src/svgs/Logo.tsx b/client/src/svgs/Logo.tsx
@@ -0,0 +1,53 @@
+interface PropTypes {
+  className?: string;
+}
+
+const Logo: React.FC<PropTypes> = ({ className }) => (
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    width="2048.00"
+    height="2048.00"
+    className={className}
+    viewBox="0 0 2048.0 2048.0"
+  >
+    <g id="document" transform="matrix(1,0,0,1,1024.0,1024.0)">
+      <path
+        d="M-51.2447,-21.1336 C-36.915,-227.608 -192.859,-406.812 -399.333,-421.142 C-605.808,-435.471 -785.012,-279.528 -799.342,-73.053 C-813.671,133.422 -657.728,312.625 -451.253,326.955 C-244.778,341.285 -65.5745,185.341 -51.2447,-21.1336 Z M-409.717,-271.522 C-285.533,-262.904 -192.245,-155.702 -200.864,-31.5174 C-209.483,92.6666 -316.685,185.954 -440.869,177.336 C-565.053,168.717 -658.341,61.515 -649.722,-62.6691 C-641.104,-186.853 -533.901,-280.141 -409.717,-271.522 Z "
+        fill="currentColor"
+        fillOpacity="1.00"
+      />
+      <path
+        d="M183.862,299.814 C279.897,270.096 384.85,264.579 489.953,288.753 C541.777,300.673 590.415,319.069 635.208,342.892 C734.184,281.497 803.268,175.03 811.942,50.0488 C826.272,-156.426 670.328,-335.63 463.853,-349.959 C257.378,-364.289 78.1747,-208.345 63.845,-1.8706 C55.6523,116.177 103.117,225.31 183.862,299.814 L183.862,299.814 Z M453.469,-200.34 C577.653,-191.721 670.941,-84.5191 662.322,39.6649 C653.704,163.849 546.502,257.137 422.318,248.518 C298.133,239.9 204.846,132.697 213.464,8.51329 C222.083,-115.671 329.285,-208.959 453.469,-200.34 Z "
+        fill="currentColor"
+        fillOpacity="1.00"
+      />
+      <path
+        d="M-178.169,70.266 L-107.363,75.1801 C-103.285,16.4117 -52.5528,-27.7354 6.21552,-23.6568 C64.9839,-19.5781 109.131,31.1538 105.052,89.9221 L175.858,94.8362 C182.639,-2.87507 108.841,-87.6807 11.1296,-94.462 C-86.5817,-101.243 -171.387,-27.4452 -178.169,70.266 Z "
+        fill="currentColor"
+        fillOpacity="1.00"
+        strokeWidth="42.02"
+        stroke="currentColor"
+        strokeLinecap="square"
+        strokeLinejoin="miter"
+      />
+      <path
+        d="M-46.0472,-435.711 C-40.7067,-436.844 -36.8624,-438.081 -32.1142,-441.51 C-19.4178,-451.152 -16.6236,-469.751 -26.2143,-483.195 C-27.6067,-484.795 -32.3761,-491.892 -43.7226,-501.7 C-38.3821,-502.832 -33.0416,-503.965 -27.5453,-507.342 C-14.8489,-516.985 -12.0547,-535.583 -21.6454,-549.028 C-25.8225,-553.828 -125.989,-681.052 -378.846,-698.601 C-378.846,-698.601 -378.846,-698.601 -380.342,-698.704 C-380.342,-698.704 -380.342,-698.704 -381.839,-698.808 C-634.695,-716.357 -749.98,-604.086 -755.58,-599.213 C-767.633,-588.022 -767.486,-568.468 -756.244,-557.164 C-752.763,-553.164 -747.734,-549.808 -741.001,-549.34 C-754.341,-541.246 -760.045,-534.876 -760.845,-534.18 C-772.15,-522.938 -772.003,-503.383 -760.761,-492.079 C-757.28,-488.079 -752.895,-486.271 -747.762,-484.412 C-754.858,-479.642 -758.858,-476.161 -758.858,-476.161 C-768.459,-467.807 -769.549,-452.097 -761.247,-441.749 C-756.373,-436.149 -751.241,-434.289 -744.508,-433.822 C-737.775,-433.355 -732.331,-435.984 -726.834,-439.361 C-725.234,-440.753 -620.588,-529.708 -393.863,-514.725 C-169.537,-497.652 -74.4419,-394.835 -74.4938,-394.087 C-69.6206,-388.487 -64.4878,-386.627 -57.7549,-386.16 C-51.022,-385.693 -45.5777,-388.322 -40.0814,-391.699 C-30.4812,-400.053 -29.3909,-415.763 -37.6931,-426.111 C-36.145,-426.755 -39.6778,-430.007 -46.0472,-435.711 Z "
+        fill="currentColor"
+        fillOpacity="1.00"
+      />
+      <path
+        d="M-15.506,583.476 L-40.9027,653.279 C151.751,723.374 364.997,623.905 435.092,431.251 L365.29,405.854 C309.163,560.117 138.757,639.603 -15.506,583.476 Z "
+        fill="currentColor"
+        fillOpacity="1.00"
+        strokeWidth="42.19"
+        stroke="currentColor"
+        strokeLinecap="square"
+        strokeLinejoin="miter"
+      />
+    </g>
+  </svg>
+);
+
+export default Logo;