README file. Minor changes in components

README.md

@@ -0,0 +1,75 @@
+# Snippet Box
+
+![Snippet library screenshot](./.github/img/snippets.png)
+
+## Description
+
+Snippet Box is a simple self-hosted app for organizing your code snippets. It allows you to easily create, edit, browse and manage your snippets in various languages. With built-in Markdown support, Snippet Box makes it very easy to add notes or simple documentation to your code.
+
+## Technology
+
+- Backend
+  - Node.js
+  - Express.js
+  - Sequelize ORM + SQLite
+- Frontend
+  - React
+  - TypeScript
+  - Bootstrap
+- Deployment
+  - Docker
+
+## Development
+
+```sh
+# clone repository
+git clone https://github.com/pawelmalak/snippet-box
+cd snippet-box
+
+# install dependencies (run only once)
+npm run init
+
+# start backend and frontend development servers
+npm run dev
+```
+
+## Installation
+
+### With Docker
+
+#### Building image
+
+```sh
+docker build -t snippet-box .
+```
+
+#### Deployment
+
+```sh
+# run container
+docker run -p 5000:5000 -v /path/to/data:/app/data snippet-box
+```
+
+## Functionality
+
+- Pinned snippets
+  - Pin your favorite / important snippets to home screen for easy and quick access
+
+![Homescreen screenshot](./.github/img/home.png)
+
+- Snippet library
+  - Manage your snippets through snippet library
+  - Easily filter and access your code
+
+![Snippet library screenshot](./.github/img/snippets.png)
+
+- Snippet
+  - View your code, snippet details and documentation
+  - Easily perform snippet actions like edit, pin or delete from a single place
+
+![Snippet screenshot](./.github/img/snippet.png)
+
+- Edditor
+  - Create and edit your snippets from simple and easy to use editor
+
+![Editor screenshot](./.github/img/editor.png)

client/src/components/Snippets/SnippetCode.tsx

@@ -8,7 +8,7 @@ export const SnippetCode = (props: Props): JSX.Element => {
       <textarea
         className='form-control'
         id='code'
-        rows={10}
+        rows={13}
         value={props.code}
         disabled
       ></textarea>

client/src/components/UI/Spinner.module.css

@@ -1,59 +0,0 @@
-.Spinner,
-.Spinner:before,
-.Spinner:after {
-  background: #212529;
-  -webkit-animation: load1 1s infinite ease-in-out;
-  animation: load1 1s infinite ease-in-out;
-  width: 1em;
-  height: 4em;
-}
-.Spinner {
-  color: #212529;
-  text-indent: -9999em;
-  margin: 88px auto;
-  position: relative;
-  font-size: 11px;
-  -webkit-transform: translateZ(0);
-  -ms-transform: translateZ(0);
-  transform: translateZ(0);
-  -webkit-animation-delay: -0.16s;
-  animation-delay: -0.16s;
-}
-.Spinner:before,
-.Spinner:after {
-  position: absolute;
-  top: 0;
-  content: '';
-}
-.Spinner:before {
-  left: -1.5em;
-  -webkit-animation-delay: -0.32s;
-  animation-delay: -0.32s;
-}
-.Spinner:after {
-  left: 1.5em;
-}
-@-webkit-keyframes load1 {
-  0%,
-  80%,
-  100% {
-    box-shadow: 0 0;
-    height: 4em;
-  }
-  40% {
-    box-shadow: 0 -2em;
-    height: 5em;
-  }
-}
-@keyframes load1 {
-  0%,
-  80%,
-  100% {
-    box-shadow: 0 0;
-    height: 4em;
-  }
-  40% {
-    box-shadow: 0 -2em;
-    height: 5em;
-  }
-}

client/src/components/UI/Spinner.tsx

@@ -1,5 +0,0 @@
-import classes from './Spinner.module.css';
-
-export const Spinner = (): JSX.Element => {
-  return <div className={classes.Spinner}>Loading...</div>;
-};

client/src/components/UI/index.ts

@@ -2,6 +2,5 @@ export * from './Layout';
 export * from './Badge';
 export * from './Card';
 export * from './PageHeader';
-export * from './Spinner';
 export * from './Button';
 export * from './EmptyState';

client/src/containers/Home.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useContext, Fragment } from 'react';
 import { SnippetsContext } from '../store';
-import { Layout, Spinner, PageHeader, EmptyState } from '../components/UI';
+import { Layout, PageHeader, EmptyState } from '../components/UI';
 import { SnippetGrid } from '../components/Snippets/SnippetGrid';
 
 export const Home = (): JSX.Element => {
@@ -24,13 +24,6 @@ export const Home = (): JSX.Element => {
               </div>
             </Fragment>
           )}
-
-          <PageHeader title='Recent snippets' />
-          <div className='col-12'>
-            <SnippetGrid
-              snippets={snippets.filter(s => !s.isPinned).slice(0, 6)}
-            />
-          </div>
         </Fragment>
       )}
     </Layout>

client/src/containers/Snippets.tsx

@@ -1,14 +1,7 @@
 import { useEffect, useContext, useState, Fragment } from 'react';
 import { SnippetsContext } from '../store';
 import { SnippetGrid } from '../components/Snippets/SnippetGrid';
-import {
+import { Button, Card, EmptyState, Layout } from '../components/UI';
-  Badge,
-  Button,
-  Card,
-  EmptyState,
-  Layout,
-  Spinner
-} from '../components/UI';
 import { Snippet } from '../typescript/interfaces';
 
 export const Snippets = (): JSX.Element => {
@@ -45,7 +38,13 @@ export const Snippets = (): JSX.Element => {
       ) : (
         <Fragment>
           <div className='col-12 col-md-4 col-lg-3'>
-            <Card title='Filter by language'>
+            <Card>
+              <h5 className='card-title'>All snippets</h5>
+              <div className='mb-3 d-flex justify-content-between'>
+                <span>Total</span>
+                <span>{snippets.length}</span>
+              </div>
+              <h5 className='card-title'>Filter by language</h5>
               <Fragment>
                 {languageCount.map((el, idx) => {
                   const isActiveFilter = filter === el.language;