made buttons like in mockup

ita-social-projects · Sep 17, 2023 · 2e1b0cc · 2e1b0cc
1 parent be71728
commit 2e1b0cc
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 38 deletions.
diff --git a/app/assets/stylesheets/pages/main.scss b/app/assets/stylesheets/pages/main.scss
@@ -73,45 +73,48 @@ a {
   }
 }
 
-.main-btns {
+.main-btn {
+
+}
+
+
+.main-btn {
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
-  max-width: 420px;
+
+  text-align: center;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  font-size: 12px;
+  color: $color;
+  border: 1px solid;
+  border-radius: 4px;
   margin: 20px auto;
+  padding: 15px 36px;
 
-  &> :last-of-type {
-    & img {
-      margin-right: 10px;
-    }
+  min-width: 187px;
+  max-width: 420px;
+}
 
-    &:hover {
-      color: $color;
-    }
+.btn-gray {
+  border-color: $gray;
+  color: $color;
+
+  &:hover {
+    color: $success;
+    border-color: $success;
   }
 }
 
-.donate-btn,
-.main-btns {
-  background-color: transparent;
-  border: none;
-  letter-spacing: 2px;
-  text-transform: uppercase;
-  margin-bottom: 0.2em;
+.btn-green {
+  border-color: $success;
+  color: $success;
 
-  a {
-    border: 2px solid $gray;
-    border-radius: 4px;
-    padding: 17px 36px;
-    font-size: 12px;
-    color: $color;
-    text-align: center;
-    min-width: 187px;
-
-    &:hover {
-      color: $success;
-      border-color: $success;
-    }
+  &:hover {
+    background-color: $success;
+    color: white;
+    border-color: $success;
   }
 }
 

diff --git a/app/views/account/shared/_navigation.html.slim b/app/views/account/shared/_navigation.html.slim
@@ -10,8 +10,6 @@ body
         = link_to t('layouts.navigation.sign_up'), new_user_registration_path, class: 'tab'
         = link_to t('layouts.navigation.log_in'), new_user_session_path, class: 'tab', id: 'log_in'
       = link_to t('layouts.navigation.contact_us'), new_message_path, class: 'tab'
-    .func-btns
-      .donate-btn
-        = link_to t('layouts.navigation.donate'), "https://zerowastelviv.org.ua/pidtrymaty/", target: '_blank'
-
-      = link_to t("#{switch_locale_to}"), url_for(locale: switch_locale_to), class: 'btn btn-outline-success btn-sm'
+    .func-btns.d-inline
+      = link_to t('.donate'), "https://zerowastelviv.org.ua/pidtrymaty/", target: '_blank', class: "d-inline main-btn btn-green mr-2"
+      = link_to t("#{switch_locale_to}"), url_for(locale: switch_locale_to), class: 'd-inline main-btn btn-gray'
diff --git a/app/views/home/index.html.slim b/app/views/home/index.html.slim
@@ -1,7 +1,6 @@
 main.container
   h1.homepage_title = t '.homepage_title'
   p = t '.description'
-  .main-btns
-    = link_to t('.visit_website'), t('.link'), target: '_blank'
-    a.btn-success href=calculator_path
-      = t '.calculate'
+
+  = link_to t('.visit_website'), t('.link'), target: '_blank', class: "main-btn btn-gray"
+  = link_to t('.calculate'), calculator_path, target: '_blank', class: "main-btn btn-green"