minor changes

Gemfile

@@ -17,9 +17,10 @@ gem 'uglifier', '>= 1.3.0'
 gem 'responders'
 # Use CoffeeScript for .coffee assets and views
 gem 'coffee-rails', '~> 4.2'
-
+gem 'jquery-rails'
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
 gem 'jbuilder', '~> 2.5'
+gem 'bootstrap', '~> 4.4.1'
 # Use Redis adapter to run Action Cable in production
 # gem 'redis', '~> 4.0'
 # Use ActiveModel has_secure_password

Gemfile.lock

@@ -47,9 +47,15 @@ GEM
     archive-zip (0.12.0)
       io-like (~> 0.3.0)
     arel (9.0.0)
+    autoprefixer-rails (9.7.4)
+      execjs
     bindex (0.8.1)
     bootsnap (1.4.5)
       msgpack (~> 1.0)
+    bootstrap (4.4.1)
+      autoprefixer-rails (>= 9.1.0)
+      popper_js (>= 1.14.3, < 2)
+      sassc-rails (>= 2.0.0)
     builder (3.2.4)
     byebug (11.1.1)
     capybara (3.31.0)
@@ -83,6 +89,10 @@ GEM
     io-like (0.3.0)
     jbuilder (2.9.1)
       activesupport (>= 4.2.0)
+    jquery-rails (4.3.5)
+      rails-dom-testing (>= 1, < 3)
+      railties (>= 4.2.0)
+      thor (>= 0.14, < 2.0)
     listen (3.1.5)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
@@ -104,6 +114,7 @@ GEM
     nokogiri (1.10.7)
       mini_portile2 (~> 2.4.0)
     pg (1.2.2)
+    popper_js (1.16.0)
     public_suffix (4.0.3)
     puma (3.12.2)
     rack (2.1.2)
@@ -156,6 +167,14 @@ GEM
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
       tilt (>= 1.1, < 3)
+    sassc (2.2.1)
+      ffi (~> 1.9)
+    sassc-rails (2.1.2)
+      railties (>= 4.0.0)
+      sassc (>= 2.0)
+      sprockets (> 3.0)
+      sprockets-rails
+      tilt
     selenium-webdriver (3.142.7)
       childprocess (>= 0.5, < 4.0)
       rubyzip (>= 1.2.2)
@@ -197,11 +216,13 @@ PLATFORMS
 
 DEPENDENCIES
   bootsnap (>= 1.1.0)
+  bootstrap (~> 4.4.1)
   byebug
   capybara (>= 2.15)
   chromedriver-helper
   coffee-rails (~> 4.2)
   jbuilder (~> 2.5)
+  jquery-rails
   listen (>= 3.0.5, < 3.2)
   pg
   puma (~> 3.11)

app/assets/javascripts/application.js

@@ -12,4 +12,7 @@
 //
 //= require rails-ujs
 //= require activestorage
+//= require jquery3
+//= require popper
+//= require bootstrap
 //= require_tree .

app/javascript/components/App.css

@@ -17,7 +17,7 @@ body {
 }
 
 header {
-  background: #f57011;
+  background: darkseagreen;
   height: 60px;
 }
 
@@ -31,9 +31,6 @@ header h1, header h1 a{
   text-decoration: none;
 }
 
-header h1 a:hover {
-  text-decoration: underline;
-}
 
 .grid {
   display: grid;
@@ -67,22 +64,11 @@ header h1 a:hover {
   background: #f8e5ce;
 }
 
-.eventList a {
-  display: block;
-  color: black;
-  text-decoration: none;
-  border-bottom: 1px solid #dddddd;
-  padding: 8px 6px 10px;
-  outline: 0;
-}
 
 .eventList h2 > a {
-  color: #236fff;
   font-size: 15px;
   float: right;
   font-weight: normal;
-  border-bottom: none;
-  padding: 0px;
 }
 
 .eventForm {
@@ -142,23 +128,6 @@ button[type="submit"] {
   font-weight: 0.9;
 }
 
-button.delete {
-  background: none !important;
-  border: none;
-  padding: 0 !important;
-  margin-left: 10px;
-  cursor: pointer;
-  color: #236fff;
-  font-size: 15px;
-  font-weight: normal;
-  margin: 3px 0 0 0;
-  text-decoration: none;
-}
-
-button.delete:hover {
-  text-decoration: underline;
-}
-
 h2 a {
   color: #236fff;
   font-size: 15px;
@@ -167,23 +136,57 @@ h2 a {
   text-decoration: none;
 }
 
-h2 a:hover {
-  text-decoration: underline;
-}
-
 .form-actions a {
   color: #236fff;
   font-size: 15px;
   margin: 3px 12px 0 12px;
   text-decoration: none;
 }
 
-.form-actions a:hover {
-  text-decoration: underline;
-}
-
 input.search {
   width: 92%;
   margin: 15px 2px;
   padding: 4px 0 6px 6px;
+}
+
+.new-button {
+  background-color: #4CAF50;
+  border: none;
+  color: white;
+  padding: 1px 10px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px !important;
+  margin: 4px 2px;
+  cursor: pointer;
+  border-radius: 5px
+}
+
+.edit-button {
+  background-color: darkorange;
+  border: none;
+  color: white;
+  padding: 0px 10px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 12px;
+  cursor: pointer;
+  border-radius: 5px
+}
+
+.delete-button {
+  background-color: red;
+  border: none;
+  color: white;
+  padding: 8px 10px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 0px;
+  cursor: pointer;
+  border-radius: 5px
 }

app/javascript/components/Event.js

@@ -9,8 +9,8 @@ const Event = ({ event, onDelete }) => (
       {event.event_date}
       {' - '}
       {event.event_type}
-      <Link to={`/events/${event.id}/edit`}>Edit</Link>
-      <button className="delete" type="button" onClick={() => onDelete(event.id)}>
+      <Link to={`/events/${event.id}/edit`} className="edit-button">Edit</Link>
+      <button className="delete delete-button" type="button" onClick={() => onDelete(event.id)}>
         Delete
       </button>
     </h2>

app/javascript/components/EventList.js

@@ -50,7 +50,7 @@ class EventList extends React.Component {
       <section className="eventList">
         <h2>
           Events
-          <Link to="/events/new">New Event</Link>
+          <Link to="/events/new" className="new-button">New Event</Link>
         </h2>
         <input
           className="search"

app/javascript/components/Header.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const Header = () => (
-  <header>
+  <header className="panel-heading font-small cyan darken-3">
     <h1>Event Manager</h1>
   </header>
 );

config/environments/production.rb

@@ -27,7 +27,8 @@
   # config.assets.css_compressor = :sass
 
   # Do not fallback to assets pipeline if a precompiled asset is missed.
-  config.assets.compile = false
+  config.assets.complie = true
+  config.serve_static_assests = true
 
   # `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb
 

config/webpack/environment.js

@@ -1,3 +1,3 @@
 const { environment } = require('@rails/webpacker')
-
+environment.loaders.delete('nodeModules')
 module.exports = environment

config/webpacker.yml

@@ -88,10 +88,10 @@ production:
   <<: *default
 
   # Production depends on precompilation of packs prior to booting for performance.
-  compile: false
+  compile: true
 
   # Extract and emit a css file
-  extract_css: true
+  extract_css: false
 
   # Cache manifest.json for performance
   cache_manifest: true

package.json

@@ -14,8 +14,10 @@
     "react-s-alert": "^1.4.1"
   },
   "devDependencies": {
+    "css-loader": "^3.4.2",
     "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.0.1"
+    "eslint-config-airbnb": "^18.0.1",
+    "style-loader": "^1.1.3"
   },
   "scripts": {
     "lint": "eslint app/javascript"

yarn.lock

@@ -2023,7 +2023,7 @@ css-has-pseudo@^0.10.0:
     postcss "^7.0.6"
     postcss-selector-parser "^5.0.0-rc.4"
 
-css-loader@^3.2.0:
+css-loader@^3.2.0, css-loader@^3.4.2:
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.4.2.tgz#d3fdb3358b43f233b78501c5ed7b1c6da6133202"
   integrity sha512-jYq4zdZT0oS0Iykt+fqnzVLRIeiPWhka+7BqPn+oSIpWJAHak5tmB/WZrJ2a21JhCeFyNnnlroSl8c+MtVndzA==
@@ -6476,7 +6476,7 @@ strip-json-comments@^3.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
   integrity sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==
 
-style-loader@^1.0.0:
+style-loader@^1.0.0, style-loader@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.1.3.tgz#9e826e69c683c4d9bf9db924f85e9abb30d5e200"
   integrity sha512-rlkH7X/22yuwFYK357fMN/BxYOorfnfq0eD7+vqlemSK4wEcejFF1dg4zxP0euBW8NrYx2WZzZ8PPFevr7D+Kw==