Added support for .ico files

CHANGELOG.md

@@ -1,3 +1,8 @@
+### v2.0.2 (TBA)
+- Added support for .ico files for custom icons ([#209](https://github.com/pawelmalak/flame/issues/209))
+- Added option to pin apps and categories directly from table view
+
+
 ### v2.0.1 (2021-11-19)
 - Added option to display humidity in the weather widget ([#136](https://github.com/pawelmalak/flame/issues/136))
 - Added option to set default theme for all new users ([#165](https://github.com/pawelmalak/flame/issues/165))

client/src/components/Apps/AppForm/AppForm.tsx

@@ -154,7 +154,7 @@ export const AppForm = ({ app, modalHandler }: Props): JSX.Element => {
             id="icon"
             required
             onChange={(e) => fileChangeHandler(e)}
-            accept=".jpg,.jpeg,.png,.svg"
+            accept=".jpg,.jpeg,.png,.svg,.ico"
           />
           <span
             onClick={() => {

client/src/components/Bookmarks/Form/BookmarksForm.tsx

@@ -146,6 +146,7 @@ export const BookmarksForm = ({
 
   return (
     <ModalForm modalHandler={modalHandler} formHandler={formSubmitHandler}>
+      {/* NAME */}
       <InputGroup>
         <label htmlFor="name">Bookmark Name</label>
         <input
@@ -159,6 +160,7 @@ export const BookmarksForm = ({
         />
       </InputGroup>
 
+      {/* URL */}
       <InputGroup>
         <label htmlFor="url">Bookmark URL</label>
         <input
@@ -172,6 +174,7 @@ export const BookmarksForm = ({
         />
       </InputGroup>
 
+      {/* CATEGORY */}
       <InputGroup>
         <label htmlFor="categoryId">Bookmark Category</label>
         <select
@@ -192,6 +195,7 @@ export const BookmarksForm = ({
         </select>
       </InputGroup>
 
+      {/* ICON */}
       {!useCustomIcon ? (
         // mdi
         <InputGroup>
@@ -227,7 +231,7 @@ export const BookmarksForm = ({
             name="icon"
             id="icon"
             onChange={(e) => fileChangeHandler(e)}
-            accept=".jpg,.jpeg,.png,.svg"
+            accept=".jpg,.jpeg,.png,.svg,.ico"
           />
           <span
             onClick={() => {
@@ -241,6 +245,7 @@ export const BookmarksForm = ({
         </InputGroup>
       )}
 
+      {/* VISIBILTY */}
       <InputGroup>
         <label htmlFor="isPublic">Bookmark visibility</label>
         <select

client/src/components/Settings/UISettings/UISettings.tsx

@@ -85,7 +85,9 @@ export const UISettings = (): JSX.Element => {
       <SettingsHeadline text="Header" />
       {/* HIDE HEADER */}
       <InputGroup>
-        <label htmlFor="hideHeader">Hide greetings</label>
+        <label htmlFor="hideHeader">
+          Hide headline (greetings and weather)
+        </label>
         <select
           id="hideHeader"
           name="hideHeader"

client/src/utility/validators.ts

@@ -13,7 +13,7 @@ export const isUrl = (data: string): boolean => {
 };
 
 export const isImage = (data: string): boolean => {
-  const regex = /.(jpeg|jpg|png)$/i;
+  const regex = /.(jpeg|jpg|png|ico)$/i;
 
   return regex.test(data);
 };

middleware/multer.js

@@ -14,7 +14,7 @@ const storage = multer.diskStorage({
   },
 });
 
-const supportedTypes = ['jpg', 'jpeg', 'png', 'svg', 'svg+xml'];
+const supportedTypes = ['jpg', 'jpeg', 'png', 'svg', 'svg+xml', 'x-icon'];
 
 const fileFilter = (req, file, cb) => {
   if (supportedTypes.includes(file.mimetype.split('/')[1])) {