styled packs

CHANGELOG.md

@@ -1,8 +1,9 @@
 # Changelog Fab-manager
 
-- [TODO DEPLOY] `rails db:seed`
 - Fix a bug: unable to filter by multiple user IDs in OpenAPI
 - Tests for OpenAPI user trainings
+- [TODO DEPLOY] `rails db:seed`
+- [TODO DEPLOY] `rails fablab:maintenance:rebuild_stylesheet`
 
 ## v5.0.8 2021 June 28
 

app/frontend/src/javascript/components/machines/reserve-button.tsx

@@ -149,12 +149,12 @@ const ReserveButtonComponent: React.FC<ReserveButtonProps> = ({ currentUser, mac
                              user={user}
                              machine={machine}
                              onEnrollRequested={onEnrollRequested} />
-      {machine && <ProposePacksModal isOpen={proposePacks}
-                                     toggleModal={toggleProposePacksModal}
-                                     machine={machine}
-                                     onError={onError}
-                                     customer={currentUser}
-                                     onDecline={onReserveMachine} />}
+      {machine && currentUser && <ProposePacksModal isOpen={proposePacks}
+                                                    toggleModal={toggleProposePacksModal}
+                                                    machine={machine}
+                                                    onError={onError}
+                                                    customer={currentUser}
+                                                    onDecline={onReserveMachine} />}
     </span>
 
   );

app/frontend/src/stylesheets/modules/machines/propose-packs-modal.scss

@@ -1,23 +1,42 @@
 .propose-packs-modal {
   .list-of-packs {
     display: flex;
+    flex-wrap: wrap;
     .pack {
+      border-width: 3px;
+      border-style: solid;
+      border-radius: 10px 3px;
+      padding: 5px 15px;
+      width: 264px;
+      margin: 5px 10px;
+      text-align: center;
+
       &::before {
         content: '\f466';
         font-family: 'Font Awesome 5 Free';
         font-weight: 800;
-        font-size: 12px;
+        font-size: 30px;
         vertical-align: middle;
         line-height: 38px;
+        display: block;
       }
 
+      .duration {
+        margin-right: 1em;
+      }
+
+      .amount {
+        font-weight: bold;
+      }
       .crossed-out-price {
+        display: block;
         text-decoration: line-through;
       }
 
       .buy-button {
-        margin-left: 10px;
+        margin-top: 10px;
         margin-bottom: 5px;
+
       }
     }
   }

app/themes/casemate/style.scss.erb

@@ -395,3 +395,12 @@ section#cookies-modal div.cookies-consent .cookies-actions button.accept {
     }
   }
 }
+
+
+.propose-packs-modal {
+  .list-of-packs {
+    .pack {
+      border-color: $secondary;
+    }
+  }
+}