nicer buttons

fablabbcn · Oct 29, 2024 · 2b79fd7 · 2b79fd7
1 parent 1d44b94
commit 2b79fd7
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 10 deletions.
diff --git a/app/assets/stylesheets/bootstrap_variables.scss b/app/assets/stylesheets/bootstrap_variables.scss
@@ -15,7 +15,7 @@ $red: #FF3D4C;
 $green: #00E597;
 $yellow: #FFC100;
 
-$primaray: $yellow;
+$primary: $yellow;
 $info: $purple;
 
 $enable-dark-mode: false;
@@ -32,3 +32,9 @@ $headings-font-weight: 600;
 $code-color: $purple;
 
 $input-border-radius: 0;
+
+$btn-border-radius: 2rem;
+$btn-padding-x: 1.5rem;
+$btn-padding-y: 0.75rem;
+$btn-transition: none;
+
diff --git a/app/assets/stylesheets/global.scss b/app/assets/stylesheets/global.scss
@@ -8,4 +8,49 @@ body{
   background-image: image-url("sck_bg.png");
   background-repeat: repeat;
   background-size: 65px;
+  height: 100vh;
 }
+
+.border-thick {
+  border-width: 3px !important;
+}
+
+.btn {
+  font-family: "Kanit";
+  font-weight: 600;
+  &.btn-primary {
+    background-color: $black;
+    color: $white;
+    border: 3px solid black;
+    &:hover, &:active, &:focus {
+      color: $primary;
+      outline: $primary solid 3px;
+    }
+  }
+  &.btn-secondary {
+    color: $black;
+    background-color: $primary;
+    border: 3px solid $primary;
+    &:hover, &:active, &:focus {
+      outline: $black solid 3px;
+    }
+  }
+}
+
+.form-control {
+  border-radius: 2rem;
+  padding: 0.75rem 1.5rem;
+  border-width: 3px;
+  &:focus {
+    outline: $primary solid 3px;
+    box-shadow: none;
+    border: 3px solid black;
+  }
+}
+
+.form-label {
+  font-family: "Kanit";
+  font-weight: 600;
+  margin-left: 1.5rem;
+}
+
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -11,7 +11,7 @@
   <body>
     <%= render partial: "layouts/flashes" %>
     <%= render partial: "layouts/nav" %>
-    <div class="container bg-white mt-5 px-4 pb-4 pt-3">
+    <div class="container bg-white mt-5 px-4 pb-5 pt-4 border border-thick">
       <% if @title %>
         <header>
           <h1 class="mb-4"><%= @title %></h1>

diff --git a/app/views/ui/sessions/new.html.erb b/app/views/ui/sessions/new.html.erb
@@ -2,11 +2,17 @@
         <%= f.text_field :username_or_email, value: params[:username_or_email], autofocus: params[:username_or_email].blank? %>
         <%= f.password_field :password %>
     <%= f.hidden_field :goto, value: params[:goto] %>
-    <%= f.submit "Sign into your account" %>
-
-    <h3 class="my-3">Don't have an account?</h3>
-    <a class="btn btn-secondary" href="https://www.smartcitizen.me/signup">Sign up</a>
-
-    <h3 class="my-3">Forgot your password?</h3>
-    <%= f.submit "Reset password",  name: 'send_password_email' %>
+    <div class="mt-4">
+      <%= f.primary "Sign into your account" %>
+    </div>
+    <div class="row mt-4">
+      <div class="col-md-6">
+        <h4 class="my-3">Don't have an account?</h4>
+        <a class="btn btn-secondary" href="https://www.smartcitizen.me/signup">Sign up</a>
+      </div>
+      <div class="col-md-6">
+        <h4 class="my-3">Forgot your password?</h4>
+        <%= f.submit "Reset password",  name: 'send_password_email' %>
+      </div>
+    </div>
 <% end %>
diff --git a/app/views/ui/sessions/password_reset_landing.html.erb b/app/views/ui/sessions/password_reset_landing.html.erb
@@ -2,5 +2,7 @@
   <%= f.hidden_field :token, value: @token %>
   <%= f.password_field :password %>
   <%= f.password_field :password_confirmation, label: "Confirm new password" %>
-  <%= f.submit "Change my password", name: 'change_password' %>
+  <div class="mt-4">
+    <%= f.primary "Change my password", name: 'change_password' %>
+  </div>
 <% end %>