✨ feat: Astrologers | view: add astrologers proclaimed modal

MateuszNaKodach · Sep 30, 2024 · 1ae8721 · 1ae8721
1 parent 42031a2
commit 1ae8721
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 10 deletions.
diff --git a/heroesofddd_rails_application/app/assets/images/button_submit.png b/heroesofddd_rails_application/app/assets/images/button_submit.png
diff --git a/heroesofddd_rails_application/app/assets/stylesheets/modal.scss b/heroesofddd_rails_application/app/assets/stylesheets/modal.scss
@@ -7,13 +7,36 @@
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.4);
-}
 
-.modal-content {
-  background-color: #fefefe;
-  margin: 15% auto;
-  padding: 20px;
-  border: 1px solid #888;
-  width: 80%;
-  max-width: 500px;
+  &__content {
+    background-color: #fefefe;
+    margin: 15% auto;
+    padding: 20px;
+    width: 80%;
+    max-width: 500px;
+    border: 16px solid #831A1C;
+    background-image: asset-url("Heroes3MenuBackground.png");
+    color: white;
+    text-align: center;
+    font-size: 1rem;
+  }
+
+  &__border {
+    box-shadow:
+            0 0 0 2px #F5DA76,
+            0 0 0 4px #A3813F,
+            0 0 0 8px #2B1E12,
+            0 0 0 10px #A3813F,
+            0 0 0 12px #F5DA76,
+            0 0 0 14px #000000;
+  }
+
+  &__submit-button {
+    all: unset;
+    cursor: pointer;
+    img {
+      height: 2rem;
+      margin-top: 1rem;
+    }
+  }
 }
diff --git a/heroesofddd_rails_application/app/views/heroes/astrologers/_week_symbol_modal.html.erb b/heroesofddd_rails_application/app/views/heroes/astrologers/_week_symbol_modal.html.erb
@@ -1,8 +1,10 @@
 <div id="week_symbol_modal" class="modal" data-controller="modal">
-  <div class="modal-content">
+  <div class="modal__content modal__border">
     <p>Astrologers proclaim week of the <%= week_of.capitalize.gsub("_", " ") %>.</p>
     <p><%= week_of.capitalize.gsub("_", " ") %> growth +<%= growth %></p>
     <p>All dwellings increase population.</p>
-    <button data-action="click->modal#close">Close</button>
+    <button data-action="click->modal#close" class="modal__submit-button">
+      <%= image_tag "button_submit.png", alt: "Submit" %>
+    </button>
   </div>
 </div>