Bump lodash from 4.17.15 to 4.17.21 in /assets

README.md

@@ -1,21 +1,25 @@
-# Docker Phoenix
+# Simple. Uses Docker Phoenix
 
 ## Prerequisites
+
 Install docker and docker-compose.
 Duplicate `.example.env` file and rename it to `.env`
 
 ## Motivation
+
 I wanted to have a starter kit for Phoenix projects that I would be able to run anywhere in docker.
 Alpine linux is used for all the docker images.
 If you use vscode - all the necessary extensions for developing phoenix application will be installed automatically inside the container
 
 ## Set up for vscode users
+
 1. Install https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack
 2. Open the folder in vscode and it should suggest you to reopen it inside the container
 3. After setting up the database you can add connection in postresql explorer (use hostname `db`, user and password from `.env` file)
 4. In `devcontainer.json` set `elixir.projectPath` and `elixirLS.projectDir` to the path to your project so elixir-ls extension starts working.
 
 ## Get started
+
 1. Start shell session inside the container. For vscode users - just open the terminal (Ctrl + J) - it will already be inside the container. For others - run e.g. `docker exec -it phoenix-docker_app_1 sh`
 2. Create new phoenix project `mix phx.new your_project_name` and press enter to install dependencies when it prompts you
 3. To set up postgres open `config/dev.exs`, change hostname to `"db"`, database to `"database"` and run `mix ecto.create` in your project folder

assets/css/app.scss

@@ -29,7 +29,7 @@
 }
 
 .phx-click-loading {
-  opacity: 0.5;
+  opacity: 0.6;
   transition: opacity 1s ease-out;
 }
 

assets/css/components/input.scss

@@ -4,7 +4,7 @@ input {
   border: 1px solid var(--c-gray-6);
   border-radius: var(--bdrs-default);
   height: 30px;
-  padding-left: 7px;
+  padding-left: 5px;
   outline: none;
 
   &:focus {

assets/css/components/transactions.scss

@@ -5,7 +5,7 @@
     align-items: center;
     flex-grow: 1;
   }
-  
+
   &__item {
     max-width: var(--max-page-width);
     width: 100%;
@@ -26,13 +26,13 @@
       margin-bottom: 80px;
     }
   }
-  
+
   &__itemSection {
     display: flex;
     justify-content: space-between;
     width: 100%;
   }
-  
+
   &__itemLink {
     position: absolute;
     width: 100%;
@@ -44,7 +44,7 @@
   &__searchForm {
     border-bottom: 1px solid var(--c-gray-4);
     position: sticky;
-    top: 46px;
+    top: 45px;
     left: 0;
     background-color: var(--c-gray-1);
     z-index: 1;

assets/css/reset.scss

@@ -1,70 +1,167 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
-fieldset,
-body,
-button,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
 ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
 figure,
-ol {
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
   margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: inherit;
+  vertical-align: baseline;
 }
 
-fieldset,
-button,
-legend,
-ul,
-ol {
-  padding: 0;
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+img {
+  display: block;
 }
 
-fieldset {
-  border: none;
+li {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+  content: "";
+  content: none;
+}
+
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
 }
 
 button {
-  border: none;
   width: auto;
   overflow: visible;
+  border: none;
   background-color: transparent;
-  line-height: inherit;
-  text-align: inherit;
   color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
-}
-
-ul,
-ol {
-  list-style: none;
+  line-height: inherit;
+  text-align: inherit;
 }
 
 input,
 textarea {
+  padding: 0;
+  border: none;
+  background-color: inherit;
+  color: inherit;
   font-family: inherit;
-  line-height: inherit;
   font-size: inherit;
+  line-height: inherit;
 }
 
-input[type='number'] {
+input[type="number"] {
   appearance: textfield;
 }
 
-input[type='number']::-webkit-outer-spin-button,
-input[type='number']::-webkit-inner-spin-button {
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
   appearance: none;
   margin: 0;
 }
 
-input[type='search']::-webkit-search-decoration,
-input[type='search']::-webkit-search-cancel-button,
-input[type='search']::-webkit-search-results-button,
-input[type='search']::-webkit-search-results-decoration {
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
   display: none;
 }
 
@@ -75,13 +172,9 @@ select {
 }
 
 a {
-  text-decoration: none;
   color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
-}
-
-img {
-  display: block;
+  text-decoration: none;
 }

config/dev.exs

@@ -2,8 +2,8 @@ use Mix.Config
 
 # Configure your database
 config :simp, Simp.Repo,
-  username: "postgres",
-  password: "postgres",
+  username: "postgres_user",
+  password: "postgres_password",
   database: "database",
   hostname: "db",
   show_sensitive_data_on_connection_error: true,